-
Notifications
You must be signed in to change notification settings - Fork 6.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Custom Highlight uses new Highlight Inheritance model by default
This change enables Custom Highlights to use the new Highlight Inheritance model without the need of enabling the new model's feature flag, and without affecting the behaviour of other types of highlights. Bug: 1024156,1164461 Change-Id: Ic2231b5700e7bc4fbcbea9f4aa67366e3253637e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3498908 Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Reviewed-by: Dan Clark <daniec@microsoft.com> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Delan Azabani <dazabani@igalia.com> Commit-Queue: Luis Sanchez Padilla <lusanpad@microsoft.com> Cr-Commit-Position: refs/heads/main@{#987061}
- Loading branch information
Luis Juan Sanchez Padilla
authored and
Chromium LUCI CQ
committed
Mar 30, 2022
1 parent
7ff821d
commit cc6c0ae
Showing
10 changed files
with
137 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
third_party/blink/web_tests/paint/custom-highlight-only-inheritance-expected.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
<!DOCTYPE html> | ||
<meta charset="UTF-8"> | ||
<style> | ||
#highlight { | ||
background-color: green; | ||
color: yellow; | ||
|
||
} | ||
#selection { | ||
color: green; | ||
} | ||
|
||
#selection strong{ | ||
color: initial; | ||
} | ||
</style> | ||
<body> | ||
<div>There should be a green background color and yellow font coloe below from [ to ]:</div> | ||
<div>[<span id="highlight">Custom <strong>Highlight</strong> Inheritance</span>]</div> | ||
<div>There should be a selection below from [ to ], but background color only visible around 'Selection', and 'Text' and 'Sample' font color should be green:</div> | ||
<div>[<span id="selection">Text <strong>Selection</strong> Sample</span>]</div> | ||
<script> | ||
let selection_range = new Range(); | ||
const selection_node = document.querySelector('#selection strong'); | ||
selection_range.setStart(selection_node, 0); | ||
selection_range.setEnd(selection_node, 1); | ||
window.getSelection().addRange(selection_range); | ||
</script> |
38 changes: 38 additions & 0 deletions
38
third_party/blink/web_tests/paint/custom-highlight-only-inheritance.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<!DOCTYPE html> | ||
<meta charset="UTF-8"> | ||
<title>CSS Highlight API Test: Inheritance is enabled for custom highlight but not for other types of highlights</title> | ||
<style> | ||
div::highlight(div-highlight) { | ||
background-color: green; | ||
} | ||
span::highlight(span-highlight) { | ||
color: yellow; | ||
} | ||
div::selection { | ||
background-color: yellow; | ||
color: blue; | ||
} | ||
span::selection { | ||
color: green; | ||
} | ||
</style> | ||
<body> | ||
<div>There should be a green background color and yellow font coloe below from [ to ]:</div> | ||
<div id="highlight_target">[<span>Custom <strong>Highlight</strong> Inheritance</span>]</div> | ||
<div>There should be a selection below from [ to ], but background color only visible around 'Selection', and 'Text' and 'Sample' font color should be green:</div> | ||
<div id="selection_target">[<span>Text <strong>Selection</strong> Sample</span>]</div> | ||
<script> | ||
let highlight_range = new Range(); | ||
const highlight_node = document.getElementById("highlight_target"); | ||
highlight_range.setStart(highlight_node, 1); | ||
highlight_range.setEnd(highlight_node, 2); | ||
|
||
CSS.highlights.set("div-highlight", new Highlight(highlight_range)); | ||
CSS.highlights.set("span-highlight", new Highlight(highlight_range)); | ||
|
||
let selection_range = new Range(); | ||
const selection_node = document.getElementById("selection_target"); | ||
selection_range.setStart(selection_node, 1); | ||
selection_range.setEnd(selection_node, 2); | ||
window.getSelection().addRange(selection_range); | ||
</script> |