Bug 1506716 [wpt PR 14026] - Adding more layout/WPT tests for backdrop-filter, a=testonly
☠☠ backed out by 46ad93280b06 ☠ ☠
authorMason Freed <masonfreed@chromium.org>
Mon, 19 Nov 2018 18:45:38 +0000
changeset 503732 0a4f3d45b0c5cc8c3f1a863dd5f30fdf2f5d3768
parent 503731 81e2dcf84fb1b4d44135c0ed12c124d9c4d9a01a
child 503733 2c739b93be1e45dc9695653334e34a921e60d3f5
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>
+