Migrate backdrop-filter tests to WPT

These tests were written before WPT supported fuzzy-matching, and these tests require fuzziness. This CL migrates them, updates them, and adds fuzziness where needed. Note that one test (backdrop-filter-browser-zoom.html) is left as a web_test because it uses `testRunner.setPageZoomFactor()`. Fixed: 41467763 Change-Id: I5480a0d87dc72fb707cc22ac034929d32f3b439f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6150610 Commit-Queue: Mason Freed <[email protected]> Auto-Submit: Mason Freed <[email protected]> Reviewed-by: Xianzhu Wang <[email protected]> Cr-Commit-Position: refs/heads/main@{#1403806}
web-platform-tests · Jan 8, 2025 · a23771c · a23771c
1 parent 4c45aa5
commit a23771c
Show file tree

Hide file tree

Showing 10 changed files with 343 additions and 0 deletions.
diff --git a/css/filter-effects/backdrop-filter-clip-radius-zoom-ref.html b/css/filter-effects/backdrop-filter-clip-radius-zoom-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+<div id='rect1'></div>
+<div id='rect2'></div>
+
+<style>
+body {
+  zoom: 5;
+}
+div {
+  width: 100px;
+  height: 20px;
+  background-color: black;
+  border: 2px dashed green;
+}
+#rect1 {
+  border-radius: 20px / 5px;
+}
+#rect2 {
+  position: relative;
+  top:5px;
+  border-radius: 4px;
+}
+</style>
diff --git a/css/filter-effects/backdrop-filter-clip-radius-zoom.html b/css/filter-effects/backdrop-filter-clip-radius-zoom.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name=fuzzy content="maxDifference=0-200; totalPixels=0-2000">
+<title>Backdrop filter clipping radius with zoom</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-clip-radius-zoom-ref.html">
+
+<!--You should see two completely filled black rectangles with rounded corners.-->
+
+<div id='rect1'></div>
+<div id='rect2'></div>
+
+<style>
+body {
+  zoom: 5;
+}
+div {
+  width: 100px;
+  height: 20px;
+  backdrop-filter: invert(1);
+  border: 2px dashed green;
+}
+#rect1 {
+  border-radius: 20px / 5px;
+}
+#rect2 {
+  position: relative;
+  top:5px;
+  border-radius: 4px;
+}
+</style>
diff --git a/css/filter-effects/backdrop-filter-clip-rect-zoom-ref.html b/css/filter-effects/backdrop-filter-clip-rect-zoom-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html style="zoom:5">
+<meta charset="utf-8">
+<title>backdrop-filter: Clip the filter at border box of element</title>
+<link rel="author" href="mailto:[email protected]">
+
+<div class="box"></div>
+<div class="navbar"></div>
+<div class="menu"></div>
+<div class="menu2"></div>
+
+<style>
+body {
+  overflow: hidden;
+}
+div {
+  position: absolute;
+}
+.box {
+  width: 200px;
+  height: 200px;
+  top: 100px;
+  left: 100px;
+  background: green;
+}
+.navbar {
+  width: 300px;
+  height: 50px;
+  top: 150px;
+  left: 50px;
+  border: 2px solid blue;
+  backdrop-filter: invert(1);
+  border-radius: 10px 20px 30px 40px;
+}
+.menu {
+  width: 100px;
+  height: 150px;
+  top: 202px;
+  left: 147px;
+  border: 2px solid red;
+}
+.menu2 {
+  width: 100px;
+  height: 30px;
+  top: 118px;
+  left: 147px;
+  border: 2px solid red;
+}
+</style>
+<script>
+  window.scrollTo(0,700);
+</script>
diff --git a/css/filter-effects/backdrop-filter-clip-rect-zoom.html b/css/filter-effects/backdrop-filter-clip-rect-zoom.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Clip the filter at border box of element</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-clip-rect-zoom-ref.html">
+
+<div class="box"></div>
+<div class="navbar">
+  <div class="menu"></div>
+  <div class="menu2"></div>
+</div>
+<style>
+html {
+  zoom:5;
+}
+body {
+  overflow: hidden;
+}
+div {
+  position: absolute;
+}
+.box {
+  width: 200px;
+  height: 200px;
+  top: 100px;
+  left: 100px;
+  background: green;
+}
+.navbar {
+  width: 300px;
+  height: 50px;
+  top: 150px;
+  left: 50px;
+  border: 2px solid blue;
+  backdrop-filter: invert(1);
+  border-radius: 10px 20px 30px 40px;
+}
+.menu {
+  width: 100px;
+  height: 150px;
+  top: 50px;
+  left: 95px;
+  border: 2px solid red;
+}
+.menu2 {
+  width: 100px;
+  height: 30px;
+  top: -34px;
+  left: 95px;
+  border: 2px solid red;
+}
+</style>
+
+<script>
+  window.scrollTo(0,700);
+</script>
diff --git a/css/filter-effects/backdrop-filter-plus-mask-large-ref.html b/css/filter-effects/backdrop-filter-plus-mask-large-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply masks/clips to backdrop-filter content</title>
+<link rel="author" href="mailto:[email protected]">
+
+<div></div>
+
+<style>
+body {
+  overflow: hidden;
+}
+div {
+  position: absolute;
+  top: 100px;
+  left: 50px;
+  width: 2000px;
+  height: 2000px;
+  background: black;
+  clip-path: circle(1000px at center);
+}
+</style>
diff --git a/css/filter-effects/backdrop-filter-plus-mask-large.html b/css/filter-effects/backdrop-filter-plus-mask-large.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name=fuzzy content="maxDifference=0-100;totalPixels=0-2000">
+<title>backdrop-filter: Correctly apply masks/clips to backdrop-filter content</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-plus-mask-large-ref.html">
+
+<!--Expected: A large black circle.-->
+
+<div></div>
+
+<style>
+body {
+  overflow: hidden;
+}
+div {
+  position: absolute;
+  top: 100px;
+  left: 50px;
+  width: 2000px;
+  height: 2000px;
+  backdrop-filter: invert(1);
+  clip-path: circle(1000px at center);
+}
+</style>
diff --git a/css/filter-effects/backdrop-filter-plus-mask-ref.html b/css/filter-effects/backdrop-filter-plus-mask-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply masks/clips to backdrop-filter content</title>
+<link rel="author" href="mailto:[email protected]">
+
+<div></div>
+
+<svg>
+  <clipPath id="heart" clipPathUnits="objectBoundingBox">
+    <path d="M0.5,1
+      C 0.5,1,0,0.7,0,0.3
+      A 0.25,0.25,1,1,1,0.5,0.3
+      A 0.25,0.25,1,1,1,1,0.3
+      C 1,0.7,0.5,1,0.5,1 Z" />
+  </clipPath>
+</svg>
+
+<style>
+div {
+  position: absolute;
+  top: 100px;
+  left: 50px;
+  width: 200px;
+  height: 200px;
+  background: black;
+  clip-path: url(#heart);
+}
+</style>
diff --git a/css/filter-effects/backdrop-filter-plus-mask.html b/css/filter-effects/backdrop-filter-plus-mask.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name=fuzzy content="maxDifference=0-200;totalPixels=0-1000">
+<title>backdrop-filter: Correctly apply masks/clips to backdrop-filter content</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-plus-mask-ref.html">
+
+<!--Expected: A black heart.-->
+
+<div></div>
+
+<svg>
+  <clipPath id="heart" clipPathUnits="objectBoundingBox">
+    <path d="M0.5,1
+      C 0.5,1,0,0.7,0,0.3
+      A 0.25,0.25,1,1,1,0.5,0.3
+      A 0.25,0.25,1,1,1,1,0.3
+      C 1,0.7,0.5,1,0.5,1 Z" />
+  </clipPath>
+</svg>
+
+<style>
+body {
+  overflow: hidden;
+}
+div {
+  position: absolute;
+  top: 100px;
+  left: 50px;
+  width: 200px;
+  height: 200px;
+  backdrop-filter: invert(1);
+  clip-path: url(#heart);
+}
+</style>
diff --git a/css/filter-effects/backdrop-filter-transform-ref.html b/css/filter-effects/backdrop-filter-transform-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<div class="filterbox">
+</div>
+<div class="colorbox">
+  <div class="invert"></div>
+</div>
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 100px;
+    top: 100px;
+}
+.colorbox {
+    background: green;
+    overflow: clip;
+}
+.filterbox {
+    top: 140px;
+    background: black;
+    transform: rotate(30deg);
+    border-radius: 10px;
+}
+.invert {
+    top: 40px;
+    left: 0;
+    background: rgb(255, 127, 255);
+    transform: rotate(30deg);
+    border-radius: 10px;
+}
+</style>
diff --git a/css/filter-effects/backdrop-filter-transform.html b/css/filter-effects/backdrop-filter-transform.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name=fuzzy content="maxDifference=0-100; totalPixels=0-1000">
+<title>backdrop-filter: backdrop-filter plus transform should be applied correctly</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-transform-ref.html">
+
+<!--Expected: A green box with an overlapping rotated box that inverts content behind it. -->
+
+<div class="colorbox"></div>
+<div class="filterbox"></div>
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 100px;
+    top: 100px;
+}
+.colorbox {
+    background: green;
+}
+.filterbox {
+    top: 140px;
+    backdrop-filter: invert(1);
+    transform: rotate(30deg);
+    border-radius: 10px;
+}
+</style>
+