From 40d5e6da07fc061a6d81f081c3c16eafc10b54ce Mon Sep 17 00:00:00 2001 From: Dan Clark Date: Wed, 9 Feb 2022 10:51:05 -0800 Subject: [PATCH] Highlight API: Don't paint unstyled custom highlights The custom highlight API spec [1] currently states that an unstyled custom highlight should inherit the styles of its originating element. The Blink implementation follows this. However, this behavior can lead to some unintuitive results where unstyled highlights can affect the painting of the originating element, or paint over other highlights. This issue was pointed out in [2], and spec changes to fix this are pending editor review. A goal of these changes are that unstyled custom highlights do not affect rendering at all. This change updates the custom highlights implementation to achieve this by giving them a default 'transparent' foreground and background color. Some of our tests were validating the earlier unintuitive behavior involving overlapping ranges. These are updated, along with the addition of a new test to validate that a single unstyled highlight doesn't affect rendering. [1] https://drafts.csswg.org/css-highlight-api-1/#default-styles [2] https://github.com/w3c/csswg-drafts/issues/6779 Bug: 1295271 Change-Id: Id7dc877c90c08240fbe79edeeeec551cdc5508c1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3449336 Reviewed-by: Delan Azabani Reviewed-by: Rune Lillesveen Commit-Queue: Dan Clark Cr-Commit-Position: refs/heads/main@{#969007} --- ...ighlight-painting-inheritance-003-ref.html | 10 ++++++++ ...om-highlight-painting-inheritance-003.html | 23 +++++++++++++++++++ ...inting-overlapping-highlights-001-ref.html | 6 ++++- ...t-painting-overlapping-highlights-001.html | 12 ++++------ ...inting-overlapping-highlights-002-ref.html | 3 ++- ...t-painting-overlapping-highlights-002.html | 11 ++++----- 6 files changed, 49 insertions(+), 16 deletions(-) create mode 100644 css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html create mode 100644 css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html diff --git a/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html new file mode 100644 index 00000000000000..cdab7615e4c5fe --- /dev/null +++ b/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html @@ -0,0 +1,10 @@ + + + + +
foobar
+ diff --git a/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html b/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html new file mode 100644 index 00000000000000..e449ebf334ff7f --- /dev/null +++ b/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html @@ -0,0 +1,23 @@ + + +CSS Highlight API Test: Inheritance + + + + + +
foobar
+ + \ No newline at end of file diff --git a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html index 8049ba2257c7b4..3c08ad55aefe3c 100644 --- a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html +++ b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html @@ -4,9 +4,13 @@ body { font-size: 3em; font-weight: bolder; + + } + #affected1 { + color: red; } #affected2 { color: green; } -This should have default style (black).This should have 'highlight2' style (green). \ No newline at end of file +This should have 'highlight1' style (red).This should have 'highlight2' style (green). \ No newline at end of file diff --git a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html index 25f4e7e362aa4b..0b380574bc5df0 100644 --- a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html +++ b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html @@ -16,21 +16,19 @@ color: green; } -This should have default style (black).This should have 'highlight2' style (green). +This should have 'highlight1' style (red).This should have 'highlight2' style (green).