Highlight API: Ignore CSS contain when painting

Per the CSSWG resolution [1], ignore CSS contain boundaries when painting. Update tests, and remove some tests that are no longer interesting now that StaticRange painting no longer needs to take contain boundaries into account. [1] w3c/csswg-drafts#4598 Bug: 1164461 Change-Id: Iad9249867ea704f924827db810816935069363c4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3437210 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Fernando Fiori <ffiori@microsoft.com> Commit-Queue: Dan Clark <daniec@microsoft.com> Cr-Commit-Position: refs/heads/main@{#967368}
web-platform-tests · Feb 4, 2022 · d6608a6 · d6608a6
1 parent a46a8de
commit d6608a6
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 129 deletions.
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-018.html b/css/css-highlight-api/painting/custom-highlight-painting-018.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Range across contain boundary is painted</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="custom-highlight-painting-001-ref.html">
+<meta name="assert" value="Highlight should be painted even though a Range that crosses a css-contain boundary is a part of it">
+<style>
+  ::highlight(example-highlight) {
+    background-color: yellow;
+    color: blue;
+  }
+  #target {
+    contain: paint;
+  }
+</style>
+<body><span>One </span><span id="target"><span>two </span><span>three…</span></span>
+<script>
+  let r = new Range();
+  r.setStart(document.body, 0);
+  r.setEnd(document.querySelector("#target"), 1);
+  CSS.highlights.set("example-highlight", new Highlight(r));
+</script>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-staticrange-001.html b/css/css-highlight-api/painting/custom-highlight-painting-staticrange-001.html
@@ -1,17 +1,14 @@
 <!DOCTYPE html>
 <meta charset="UTF-8">
-<title>CSS Highlight API Test: </title>
+<title>CSS Highlight API Test: Invalid StaticRanges are not painted</title>
 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
 <link rel="match" href="custom-highlight-painting-staticrange-001-ref.html">
-<meta name="assert" value="StaticRanges that are invalid, collapsed or that cross only one boundary of a css-contain node should not be painted when they're in a Highlight">
+<meta name="assert" value="StaticRanges that are invalid or collapsed should not be painted when they're in a Highlight">
 <style>
   ::highlight(example-highlight) {
     background-color: yellow;
     color: blue;
   }
-  #second {
-    contain: style;
-  }
 </style>
 <body><span id="first">One </span><span id="second">two </span><span id="third">three…</span>
 <script>
@@ -21,7 +18,5 @@
   h.add(new StaticRange({startContainer: document.body, startOffset: 1, endContainer: document.body, endOffset: 100}));
   h.add(new StaticRange({startContainer: document, startOffset: 0, endContainer: document, endOffset: 1}));
   h.add(new StaticRange({startContainer: document.querySelector("#third").firstChild, startOffset: 1, endContainer: document.querySelector("#first").firstChild, endOffset: 2}));
-  h.add(new StaticRange({startContainer: document.querySelector("#first").firstChild, startOffset: 1, endContainer: document.querySelector("#second").firstChild, endOffset: 2}));
-  h.add(new StaticRange({startContainer: document.querySelector("#second").firstChild, startOffset: 1, endContainer: document.querySelector("#third").firstChild, endOffset: 2}));
   CSS.highlights.set("example-highlight", h);
 </script>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-staticrange-002.html b/css/css-highlight-api/painting/custom-highlight-painting-staticrange-002.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <meta charset="UTF-8">
-<title>CSS Highlight API Test: </title>
+<title>CSS Highlight API Test: StaticRange across contain boundary is painted</title>
 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
 <link rel="match" href="custom-highlight-painting-001-ref.html">
-<meta name="assert" value="StaticRanges crossing both boundaries of a css-contain (i.e. containing it entirely) should be painted">
+<meta name="assert" value="A StaticRange crossing a contain boundary should be painted">
 <style>
   ::highlight(example-highlight) {
     background-color: yellow;
     color: blue;
   }
   #contained {
-    contain: style;
+    contain: paint;
   }
 </style>
 <body><span>One <span id="contained">two </span>three…</span>
 <script>
   let h = new Highlight();
-  h.add(new StaticRange({startContainer: document.body.firstChild.childNodes[0], startOffset: 0, endContainer: document.body.firstChild.childNodes[2], endOffset: 0}));
+  h.add(new StaticRange({startContainer: document.body.firstChild.childNodes[0], startOffset: 0, endContainer: document.body.firstChild.childNodes[1], endOffset: 1}));
   CSS.highlights.set("example-highlight", h);
 </script>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-staticrange-004.html b/css/css-highlight-api/painting/custom-highlight-painting-staticrange-004.html
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-staticrange-005.html b/css/css-highlight-api/painting/custom-highlight-painting-staticrange-005.html
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-staticrange-006.html b/css/css-highlight-api/painting/custom-highlight-painting-staticrange-006.html
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-staticrange-007.html b/css/css-highlight-api/painting/custom-highlight-painting-staticrange-007.html