Bug 1862636 [wpt PR 42916] - Support mask-position and mask-repeat on…

… SVG content, a=testonly Automatic update from web-platform-tests Support mask-position and mask-repeat on SVG content Bug: 1496473 Change-Id: Ib1a1a7a938ee14ec610584ee587050e29afa6fd3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4995155 Commit-Queue: Fredrik Söderquist <[email protected]> Reviewed-by: Philip Rogers <[email protected]> Cr-Commit-Position: refs/heads/main@{#1219402} -- wpt-commits: 93d8a2a8b6f29b647956d2349bdc5c367c14af41 wpt-pr: 42916
dothq · Nov 19, 2023 · f7c8f64 · f7c8f64
1 parent 2f51f53
commit f7c8f64
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 4 deletions.
diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a-svg.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a-svg.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>CSS Masking: mask-position: mask positioning, SVG content</title>
+<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+<link rel="match" href="mask-position-1-ref.html">
+<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+<style type="text/css">
+  rect.frame {
+    x: -0.5px;
+    y: -0.5px;
+    width: 101px;
+    height: 101px;
+    stroke: black;
+    fill: none;
+  }
+
+  rect.masked {
+    width: 100px;
+    height: 100px;
+    fill: purple;
+    mask-image: url(support/50x50-opaque-blue.svg);
+    mask-repeat: no-repeat;
+  }
+
+  #masked1 { mask-position: right 20% bottom 70%; }
+  #masked2 { mask-position: bottom 70% right 20%; }
+  #masked3 { mask-position: right 30px bottom 25px; }
+  #masked4 { mask-position: bottom 25px right 30px; }
+</style>
+<svg height="408">
+  <g transform="translate(1 1)">
+    <rect class="masked" id="masked1"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 103)">
+    <rect class="masked" id="masked2"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 205)">
+    <rect class="masked" id="masked3"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 307)">
+    <rect class="masked" id="masked4"/>
+    <rect class="frame"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-ref.html
@@ -7,8 +7,8 @@
     <link rel="author" title="Mozilla" href="https://www.mozilla.org">
     <style type="text/css">
       div.outer {
-        width: 128px;
-        height: 128px;
+        width: 115px;
+        height: 115px;
         position: relative;
         border: 1px solid black;
       }

diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-svg.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-svg.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Masking: mask-repeat: repeated mask layer image, SVG content</title>
+<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+<link rel="match" href="mask-repeat-1-ref.html">
+<meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+<style type="text/css">
+  svg {
+    display: block;
+  }
+
+  rect.frame {
+    x: -0.5px;
+    y: -0.5px;
+    width: 116px;
+    height: 116px;
+    stroke: black;
+    fill: none;
+  }
+
+  rect.masked {
+    width: 115px;
+    height: 115px;
+    fill: purple;
+    mask-image: url(support/50x50-opaque-blue.svg);
+    mask-position: left top;
+  }
+
+  #no-repeat {
+    mask-repeat: no-repeat no-repeat;
+  }
+  #repeat {
+    mask-repeat: repeat repeat;
+  }
+  #repeat-x {
+    mask-repeat: repeat no-repeat;
+  }
+  #repeat-y {
+    mask-repeat: no-repeat repeat;
+  }
+</style>
+<svg height="585">
+  <g transform="translate(1 1)">
+    <rect class="masked"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 118)">
+    <rect class="masked" id="no-repeat"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 235)">
+    <rect class="masked" id="repeat"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 352)">
+    <rect class="masked" id="repeat-x"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 469)">
+    <rect class="masked" id="repeat-y"/>
+    <rect class="frame"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1.html
@@ -10,8 +10,8 @@
     <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
     <style type="text/css">
       div {
-        width: 128px;
-        height: 128px;
+        width: 115px;
+        height: 115px;
       }
 
       div.outer {

diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-svg.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-svg.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Masking: mask-repeat: repeated mask layer image, SVG content</title>
+<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+<link rel="match" href="mask-repeat-2-ref.html">
+<meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+<style type="text/css">
+  rect.frame {
+    x: -0.5px;
+    y: -0.5px;
+    width: 129px;
+    height: 129px;
+    stroke: black;
+    fill: none;
+  }
+
+  rect.masked {
+    width: 128px;
+    height: 128px;
+    fill: purple;
+    mask-image: url(support/50x50-opaque-blue.svg);
+    mask-position: left top;
+  }
+
+  #space {
+    mask-repeat: space;
+  }
+  #space-x {
+    mask-repeat: space no-repeat;
+  }
+  #space-y {
+    mask-repeat: no-repeat space;
+  }
+</style>
+<svg height="390">
+  <g transform="translate(1 1)">
+    <rect class="masked" id="space"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 131)">
+    <rect class="masked" id="space-x"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 261)">
+    <rect class="masked" id="space-y"/>
+    <rect class="frame"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-svg.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-svg.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Masking: mask-repeat: repeated mask layer image, SVG content</title>
+<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+<link rel="match" href="mask-repeat-3-ref.html">
+<meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+<style type="text/css">
+  rect.frame {
+    x: -0.5px;
+    y: -0.5px;
+    width: 151px;
+    height: 151px;
+    stroke: black;
+    fill: none;
+  }
+
+  rect.masked {
+    width: 150px;
+    height: 150px;
+    fill: purple;
+    mask-image: url(support/50x50-opaque-blue.svg);
+    mask-position: left top;
+  }
+
+  #round {
+    mask-repeat: round;
+  }
+  #round-x {
+    mask-repeat: round no-repeat;
+  }
+  #round-y {
+    mask-repeat: no-repeat round;
+  }
+</style>
+<svg height="456">
+  <g transform="translate(1 1)">
+    <rect class="masked" id="round"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 153)">
+    <rect class="masked" id="round-x"/>
+    <rect class="frame"/>
+  </g>
+  <g transform="translate(1 305)">
+    <rect class="masked" id="round-y"/>
+    <rect class="frame"/>
+  </g>
+</svg>