Invalidate backdrop-filter on currentcolor changes

This patch invalidates backdrop-filter if the filter effects depend on a changed currentcolor. This can be seen as a small followup to https://crrev.com/1199067 which extends the filter invalidation to backdrop-filter. Change-Id: Ic1e50b0d9b76298c9dfbe808026b117ee8f6f5ca Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5826830 Commit-Queue: Philip Rogers <[email protected]> Reviewed-by: Fredrik Söderquist <[email protected]> Cr-Commit-Position: refs/heads/main@{#1348775}
web-platform-tests · Aug 29, 2024 · 93d6fac · 93d6fac
1 parent 40a4e28
commit 93d6fac
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/css/filter-effects/drop-shadow-currentcolor-dynamic-003.html b/css/filter-effects/drop-shadow-currentcolor-dynamic-003.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Filter Effects: Dynamic 'currentcolor' in backdrop-filter: drop-shadow()</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-98-100x100.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  backdrop-filter: drop-shadow(50px 0px 0px currentcolor);
+}
+.red {
+  color: red;
+}
+.green {
+  color: green;
+}
+#container {
+  /* 0.98 was chosen to work around https://bugzil.la/1915676 */
+  opacity: 0.98;
+  width: 50px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+<div id="container" class="red">
+  <div id="target"></div>
+</div>
+<script>
+waitForAtLeastOneFrame().then(() => {
+  const container = document.getElementById('container');
+  container.classList.toggle('red');
+  container.classList.toggle('green');
+  takeScreenshot();
+});
+</script>
diff --git a/css/filter-effects/reference/green-98-100x100.html b/css/filter-effects/reference/green-98-100x100.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: green; opacity: 0.98;"></div>