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).
Captured and immortalised in this jsfiddle:
The question is - why?
The problem is that the image thumbnail width is less than the expected 200px
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!
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:
- 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!
(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
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.