Bug 1506272 [wpt PR 14008] - Re-plumb backdrop-filter through blink-gen-property-trees, a=testonly
authorMason Freed <masonfreed@chromium.org>
Tue, 13 Nov 2018 13:42:34 +0000
changeset 502815 17b53e8baa14c837bd66a230f9be1ac914284fc8
parent 502814 1d6a923fbd8c63ccca3ade77ef465d8388957e9e
child 502816 93b9b6d163f954e976ad8f1f22065c003b3cf5f4
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
bugs1506272, 14008, 314867, 525099, 547937, 524689, 745012, 497522, 1316661, 607447
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 1506272 [wpt PR 14008] - Re-plumb backdrop-filter through blink-gen-property-trees, a=testonly Automatic update from web-platform-testsRe-plumb backdrop-filter through blink-gen-property-trees With this CL, backdrop-filter will continue to work when the --enable-blink-gen-property-trees flag is enabled. Behavior should be identical to behavior without the flag. Also, I added a number of layout/WPT tests for backdrop-filter, some of which currently pass, and some of which need fixing. The ones that need fixing have been added to TestExpectations. These new tests should reproduce (at least) these issues: - https://crbug.com/314867 - respecting isolation - https://crbug.com/525099 - respecting isolation - https://crbug.com/547937 - border radius - https://crbug.com/524689 - filter plus backdrop-filter - https://crbug.com/745012 - boundary effect problems I also moved the existing tests out of external/wpt/css/css-filter into external/wpt/css/filter-effects, where they really should be, now that filter-effects is being pulled into the tree. Bug: 497522,314867,525099,547937,524689,745012 Change-Id: I2be33fbc0e17dec2cd138f9796971fb4a9a57216 Reviewed-on: https://chromium-review.googlesource.com/c/1316661 Commit-Queue: Mason Freed <masonfreed@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/master@{#607447} -- wpt-commits: e1bde44cb56120f187d326557a681f87b31b43af wpt-pr: 14008
testing/web-platform/tests/css/css-filter/META.yml
testing/web-platform/tests/css/css-filter/blur-clip-stacking-context-001.html
testing/web-platform/tests/css/css-filter/blur-clip-stacking-context-002.html
testing/web-platform/tests/css/css-filter/blur-clip-stacking-context-ref.html
testing/web-platform/tests/css/css-filter/filtered-block-is-container-ref.html
testing/web-platform/tests/css/css-filter/filtered-block-is-container.html
testing/web-platform/tests/css/css-filter/filtered-html-is-not-container-ref.html
testing/web-platform/tests/css/css-filter/filtered-html-is-not-container.html
testing/web-platform/tests/css/css-filter/filtered-inline-is-container-ref.html
testing/web-platform/tests/css/css-filter/filtered-inline-is-container.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color.html
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-basic-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-basic.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-isolate.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html
testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-001.html
testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-002.html
testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-ref.html
testing/web-platform/tests/css/filter-effects/filtered-block-is-container-ref.html
testing/web-platform/tests/css/filter-effects/filtered-block-is-container.html
testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container-ref.html
testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container.html
testing/web-platform/tests/css/filter-effects/filtered-inline-is-container-ref.html
testing/web-platform/tests/css/filter-effects/filtered-inline-is-container.html
deleted file mode 100644
--- a/testing/web-platform/tests/css/css-filter/META.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-spec: https://drafts.fxtf.org/filter-effects/
-suggested_reviewers:
-  - chrishtr
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter with background color</title>
+<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
+
+
+
+<div>
+  <p>Expected: A green box and an overlapping blue box, with a purple<br>
+  overlapping region.</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: #000080;
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 60px;
+    top: 150px;
+}
+.box2inside {
+    background: #8040ff;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    left: 60px;
+    top: 150px;
+}
+</style>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter with background color</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-background-color-ref.html">
+
+<div>
+  <p>Expected: A green box and an overlapping blue box, with a purple<br>
+  overlapping region.</p>
+</div>
+<div class="colorbox">
+  <div class="filterbox"></div>
+</div>
+
+<style>
+.colorbox {
+    position: absolute;
+    background: green;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-ref.html
@@ -0,0 +1,42 @@
+<!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>
+</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>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity.html
@@ -0,0 +1,36 @@
+<!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>
+</div>
+<div class="colorbox">
+  <div class="filterbox"></div>
+</div>
+
+<style>
+.colorbox {
+    position: absolute;
+    background: green;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    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>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter</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>
+</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>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter</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-ref.html">
+
+<div>
+  <p>Expected: A green box and an overlapping black box, with a magenta<br>
+  overlapping region.</p>
+</div>
+<div class="colorbox">
+  <div class="filterbox"></div>
+</div>
+
+<style>
+.colorbox {
+    position: absolute;
+    background: green;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    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>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Should clip using border radius.</title>
+<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
+
+
+
+<div style="opacity: 0.9999;">
+  <div class="circle outside"></div>
+  <div class="circle inside"></div>
+</div>
+
+
+<style>
+div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 10px;
+  left: 10px;
+  background: green;
+}
+.circle {
+  top: 30px;
+  left: 30px;
+  border-radius: 50px;
+  background: yellow;
+  will-change: transform;
+}
+.inside {
+  background: #ffd94d;
+  clip-path: inset(0px 30px 30px 0px);
+  will-change: transform;
+}
+.outside {
+  background: #ffff4d;
+  will-change: transform;
+}
+</style>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-border-radius.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Should clip using border radius.</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-border-radius-ref.html">
+
+<div style="opacity: 0.9999;">
+  <div class="circle filter"></div>
+
+</div>
+
+
+<style>
+div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 10px;
+  left: 10px;
+  background: green;
+}
+.circle {
+  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-isolation-isolate.html
@@ -0,0 +1,43 @@
+<!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 {
+  isolation: isolate;
+  top: 0px;
+  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-isolation-ref.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">
+
+
+
+<div class="outside">
+  <div class="stacking-context">
+    <div class="filter">
+    </div>
+  </div>
+</div>
+<div style="background:#ffa5b2;width:70px;height:70px;top:40px;left:130px;"></div>
+
+<style>
+div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+.outside {
+  top: 10px;
+  left: 10px;
+}
+.stacking-context {
+  will-change: transform;
+  top: 0px;
+  left: 120px;
+}
+.filter {
+  width: 160px;
+  height: 160px;
+  top: 30px;
+  left: -90px;
+  opacity: 0.3;
+  will-change: transform;
+  background: yellow;
+}
+</style>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html
@@ -0,0 +1,43 @@
+<!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 {
+  opacity: 0.9999;
+  top: 0px;
+  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>
+
rename from testing/web-platform/tests/css/css-filter/blur-clip-stacking-context-001.html
rename to testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-001.html
rename from testing/web-platform/tests/css/css-filter/blur-clip-stacking-context-002.html
rename to testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-002.html
rename from testing/web-platform/tests/css/css-filter/blur-clip-stacking-context-ref.html
rename to testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-ref.html
rename from testing/web-platform/tests/css/css-filter/filtered-block-is-container-ref.html
rename to testing/web-platform/tests/css/filter-effects/filtered-block-is-container-ref.html
rename from testing/web-platform/tests/css/css-filter/filtered-block-is-container.html
rename to testing/web-platform/tests/css/filter-effects/filtered-block-is-container.html
rename from testing/web-platform/tests/css/css-filter/filtered-html-is-not-container-ref.html
rename to testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container-ref.html
rename from testing/web-platform/tests/css/css-filter/filtered-html-is-not-container.html
rename to testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container.html
rename from testing/web-platform/tests/css/css-filter/filtered-inline-is-container-ref.html
rename to testing/web-platform/tests/css/filter-effects/filtered-inline-is-container-ref.html
rename from testing/web-platform/tests/css/css-filter/filtered-inline-is-container.html
rename to testing/web-platform/tests/css/filter-effects/filtered-inline-is-container.html