[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. Bug: 906154, 907175 Change-Id: I5e9c7dbb7c694afc623fbc3bb2c7f2f8cc458195
web-platform-tests · Nov 20, 2018 · b17abe6 · b17abe6
1 parent c51ac7c
commit b17abe6
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 0 deletions.
diff --git a/css/css-masking/clip-path/clip-path-filter-order-ref.html b/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:[email protected]">
+
+<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>
diff --git a/css/css-masking/clip-path/clip-path-filter-order.html b/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:[email protected]">
+<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>
diff --git a/css/css-masking/clip/clip-filter-order-ref.html b/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:[email protected]">
+
+<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>
diff --git a/css/css-masking/clip/clip-filter-order.html b/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:[email protected]">
+<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>
diff --git a/svg/rendering/order/clip-path-filter-order-ref.svg b/svg/rendering/order/clip-path-filter-order-ref.svg
diff --git a/svg/rendering/order/clip-path-filter-order.svg b/svg/rendering/order/clip-path-filter-order.svg