Skip to content

Commit 3d48c9d

Browse files
mregochromium-wpt-export-bot
mrego
authored and
chromium-wpt-export-bot
committed
[css-pseudo] Support dynamic changes on highlight pseudos
Take into account changes on highlight pseudos (::target-text, ::spelling-error and ::grammar-error) in order to compute StyleDifference in LayoutObject::SetStyle(). 002 tests fail due to a problem that is being fixed in CL:3197850. Apart from that target-text tests fail due to a repainting issue (see https://crbug.com/1179938). BUG=1035708,1251193 TEST=external/wpt/css/css-pseudo/target-text-dynamic-00*.html TEST=wpt_internal/css/css-pseudo/grammar-error-color-dynamic-00*.html TEST=wpt_internal/css/css-pseudo/spelling-error-color-dynamic-00*.html Change-Id: I83ab02ab1225df86fbb9251eb0954409c17f9843 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3177663 Reviewed-by: Mason Freed <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Reviewed-by: Delan Azabani <[email protected]> Commit-Queue: Manuel Rego <[email protected]> Cr-Commit-Position: refs/heads/main@{#927277}
1 parent a11a44f commit 3d48c9d

File tree

5 files changed

+125
-0
lines changed

5 files changed

+125
-0
lines changed

‎css/css-pseudo/target-text-dynamic-001-ref.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<meta charset="utf-8" />
4+
<title>CSS Pseudo-Elements Test: Reference</title>
5+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
6+
<style>
7+
span {
8+
background-color: magenta;
9+
}
10+
</style>
11+
12+
<p>The test passes if the following word has a magenta background.</p>
13+
<div><span>Example</span></div>

‎css/css-pseudo/target-text-dynamic-001.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="reftest-wait">
3+
<meta charset="utf-8" />
4+
<title>CSS Pseudo-Elements Test: Dynamic change ::target-text background color</title>
5+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
6+
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text">
7+
<meta name="assert" content="This test checks that it's possible to modify dinamically the background color of a targeted text through ::target-text pseudo-element.">
8+
<link rel="match" href="target-text-dynamic-001-ref.html">
9+
<script src="/common/reftest-wait.js"></script>
10+
<style>
11+
::target-text {
12+
background-color: cyan;
13+
}
14+
</style>
15+
16+
<p>The test passes if the following word has a magenta background.</p>
17+
<div>Example</div>
18+
19+
<script>
20+
location.href = "#:~:text=Example";
21+
requestAnimationFrame(() => requestAnimationFrame(() => {
22+
document.styleSheets[0].cssRules[0].style.backgroundColor = "magenta";
23+
takeScreenshot();
24+
}));
25+
</script>
26+
</html>

‎css/css-pseudo/target-text-dynamic-002.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="reftest-wait">
3+
<meta charset="utf-8" />
4+
<title>CSS Pseudo-Elements Test: Dynamic change ::target-text background color</title>
5+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
6+
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text">
7+
<meta name="assert" content="This test checks that it's possible to modify dinamically the background color of a targeted text through ::target-text pseudo-element.">
8+
<link rel="match" href="target-text-dynamic-001-ref.html">
9+
<script src="/common/reftest-wait.js"></script>
10+
<style>
11+
.magenta::target-text {
12+
background-color: magenta;
13+
}
14+
</style>
15+
16+
<p>The test passes if the following word has a magenta background.</p>
17+
<div id="target">Example</div>
18+
19+
<script>
20+
location.href = "#:~:text=Example";
21+
requestAnimationFrame(() => requestAnimationFrame(() => {
22+
target.classList.add("magenta");
23+
takeScreenshot();
24+
}));
25+
</script>
26+
</html>

‎css/css-pseudo/target-text-dynamic-003.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="reftest-wait">
3+
<meta charset="utf-8" />
4+
<title>CSS Pseudo-Elements Test: Dynamic change ::target-text background color</title>
5+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
6+
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text">
7+
<meta name="assert" content="This test checks that it's possible to modify dinamically the background color of a targeted text through ::target-text pseudo-element.">
8+
<link rel="match" href="target-text-dynamic-001-ref.html">
9+
<script src="/common/reftest-wait.js"></script>
10+
<style>
11+
span::target-text {
12+
background-color: cyan;
13+
}
14+
15+
span {
16+
background-color: magenta;
17+
}
18+
</style>
19+
20+
<p>The test passes if the following word has a magenta background.</p>
21+
<div><span>Example</span></div>
22+
23+
<script>
24+
location.href = "#:~:text=Example";
25+
requestAnimationFrame(() => requestAnimationFrame(() => {
26+
document.styleSheets[0].cssRules[0].style.backgroundColor = "magenta";
27+
takeScreenshot();
28+
}));
29+
</script>
30+
</html>

‎css/css-pseudo/target-text-dynamic-004.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="reftest-wait">
3+
<meta charset="utf-8" />
4+
<title>CSS Pseudo-Elements Test: Dynamic change ::target-text background color</title>
5+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
6+
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text">
7+
<meta name="assert" content="This test checks that it's possible to modify dinamically the background color of a targeted text through ::target-text pseudo-element.">
8+
<link rel="match" href="target-text-dynamic-001-ref.html">
9+
<script src="/common/reftest-wait.js"></script>
10+
<style>
11+
span::target-text {
12+
background-color: cyan;
13+
}
14+
15+
span {
16+
background-color: cyan;
17+
}
18+
</style>
19+
20+
<p>The test passes if the following word has a magenta background.</p>
21+
<div>Example</div>
22+
23+
<script>
24+
location.href = "#:~:text=Example";
25+
requestAnimationFrame(() => requestAnimationFrame(() => {
26+
document.styleSheets[0].cssRules[0].style.backgroundColor = "magenta";
27+
takeScreenshot();
28+
}));
29+
</script>
30+
</html>

0 commit comments

Comments
 (0)