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

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.

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.

Ok, @xiaochengh, I've updated the spec to allow either behavior.

For an inline-level box, the overlay may extend outside its border edges in the block axis as far as the edges of its line box.

Let me know if you think this adequately addresses the issue.

Thanks @fantasai ! The revised version LGTM.