Bug 1506716 [wpt PR 14026] - Adding more layout/WPT tests for backdrop-filter, a=testonly
authorMason Freed <masonfreed@chromium.org>
Mon, 19 Nov 2018 18:45:38 +0000
changeset 503987 77b371d0cd7834a68f093fdd982d6f483c508fbf
parent 503986 a4f2948ebc5da670cc819dcb1852a767373c9ab3
child 503988 2589e6feb86ac62badb135d9634f055e0bd83924
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1506716, 14026, 622128, 632979, 659501, 767997, 813796, 593307, 497522, 1330888, 608537
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1506716 [wpt PR 14026] - Adding more layout/WPT tests for backdrop-filter, a=testonly Automatic update from web-platform-testsAdding more layout/WPT tests for backdrop-filter These should reproduce (at least) these issues: - https://crbug.com/622128 - dark areas brought in from edges - https://crbug.com/632979 - dark areas brought in from edges - https://crbug.com/659501 - menus cause too much filtering - https://crbug.com/767997 - menus cause too much filtering - https://crbug.com/813796 - incorrect border used for filter - https://crbug.com/593307 - incorrect border used for filter Bug: 497522,622128,632979,659501,767997,813796,593307 Change-Id: Iafea2fc8fffba950f74d27f21170df647dc62e29 Reviewed-on: https://chromium-review.googlesource.com/c/1330888 Commit-Queue: Mason Freed <masonfreed@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#608537} -- wpt-commits: a2fb878b4b9e4164437357f2bfba4c28e8c0e1ea wpt-pr: 14026
testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-basic.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-isolate.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order.html
--- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color.html
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color.html
@@ -23,14 +23,13 @@
     top: 100px;
 }
 .filterbox {
     position: absolute;
     width: 100px;
     height: 100px;
     left: 50px;
     top: 50px;
-    -webkit-backdrop-filter: invert(1);
     backdrop-filter: invert(1);
     opacity: 0.5;
     background: blue;
 }
 </style>
--- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity.html
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity.html
@@ -23,14 +23,13 @@
     top: 100px;
 }
 .filterbox {
     position: absolute;
     width: 100px;
     height: 100px;
     left: 50px;
     top: 50px;
-    -webkit-backdrop-filter: invert(1);
     backdrop-filter: invert(1);
     opacity: 0.5;
 }
 </style>
 
--- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic.html
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic.html
@@ -23,14 +23,13 @@
     top: 100px;
 }
 .filterbox {
     position: absolute;
     width: 100px;
     height: 100px;
     left: 50px;
     top: 50px;
-    -webkit-backdrop-filter: invert(1);
     backdrop-filter: invert(1);
     opacity: 1.0;
 }
 </style>
 
--- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius.html
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius.html
@@ -24,12 +24,11 @@ div {
   top: 30px;
   left: 30px;
   border-radius: 50px;
   background: yellow;
   will-change: transform;
 }
 .filter {
   opacity: 0.7;
-  -webkit-backdrop-filter: invert(1);
   backdrop-filter: invert(1);
 }
 </style>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Clip the filter at border box of element</title>
+<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
+
+
+
+<div>
+  <p>Expected: A green box, blurred inside the short, wide white box with a<br>
+  blue border, and not blurred anywhere else. In particular, there should be<br>
+  no blurring inside the tall, narrow white box, or anywhere outside that.</p>
+</div>
+<div class="box"></div>
+<div class="navbar"></div>
+<div class="menu"></div>
+
+<style>
+div {
+  position: absolute;
+}
+.box {
+  width: 200px;
+  height: 200px;
+  top: 100px;
+  left: 100px;
+  background: green;
+}
+.navbar {
+  width: 300px;
+  height: 50px;
+  top: 150px;
+  left: 50px;
+  border: 1px solid blue;
+  backdrop-filter: blur(20px);
+}
+.menu {
+  width: 100px;
+  height: 150px;
+  top: 201px;
+  left: 146px;
+  border: 1px solid blue;
+}
+</style>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Clip the filter at border box of element</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-paint-order-ref.html">
+
+<div>
+  <p>Expected: A green box, blurred inside the short, wide white box with a<br>
+  blue border, and not blurred anywhere else. In particular, there should be<br>
+  no blurring inside the tall, narrow white box, or anywhere outside that.</p>
+</div>
+<div class="box"></div>
+<div class="navbar">
+  <div class="menu"></div>
+</div>
+<style>
+div {
+  position: absolute;
+}
+.box {
+  width: 200px;
+  height: 200px;
+  top: 100px;
+  left: 100px;
+  background: green;
+}
+.navbar {
+  width: 300px;
+  height: 50px;
+  top: 150px;
+  left: 50px;
+  border: 1px solid blue;
+  backdrop-filter: blur(20px);
+}
+.menu {
+  width: 100px;
+  height: 150px;
+  top: 50px;
+  left: 95px;
+  border: 1px solid blue;
+}
+</style>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Edge pixels shouldn't get filtered</title>
+<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
+
+
+
+<div class="box"></div>
+<div style="position:absolute;top:100px;">
+  <p>Expected above: A pure white box with a blue border.<br>
+  No dark/black should be observed within the white box.</p>
+</div>
+
+<style>
+.box {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 0px;
+  left: 0px;
+  border: 1px solid blue;
+
+
+}
+</style>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Edge pixels shouldn't get filtered</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-edge-pixels-ref.html">
+
+<div class="box"></div>
+<div style="position:absolute;top:100px;">
+  <p>Expected above: A pure white box with a blue border.<br>
+  No dark/black should be observed within the white box.</p>
+</div>
+
+<style>
+.box {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 0px;
+  left: 0px;
+  border: 1px solid blue;
+  backdrop-filter: blur(30px);
+}
+</style>
--- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-isolate.html
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-isolate.html
@@ -30,14 +30,13 @@ div {
   left: 120px;
 }
 .filter {
   width: 160px;
   height: 160px;
   top: 30px;
   left: -90px;
   opacity: 0.3;
-  -webkit-backdrop-filter: invert(1);
   backdrop-filter: invert(1);
   background: yellow;
 }
 </style>
 
--- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html
@@ -30,14 +30,13 @@ div {
   left: 120px;
 }
 .filter {
   width: 160px;
   height: 160px;
   top: 30px;
   left: -90px;
   opacity: 0.3;
-  -webkit-backdrop-filter: invert(1);
   backdrop-filter: invert(1);
   background: yellow;
 }
 </style>
 
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Only filter objects painted before</title>
+<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
+
+
+
+<div>
+  <p>Expected: A pure white box with a blue border, surrounded by green.<br>
+  No green should be observed within the white box.<br>
+  No dark/black should be observed within the white box either.</p>
+</div>
+
+<div class="filterbox"></div>
+<div class="greenbox top"></div>
+<div class="greenbox right"></div>
+<div class="greenbox bottom"></div>
+<style>
+.filterbox {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 150px;
+  left: 0px;
+  border: 1px solid blue;
+
+
+}
+.greenbox {
+  position:absolute;
+  width: 150px;
+  height: 50px;
+  background: green;
+}
+.top {
+  top:100px;
+  left: 10px;
+}
+.right {
+  top:130px;
+  left: 102px;
+  width: 58px;
+  height: 150px;
+}
+.bottom {
+  top:252px;
+  left: 10px;
+}
+</style>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Only filter objects painted before</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-paint-order-ref.html">
+
+<div>
+  <p>Expected: A pure white box with a blue border, surrounded by green.<br>
+  No green should be observed within the white box.<br>
+  No dark/black should be observed within the white box either.</p>
+</div>
+
+<div class="filterbox"></div>
+<div class="greenbox top"></div>
+<div class="greenbox right"></div>
+<div class="greenbox bottom"></div>
+<style>
+.filterbox {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 150px;
+  left: 0px;
+  border: 1px solid blue;
+  backdrop-filter: blur(20px);
+}
+.greenbox {
+  position:absolute;
+  width: 150px;
+  height: 50px;
+  background: green;
+}
+.top {
+  top:100px;
+  left: 10px;
+}
+.right {
+  top:130px;
+  left: 102px;
+  width: 58px;
+  height: 150px;
+}
+.bottom {
+  top:252px;
+  left: 10px;
+}
+</style>
+