Sometimes I get page preview pop-ups with two pokeys. These screenshots are from the Main Page on English Wikipedia in safe mode (https://en.wikipedia.org/wiki/Main_Page?safemode=1).
Developer notes
Captured and immortalised in this jsfiddle:
https://jsfiddle.net/raw3y1jf/3/
The question is - why?
The problem is that the image thumbnail width is less than the expected 200px
https://github.com/wikimedia/mediawiki-extensions-Popups/blob/master/src/ui/thumbnail.js#L167
and the clip-path mask is a fixed width, so although the pokey is there - the image needs to be 200px to be aligned with it!
When changing this make sure to use the results of T205989 to verify that the output is behaving as expected.
The issue can be replicated here on landscape - Thin thumbnail
Add a green background to the SVG to make it clear where the mask is:
This reveals the pokey is nowhere to be seen!
For an image that's 129px, to get the pokey to show correctly the image needs to be displaced (via x attribute) by 200-129px (71px)
and then width added:
Acceptance criteria
- The method setThumbnailClipPath needs to consider the displacement (200px - the actual width) and set a matrix:
e.g. for the example above where the image is 129px, rather than 200px...
matrix(1 0 0 1 -73 0)
setThumbnailClipPath will likely need to be passed a new parameter to deal with this, but is fully unit tested!
Tada:::
QA steps
(testing environment: Production)
For each test case test the 4 combos:
- where the pokey is on the right of the preview
- where the pokey is on the left
- where pokey is above link
- where pokey is below link
This can be achieved by resizing the window horizontally and making the link at either the bottom or top of page like so:
- Verify that the pokey is aligned for LTR languages
- On English Wikipedia, on desktop, when hovering over a link, a page-preview should appear.
- When the preview is in landscape orientation, with a narrow thumbnail, there should only be 1 pokey visible. The thumbnail image should be visible on the pokey.
- Known previews with narrow thumbnails:
- Verify that the pokey is aligned for RTL languages
- same as above, but with RTL languages.
- known RTL previews with thin thumbnails:
QA Note: To make the pokey appear on the right side of the preview on the Special:Search pages linked above, it helps to make the browser window very narrow.
QA Results
| AC | Status | Details |
| 1 | ✅ | T204627#5112286 |
| 2 | ✅ | T204627#5112286 |
