Add a test for rounded-corner clip of backdrop-filter

This test, which currently fails, tests that rounded-corner clips do not create a Backdrop Root. Bug: 964417 Change-Id: I1849962b408ecc451cc2934668488046bc4f89ec Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1626456 Commit-Queue: Chris Harrelson <chrishtr@chromium.org> Auto-Submit: Mason Freed <masonfreed@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#662619}
web-platform-tests · May 23, 2019 · 7a9cd3b · 7a9cd3b
1 parent 137ac6d
commit 7a9cd3b
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/css/filter-effects/backdrop-filter-clipped-ref.html b/css/filter-effects/backdrop-filter-clipped-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter</title>
+<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
+
+
+
+<p>Expected: A green box</p>
+<div id="colorbox"></div>
+
+
+
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 50px;
+    background: green;
+}
+</style>
diff --git a/css/filter-effects/backdrop-filter-clipped.html b/css/filter-effects/backdrop-filter-clipped.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: A rounded-corner clip rect parent should not form a Backdrop Root</title>
+<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-clipped-ref.html">
+
+<p>Expected: A green box</p>
+<div class="colorbox"></div>
+<div class="clipper">
+  <div class="filterbox"></div>
+</div>
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 50px;
+}
+.colorbox {
+    background: #ff7fff;
+}
+.clipper {
+    overflow: hidden;
+    border-radius: 0.001px;
+}
+.filterbox {
+    top:0;
+    left:0;
+    backdrop-filter: invert(1);
+}
+</style>