Highlights: Testing and fixes for dynamic relative units
Tests for changing font size, container sizes, and text direction.
Fixes to correctly update container descendents when the
container size changes.
Bug: 1468306
Change-Id: If19a62fbd3c0e32b09f8896963ccecc100b04091
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5202145
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1248143}
diff --git a/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-001-ref.html b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-001-ref.html
new file mode 100644
index 0000000..84c6aeb
--- /dev/null
+++ b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Reference</title>
+<head>
+ <style>
+ iframe {
+ width: 400px;
+ height: 200px;
+ margin: 0px;
+ border: none;
+ }
+</style>
+</head>
+<iframe id="iframe" src="resources/iframe-container.html"></iframe>
+</html>
\ No newline at end of file
diff --git a/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-001.html b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-001.html
new file mode 100644
index 0000000..e18b286
--- /dev/null
+++ b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlights using container sizes update on container changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="match" href="custom-highlight-dynamic-container-metrics-001-ref.html">
+<meta name="assert" value="lengths depending on containers take the correct values in a universal highlight with no container when the container size changes">
+<script src="/common/reftest-wait.js"></script>
+<head>
+ <style>
+ iframe {
+ width: 200px;
+ height: 100px;
+ margin: 0px;
+ border: none;
+ }
+
+ iframe.resize {
+ width: 400px;
+ height: 200px;
+ }
+</style>
+</head>
+<iframe id="iframe" src="resources/iframe-container.html"></iframe>
+<script>
+ let iframe = document.getElementById('iframe');
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ iframe.classList.add('resize');
+ requestAnimationFrame(() => takeScreenshot());
+ });
+ });
+</script>
+</html>
\ No newline at end of file
diff --git a/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-002.html b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-002.html
new file mode 100644
index 0000000..1a0cbe8
--- /dev/null
+++ b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-002.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlights using dynamic container sizes</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="match" href="custom-highlight-container-metrics-002-ref.html">
+<meta name="assert" value="lengths depending on containers take the correct values when the container size chnages">
+<meta name="fuzzy" content="0-60;0-25">
+<script src="/common/reftest-wait.js"></script>
+<head>
+ <style>
+ .wrapper {
+ container: wrapper / size;
+ width: 400px;
+ height: 200px;
+ }
+ .resize {
+ width: 200px;
+ height: 100px;
+ }
+ ::highlight(highlight1) {
+ text-underline-offset: 2cqw;
+ text-decoration-line: underline;
+ text-decoration-color: green;
+ text-decoration-thickness: 4cqh;
+ }
+</style>
+</head>
+<body>
+ <div id="container" class="wrapper">
+ <div id="h1">With container size</div>
+ </div>
+ <div id="h2">Without container size</div>
+ <script>
+ let r1 = new Range();
+ r1.setStart(h1, 0);
+ r1.setEnd(h1, 1);
+ let r2 = new Range();
+ r2.setStart(h2, 0);
+ r2.setEnd(h2, 1);
+ CSS.highlights.set("highlight1", new Highlight(r1, r2));
+ requestAnimationFrame(() => {
+ container.classList.add('resize');
+ requestAnimationFrame(() => takeScreenshot());
+ });
+ </script>
+</body>
+</html>
diff --git a/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-003.html b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-003.html
new file mode 100644
index 0000000..38246a1
--- /dev/null
+++ b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-003.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlights using dynamic container sizes</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="match" href="custom-highlight-container-metrics-003-ref.html">
+<meta name="assert" value="lengths depending on containers update correctly for a highlight defined only inside a container query">
+<head>
+ <style>
+ .wrapper {
+ container: wrapper / size;
+ width: 400px;
+ height: 200px;
+ }
+ .resize {
+ width: 200px;
+ height: 100px;
+ }
+ @container (width < 300px) {
+ ::highlight(highlight1) {
+ text-underline-offset: 2cqw;
+ text-decoration-line: underline;
+ text-decoration-color: green;
+ text-decoration-thickness: 4cqh;
+ }
+ }
+ </style>
+</head>
+<body>
+ <div id="container" class="wrapper">
+ <div id="h1">With container size</div>
+ </div>
+ <div id="h2">Should be no highlight</div>
+ <script>
+ let r1 = new Range();
+ r1.setStart(h1, 0);
+ r1.setEnd(h1, 1);
+ let r2 = new Range();
+ r2.setStart(h2, 0);
+ r2.setEnd(h2, 1);
+ CSS.highlights.set("highlight1", new Highlight(r1, r2));
+ requestAnimationFrame(() => {
+ container.classList.add('resize');
+ requestAnimationFrame(() => takeScreenshot());
+ });
+ </script>
+</body>
diff --git a/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-004.html b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-004.html
new file mode 100644
index 0000000..fbdbea3
--- /dev/null
+++ b/css/css-highlight-api/painting/custom-highlight-dynamic-container-metrics-004.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlights using container sizes</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="match" href="custom-highlight-container-metrics-003-ref.html">
+<meta name="assert" value="a highlight on a container itself renders at the correct size when the container changes">
+<head>
+ <style>
+ .wrapper {
+ container: wrapper / size;
+ width: 400px;
+ height: 200px;
+ }
+ .resize {
+ width: 200px;
+ height: 100px;
+ }
+ @container (width < 300px) {
+ .wrapper::highlight(highlight1) {
+ text-underline-offset: 2cqw;
+ text-decoration-line: underline;
+ text-decoration-color: green;
+ text-decoration-thickness: 4cqh;
+ }
+ }
+ </style>
+</head>
+<body>
+ <div id="h1" class="wrapper">With container size</div>
+ <div id="h2">Should be no highlight</div>
+ <script>
+ let r1 = new Range();
+ r1.setStart(h1, 0);
+ r1.setEnd(h1, 1);
+ let r2 = new Range();
+ r2.setStart(h2, 0);
+ r2.setEnd(h2, 1);
+ CSS.highlights.set("highlight1", new Highlight(r1, r2));
+ requestAnimationFrame(() => {
+ h1.classList.add('resize');
+ requestAnimationFrame(() => takeScreenshot());
+ });
+ </script>
+</body>
+</html>
diff --git a/css/css-highlight-api/painting/custom-highlight-dynamic-font-metrics-001.html b/css/css-highlight-api/painting/custom-highlight-dynamic-font-metrics-001.html
new file mode 100644
index 0000000..4bddbc0
--- /dev/null
+++ b/css/css-highlight-api/painting/custom-highlight-dynamic-font-metrics-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: </title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="match" href="custom-highlight-font-metrics-001-ref.html">
+<meta name="assert" value="fonts relative units take the correct values, with correct cascade">
+<meta name="fuzzy" content="0-80;0-4">
+<head>
+ <style>
+ :root {
+ font-size: 8px;
+ }
+ div {
+ margin: 50px;
+ font-size: 10px;
+ }
+ ::highlight(highlight1) {
+ text-underline-offset: 0.5em;
+ text-decoration-line: underline;
+ text-decoration-color: green;
+ text-decoration-thickness: 0.25rem;
+ }
+ </style>
+</head>
+<body>
+ <div id="h1">Font relative units with 40px font</div>
+ <div id="h2">Font relative units with 20px font</div>
+ <script>
+ let r1 = new Range();
+ r1.setStart(h1, 0);
+ r1.setEnd(h1, 1);
+ let r2 = new Range();
+ r2.setStart(h2, 0);
+ r2.setEnd(h2, 1);
+ CSS.highlights.set("highlight1", new Highlight(r1, r2));
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ h1.style.fontSize = '40px';
+ h2.style.fontSize = '20px';
+ document.documentElement.style.fontSize = '16px';
+ requestAnimationFrame(() => takeScreenshot());
+ });
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/css/css-highlight-api/painting/custom-highlight-dynamic-logical-metrics-001.html b/css/css-highlight-api/painting/custom-highlight-dynamic-logical-metrics-001.html
new file mode 100644
index 0000000..ff52aed
--- /dev/null
+++ b/css/css-highlight-api/painting/custom-highlight-dynamic-logical-metrics-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Length relative to a changing logical direction</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="match" href="custom-highlight-logical-metrics-002-ref.html">
+<meta name="assert" value="lengths depending on viewports and logical direction when the direction changes">
+<meta name="fuzzy" content="0-30;0-10">
+<head>
+ <style>
+ div {
+ width: 100px;
+ height: 200px;
+ line-height: 3em;
+ }
+ .vertical {
+ writing-mode: vertical-lr;
+ }
+ ::highlight(highlight1) {
+ text-underline-offset: 1svb;
+ text-decoration-line: underline;
+ text-decoration-color: green;
+ text-decoration-thickness: 1svi;
+ }
+</style>
+</head>
+<body>
+ <div id="h1">With viewport size</div>
+ <script>
+ let r1 = new Range();
+ r1.setStart(h1, 0);
+ r1.setEnd(h1, 1);
+ CSS.highlights.set("highlight1", new Highlight(r1));
+ requestAnimationFrame(() => {
+ h1.classList.add('vertical');
+ requestAnimationFrame(() => takeScreenshot());
+ });
+ </script>
+</body>
diff --git a/css/css-highlight-api/painting/resources/iframe-container.html b/css/css-highlight-api/painting/resources/iframe-container.html
new file mode 100644
index 0000000..c89680e
--- /dev/null
+++ b/css/css-highlight-api/painting/resources/iframe-container.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+ ::highlight(highlight1) {
+ text-underline-offset: 1cqw;
+ text-decoration-line: underline;
+ text-decoration-color: green;
+ text-decoration-thickness: 2cqh;
+ }
+</style>
+<div id="h1">With container size</div>
+<script>
+ let r1 = new Range();
+ r1.setStart(h1, 0);
+ r1.setEnd(h1, 1);
+ CSS.highlights.set("highlight1", new Highlight(r1));
+</script>
