XLinfini/sousa-gecko
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1712698 [wpt PR 29100] - CSS highlight painting: fix ::selection decoration regression, a=testonly

Browse Source 
Automatic update from web-platform-tests
CSS highlight painting: fix ::selection decoration regression

NG’s text-decoration support is currently pretty buggy. One of these
bugs is that we make no attempt to paint any decorations on selected
text (part of bug 1147859), only the originating text’s decorations.

Notice how the line-through (blue) is behind the selected text (grey)
in <https://wpt.live/css/css-pseudo/highlight-painting-003.html>:
https://bucket.daz.cat/791f25c9b0bbd7e4.png

/c/2647046 reordered highlight painting such that the ::selection
background is painted over originating text (part of bug 1147859).
This worsens the impact of the first bug, making the decorations
difficult or impossible to see when text is selected:
https://bucket.daz.cat/5e546e5bb1dab511.png

This patch makes the minimum changes necessary to fix the regression
without reverting /c/2647046. It approximates pre-M90 painting by
“lifting” decorations to ::selection overlay when text is selected:
https://bucket.daz.cat/ac5cdae75969f321.png

One minor side effect of this is that underlines and overlines, which
are supposed to paint under text, will also “lift” so they paint over
unselected text whenever the user selects text. Splitting decorations
so that they can correctly order with both unselected and selected
text at the same time is best left to a subsequent patch.

Bug: 1209248
Change-Id: Ie7da0e4369e96fd337e0a90bdcd6631dfb6aee05
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2902289
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Delan Azabani <dazabani@igalia.com>
Cr-Commit-Position: refs/heads/master@{#886768}

--

wpt-commits: dce98cf58c52db5fb92f2eed697955cf667f1fb9
wpt-pr: 29100
This commit is contained in:
Delan Azabani
2021-05-28 18:59:57 +00:00
committed by moz-wptsync-bot
parent c33bb3e68d
commit 20527995d0
2 changed files with 46 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
testing/web-platform/tests/css/css-pseudo/highlight-painting-005-ref.html
+14
View File
@@ -0,0 +1,14 @@
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="support/highlights.css">
<style>
main {
font-size: 7em;
margin: 0.5em;
width: min-content;
height: 0.25em;
text-decoration: currentColor solid line-through;
}
</style>
<p>Test passes if all of the text below is decorated with a line-through.
<main class="highlight_reftest">quick</main>
testing/web-platform/tests/css/css-pseudo/highlight-painting-005.html
+32
View File
@@ -0,0 +1,32 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight painting</title>
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
<link rel="match" href="highlight-painting-005-ref.html">
<meta name="assert" value="originating element decorations are lifted to paint over the ::selection overlay background">
<script src="support/selections.js"></script>
<link rel="stylesheet" href="support/highlights.css">
<style>
main {
font-size: 7em;
margin: 0.5em;
width: min-content;
height: 0.25em;
text-decoration: currentColor solid line-through;
}
main::selection {
background: white;
}
</style>
<p>Test passes if all of the text below is decorated with a line-through.
<main class="highlight_reftest">quick</main>
<script>
const target = document.querySelector("main");
selectRangeWith(range => {
range.selectNodeContents(target);
range.setStart(target.childNodes[0], 1);
range.setEnd(target.childNodes[0], 4);
});
</script>