Correct painting order of SVG mask and mask-based clip-path

In paint properties, if both mask and mask-based clip-path exist, we
make the ClipPathMask effect node as a child of Mask node, which
requires us to paint mask before clip-path mask. The latter applies on
the former to create an intersection of the masks, then the intersection
will be applied to the masked content.

Previously the clip-path mask was painted before the mask, and the
former applies to a transparent backdrop which had no effect.

Bug: 1155384
Change-Id: Ic40c8254193c141a286c4b323515fabf8a76e11a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2583154
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#835813}

third_party/blink/renderer/core/paint/scoped_svg_paint_state.cc

@@ -34,12 +34,18 @@
 namespace blink {
 
 ScopedSVGPaintState::~ScopedSVGPaintState() {
+  // Paint mask before clip path as mask because if both exist, the ClipPathMask
+  // effect node is a child of the Mask node (see object_paint_properties.h for
+  // the node hierarchy), to ensure the clip-path mask will be applied to the
+  // mask to create an intersection of the masks, then the intersection will be
+  // applied to the masked content.
+  if (should_paint_mask_)
+    SVGMaskPainter::Paint(paint_info_.context, object_, display_item_client_);
+
   if (should_paint_clip_path_as_mask_image_) {
     ClipPathClipper::PaintClipPathAsMaskImage(
         paint_info_.context, object_, display_item_client_, PhysicalOffset());
   }
-  if (should_paint_mask_)
-    SVGMaskPainter::Paint(paint_info_.context, object_, display_item_client_);
 }
 
 void ScopedSVGPaintState::ApplyEffects() {

third_party/blink/web_tests/external/wpt/css/css-masking/clip-path-svg-content/mask-and-nested-clip-path.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:link rel="help" href="https://www.w3.org/TR/css-masking-1/"/>
+  <html:link rel="help" href="https://crbug.com/1155384"/>
+  <html:link rel="match" href="reference/mask-and-nested-clip-path-ref.svg"/>
+  <mask id="mask">
+    <rect x="0" y="0" width="200" height="200" fill="white" />
+  </mask>
+  <clipPath id="nested-clip-path">
+    <rect x="100" y="0" width="300" height="300" />
+  </clipPath>
+  <clipPath id="clip-path" clip-path="url(#nested-clip-path)">
+    <rect x="0" y="100" width="300" height="300" />
+  </clipPath>
+  <rect x="0" y="0" width="300" height="300" fill="red" mask="url(#mask)" clip-path="url(#clip-path)"/>
+  <rect x="100" y="100" width="100" height="100" fill="green"/>
+</svg>

third_party/blink/web_tests/external/wpt/css/css-masking/clip-path-svg-content/reference/mask-and-nested-clip-path-ref.svg

+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="100" y="100" width="100" height="100" fill="green"/>
+</svg>