Page MenuHomePhabricator

QA of new desktop print styles
Closed, ResolvedPublic

Description

Background

As we're deploying our new print styles, we'd like to separate the QA portion so that we're capable of going through all possible test cases.

Acceptance Criteria

Complete all current test cases for print styles on desktop

Notes

Current list of page to test on:

Tables, infobox, gallery:
https://en.wikipedia.org/wiki/Berlin

Mathematical formulas, tables:
https://en.wikipedia.org/wiki/Trigonometric_functions

Large tables:
https://en.wikipedia.org/wiki/Climate_of_Australia

Tables, infobox, gallery:
https://en.wikipedia.org/wiki/Santiago
https://zh.wikipedia.org/wiki/%E5%9C%A3%E5%9C%B0%E4%BA%9A%E5%93%A5_(%E6%99%BA%E5%88%A9)
https://ar.wikipedia.org/wiki/%D8%B3%D8%A7%D9%86%D8%AA%D9%8A%D8%A7%D8%BA%D9%88
https://ru.wikipedia.org/wiki/%D0%A1%D0%B0%D0%BD%D1%82%D1%8C%D1%8F%D0%B3%D0%BE

Related Objects

Event Timeline

ovasileva created this task.Aug 1 2017, 1:11 PM
Restricted Application added a subscriber: Cosine02. · View Herald TranscriptAug 1 2017, 1:11 PM

What's the timeline for this? Right now the new print styles are disabled on enwiki (if we want to change that we'll need to turn them on as part of this task). If not, should the links in the notes be updated to point to staging?

@ovasileva may have a better idea on timeline, but I can make room for testing. I imagine having it enabled on enwiki would be helpful.

Testing will first be done on staging using the articles above. The enwiki articles are accessible directly by typing the article URL, for example http://reading-web-staging.wmflabs.org/wiki/Berlin. @Jdlrobson - do you know of a way to add the articles from other languages as well?

Let me know when you have finished testing English and I can point it to another wiki.

That sounds like it would require a lot of back and forth. What about adding the non-English articles to the beta cluster?

ABorbaWMF added a comment.EditedAug 10 2017, 6:20 PM

Running some tests now:

Berlin Article looks good, except for a couple of visual things perhaps related to tables containing colored cells. For example, the table under "climate" contains color information on the article that is not present in the PDF.

SitePDF

I also noticed some spacing differences with this row of images, but this is minor:

Lastly, it might be good to 'column' the notes and references to shorten the overall document length:

The Trigonometric functions article also works pretty well with the exception of the animated gifs. I grabbed some screenshots, but they are based on the portion of animation playing. It's a bit more evident when viewing the live article vs. the PDF.

SitePDF

The main page looks good with the exception of background colors.

SitePDF

I was unable to get the featured article or protect article icons to show up in the PDFs.

Testing results for other language scripts:

Original URLBeta URLResultsNotes
https://ja.wikipedia.org/wiki/余部橋梁https://ja.wikipedia.beta.wmflabs.org/wiki/余部橋梁PartialLooks pretty good, but some issues with layout and also beta is 6 pages longer
https://zh.wikipedia.org/wiki/马里昂军事学院https://zh.wikipedia.beta.wmflabs.org/wiki/马里昂军事学院PartialBeta is missing some images and is much shorter
https://fa.wikipedia.org/wiki/انتخابات_مجلس_مؤسسان_ونزوئلا_(۲%DB%B0۱۷)https://fa.wikipedia.beta.wmflabs.org/wiki/انتخابات_مجلس_مؤسسان_قانون_اساسی_ونزوئلا_%28۲%DB%B0۱۷%29PartialLooks the same, but Beta is much shorter. Not sure if anything is missing
https://ar.wikipedia.org/wiki/قناة_السويسhttps://ar.wikipedia.beta.wmflabs.org/wiki/قناة_السويسPartialLooks good, but same issue with layout as the Japanese site above
https://ko.wikipedia.org/wiki/헌법https://ko.wikipedia.beta.wmflabs.org/wiki/헌법PartialMatches up well except for the end of the Beta PDF where formatting gets a little weird
https://bg.wikipedia.org/wiki/Бразилия_–_Германия_%28Световно_първенство_по_футбол_2014%29https://ru.wikipedia.beta.wmflabs.org/wiki/Бразилия_–_Германия_%28Световно_първенство_по_футбол_2014%29?uselang=bgPartialSame as above
https://hy.wikipedia.org/wiki/Գլխավոր_էջhttps://en.wikipedia.beta.wmflabs.org/wiki/User:Jdlrobson/hy_main_pag?uselang=hyFailImages missing
https://sl.wikipedia.org/wiki/Murahttps://en.wikipedia.beta.wmflabs.org/wiki/Mura?uselang=slPass
https://el.wikipedia.org/wiki/Ελληνική_γλώσσαhttps://en.wikipedia.beta.wmflabs.org/wiki/Ελληνική_γλώσσαFailImages missing
https://ur.wikipedia.org/wiki/اردوhttps://en.wikipedia.beta.wmflabs.org/wiki/اردو?uselang=urFailImages missing and problems with tables
https://hi.wikipedia.org/wiki/भूस्थिर_उपग्रह_प्रक्षेपण_यान_संस्करण_3https://hi.wikipedia.beta.wmflabs.org/wiki/भूस्थिर_उपग्रह_प्रक्षेपण_यान_संस्करण_3FailProblems with tables on page 2
https://th.wikipedia.org/wiki/โปเกมอน_เรดและบลูhttps://en.wikipedia.beta.wmflabs.org/wiki/โปเกมอน_เรดและบลู?uselang=thFailImages missing and problems with tables
https://ka.wikipedia.org/wiki/გრიფინებიhttps://en.wikipedia.beta.wmflabs.org/wiki/გრიფინები?uselang=kaPartial1st 2 images missing on beta
https://ta.wikipedia.org/wiki/முதற்_பக்கம்https://en.wikipedia.beta.wmflabs.org/wiki/User:Jdlrobson/Tamil_mainpage?uselang=taFailimages missing
https://new.wikipedia.org/wiki/विकिपिडियाhttps://en.wikipedia.beta.wmflabs.org/wiki/विकिपिडिया?uselang=newFailimages missing
https://tg.wikipedia.org/wiki/Умари_Хайёмhttps://en.wikipedia.beta.wmflabs.org/wiki/Умари_Хайём?uselang=tgFailimages missing
https://te.wikipedia.org/wiki/ఆశావాది_ప్రకాశరావుhttps://en.wikipedia.beta.wmflabs.org/wiki/ఆశావాది_ప్రకాశరావు?uselang=tePass
https://bn.wikipedia.org/wiki/ভারতhttps://en.wikipedia.beta.wmflabs.org/wiki/ভারত?uselang=bnFailStrange formatting on page 1 and missing images

@ABorbaWMF - thank you! Could you provide screenshots and replication steps for the issues observed for each case?

For the articles with missing images, were all the images present in the beta cluster? For example, for https://en.wikipedia.beta.wmflabs.org/wiki/%D0%A3%D0%BC%D0%B0%D1%80%D0%B8_%D0%A5%D0%B0%D0%B9%D1%91%D0%BC?uselang=tg, I don't think the images were uploaded to the beta cluster in the first place. In that case, it would be okay for them not to display in print.

I grabbed some screenshots.

Steps:

  1. Open the article
  2. Print the page
  3. From the print dialog, select save as PDF

(Same ordering as above)

Original URLBETA URL

I think the majority of these are due to differences between the layouts on the beta cluster versus staging versus production and not relevant to the styles themselves. @Jdlrobson, @Nirzar - I think it would be helpful if you could take a look and confirm.

Also, in terms of navboxes. They do not seem to be appearing within staging. Any ideas on how to test them more thoroughly?

I think this is due to the treatment of the printed navbox. https://en.wikipedia.beta.wmflabs.org/wiki/اردو?uselang=ur

Here too, I think this is due to formatting. Do we know if we ever encounter infoboxes this large?

The Trigonometric functions article also works pretty well with the exception of the animated gifs. I grabbed some screenshots, but they are based on the portion of animation playing. It's a bit more evident when viewing the live article vs. the PDF.

SitePDF

logged this as T174344: Remove non-image file types from print

Another things to note, similar articles seem to be producing different PDFs:

http://reading-web-staging.wmflabs.org/wiki/Barium_nitrate

  • smaller font size

http://reading-web-staging.wmflabs.org/wiki/Barium_oxide

  • giant infobox

ovasileva added a comment.EditedAug 28 2017, 1:48 PM

it seems some of the infobox styling disappears upon page break

from http://reading-web-staging.wmflabs.org/wiki/Mexico_City

for http://reading-web-staging.wmflabs.org/wiki/Mini_Hatch
justified text between two elements difficult to read

ovasileva moved this task from Triage to Current Sprint on the Proton board.Aug 30 2017, 5:00 PM

Credentials: Windows 10, Firefox 55.0.3

General Testing Steps:

  1. Select to print the following articles from the Firefox 55.0.3 browser and save the articles in PDF format:

http://reading-web-staging.wmflabs.org/wiki/Berlin
http://reading-web-staging.wmflabs.org/wiki/Trigonometric_functions
http://reading-web-staging.wmflabs.org/_Page
http://reading-web-staging.wmflabs.org/wiki/Peroxide
https://en.wikipedia.org/wiki/Thunderbirds_(TV_series)
http://reading-web-staging.wmflabs.org/wiki/Barack_Obama
http://reading-web-staging.wmflabs.org/wiki/Comet
http://reading-web-staging.wmflabs.org/wiki/Mini_Hatch
http://reading-web-staging.wmflabs.org/wiki/Image_map

  1. Ensure PDF renders hyperlinks and article references correctly.
  1. In PDF click on hyperlinks and article references to test if linked articles open in desktop browsers.

Expected results:
Hyperlinks appear as links, underlined (and probably with color such as blue). Clicking on them opens linked articles in desktop browsers.

Actual results:
I-beam cursor appears when rolling over links in PDF (instead of hand icon) and clicking on links do not do anything.

for http://reading-web-staging.wmflabs.org/wiki/Mini_Hatch
justified text between two elements difficult to read

This is not the case with chrome where you can see that the infobox border is preserved (as the infobox spans multiple pages). It maybe a bug with Firefox's implementation.


for http://reading-web-staging.wmflabs.org/wiki/Mini_Hatch, infobox seems to be breaking toc

Indeed, but this can be fixed by adding #toc { overflow: hidden; }. Here's the output:

.
So this is something we need to add to the current styles.


it seems some of the infobox styling disappears upon page break
from http://reading-web-staging.wmflabs.org/wiki/Mexico_City

Correct. Seems like you're using Firfox. Can you confirm? Doesn't happen on Chrome.


Another things to note, similar articles seem to be producing different PDFs:
http://reading-web-staging.wmflabs.org/wiki/Barium_nitrate

  • smaller font size

http://reading-web-staging.wmflabs.org/wiki/Barium_oxide

  • giant infobox

Small font size seems to be caused by the wide table at the end of the article. Adding #content { overflow: hidden; } seems to fix the issue.
The infobox is giant because it contains long lines of text. I don't think we're styling the infobox much. @Nirzar, should we set the maximum limit for the infobox width?

@bmansurov - thank you for reviewing! Yes, I've been using Firefox. It seems so far the bugs we need to log are:

  • justified text appearing strange in firefox
  • infobox styling breaking in firefox
  • toc breaking on certain articles
  • inconsistent font size
  • hyperlinks not working in firefox on windows 10

@Nirzar - could you review and confirm?

Nirzar added a comment.Sep 4 2017, 7:07 PM

I just reviewed all the examples here.

First of all, some of the styles in Beta URL don't even look like new styles. was this done before all print patches got merged? the
wordmarks are missing, the titles are not bold in most cases. we definitely don't have border around TOC but i can see border in some cases. the subsite text is showing, sometimes indicators are showing. basically, bunch of flags for me to believe the new print styles are not applied on some of the screenshots in "Beta" column here.

If they are I can confirm following issues

I can confirm

  1. justified text
  2. infobox breaking - This is really weird, there doesn't seem to be a pattern in how it breaks except for when the page break comes the styling goes away.

one outlier example is the hindi wikipedia

VS

Too much difference!

  1. toc breaking - this is really weird too.
  1. Animated gifs - i think it's fine that they are freeze framed, we don't have to remove them. we can decline that card IMO
  1. @anthony you mentioned not seeing semi protect icon on printing main page. we are hiding all indicators so that is expected

The first page issues seem more critical to me

One

A lot of times the image in infobox is missing in new styles?


Two

The first paragraph is getting squeezed or expanded, i can't figure out why.


ovasileva added a comment.EditedSep 5 2017, 11:23 AM

First of all, some of the styles in Beta URL don't even look like new styles. was this done before all print patches got merged? the
wordmarks are missing, the titles are not bold in most cases. we definitely don't have border around TOC but i can see border in some cases. the subsite text is showing, sometimes indicators are showing. basically, bunch of flags for me to believe the new print styles are not applied on some of the screenshots in "Beta" column here.

I think this is after the new styles, but due to the beta cluster having the language set as English while most articles tested there were in different languages. I would say the beta cluster tests were mostly to ensure we're rendering all scripts correctly and with a reasonable font size.

If they are I can confirm following issues
I can confirm

  1. justified text

What do you mean here?

  1. infobox breaking - This is really weird, there doesn't seem to be a pattern in how it breaks except for when the page break comes the styling goes away.

Now tracked in T174955: Infobox styling disappears in firefox

  1. toc breaking - this is really weird too.

Now tracked in T174957: Infobox breaking toc in new print styles

  1. Animated gifs - i think it's fine that they are freeze framed, we don't have to remove them. we can decline that card IMO

Cool, will do.

One

A lot of times the image in infobox is missing in new styles?


@Nirzar - do you mean that the infobox is missing when the article is rendered? I think the case here is that the infobox wasn't included with the article in the beta cluster

Two

The first paragraph is getting squeezed or expanded, i can't figure out why.


I think @bmansurov addressed this in https://phabricator.wikimedia.org/T172184#3567800, suggesting we set a max limit for infobox width. @Nirzar - would that work?

This comment was removed by ovasileva.
Nirzar added a comment.Sep 5 2017, 9:50 PM

What do you mean here?

I meant, I see the justified text issue in column layouts. don't know if it's rare enough for us to ignore.
F9203537

do you mean that the infobox is missing when the article is rendered? I think the case here is that the infobox wasn't included with the article in the beta cluster

You can see the infobox in that screengrab, the picture is the only thing missing there. so infobox was included on beta i guess

I think @bmansurov addressed this in https://phabricator.wikimedia.org/T172184#3567800, suggesting we set a max limit for infobox width. @Nirzar - would that work?

That would work!

will comment separately on other cards

ovasileva moved this task from Current Sprint to Resolved on the Proton board.Sep 6 2017, 6:57 PM

Looks like all the issues have been written up. Closing out this one.

ovasileva closed this task as Resolved.Sep 11 2017, 11:23 AM
Restricted Application added a project: Readers-Web-Backlog. · View Herald TranscriptFeb 21 2019, 10:12 AM