Bug 1510965 [wpt PR 14292] - Adding more WPT tests for backdrop-filter, a=testonly
authorMason Freed <masonfreed@chromium.org>
Thu, 13 Dec 2018 13:54:40 +0000
changeset 450609 52293f0ed89d1da17ddff48b0a8f5d9a69ec4248
parent 450608 e4aa68e2a85b027c5498bf8d8f379b06d07df6c2
child 450610 8a21c5f1df50d2d81d4e16944a38c71fc446d53c
push id35208
push usercsabou@mozilla.com
push dateSat, 15 Dec 2018 02:48:07 +0000
treeherdermozilla-central@d86d184dc7d6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1510965, 14292, 497522, 1354347, 612325
milestone66.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 1510965 [wpt PR 14292] - Adding more WPT tests for backdrop-filter, a=testonly Automatic update from web-platform-tests Adding more WPT tests for backdrop-filter This set includes a few more known issues, and changes the definition of opacity to match our more recent proposal. Under that proposal, the opacity of the backdrop-filter element applies to the filtered backdrop image as well. Bug: 497522 Change-Id: I2fa0bbb710b7a4ba5592c9a4b9ea5ecaaf5b9ddf Reviewed-on: https://chromium-review.googlesource.com/c/1354347 Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Commit-Queue: Mason Freed <masonfreed@chromium.org> Cr-Commit-Position: refs/heads/master@{#612325} -- wpt-commits: f1be71266b0c801b2255254d60b88fa9e64b8dd0 wpt-pr: 14292
testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-fixed.html
--- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-ref.html
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-ref.html
@@ -1,42 +1,25 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>backdrop-filter: Basic operation of filter with opacity</title>
 <link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
 
 
 
 <div>
-  <p>Expected: A green box and an overlapping black box, with a magenta<br>
-  overlapping region.</p>
+  <p>Expected: Just a single green box.</p>
 </div>
 <div class="colorbox"></div>
-<div class="box2outside"></div>
-<div class="box2inside"></div>
+
+
 
 <style>
 .colorbox {
     position: absolute;
     background: green;
     width: 100px;
     height: 100px;
     left: 10px;
     top: 100px;
 }
-.box2outside {
-    background: black;
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    left: 60px;
-    top: 150px;
-}
-.box2inside {
-    background: #ff7fff;
-    position: absolute;
-    width: 50px;
-    height: 50px;
-    left: 60px;
-    top: 150px;
-}
 </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
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>backdrop-filter: Basic operation of filter with opacity</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-basic-opacity-ref.html">
 
 <div>
-  <p>Expected: A green box and an overlapping black box, with a magenta<br>
-  overlapping region.</p>
+  <p>Expected: Just a single green box.</p>
 </div>
 <div class="colorbox">
   <div class="filterbox"></div>
 </div>
 
 <style>
 .colorbox {
     position: absolute;
@@ -24,12 +23,12 @@
 }
 .filterbox {
     position: absolute;
     width: 100px;
     height: 100px;
     left: 50px;
     top: 50px;
     backdrop-filter: invert(1);
-    opacity: 0.5;
+    opacity: 0;
 }
 </style>
 
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Should not filter outside of clip/scroll.</title>
+<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
+
+
+
+<div style="width:600px;">
+  <p>Expected: A green box, overlapping red box, and a small, inset cyan box. The<br>
+  cyan should not extend to the bottom/right edges of the red box.</p>
+</div>
+
+<div id="A">
+  <div id="B">
+    <div id="F"></div>
+    <div id="T"></div>
+  </div>
+</div>
+
+<style>
+div {
+  position:absolute;
+  width: 200px;
+  height: 200px;
+}
+#A {
+  overflow:hidden;
+  top: 110px;
+  left: 10px;
+}
+#B {
+
+  background:green;
+}
+#F {
+  position:fixed;
+  background:#f008;
+  top:150px;
+  left:50px;
+}
+#T {
+  background:#c0e3ff;
+  top:90px;
+  left:90px;
+  width: 110px;
+  height: 110px;
+}
+</style>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Should not filter outside of clip/scroll.</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-fixed-clip-ref.html">
+
+<div style="width:600px;">
+  <p>Expected: A green box, overlapping red box, and a small, inset cyan box. The<br>
+  cyan should not extend to the bottom/right edges of the red box.</p>
+</div>
+
+<div id="A">
+  <div id="B">
+    <div id="F"></div>
+    <div id="T"></div>
+  </div>
+</div>
+
+<style>
+div {
+  position:absolute;
+  width: 200px;
+  height: 200px;
+}
+#A {
+  overflow:hidden;
+  top: 110px;
+  left: 10px;
+}
+#B {
+  opacity: 0.99999;
+  background:green;
+}
+#F {
+  position:fixed;
+  background:#f008;
+  top:150px;
+  left:50px;
+}
+#T {
+  background:#fff8;
+  top:90px;
+  left:90px;
+  backdrop-filter:invert(1);
+}
+</style>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-fixed.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Should not filter outside parent stacking context.</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-isolation-ref.html">
+
+<div class="outside">
+  <div class="stacking-context">
+    <div class="filter">
+    </div>
+  </div>
+</div>
+
+
+<style>
+div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+.outside {
+  top: 10px;
+  left: 10px;
+}
+.stacking-context {
+  position: fixed;
+  top: 10px;
+  left: 130px;
+}
+.filter {
+  width: 160px;
+  height: 160px;
+  top: 30px;
+  left: -90px;
+  opacity: 0.3;
+  backdrop-filter: invert(1);
+  background: yellow;
+}
+</style>
+