Bug 1567288 [wpt PR 17911] - Fixing rendering of backdrop-filter with…

… opacity, a=testonly Automatic update from web-platform-tests Fixing rendering of backdrop-filter with opacity Prior to this CL, a node that contained both opacity and backdrop-filter would sometimes not be properly rendered. The opacity was, in some cases, applied as if there was an opaque black background behind the filter region, rather than compositing the filtered image into the background with the specified opacity. This CL changes the way opacity is applied, moving it to the paint of the final filtered image, which fixes the problem. Bug: 983252 Change-Id: I9fae88c8f7b1c950d5616e1c9eeaaa664bab649a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1707457 Reviewed-by: Eric Karl <[email protected]> Commit-Queue: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/master@{#680076} -- wpt-commits: abdea75716f7949ce2e3060e2926beccd8ee8003 wpt-pr: 17911
xeonchen · Jul 31, 2019 · 28a8a1e · 28a8a1e
1 parent 1724aaf
commit 28a8a1e
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply backdrop-filter with opacity</title>
+<link rel="author" title="Mason Freed" href="mailto:[email protected]">
+
+
+
+<p>Expected: A green box.</p>
+
+<div class="greenbox"></div>
+
+
+<style>
+.greenbox {
+  position: absolute;
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 100px;
+  left: 60px;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply backdrop-filter with opacity</title>
+<link rel="author" title="Mason Freed" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-plus-opacity-ref.html">
+
+<p>Expected: A green box.</p>
+
+<div class="greenbox"></div>
+<div class="filter"></div>
+
+<style>
+.greenbox {
+  position: absolute;
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 100px;
+  left: 60px;
+}
+.filter {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  top: 50px;
+  left: 10px;
+  backdrop-filter: invert(1);
+  opacity: 0;
+}
+</style>
diff --git a/testing/web-platform/tests/css/mediaqueries/width-equals-window-inner-width.html b/testing/web-platform/tests/css/mediaqueries/width-equals-window-inner-width.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CSS Test: CSS media query width equals window innerWidth</title>
+
+<link rel="author" title="Jinfeng Ma" href="mailto:[email protected]">
+<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#width">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-window-innerwidth">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<!--
+It'd be best to programmatically change device scale factor so that the document
+width becomes non integral but for now this test is only effective when run on
+devices with a fractional device scale factor.
+-->
+<script type="text/javascript">
+    'use strict';
+    test(() => {
+      assert_true(window.matchMedia('(width: ' + window.innerWidth + 'px)').matches);
+    }, 'CSS media query width equals window innerWidth.');
+</script>