Repository navigation
[css-pseudo-4] May selection highlight on an inline replaced element extend to line box edges? #5395
Description
Consider the following HTML
<div>some <img> and text</div>
When selecting a line with both text and image, different browsers paint different highlight overlays on the image:
- Chrome & Safari: The overlay vertically extends to line box top and bottom
- Firefox: The overlay is the image border box
The current spec says "The overlay may also include other other areas within the border-box of an element", in which case FF seems the most spec compliant. However, it doesn't explicit disallow extending beyond the border box, though.
Besides, when we have both text and replaced elements in the same line, Chrome/Safari's selection highlight look good in the sense that it doesn't "break" at the replaced elements.
Note: We have a WPT css/css-pseudo/active-selection-043.html, which asserts FF's behavior (@TalbotG)
Activity
TalbotG commentedon Aug 5, 2020
Xiaocheng .
Thank you for adding me to this issue. One other test that relates to this issue is
http://wpt.live/css/css-pseudo/active-selection-045.html
where line box is approx. 240% taller than the image itself.
One important difference between Gecko rendering engine and Blink rendering engine (and WebKit rendering engine) is this entire highlighting of the line box in the vertical axis.
I think we need more tests...
If you highlight the top (first; fig. 1) red rectangle image with "playing" in this page
http://dorayme.netweaver.com.au/alt/inlinePicWithDescenderSpace.html
Chromium 83.0.4103.116 does not highlight the whole line box around the red rectangle image. [Important addendum: Chromium 86.0.4223.0 (latest unstable build today, August 4th 2020) highlights the whole line box around the red rectangle image. So, maybe we do not need more tests after all...]
On the other hand, Chrome 83 will highlight the whole line box around the red rectangle image in this other page:
http://netweaver.com.au/alt/inlineImages/inlinePicWithDescenderSpace.html
TalbotG commentedon Aug 26, 2020
I found 1 exception with regards to Chromium. The selection highlight overlay will not extent vertically to line box top and bottom of contenteditable blocks in Chromium 83 and Chromium 87.0.4245.0 (today's [August 25th 2020] latest development build). Demonstration:
http://www.gtalbot.org/BrowserBugsSection/CSS4Pseudo/selection-overlay-and-grammar-001-newest.html
and then deselect and reselect the sentence. Only 60px is selected, not 90px.
fantasai commentedon Aug 26, 2020
Spec should probably say that for all inline elements, the highlight area may extend to the edges of the border box and/or line box edges. This is reasonable behavior and should be explicitly allowed.
[css-pseudo-4] Allow overlay on inline-level boxes to cover its porti…
fantasai commentedon Sep 11, 2020
Ok, @xiaochengh, I've updated the spec to allow either behavior.
Let me know if you think this adequately addresses the issue.
xiaochengh commentedon Sep 11, 2020
Thanks @fantasai ! The revised version LGTM.