Highlight API: Add test to check for repaint after CSS rule change

Add a test validating that a Highlight range is repainted if the corresponding ::highlight CSS rule changes. Currently this works correctly because changing the CSS causes ValidateHighlightMarkers to remove and re-add all ranges to the DocumentMarkerController, triggering a repaint. But, an optimization to ValidateHighlightMarkers to eliminate this extra work could cause the repaint to be skipped. So, adding a test to ensure that we don't regress this scenario. Bug: 1251193 Change-Id: I12936364eb057db6c684df4b45703e5bd9cb5cb6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3182785 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Dan Clark <daniec@microsoft.com> Cr-Commit-Position: refs/heads/main@{#925798}
web-platform-tests · Sep 28, 2021 · 82d5eb8 · 82d5eb8
1 parent 016d2dd
commit 82d5eb8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+    .highlighted {
+      background: blue;
+    }
+</style>
+<body>
+    <span class="highlighted">Hello</span>
+</body>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007.html b/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: CSS Rule change</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="custom-highlight-painting-invalidation-007-ref.html">
+<meta name="assert" value="::highlight overlay is correctly invalidated and repainted after CSS rule is changed">
+<script src="resources/run-after-layout-and-paint.js"></script>
+<style>
+  span::highlight(example-highlight) {
+    background: yellow;
+  }
+
+  .blue::highlight(example-highlight) {
+    background: blue;
+  }
+</style>
+<body>
+  <span>Hello</span>
+<script>
+  const range = new Range();
+  const span = document.querySelector("span");
+  range.setStart(span, 0);
+  range.setEnd(span, 1);
+  CSS.highlights.set("example-highlight", new Highlight(range));
+
+  // Force frame paint before changing style
+  runAfterLayoutAndPaint(() => {
+    span.className = "blue";
+    document.documentElement.removeAttribute("class");
+  });
+</script>
+</body>
+</html>