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/1354347Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612325}

third_party/blink/web_tests/TestExpectations

@@ -1899,6 +1899,24 @@ crbug.com/870173 virtual/outofblink-cors-ns/http/tests/security/script-crossorig
 
 # ====== Out of Blink CORS related tests END ======
 
+
+# ====== Backdrop-filter related tests BEGIN ======
+# These are known failures - this feature is still being implemented
+crbug.com/497522 css3/filters/backdrop-filter-boundary.html [ Failure ]
+crbug.com/497522 css3/filters/backdrop-filter-bleeding.html [ Failure ]
+crbug.com/497522 css3/filters/backdrop-filter-svg.html [ Failure ]
+crbug.com/497522 css3/filters/backdrop-filter-plus-filter.html [ Failure ]
+crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-isolation-isolate.html [ Failure ]
+crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-border-radius.html [ Failure ]
+crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-clip-rect.html [ Failure ]
+crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-edge-pixels.html [ Failure ]
+crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-paint-order.html [ Failure ]
+crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-basic-opacity.html [ Failure ]
+crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-fixed-clip.html [ Failure ]
+crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-isolation-fixed.html [ Failure ]
+# ====== Backdrop-filter related tests END ======
+
+
 crbug.com/492664 [ Linux ] external/wpt/css/css-writing-modes/box-offsets-rel-pos-vlr-005.xht [ Failure ]
 crbug.com/492664 [ Linux ] external/wpt/css/css-writing-modes/box-offsets-rel-pos-vrl-004.xht [ Failure ]
 crbug.com/492664 [ Mac ] external/wpt/css/css-writing-modes/bidi-embed-002.html [ Failure ]
@@ -5705,17 +5723,6 @@ crbug.com/902645 [ Retina ] transforms/3d/point-mapping/3d-point-mapping-origins
 # Test is flaky under load
 crbug.com/904389 http/tests/preload/delaying_onload_link_preload_after_discovery.html [ Failure Pass ]
 
-# These are known failures, being implemented
-crbug.com/497522 css3/filters/backdrop-filter-boundary.html [ Failure ]
-crbug.com/497522 css3/filters/backdrop-filter-bleeding.html [ Failure ]
-crbug.com/497522 css3/filters/backdrop-filter-svg.html [ Failure ]
-crbug.com/497522 css3/filters/backdrop-filter-plus-filter.html [ Failure ]
-crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-isolation-isolate.html [ Failure ]
-crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-border-radius.html [ Failure ]
-crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-clip-rect.html [ Failure ]
-crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-edge-pixels.html [ Failure ]
-crbug.com/497522 external/wpt/css/filter-effects/backdrop-filter-paint-order.html [ Failure ]
-
 #Sheriff 2018-11-14
 crbug.com/905694 [ Linux ] virtual/threaded/fast/scroll-behavior/smooth-scroll/scroll-during-selection.html [ Failure Pass ]
 crbug.com/905772 [ Linux ] virtual/sampling-heap-profiler/inspector-protocol/memory/sampling-native-profile-partition-alloc.js [ Failure Pass ]

third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filter-basic-opacity-ref.html

@@ -6,12 +6,11 @@
 
 
 <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 {
@@ -22,21 +21,5 @@
     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>
 

third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filter-basic-opacity.html

@@ -6,8 +6,7 @@
 <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>
@@ -29,7 +28,7 @@
     left: 50px;
     top: 50px;
     backdrop-filter: invert(1);
-    opacity: 0.5;
+    opacity: 0;
 }
 </style>
 

third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filter-fixed-clip-ref.html

+<!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>

third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filter-fixed-clip.html

+<!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>

third_party/blink/web_tests/external/wpt/css/filter-effects/backdrop-filter-isolation-fixed.html

+<!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>
+