Bug 1508910 [wpt PR 14153] - [BlinkGenPropertyTrees] Filter effects should be clipped, a=testonly
authorPhilip Rogers <pdr@chromium.org>
Sat, 24 Nov 2018 10:29:02 +0000
changeset 504476 22ee27fd6082c2f588e8dc0e518eb1894dddeb38
parent 504475 c0d09086d8f30e979043187f36a27387080cae87
child 504477 30e78e224e8fc22d66223d1dd2acbe451247716e
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
bugs1508910, 14153, 906154, 907175, 1344217, 609847
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 1508910 [wpt PR 14153] - [BlinkGenPropertyTrees] Filter effects should be clipped, a=testonly Automatic update from web-platform-tests[BlinkGenPropertyTrees] Filter effects should be clipped According to the spec, filtering should apply before clipping (https://drafts.fxtf.org/css-masking-1/#placement): "...effects are applied to the element in order: filter effects, clipping, masking and opacity." This patch fixes clip-path order with BlinkGenPropertyTrees (BGPT) which exposed the issue of filter and clip order. Testcases have been added showing the fixed behavior with BGPT, and the non-BGPT results have been marked as failing. NOTRY=true Bug: 906154, 907175 Change-Id: I5e9c7dbb7c694afc623fbc3bb2c7f2f8cc458195 Reviewed-on: https://chromium-review.googlesource.com/c/1344217 Commit-Queue: Philip Rogers <pdr@chromium.org> Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#609847} -- wpt-commits: 36d62b452bbc0e121065cd8afd2e7032a2839106 wpt-pr: 14153
testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order-ref.html
testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order.html
testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html
testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html
testing/web-platform/tests/svg/rendering/order/clip-path-filter-order-ref.svg
testing/web-platform/tests/svg/rendering/order/clip-path-filter-order.svg
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Clip-path should be applied after filtering</title>
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+
+<div>
+  <p>Expected: A green box.<br>
+  There should be no red visible.<br>
+  There should be a crisp, clipped edge around the green box (no blurring).</p>
+</div>
+
+<style>
+  #testcase {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    background: green;
+    will-change: transform;
+  }
+</style>
+<div id="testcase"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-filter-order.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Clip-path should be applied after filtering</title>
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement">
+<link rel="match" href="clip-path-filter-order-ref.html">
+
+<div>
+  <p>Expected: A green box.<br>
+  There should be no red visible.<br>
+  There should be a crisp, clipped edge around the green box (no blurring).</p>
+</div>
+
+<style>
+  #testcase {
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    background: green;
+    will-change: transform;
+    filter: drop-shadow(16px 16px 20px red);
+    clip-path: inset(0px 200px 200px 0px);
+  }
+</style>
+<div id="testcase"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Clip should be applied after filtering</title>
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+
+<div>
+  <p>Expected: A green box.<br>
+  There should be no red visible.<br>
+  There should be a crisp, clipped edge around the green box (no blurring).</p>
+</div>
+
+<style>
+  #testcase {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    background: green;
+    will-change: transform;
+  }
+</style>
+<div id="testcase"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Clip should be applied after filtering</title>
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement">
+<link rel="match" href="clip-filter-order-ref.html">
+
+<div>
+  <p>Expected: A green box.<br>
+  There should be no red visible.<br>
+  There should be a crisp, clipped edge around the green box (no blurring).</p>
+</div>
+
+<style>
+  #testcase {
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    background: green;
+    will-change: transform;
+    filter: drop-shadow(16px 16px 20px red);
+    clip: rect(0px, 200px, 200px, 0px);
+  }
+</style>
+<div id="testcase"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/rendering/order/clip-path-filter-order-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800" height="600" viewBox="0 0 800 600">
+  <rect x="100" y="100" width="200" height="200" fill="green" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/rendering/order/clip-path-filter-order.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800" height="600" viewBox="0 0 800 600">
+  <metadata>
+    <h:link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"/>
+    <h:link rel="help" href="https://www.w3.org/TR/SVG11/single-page.html#render-RenderingOrder"/>
+    <h:link rel="match" href="clip-path-filter-order-ref.svg"/>
+    <h:meta name="assert" content="Clip path should apply after filtering."/>
+  </metadata>
+
+  <defs>
+    <filter id="redDropShadowFilter">
+      <feOffset result="offsetOut" in="SourceGraphic" dx="10" dy="10" />
+      <feColorMatrix result="colorMatrixOut" in="offsetOut" type="matrix"
+          values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+      <feGaussianBlur result="blurOut" in="colorMatrixOut" stdDeviation="15" />
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+    </filter>
+    <clipPath id="clipPath">
+      <rect x="100" y="100" width="200" height="200" />
+    </clipPath>
+  </defs>
+  <rect x="100" y="100" width="400" height="400" fill="green"
+      filter="url(#redDropShadowFilter)" clip-path="url(#clipPath)" />
+</svg>