Skip to content

Commit 79b7543

Browse files
jnjaeschkemoz-wptsync-bot
jnjaeschke
authored and
moz-wptsync-bot
committed
part 8 - CSS Highlight API: Add new test case.
The new test case stops matching the container query and ensures that the highlight is not painted. Differential Revision: https://phabricator.services.mozilla.com/D283666 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1987618 gecko-commit: 439daa0df941c3648b9055e4e995c90db280418f gecko-reviewers: emilio
1 parent 0d12b7d commit 79b7543

2 files changed

Lines changed: 62 additions & 0 deletions

File tree

‎css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-005-ref.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>CSS Highlight API Test Reference</title>
4+
<head>
5+
<style>
6+
.wrapper {
7+
width: 400px;
8+
height: 200px;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<div class="wrapper">No highlight expected</div>
14+
<div>Should be no highlight</div>
15+
</body>

‎css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-005.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>CSS Highlight API Test: Highlight disappears when container query stops matching</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
5+
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
6+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths">
7+
<link rel="match" href="custom-highlight-dynamic-container-metrics-005-ref.html">
8+
<meta name="assert" value="a highlight decoration disappears when a container query stops matching after a container resize">
9+
<head>
10+
<style>
11+
.wrapper {
12+
container: wrapper / size;
13+
width: 200px;
14+
height: 100px;
15+
}
16+
.resize {
17+
width: 400px;
18+
height: 200px;
19+
}
20+
@container (width < 300px) {
21+
.wrapper::highlight(highlight1) {
22+
text-underline-offset: 2cqw;
23+
text-decoration-line: underline;
24+
text-decoration-color: green;
25+
text-decoration-thickness: 4cqh;
26+
}
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div id="h1" class="wrapper">No highlight expected</div>
32+
<div id="h2">Should be no highlight</div>
33+
<script>
34+
let r1 = new Range();
35+
r1.setStart(h1, 0);
36+
r1.setEnd(h1, 1);
37+
let r2 = new Range();
38+
r2.setStart(h2, 0);
39+
r2.setEnd(h2, 1);
40+
CSS.highlights.set("highlight1", new Highlight(r1, r2));
41+
requestAnimationFrame(() => {
42+
h1.classList.add('resize');
43+
requestAnimationFrame(() => takeScreenshot());
44+
});
45+
</script>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)