[cascade] Correct order for -webkit-mask-image/composite

It's a bit weird, and possibly a bug, but -webkit-mask-composite has no
effect unless a -webkit-mask-image has already been applied. We have one
test that relies on this (referenced), so to make that test happy, always
apply -webkit-mask-image first.

TEST=fast/backgrounds/mask-composite.html
BUG=947004

Change-Id: I7221c9cee568047b393b24af9c28ce13a1db388c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1967183
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#725667}

third_party/blink/renderer/core/css/resolver/style_cascade.cc

@@ -137,6 +137,10 @@ void StyleCascade::Apply(Animator& animator) {
   // border-image-* longhands that have already been applied.
   Apply(GetCSSPropertyWebkitBorderImage(), resolver);
 
+  // -webkit-mask-image needs to be applied before -webkit-mask-composite,
+  // otherwise -webkit-mask-composite has no effect.
+  Apply(GetCSSPropertyWebkitMaskImage(), resolver);
+
   // TODO(crbug.com/985031): Set bits ::Add-time to know if we need to do this.
   ApplyHighPriority(resolver);
 

third_party/blink/web_tests/VirtualTestSuites

@@ -574,7 +574,8 @@
               "fast/borders/border-image-repeat-round.html",
               "fast/borders/border-image-repeat.html",
               "fast/borders/border-image-slices.html",
-              "fast/borders/border-image-source.html"],
+              "fast/borders/border-image-source.html",
+              "fast/backgrounds/mask-composite.html"],
     "args": ["--enable-blink-features=CSSCascade"]
   },
   {