Bug 1572747 [wpt PR 18342] - Make backdrop-filter a containing block for fixed/absolute, a=testonly
authorMason Freed <masonfreed@chromium.org>
Wed, 14 Aug 2019 10:47:02 +0000
changeset 488089 35851bbd834fbf377f9268e94e202d12b1470280
parent 488088 861199382e3194b693c09bdfbc76a2b96fd3938b
child 488090 2391aec40f5d86f9a7f563f0128a9135a0485f6d
push id36435
push usercbrindusan@mozilla.com
push dateThu, 15 Aug 2019 09:46:49 +0000
treeherdermozilla-central@0db07ff50ab5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1572747, 18342, 991678, 1745587, 685586
milestone70.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 1572747 [wpt PR 18342] - Make backdrop-filter a containing block for fixed/absolute, a=testonly Automatic update from web-platform-tests Make backdrop-filter a containing block for fixed/absolute Prior to this CL, the behavior of backdrop-filter did not match the spec. According to [1], backdrop-filter creates a containing block for fixed and absolute positioned elements. Now, it does. [1] https://drafts.fxtf.org/filter-effects-2/#backdrop-filter-operation Bug: 991678 Change-Id: I7a1140929e12e55097a3d2bcad2dbd63ea61a0b5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1745587 Commit-Queue: Mason Freed <masonfreed@chromium.org> Auto-Submit: Mason Freed <masonfreed@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#685586} -- wpt-commits: 0d4a9cfd53150714eb64920cd592f04063cfb144 wpt-pr: 18342
testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block-ref.html
testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Forms a containing block for fixed/absolute</title>
+<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
+
+
+
+<p>Expected: one green square and one red square, both 200px by 200px.</p>
+<div class="container">
+  <div class="fixed-child"></div>
+  <div class="absolute-child"></div>
+</div>
+
+<style>
+.container {
+  width: 200px;
+  will-change: transform;
+}
+
+.fixed-child {
+  position: fixed;
+  top: 0;
+  background-color: green;
+  width: 200px;
+  height: 200px;
+}
+
+.absolute-child {
+  position: absolute;
+  top: 0;
+  left: 210px;
+  background-color: red;
+  width: 200px;
+  height: 200px;
+}
+</style>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Forms a containing block for fixed/absolute</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-containing-block-ref.html">
+
+<p>Expected: one green square and one red square, both 200px by 200px.</p>
+<div class="container">
+  <div class="fixed-child"></div>
+  <div class="absolute-child"></div>
+</div>
+
+<style>
+.container {
+  width: 200px;
+  backdrop-filter: invert(1);
+}
+
+.fixed-child {
+  position: fixed;
+  top: 0;
+  background-color: green;
+  width: 100%;
+  height: 200px;
+}
+
+.absolute-child {
+  position: absolute;
+  top: 0;
+  left: 210px;
+  background-color: red;
+  width: 100%;
+  height: 200px;
+}
+</style>
+