Bug 1675146 [wpt PR 26389] - Fix mask-based clip-path with backdrop filter, a=testonly

Automatic update from web-platform-tests Fix mask-based clip-path with backdrop filter Cc requires additional bookkeeping for the case, including setting the mask layer as a backdrop mask layer, etc. Also let CompositeAfterPaint composite the backdrop mask layer which is also required by cc. Bug: 1144520 Change-Id: Id9be79d398c1c4b41aa97a7c8c3e23546ce87365 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2518440 Reviewed-by: Mason Freed <masonfreed@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#824041} -- wpt-commits: 0bfbfff7078026df1303fd557b199d158a156778 wpt-pr: 26389
2020-11-05 14:20:10 +00:00 · 2020-11-05 14:20:10 +00:00 · ba523c3019
--- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter-ref.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter-ref.html
@ -0,0 +1,11 @@
+<!doctype html>
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/fonts/ahem.css" />
+<style>
+#svgText {
+  font: 100px/1 Ahem;
+}
+</style>
+<svg width="500" height="300">
+  <text id="svgText" x="10" y="100">Text</text>
+</svg>
--- a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-svg-text-backdrop-filter.html
@ -0,0 +1,24 @@
+<!doctype html>
+<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="clip-path-svg-text-backdrop-filter-ref.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/fonts/ahem.css" />
+<style>
+.masked {
+  width: 500px;
+  height: 300px;
+  clip-path: url(#svgPath);
+  backdrop-filter: invert(100%);
+  background: transparent;
+}
+#svgText {
+  font: 100px/1 Ahem;
+}
+</style>
+<div class="masked"></div>
+<svg>
+  <clipPath id="svgPath">
+    <text id="svgText" x="10" y="100">Text</text>
+  </clipPath>
+</svg>