diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-masking/mask-image')
146 files changed, 4538 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1-ref.html new file mode 100644 index 0000000000..3925bd4f1d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-clip reference</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + position: absolute; + top: 10px; + background-color: purple; + } + + div.border { + left: 10px; + margin: 1px 4px; + width: 60px; + height: 25px; + } + + div.padding { + left: 110px; + margin: 9px 10px; + width: 52px; + height: 17px; + } + + div.content { + left: 210px; + margin: 15px 13px; + width: 40px; + height: 11px; + } + + div.no-clip { + left: 310px; + margin: 1px 4px; + width: 100px; + height: 25px; + } + </style> + </head> + <body> + <div class="color border"></div> + <div class="color padding"></div> + <div class="color content"></div> + <div class="color no-clip"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1.html new file mode 100644 index 0000000000..9c1448439e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-1.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-clip: clip mask image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> + <link rel="match" href="mask-clip-1-ref.html"> + <meta name="assert" content="border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes."> + <style type="text/css"> + div.outer { + /* + * content box: 40 x 20 + * padding box: 52 x 38 + * border box: 60 x 50 + * margin box: 66 x 54 + */ + background-color: purple; + position: absolute; + top: 10px; + margin: 1px 2px 3px 4px; + border: solid transparent; + border-width: 8px 2px 4px 6px; + padding: 6px 9px 12px 3px; + width: 40px; + height: 20px; + } + + div.mask { + mask-size: 100% 100%; + mask-origin: border-box; + mask-image: url(support/transparent-100x50-blue-100x50.svg); + } + + div.border { + left: 10px; + mask-clip: border-box; + } + + div.padding { + left: 110px; + mask-clip: padding-box; + } + + div.content { + left: 210px; + mask-clip: content-box; + } + + div.no-clip { + background-color: yellow; + left: 310px; + mask-clip: no-clip; + } + + div.no-clip-inner { + background-color: purple; + position: absolute; + /* allign with border area of the parent*/ + top: -8px; + left: -6px; + width: 100px; + height: 50px; + } + + </style> + </head> + <body> + <div class="outer mask border"></div> + <div class="outer mask padding"></div> + <div class="outer mask content"></div> + <div class="outer mask no-clip"> + <div class="no-clip-inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2-ref.html new file mode 100644 index 0000000000..5b72b6b942 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-clip reference</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + </style> + </head> + <body> + <svg width="200" height="200" style="left: 10px;"> + <rect x="20" y="20" width="100" height="100" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 220px;"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect x="50" y="50" width="50" height="50" fill="green"/> + <rect x="60" y="60" width="40" height="40" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2.html new file mode 100644 index 0000000000..2953723ea2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-clip-2.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-clip: clip mask image</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> + <link rel="match" href="mask-clip-2-ref.html"> + <meta name="assert" content="fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes."> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + + rect.mask { + fill: blue; + mask-origin: fill-box; + mask-repeat: no-repeat; + mask-image: url(support/50x50-opaque-blue.svg); + } + + rect.view { + mask-clip: view-box; + } + + rect.fill { + mask-clip: fill-box; + } + + rect.stroke { + mask-clip: stroke-box; + } + </style> + </head> + <body> + <svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;"> + <rect class="view mask" x="110" y="110" width="50" height="100"/> + </svg> + <svg width="200" height="200" style="left: 220px;"> + <rect class="fill mask" x="50" y="50" width="150" height="150"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect class="stroke mask" x="50" y="50" width="100" height="100" stroke="green" stroke-width="20"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1-ref.html new file mode 100644 index 0000000000..9249622cc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-composite reference</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.add { + left: 10px; + background-image: url(support/blue-100x50-transparent-100x50.svg); + } + + div.intersect { + left: 230px; + background-image: url(support/blue-100x50-transparent-100x50.svg); + } + </style> + </head> + <body> + <div class="add"></div> + <div class="intersect"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1a.html new file mode 100644 index 0000000000..795e52b8ae --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1a.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose vector image</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-1-ref.html"> + <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1b.html new file mode 100644 index 0000000000..be158c923b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1b.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose raster image</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-1-ref.html"> + <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(support/blue-100x50-transparent-100x50.png), + url(support/blue-100x50-transparent-100x50.png); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1c.html new file mode 100644 index 0000000000..0eb098d1b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1c.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose svg mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-1-ref.html"> + <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value."> + <svg height="0"> + <mask id="rectMask" x="0" y="0" width="100" height="100" > + <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(#rectMask), + url(#rectMask); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1d.html new file mode 100644 index 0000000000..efd26ecb3d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-1d.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose vector image</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-1-ref.html"> + <meta name="assert" content="Test checks that whether mask-composite is filled automatically according to the number of mask layers."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.add { + left: 10px; + mask-composite: add; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg); + } + + div.intersect { + left: 120px; + mask-composite: intersect; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/transparent-100x50-blue-100x50.svg), + linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%); + } + + div.subtract { + left: 230px; + mask-composite: subtract; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg), + url(support/blue-100x50-transparent-100x50.svg); + } + + div.exclude { + left: 340px; + mask-composite: exclude; + mask-image: url(support/transparent-100x50-blue-100x50.svg), + linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%), + url(support/blue-100x50-transparent-100x50.svg); + } + </style> + </head> + <body> + <div class="add"></div> + <div class="intersect"></div> + <div class="subtract"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2-ref.html new file mode 100644 index 0000000000..cbf91daad9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-composite reference</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.add { + left: 10px; + background-color: blue; + } + + div.subtract { + left: 120px; + background-image: url(support/blue-100x50-transparent-100x50.svg); + } + + div.exclude { + left: 340px; + background-color: blue; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="exclude"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2a.html new file mode 100644 index 0000000000..7db800814c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2a.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose vector image</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-2-ref.html"> + <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(support/blue-100x50-transparent-100x50.svg), + url(support/transparent-100x50-blue-100x50.svg); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2b.html new file mode 100644 index 0000000000..3fd983fb11 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2b.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose raster image</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-2-ref.html"> + <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(support/blue-100x50-transparent-100x50.png), + url(support/transparent-100x50-blue-100x50.png); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2c.html new file mode 100644 index 0000000000..2b26e9ac66 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-composite-2c.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-composite: compose SVG mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite"> + <link rel="match" href="mask-composite-2-ref.html"> + <meta name="assert" content="Test checks that svg-mask can be composed correctly by different mask-composite value."> + <svg height="0"> + <mask id="rectMask1" x="0" y="0" width="100" height="100" > + <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="rectMask2" x="0" y="0" width="100" height="100" > + <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top:10px; + mask-image: url(#rectMask1), + url(#rectMask2); + } + + div.add { + left: 10px; + mask-composite: add; + } + + div.subtract { + left: 120px; + mask-composite: subtract; + } + + div.intersect { + left: 230px; + mask-composite: intersect; + } + + div.exclude { + left: 340px; + mask-composite: exclude; + } + </style> + </head> + <body> + <div class="add"></div> + <div class="subtract"></div> + <div class="intersect"></div> + <div class="exclude"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1-ref.html new file mode 100644 index 0000000000..2800844061 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1a.html new file mode 100644 index 0000000000..62e00660a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1a.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-1-ref.html"> + <meta name="assert" content="Test checks whether image as mask layer works correctly or not."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-png { + mask-image: url(support/transparent-100x50-blue-100x50.png); + } + </style> + </head> + <body> + <div class="mask-by-png"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1b.html new file mode 100644 index 0000000000..9bf74102f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1b.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-1-ref.html"> + <meta name="assert" content="Test checks whether SVG image as mask layer works correctly or not."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-svg { + mask-image: url(support/transparent-100x50-blue-100x50.svg); + } + </style> + </head> + <body> + <div class="mask-by-svg"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1c.html new file mode 100644 index 0000000000..1328d06c95 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1c.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-1-ref.html"> + <meta name="assert" content="Test checks whether SVG mask element as mask layer works correctly or not."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-svg-mask { + mask-image: url(support/mask-half-transparent-100x100.svg#mask); + } + </style> + </head> + <body> + <div class="mask-by-svg-mask"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1d.html new file mode 100644 index 0000000000..11f0ae7d93 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-1d.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-1-ref.html"> + <meta name="assert" content="Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document."> + </head> + <body> + <svg width="100" height="100"> + <rect x="0" y="0" width="100" height="50" fill="purple" mask="url(#foo)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2-ref.html new file mode 100644 index 0000000000..db949934e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-image: linear-gradient(rgba(128,0,128,0), rgba(128,0,128,1)); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div></div> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2.html new file mode 100644 index 0000000000..a071cff3fa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-2-ref.html"> + <meta name="assert" content="Test checks whether gradient CSS image as mask layer works correctly or not."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-gradient-1 { + mask-image: linear-gradient(rgba(0,0,255,0), rgba(0,0,255,1)); /* blue gradient mask */ + } + + div.mask-by-gradient-2 { + mask-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); /* red gradient mask */ + } + </style> + </head> + <body> + <div class="mask-by-gradient-1"></div> + <div class="mask-by-gradient-2"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3-ref.html new file mode 100644 index 0000000000..ec29e333c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: multiple SVG masks</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <svg height="0"> + <mask id="mask" x="0" y="0" width="1" height="1"> + <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/> + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask: url(#mask); + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3a.html new file mode 100644 index 0000000000..b3a6d39650 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3a.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: multiple SVG masks</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask as mask layer works correctly or not."> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="mask2" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask-image: url(#mask1), url(#mask2); + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3b.html new file mode 100644 index 0000000000..bd805cde97 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3b.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg), url(#mask1); + mask-repeat: no-repeat, repeat; + mask-position: 0 0, 0 0; + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3c.html new file mode 100644 index 0000000000..32bd4454d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3c.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask-image: url(#mask1), url(support/50x50-opaque-blue.svg); + mask-repeat: repeat-x, no-repeat; + mask-position: 0 0, 0 0; + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3d.html new file mode 100644 index 0000000000..f1ef1be709 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3d.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <svg height="0"> + <mask id="mask1" x="10%" y="10%" width="0.8" height="0.8" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask: url(#mask1), url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat, no-repeat; + mask-position: 0 0, 0 0; + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3e.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3e.html new file mode 100644 index 0000000000..15223e34d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3e.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div.outter { + margin: 0px; + padding: 0px; + width: 200px; + height: 200px; + transform: translate(-10px, -10px); + } + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg), url(#mask1); + mask-repeat: no-repeat, repeat; + mask-position: 0 0, 0 0; + /*mask: url(#mask1);*/ + width: 100px; + height: 100px; + transform: translate(10px, 10px); + } + </style> + + </head> + <body> + <div class="outter"> + <div class="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3f.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3f.html new file mode 100644 index 0000000000..e925105baa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3f.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: SVG masks apply on border area</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not."> + <svg height="0"> + <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse"> + <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse"> + <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: red; + mask-image: url(#mask1), url(#mask2); + box-shadow: 0 0 0 100px purple; + width: 100px; + height: 100px; + position: relative; + left: 100px; + top: 100px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3g.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3g.html new file mode 100644 index 0000000000..1236c0c334 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3g.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: SVG masks apply on border area</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether apply transfrom to a SVG mask layer works correctly or not."> + <svg height="0"> + <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse"> + <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse"> + <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div.outter { + margin: 0px; + padding: 0px; + width: 200px; + height: 200px; + transform: translate(-10px, -20px); + } + div.inner { + background-color: red; + mask-image: url(#mask1), url(#mask2); + mask-repeat: no-repeat, no-repeat; + box-shadow: 0 0 0 100px purple; + position: relative; + width: 100px; + height: 100px; + left: 100px; + top: 100px; + transform: translate(10px, 20px); + } + </style> + </head> + <body> + <div class="outter"> + <div class="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3h.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3h.html new file mode 100644 index 0000000000..37608bfe20 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3h.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path in SVG mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether clip-path in SVG mask works correctly or not."> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="mask2" x="0" y="0" width="1" height="1" > + <rect x="25" y="25" width="50" height="50" style="stroke:none; fill: #ffffff" clip-path="circle(50% at 50% 50%)"/> + </mask> + </svg> + <style type="text/css"> + div { + background-color: purple; + mask-image: url(#mask1), url(#mask2); + width: 100px; + height: 100px; + } + </style> + + </head> + + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3i.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3i.html new file mode 100644 index 0000000000..f7ecf9e691 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-3i.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: interleave SVG mask with image mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-3-ref.html"> + <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not."> + <svg height="0"> + <mask id="mask1" x="0" y="0" width="1" height="1" > + <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + rect { + fill: purple; + mask-image: url(#mask1), url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat, no-repeat; + } + </style> + + </head> + + <body> + <br> + <svg width="100" height="100"> + <rect x="0" y="0" width="100" height="100"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4a.html new file mode 100644 index 0000000000..bffcedae9a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4a.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: unresovlable mask url</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="/css/reference/blank.html"> + <meta name="assert" content="Test checks non-existent url should be counted as an image layer of transparent black."> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-png { + mask-image: url(non-existent.png); + } + </style> + </head> + <body> + <div class="mask-by-png"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4b.html new file mode 100644 index 0000000000..b05232a1e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-4b.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: unresovlable mask url</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="/css/reference/blank.html"> + <meta name="assert" content="Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black."> + <svg height="0"> + <clipPath id="clip1"> + <circle cx="50" cy="50" r="25"/> + </clipPath> + </svg> + <style type="text/css"> + div { + background-color: purple; + width: 100px; + height: 100px; + } + + div.mask-by-reference { + mask-image: url(#clip1); + } + </style> + </head> + <body> + <div class="mask-by-reference"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5-ref.html new file mode 100644 index 0000000000..19a251ef0f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: data url mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-color: purple; + width: 50px; + height: 50px; + } + </style> + </head> + <body> + <div/> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5.html new file mode 100644 index 0000000000..d98ddf8de5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-5.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: data url mask</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-5-ref.html"> + <meta name="assert" content="Test checks handling data url mask correctly."> + <style type="text/css"> + div { + background-color: purple; + width: 50px; + height: 50px; + } + div.mask-by-data-url { + /* a 50x50 opaque blue rect */ + mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjAiIHk9IjAiICB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9ImJsdWUiIGZpbGwtb3BhY2l0eT0iMSIvPgo8L3N2Zz4K"); + } + </style> + </head> + <body> + <div class="mask-by-data-url"/> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6-ref.html new file mode 100644 index 0000000000..d85e075fd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask on inline element</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + width: 100px; + height: 100px; + font-size: 100px; + line-height: 100px; + } + + div.mask-by-png { + mask-image: url(support/transparent-100x50-blue-100x50.png); + } + </style> + </head> + <body> + <div class="mask-by-png">A</div> + <div class="mask-by-png">B</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6.html new file mode 100644 index 0000000000..ac31e4cf4e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-6.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask on inline element</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-image-6-ref.html"> + <meta name="assert" content="Test checks whether mask on inline elemnt works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + span { + font-size: 100px; + line-height: 100px; + mask-image: url(support/transparent-100x50-blue-100x50.png); + mask-position: center; + mask-repeat: repeat; + } + + </style> + </head> + <body> + <div> + <span>A B</span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude-ref.html new file mode 100644 index 0000000000..5d82c5cf27 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS test reference</title> +<style> + div { + width: 100px; + height: 100px; + border: 10px solid green; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude.html new file mode 100644 index 0000000000..375fe2de23 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-clip-exclude.html @@ -0,0 +1,19 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1697311"> +<link rel="author" href="" title="Ana Tudor"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="mask-image-clip-exclude-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-1764"> +<title>mask-image + mask-clip + mask-composite: exclude on different background boxes</title> +<style> +div { + display: inline-block; + width: 100px; + height: 100px; + padding: 10px; + background: linear-gradient(green, green) border-box; + mask: linear-gradient(red, red) content-box exclude, linear-gradient(red, red); +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-data-url-image.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-data-url-image.html new file mode 100644 index 0000000000..aac59f3c4a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-data-url-image.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(data:...)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-data-url-image-ref.html"> +<meta name="assert" content="mask-image can use a data: URL as an image"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: blue; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid blue; + background: green; + mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGDwAQAAUQBNt+pgmgAAAABJRU5ErkJggg==); /* 1x1 black with 30% transparency */ +} +</style> +<p>The test passes if there is a blue-ish square with a 20px green border around it and a 40px blue-green-ish border around that.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split-2.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split-2.html new file mode 100644 index 0000000000..94c653a5c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split-2.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image on a fragmented inline</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ib-split-2-ref.html"> +<meta name="assert" content="mask-image applies to all fragments"> +<style> + columns { + display: block; + columns: 5; + column-fill: auto; + column-gap: 10px; + height: 30px; + background: pink; + } + div { background: grey; height: 50px; } + x { + background: grey; + mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABqklEQVRYhdXZMa6DMAwAUCOxcQAEF0BIzgG6MTEiJcfhItys1yhrl/oP8AvFScP/BJJUYmlR8mo7BgKAgw9JHEiJkRQ+Pw8xksTBxRzHYBJfJPFFStDXYznvGjhJHHbB9sHdg6cI4tMJco2dxnQDJol3OxB7kuJGqi6ozTNq84xUXUzfYb8juveDSPH4imvzjAAS6zgAyYT/gpbi4RiJPTWQ/mtQAKAGUiP4r1gjsqvKPRG0jg+QUFeVh7Ak8e46isa5TNG11ay+/WDvIorGOQEShrW1r/lq8vnvTogkm7eBVJPFp/5kXTS7qjwb+Z5/W7OmqF6dcja/oQS2yMFHyhlWVwLrqJIS4zaaVyMXC+sC4/LjNu1tnnmDtnlmTD+DXlibDAqQaKG8Pv2l/fejWVQDr08pbt6hUtxYnfImXxfeoaouWPNnUI8L6Q3dLqi4oeGmPpbFFEt7Aoik4WuhwV5CI7opieM2b8aGf+M8Q+N4FAGI5OEOIKLH5Rkb/gbEgo1gS8eKDWmTzI6dwSFsOy7YCDZyV9jwt8YZOOSXDVpwyK9vrPATX4j9ALzDM3y+40zWAAAAAElFTkSuQmCC); + } + .end { mask-position:100% 100%; mask-repeat: no-repeat; } +</style> +<body><columns><x><div></div></x></columns><columns><x class="end"><div></div></x></columns></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split.html new file mode 100644 index 0000000000..dab941b111 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-ib-split.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image on an inline with a block inside split by a columnset</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ib-split-ref.html"> +<meta name="assert" content="mask-image applies to the block child"> +<style> + body { column-width: 40px; column-gap: 0; } + div { padding-inline-start: 40px; margin: 1em 0; border-bottom-style: solid; } + span { margin-inline-end: -2px; } + x { mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGDwAQAAUQBNt+pgmgAAAABJRU5ErkJggg==); } +</style> +<body><x><span></span><div></div></x></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-child-will-change.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-child-will-change.html new file mode 100644 index 0000000000..248589d54d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-child-will-change.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image on svg with child with will-change: transform</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-svg-child-will-change-ref.html"> +<style> +svg { + /* The image is 200x200 with 100x100 opaque pixels at the center */ + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAABNklEQVR42u3TyQ0AMAgEMUj/PS895IWQ3QHHVAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/6yiBJ4pyLHqv7xG89pwSBgEBAICAQEAgIBAQCAgGBAAIBgYBAQCAgEBAICAQEAgIBgQACAYGAQEAgIBAQCAgEBAICAQQCAgGBgEBAICAQEAgIBAQCAgEEAgIBgYBAQCAgEBAICAQEAggEBAICAYGAQEAgIBAQCAgEBAIIBAQCAgGBgEBAICAQEAgIBBAICAQEAgIBgYBAQCAgEBAICAQQCAgEBAICAYGAQEAgIBAQCAjECkAgIBAQCAgEBAICAYGAQEAggEBAICAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAthrrbgTIalbwsQAAAABJRU5ErkJggg==); + mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAABNklEQVR42u3TyQ0AMAgEMUj/PS895IWQ3QHHVAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/6yiBJ4pyLHqv7xG89pwSBgEBAICAQEAgIBAQCAgGBAAIBgYBAQCAgEBAICAQEAgIBgQACAYGAQEAgIBAQCAgEBAICAQQCAgGBgEBAICAQEAgIBAQCAgEEAgIBgYBAQCAgEBAICAQEAggEBAICAYGAQEAgIBAQCAgEBAIIBAQCAgGBgEBAICAQEAgIBBAICAQEAgIBgYBAQCAgEBAICAQQCAgEBAICAYGAQEAgIBAQCAjECkAgIBAQCAgEBAICAYGAQEAggEBAICAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAthrrbgTIalbwsQAAAABJRU5ErkJggg==); + width: 100px; + height: 100px; + border: 50px solid red; + background: green; +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<svg> + <rect style="will-change: transform"> +</svg> + diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image-hash.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image-hash.html new file mode 100644 index 0000000000..b1efc90818 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image-hash.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(image.svg#hash)</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ref.html"> +<meta name="assert" content="mask-image can use an SVG file as an image with element reference"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: red; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid red; + background: green; + mask-image: url(support/image-with-ref.svg#ref); +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image.html new file mode 100644 index 0000000000..40a1ff9b28 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-image.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(image.svg)</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ref.html"> +<meta name="assert" content="mask-image can use an SVG file as an image"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: red; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid red; + background: green; + mask-image: url(support/image.svg); +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-local-mask.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-local-mask.html new file mode 100644 index 0000000000..18abc54f85 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-local-mask.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(#local-mask)</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ref.html"> +<meta name="assert" content="mask-image can use local reference to a <mask> element"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: red; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid red; + background: green; + mask-image: url(#localmask); +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="back"></div><div id="front"></div> +<svg viewBox="0 0 200 200" style="width: 0; height: 0"> + <mask id="localmask"> + <rect x="50" y="50" width="100" height="100" fill="white"> + </mask> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-remote-mask.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-remote-mask.html new file mode 100644 index 0000000000..f3f2eefaa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-url-remote-mask.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image: url(remote.svg#mask)</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image"> +<link rel="match" href="reference/mask-image-ref.html"> +<meta name="assert" content="mask-image can use reference to a <mask> element from a remote SVG document"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: red; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid red; + background: green; + mask-image: url(support/mask.svg#mask); +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-a.html new file mode 100644 index 0000000000..38977a0aad --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-a.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with vector image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> + <link rel="match" href="mask-mode-ref.html"> + <meta name="assert" content="Test checks that mask an SVG image referenced by mask-image is correct with different mask mode."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + mask-mode: match-source; + mask-image: url(support/blue-100x100.svg); + } + + div.alpha { + left: 120px; + mask-mode: alpha; + mask-image: url(support/blue-100x100.svg); + } + + div.luminance1 { + left: 230px; + mask-mode: luminance; + mask-image: url(support/blue-100x100.svg); + } + + div.luminance2 { + left: 340px; + mask-mode: luminance; + mask-image: url(support/red-100x100.svg); + } + + div.luminance3 { + left: 450px; + mask-mode: luminance; + mask-image: url(support/green-100x100.svg); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-b.html new file mode 100644 index 0000000000..e5c11e9bf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-b.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with raster image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> + <link rel="match" href="mask-mode-ref.html"> + <meta name="assert" content="Test checks that mask a PNG image referenced by mask-image is correct with different mask mode."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + mask-mode: match-source; + mask-image: url(support/blue-100x100.png); + } + + div.alpha { + left: 120px; + mask-mode: alpha; + mask-image: url(support/blue-100x100.png); + } + + div.luminance1 { + left: 230px; + mask-mode: luminance; + mask-image: url(support/blue-100x100.png); + } + + div.luminance2 { + left: 340px; + mask-mode: luminance; + mask-image: url(support/red-100x100.png); + } + + div.luminance3 { + left: 450px; + mask-mode: luminance; + mask-image: url(support/green-100x100.png); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-c.html new file mode 100644 index 0000000000..1d7eeba2aa --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-c.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with raster image</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> + <link rel="match" href="mask-mode-ref.html"> + <meta name="assert" content="Test checks that mask a PNG image referenced by mask-image is correct with different mask mode."> + <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-11800"> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + mask-mode: match-source; + mask-image: linear-gradient(blue 0%, blue 100%); + } + + div.alpha { + left: 120px; + mask-mode: alpha; + mask-image: linear-gradient(blue 0%, blue 100%); + } + + div.luminance1 { + left: 230px; + mask-mode: luminance; + mask-image: linear-gradient(blue 0%, blue 100%); + } + + div.luminance2 { + left: 340px; + mask-mode: luminance; + mask-image: linear-gradient(red 0%, red 100%); + } + + div.luminance3 { + left: 450px; + mask-mode: luminance; + mask-image: linear-gradient(lime 0%, lime 100%); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-d.html new file mode 100644 index 0000000000..f36f032f52 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-d.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with raster image</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> + <link rel="match" href="mask-mode-ref.html"> + <meta name="assert" content="Test checks that whether mask-mode is filled automatically according to the number of mask layers."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + mask-mode: match-source; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(blue 0%, blue 100%); + } + + div.alpha { + left: 120px; + mask-mode: alpha alpha; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(blue 0%, blue 100%); + } + + div.luminance1 { + left: 230px; + mask-mode: luminance; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(blue 0%, blue 100%); + } + + div.luminance2 { + left: 340px; + mask-mode: luminance; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(red 0%, red 100%); + } + + div.luminance3 { + left: 450px; + mask-mode: luminance; + mask-image: linear-gradient(black 0%, black 100%), linear-gradient(lime 0%, lime 100%); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-ref.html new file mode 100644 index 0000000000..0f7dbd571f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-mode reference</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-color: white; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + background-image: url(support/blue-100x100.svg); + } + + div.alpha { + left: 120px; + background-image: url(support/blue-100x100.svg); + } + + div.luminance1 { + left: 230px; + background-image: url(support/blue-luminance-100x100.svg); + } + + div.luminance2 { + left: 340px; + background-image: url(support/red-luminance-100x100.svg); + } + + div.luminance3 { + left: 450px; + background-image: url(support/green-luminance-100x100.svg); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type-ref.html new file mode 100644 index 0000000000..2b5e1fd3e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS mask-mode reference</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.match-luminance { + left: 10px; + background-image: url(support/blue-luminance-100x100.svg); + } + + div.match-alpha { + left: 120px; + background-image: url(support/blue-100x100.svg); + } + + div.luminance-luminance { + top: 120px; + left: 10px; + background-image: url(support/blue-luminance-100x100.svg); + } + + div.luminance-alpha { + top: 120px; + left: 120px; + background-image: url(support/blue-luminance-100x100.svg); + } + + div.alpha-luminance { + top: 230px; + left: 10px; + background-image: url(support/blue-100x100.svg); + } + + div.alpha-alpha { + top: 230px; + left: 120px; + background-image: url(support/blue-100x100.svg); + } + </style> + + </head> + <body> + <div class="match-luminance"></div> + <div class="match-alpha"></div> + <div class="luminance-luminance"></div> + <div class="luminance-alpha"></div> + <div class="alpha-luminance"></div> + <div class="alpha-alpha"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type.html new file mode 100644 index 0000000000..5c75ce71d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-mode-to-mask-type.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-mode with vector image</title> + <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode"> + <link rel="match" href="mask-mode-to-mask-type-ref.html"> + <meta name="assert" content="Test checks the fallback logic between mask-mode and mask-type."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.match-luminance { + left: 10px; + mask-mode: match-source; + mask-image: url("#svg-luminance"); + } + + div.match-alpha { + left: 120px; + mask-mode: match-source; + mask-image: url("#svg-alpha"); + } + + div.luminance-luminance { + top: 120px; + left: 10px; + mask-mode: luminance; + mask-image: url("#svg-luminance"); + } + + div.luminance-alpha { + top: 120px; + left: 120px; + mask-mode: luminance; + mask-image: url("#svg-alpha"); + } + + div.alpha-luminance { + top: 230px; + left: 10px; + mask-mode: alpha; + mask-image: url("#svg-luminance"); + } + + div.alpha-alpha { + top: 230px; + left: 120px; + mask-mode: alpha; + mask-image: url("#svg-alpha"); + } + + #svg-luminance { + mask-type: luminance; + } + + #svg-alpha { + mask-type: alpha; + } + </style> + </head> + <body> + <div class="match-luminance"></div> + <div class="match-alpha"></div> + <div class="luminance-luminance"></div> + <div class="luminance-alpha"></div> + <div class="alpha-luminance"></div> + <div class="alpha-alpha"></div> + <svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <mask id="svg-luminance"> + <rect x="0" y="0" width="100%" height="100%" fill="blue"/> + </mask> + <mask id="svg-alpha"> + <rect x="0" y="0" width="100%" height="100%" fill="blue"/> + </mask> + </defs> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1-ref.html new file mode 100644 index 0000000000..5def84f067 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with opacity</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 60px; + background-color: rgba(0,0,255,0.5); + width: 100px; + height: 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1a.html new file mode 100644 index 0000000000..9182371794 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1a.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with filter and opacity</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5000"> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 10px; + background-color: rgb(255,255,0); + width: 100px; + height: 100px; + filter: invert(100%); + mask-image: url(support/blue-100x50-transparent-100x50.png); + opacity: 0.5; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1b.html new file mode 100644 index 0000000000..681ec360ae --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1b.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with opacity</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5000"> + <svg height="0"> + <mask id="myMask" x="0" y="0" width="100" height="100" > + <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 10px; + background-color: rgb(0,0,255); + width: 100px; + height: 100px; + mask-image: url(support/blue-100x50-transparent-100x50.png); + opacity: 0.5; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1c.html new file mode 100644 index 0000000000..271e663e63 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1c.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: filter with opacity</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5000"> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 60px; + background-color: rgb(255,255,0); + width: 100px; + height: 50px; + filter: invert(100%); + opacity: 0.5; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1d.html new file mode 100644 index 0000000000..6f50b8f6f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1d.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with opacity</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <svg height="0"> + <mask id="myMask" x="0" y="0" width="100" height="100" > + <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/> + </mask> + </svg> + <style type="text/css"> + div { + position: absolute; + left: 10px; + top: 10px; + background-color: rgb(0,0,255); + width: 100px; + height: 100px; + mask-image: url(#myMask), url(#myMask); + opacity: 0.5; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1e.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1e.html new file mode 100644 index 0000000000..ad7aa8829e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-opacity-1e.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-image: mask with opacity</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> + <link rel="match" href="mask-opacity-1-ref.html"> + <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not."> + <style type="text/css"> + #outter { + position: absolute; + left: 10px; + top: 10px; + width: 100px; + height: 100px; + mask-image: url(support/blue-100x50-transparent-100x50.png), + url(support/blue-100x50-transparent-100x50.png); + opacity: 0.5; + } + + #inner { + width: 100px; + height: 100px; + box-sizing:border-box; + background-color: blue; + border: 1px solid transparent; + will-change: transform; + } + </style> + </head> + <body> + <div id="outter"><div id="inner"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1-ref.html new file mode 100644 index 0000000000..df7e684d2a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + border: 1px solid black; + width: 100px; + height: 100px; + position: relative; + } + + div.inner { + width: 50px; + height: 50px; + background-color: purple; + position: absolute; + } + + #border { left: 4px; top: 1px; } + #padding { left: 10px; top: 9px; } + #content { left: 13px; top: 15px; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="border"></div></div> + <div class="outer"><div class="inner" id="border"></div></div> + <div class="outer"><div class="inner" id="padding"></div></div> + <div class="outer"><div class="inner" id="content"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1.html new file mode 100644 index 0000000000..3788a5591a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-1.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin"> + <link rel="match" href="mask-origin-1-ref.html"> + <meta name="assert" content="Test checks whether setting mask position area works correctly or not."> + <style type="text/css"> + div.outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + div.inner { + /* + * content box: 60 x 60 + * padding box: 72 x 78 + * border box: 80 x 90 + * margin box: 86 x 94 + */ + margin: 1px 2px 3px 4px; + border: solid transparent; + border-width: 8px 2px 4px 6px; + padding: 6px 9px 12px 3px; + width: 60px; + height: 60px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + } + + #border { mask-origin: border-box; } + #padding { mask-origin: padding-box; } + #content { mask-origin: content-box; } + </style> + </head> + <body> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner" id="border"></div></div> + <div class="outer"><div class="inner" id="padding"></div></div> + <div class="outer"><div class="inner" id="content"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-2-ref.html new file mode 100644 index 0000000000..bbb5ef2c41 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-2-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + border: 1px solid black; + width: 125px; + height: 125px; + position: relative; + } + + div.inner { + width: 50px; + height: 50px; + background-color: purple; + position: absolute; + } + + #pos-left-auto { left: 0px; top: 22px; } + #pos-left-bottom { left: 0px; top: 44px; } + #pos-right-top { left: 36px; top: 0px; } + #pos-right-bottom { left: 36px; top: 44px; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="pos-left-auto"></div></div> + <div class="outer"><div class="inner" id="pos-left-bottom"></div></div> + <div class="outer"><div class="inner" id="pos-right-top"></div></div> + <div class="outer"><div class="inner" id="pos-right-bottom"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-2.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-2.html new file mode 100644 index 0000000000..90ee89b15d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-2.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin"> + <link rel="match" href="mask-origin-2-ref.html"> + <meta name="assert" content="Test checks whether setting mask origin to margin-box works correctly or not."> + <style type="text/css"> + div.outer { + border: 1px solid black; + width: 125px; + height: 125px; + } + + div.inner { + /* + * content box: 60 x 60 + * padding box: 72 x 78 + * border box: 80 x 90 + * margin box: 86 x 94 + */ + margin: 1px 2px 3px 4px; + border: solid red; + border-width: 8px 2px 4px 6px; + padding: 6px 9px 12px 3px; + width: 60px; + height: 60px; + position: relative; + background-color: blue; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-origin: margin-box; + } + + div.overflow { + position: absolute; + left: -10px; + top: -9px; + border: solid transparent; + border-width: 15px 13px 19px 13px; + width: 60px; + height: 60px; + background-color: purple; + } + + #pos-left-auto { mask-position: left; } + #pos-left-bottom { mask-position: left bottom; } + #pos-right-top { mask-position: right top; } + #pos-right-bottom { mask-position: right bottom; } + </style> + </head> + <body> + <div class="outer"> + <div class="inner" id="pos-left-auto"> + <div class="overflow"></div> + </div> + </div> + <div class="outer"> + <div class="inner" id="pos-left-bottom"> + <div class="overflow"></div> + </div> + </div> + <div class="outer"> + <div class="inner" id="pos-right-top"> + <div class="overflow"></div> + </div> + </div> + <div class="outer"> + <div class="inner" id="pos-right-bottom"> + <div class="overflow"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3-ref.html new file mode 100644 index 0000000000..0271998a29 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + </style> + </head> + <body> + <svg width="200" height="200" style="left: 10px;"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 240px;"> + <rect x="50" y="50" width="50" height="50" fill="green"/> + <rect x="60" y="60" width="40" height="40" fill="blue"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect x="60" y="40" width="50" height="50" fill="green"/> + <rect x="80" y="60" width="30" height="30" fill="blue"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3.html new file mode 100644 index 0000000000..eade316b3d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-origin-3.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-origin: mask positioning area</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin"> + <link rel="match" href="mask-origin-3-ref.html"> + <meta name="assert" content="Test checks whether setting mask position area works correctly or not."> + <style type="text/css"> + svg { + position: absolute; + top: 10px; + border: 1px solid black; + } + rect.mask { + fill: blue; + mask-origin: fill-box; + mask-clip: fill-box; + mask-repeat: no-repeat; + mask-image: url(support/50x50-opaque-blue.svg); + } + + rect.view { + mask-origin: view-box; + mask-clip: view-box; + } + + rect.fill { + mask-origin: fill-box; + mask-clip: stroke-box; + } + + rect.stroke { + mask-origin: stroke-box; + mask-clip: stroke-box; + } + </style> + </head> + <body> + <svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;"> + <rect class="view mask" x="125" y="125" width="100" height="100"/> + </svg> + <svg width="200" height="200" style="left: 240px;"> + <rect class="fill mask" x="50" y="50" width="80" height="80" stroke="green" stroke-width="20"/> + </svg> + <svg width="200" height="200" style="left: 10px; top: 220px;"> + <rect class="stroke mask" x="70" y="50" width="80" height="80" stroke="green" stroke-width="20"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1-ref.html new file mode 100644 index 0000000000..e323bd3529 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; + } + + div.inner { + position: absolute; + width: 50px; + height: 50px; + background-color: purple; + } + + #inner1 { right: 10px; bottom: 35px; } + #inner2 { right: 30px; bottom: 25px; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a.html new file mode 100644 index 0000000000..cee15ee713 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1a.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <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"> + div { + width: 100px; + height: 100px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { mask-position: right 20% bottom 70%; } + #inner2 { mask-position: bottom 70% right 20%; } + #inner3 { mask-position: right 30px bottom 25px; } + #inner4 { mask-position: bottom 25px right 30px; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + <div class="outer"><div class="inner" id="inner3"></div></div> + <div class="outer"><div class="inner" id="inner4"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1b.html new file mode 100644 index 0000000000..669810e61a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1b.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <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"> + div { + width: 100px; + height: 100px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { mask-position: left 40px top 15px; } + #inner2 { mask-position: top 30% left 80%; } + #inner3 { mask-position: left 20px top 25px } + #inner4 { mask-position: top 25px left 20px; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + <div class="outer"><div class="inner" id="inner3"></div></div> + <div class="outer"><div class="inner" id="inner4"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1c.html new file mode 100644 index 0000000000..9a1671c3d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-1c.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <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"> + div { + width: 100px; + height: 100px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { mask-position: left 80% bottom 70%; } + #inner2 { mask-position: right 20% top 30%; } + #inner3 { mask-position: bottom 50% left 40%; } + #inner4 { mask-position: right 60% top 50%; } + </style> + </head> + <body> + <div class="outer"><div class="inner" id="inner1"></div></div> + <div class="outer"><div class="inner" id="inner2"></div></div> + <div class="outer"><div class="inner" id="inner3"></div></div> + <div class="outer"><div class="inner" id="inner4"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2-ref.html new file mode 100644 index 0000000000..46be4b8b08 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + #inner { + margin-left: 20px; + margin-top: 20px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2a.html new file mode 100644 index 0000000000..d8427338d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2a.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-2-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left 40% bottom 60%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2b.html new file mode 100644 index 0000000000..b5f7b31051 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-2b.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-2-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: 40% 40%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3-ref.html new file mode 100644 index 0000000000..dd2630356e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + #inner { + margin-left: 25px; + margin-top: 10px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3a.html new file mode 100644 index 0000000000..17b1137f62 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3a.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-3-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left 50% bottom 80%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3b.html new file mode 100644 index 0000000000..742a65ea15 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-3b.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-3-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: center 20%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4-ref.html new file mode 100644 index 0000000000..7ddf68b28a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + #inner { + margin-left: 0px; + margin-top: 25px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4a.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4a.html new file mode 100644 index 0000000000..9d17692e83 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4a.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-4-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left center; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4b.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4b.html new file mode 100644 index 0000000000..9b46546d31 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4b.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-4-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4c.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4c.html new file mode 100644 index 0000000000..7437c0232b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4c.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-4-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: left 0% bottom 50%; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4d.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4d.html new file mode 100644 index 0000000000..e5dce03b4a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-4d.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-4-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask: url(support/50x50-opaque-blue.svg) left no-repeat; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5-ref.html new file mode 100644 index 0000000000..dc8c9ecb93 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 120px; + height: 120px; + } + + #inner1 { + margin-left: 35px; + margin-top: 0px; + width: 50px; + height: 50px; + background-color: purple; + } + + #inner2 { + margin-left: 35px; + margin-top: 20px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner1"></div> + <div id="inner2"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5.html new file mode 100644 index 0000000000..295402263d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-5.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-5-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 120px; + height: 120px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-position: top, bottom; + mask-repeat: no-repeat, no-repeat; + mask-image: url(support/50x50-opaque-blue.svg), + url(support/50x50-opaque-blue.svg); + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6-ref.html new file mode 100644 index 0000000000..b94527eb0a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + .inner { + margin-left: 20px; + margin-top: 50px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6.html new file mode 100644 index 0000000000..e4b0715c4d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-6.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-6-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + .outer { + border: 1px solid black; + } + + .outer > div { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { + mask-position: left 20px bottom 0px; + } + + #inner2 { + mask-position: left 40% bottom 0%; + } + + #inner3 { + mask-position: right 60% bottom 0%; + } + + #inner4 { + mask-position: right 30px bottom 0px; + } + </style> + </head> + <body> + <div class="outer"><div id="inner1"></div></div> + <div class="outer"><div id="inner2"></div></div> + <div class="outer"><div id="inner3"></div></div> + <div class="outer"><div id="inner4"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7-ref.html new file mode 100644 index 0000000000..c3c8d85ebd --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: position mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + .outer { + border: 1px solid black; + width: 100px; + height: 100px; + } + + .inner { + margin-left: 50px; + margin-top: 20px; + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7.html new file mode 100644 index 0000000000..d24fca5bc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-position-7.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-position: mask positioning</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position"> + <link rel="match" href="mask-position-7-ref.html"> + <meta name="assert" content="Test checks whether positioning mask layer works correctly or not."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + + .outer { + border: 1px solid black; + } + + .outer > div { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + } + + #inner1 { + mask-position: right 0% top 40%; + } + + #inner2 { + mask-position: right 0px top 20px; + } + + #inner3 { + mask-position: right 0% bottom 60%; + } + + #inner4 { + mask-position: right 0px bottom 30px; + } + </style> + </head> + <body> + <div class="outer"><div id="inner1"></div></div> + <div class="outer"><div id="inner2"></div></div> + <div class="outer"><div id="inner3"></div></div> + <div class="outer"><div id="inner4"></div></div> + </body> +</html> 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 new file mode 100644 index 0000000000..01ed86d127 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + width: 128px; + height: 128px; + position: relative; + border: 1px solid black; + } + + .color { + background-color: purple; + } + + #default { + position: absolute; + width: 50px; height: 50px; + } + + #repeat-x { + position: absolute; + width: 100%; height: 50px; + } + + #repeat-y { + position: absolute; + width: 50px; height: 100%; + } + </style> + </head> + <body> + <div class="outer color"></div> + <div class="outer"> + <div class="color" id="default"></div> + </div> + <div class="outer color"></div> + <div class="outer"> + <div class="color" id="repeat-x"></div> + </div> + <div class="outer"> + <div class="color" id="repeat-y"></div> + </div> + </body> +</html> 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 new file mode 100644 index 0000000000..a7fc586fd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-1.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <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"> + div { + width: 128px; + height: 128px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: 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> + </head> + <body> + <div class="outer"><div class="inner"></div></div> + <div class="outer"><div class="inner" id="no-repeat"></div></div> + <div class="outer"><div class="inner" id="repeat"></div></div> + <div class="outer"><div class="inner" id="repeat-x"></div></div> + <div class="outer"><div class="inner" id="repeat-y"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-ref.html new file mode 100644 index 0000000000..fa386cdac1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + width: 128px; + height: 128px; + position: relative; + border: 1px solid black; + } + + div.inner { + width: 50px; + height: 50px; + position: absolute; + background-color: purple; + } + + #pos-top-left { left: 0; top: 0; } + #pos-top-right { right: 0; top: 0; } + #pos-bottom-left { left: 0; bottom: 0; } + #pos-bottom-right { right: 0; bottom: 0; } + </style> + </head> + <body> + <div class="outer"> + <div class="inner" id="pos-top-left"></div> + <div class="inner" id="pos-top-right"></div> + <div class="inner" id="pos-bottom-left"></div> + <div class="inner" id="pos-bottom-right"></div> + </div> + <div class="outer"> + <div class="inner" id="pos-top-left"></div> + <div class="inner" id="pos-top-right"></div> + </div> + <div class="outer"> + <div class="inner" id="pos-top-left"></div> + <div class="inner" id="pos-bottom-left"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2.html new file mode 100644 index 0000000000..e349239fbf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-2.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <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"> + div { + width: 128px; + height: 128px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: 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> + </head> + <body> + <div class="outer"><div class="inner" id="space"></div></div> + <div class="outer"><div class="inner" id="space-x"></div></div> + <div class="outer"><div class="inner" id="space-y"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-ref.html new file mode 100644 index 0000000000..4d4b869ce9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div.outer { + width: 150px; + height: 150px; + border: 1px solid black; + } + + .color { + background-color: purple; + } + + #round { + width: 150px; + height: 150px; + } + + #round-x { + width: 150px; + height: 50px; + } + + #round-y { + width: 50px; + height: 150px; + } + </style> + </head> + <body> + <div class="outer"><div class="color" id="round"></div></div> + <div class="outer"><div class="color" id="round-x"></div></div> + <div class="outer"><div class="color" id="round-y"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3.html new file mode 100644 index 0000000000..cb950d4f2c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-repeat-3.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-repeat: repeated mask layer image</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <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"> + div { + width: 150px; + height: 150px; + } + + div.outer { + border: 1px solid black; + } + + div.inner { + background-color: 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> + </head> + <body> + <div class="outer"><div class="inner" id="round"></div></div> + <div class="outer"><div class="inner" id="round-x"></div></div> + <div class="outer"><div class="inner" id="round-y"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-auto.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-auto.html new file mode 100644 index 0000000000..01d55f9629 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-auto-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: auto auto; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length-ref.html new file mode 100644 index 0000000000..aa21231924 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 20px; + height: 20px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length.html new file mode 100644 index 0000000000..5ef49cc612 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-length.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-auto-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 64px; + height: 128px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: auto 20px; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-percent.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-percent.html new file mode 100644 index 0000000000..f2644bb1b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-percent.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-auto-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 64px; + height: 128px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: auto 15.625%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-ref.html new file mode 100644 index 0000000000..73e3df2703 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 50px; + height: 50px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto.html new file mode 100644 index 0000000000..6560a81ee3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-auto-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: auto; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border-ref.html new file mode 100644 index 0000000000..afbeb72f10 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 64px; + height: 64px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border.html new file mode 100644 index 0000000000..a04557639a --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-border.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-contain-clip-border-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + border: 20px solid transparent; + width: 24px; + height: 88px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-clip: border-box; + mask-origin: border-box; + mask-size: contain; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding-ref.html new file mode 100644 index 0000000000..041e48d03d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + border: 20px solid white; + width: 24px; + height: 88px; + } + + #innermost { + width: 24px; + height: 24px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"> + <div id="innermost"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding.html new file mode 100644 index 0000000000..4f321d9c58 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-clip-padding.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-contain-clip-padding-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + background-color: purple; + border: 20px solid transparent; + width: 24px; + height: 88px; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-clip: padding-box; + mask-origin: padding-box; + mask-size: contain; + } + </style> + </head> + <body> + <div id="outer"><div id="inner"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty-ref.html new file mode 100644 index 0000000000..50ab373eb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner1 { + width: 64px; + height: 32px; + } + + #inner2 { + width: 64px; + height: 64px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner1"></div> + <div id="inner2"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty.html new file mode 100644 index 0000000000..fcae5ba0ed --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-position-fifty-fifty.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-contain-position-fifty-fifty-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: contain; + mask-position: 50% 50%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-ref.html new file mode 100644 index 0000000000..a7346bfcb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 10px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 64px; + height: 64px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain.html new file mode 100644 index 0000000000..19fc42d6ec --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-contain.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-contain-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 10px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: contain; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover-ref.html new file mode 100644 index 0000000000..961019bf16 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 10px solid transparent; + width: 64px; + height: 128px; + background-clip: content-box; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover.html new file mode 100644 index 0000000000..171e11805b --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-cover.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-cover-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + #outer { + border: 10px solid black; + width: 64px; + height: 128px; + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-origin: content-box; + mask-clip: content-box; + mask-size: cover; + } + </style> + </head> + <body> + <div id="outer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-auto.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-auto.html new file mode 100644 index 0000000000..7152f6ff95 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-length-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x100-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 32px auto; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length-ref.html new file mode 100644 index 0000000000..5411da9f87 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 32px; + height: 64px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length.html new file mode 100644 index 0000000000..f9cf2cb6bc --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-length.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-length-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x100-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 32px 64px; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent-ref.html new file mode 100644 index 0000000000..26195541d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 16px; + height: 32px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent.html new file mode 100644 index 0000000000..ba5bbbc55c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length-percent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-length-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x100-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 16px 25%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length.html new file mode 100644 index 0000000000..961357e12f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-length.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-length-length-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x100-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 32px; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-auto.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-auto.html new file mode 100644 index 0000000000..603346d6e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-auto.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-percent-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 50% auto; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-length.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-length.html new file mode 100644 index 0000000000..4ac9c8e81f --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-length.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-percent-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 50% 32px; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-ref.html new file mode 100644 index 0000000000..96a3d1bdca --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + #outer { + border: 1px solid black; + width: 64px; + height: 128px; + } + + #inner { + width: 32px; + height: 32px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch-ref.html new file mode 100644 index 0000000000..2c023ec13c --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <style type="text/css"> + div { + width: 60px; + height: 120px; + } + + #outer { + border: 10px solid black; + } + + #inner { + height: 60px; + background-color: purple; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch.html new file mode 100644 index 0000000000..69f89b8a98 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent-stretch.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-percent-percent-stretch-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 60px; + height: 120px; + } + + #outer { + border: 10px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/transparent-100x50-blue-100x50.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 100% 100%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent.html new file mode 100644 index 0000000000..7b04d9b6d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent-percent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-percent-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 50% 25%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent.html new file mode 100644 index 0000000000..2e056df521 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-size-percent.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: mask-size: mask layer size</title> + <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size"> + <link rel="match" href="mask-size-percent-percent-ref.html"> + <meta name="assert" content="Test checks whether sizing mask layer works correctly or not."> + <style type="text/css"> + div { + width: 64px; + height: 128px; + } + + #outer { + border: 1px solid black; + } + + #inner { + background-color: purple; + mask-image: url(support/50x50-opaque-blue.svg); + mask-repeat: no-repeat; + mask-position: left top; + mask-size: 50%; + } + </style> + </head> + <body> + <div id="outer"> + <div id="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/1x1-black-30-alpha.png b/testing/web-platform/tests/css/css-masking/mask-image/reference/1x1-black-30-alpha.png Binary files differnew file mode 100644 index 0000000000..e334f44a03 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/1x1-black-30-alpha.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-data-url-image-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-data-url-image-ref.html new file mode 100644 index 0000000000..c2e88b3657 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-data-url-image-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>Reference: mask-image: url(data:...)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: blue; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid blue; + background: green; + mask-image: url(1x1-black-30-alpha.png); /* 1x1 black with 30% transparency */ +} +</style> +<p>The test passes if there is a blue-ish square with a 20px green border around it and a 40px blue-green-ish border around that.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-2-ref.html new file mode 100644 index 0000000000..ee28190878 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-2-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image on a fragmented inline</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + columns { + display: block; + columns: 5; + column-fill: auto; + column-gap: 10px; + height: 30px; + background: pink; + } + div { background: grey; height: 50px; } + x { + background: grey; + mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABqklEQVRYhdXZMa6DMAwAUCOxcQAEF0BIzgG6MTEiJcfhItys1yhrl/oP8AvFScP/BJJUYmlR8mo7BgKAgw9JHEiJkRQ+Pw8xksTBxRzHYBJfJPFFStDXYznvGjhJHHbB9sHdg6cI4tMJco2dxnQDJol3OxB7kuJGqi6ozTNq84xUXUzfYb8juveDSPH4imvzjAAS6zgAyYT/gpbi4RiJPTWQ/mtQAKAGUiP4r1gjsqvKPRG0jg+QUFeVh7Ak8e46isa5TNG11ay+/WDvIorGOQEShrW1r/lq8vnvTogkm7eBVJPFp/5kXTS7qjwb+Z5/W7OmqF6dcja/oQS2yMFHyhlWVwLrqJIS4zaaVyMXC+sC4/LjNu1tnnmDtnlmTD+DXlibDAqQaKG8Pv2l/fejWVQDr08pbt6hUtxYnfImXxfeoaouWPNnUI8L6Q3dLqi4oeGmPpbFFEt7Aoik4WuhwV5CI7opieM2b8aGf+M8Q+N4FAGI5OEOIKLH5Rkb/gbEgo1gS8eKDWmTzI6dwSFsOy7YCDZyV9jwt8YZOOSXDVpwyK9vrPATX4j9ALzDM3y+40zWAAAAAElFTkSuQmCC); + } + .end { mask-position:100% 100%; mask-repeat: no-repeat; } +</style> +<body><columns><x style="display:block"><div></div></x></columns><columns><x style="display:block; background: grey; height: 50px;" class="end"></x></columns></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-ref.html new file mode 100644 index 0000000000..e5c09f9449 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Reference: mask-image on an inline with a block inside split by a columnset</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + body { column-width: 40px; column-gap: 0; } + div { padding-inline-start: 40px; margin: 1em 0; border-bottom-style: solid; } + span { margin-inline-end: -2px; } + div { mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGDwAQAAUQBNt+pgmgAAAABJRU5ErkJggg==); } +</style> +<body><x><span></span><div></div></x></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ref.html new file mode 100644 index 0000000000..4e121163f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS Reference: mask-image</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<style> +#ref { + position: absolute; + width: 200px; + height: 200px; + background: green; +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="ref"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-svg-child-will-change-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-svg-child-will-change-ref.html new file mode 100644 index 0000000000..722879303d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-svg-child-will-change-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<p>The test passes if there is a green square and no red below.</p> +<div style="width: 100px; height: 100px; background: green; position: relative; top: 50px; left: 50px"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/50x100-opaque-blue.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/50x100-opaque-blue.svg new file mode 100644 index 0000000000..c9a82b4939 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/50x100-opaque-blue.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg width="50" height="100" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="50" height="100" fill="blue" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/50x50-opaque-blue.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/50x50-opaque-blue.svg new file mode 100644 index 0000000000..a68a1fa5b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/50x50-opaque-blue.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="50" height="50" fill="blue" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.png b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.png Binary files differnew file mode 100644 index 0000000000..3b72d5ce53 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.svg new file mode 100644 index 0000000000..38cae60fc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.png b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.png Binary files differnew file mode 100644 index 0000000000..65b1e88a56 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.svg new file mode 100644 index 0000000000..459f21d5cf --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-100x50-transparent-100x50.svg @@ -0,0 +1,5 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect x="0" y="0" width="100%" height="50%" fill="blue" fill-opacity="0"/> + <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/blue-luminance-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-luminance-100x100.svg new file mode 100644 index 0000000000..5b79155b66 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/blue-luminance-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="RGB(238,238,255)" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.png b/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.png Binary files differnew file mode 100644 index 0000000000..d65838b7f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.svg new file mode 100644 index 0000000000..87fd691a01 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/green-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="lime" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/green-luminance-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/green-luminance-100x100.svg new file mode 100644 index 0000000000..795bd7e5c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/green-luminance-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="RGB(73,73,255)" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/image-with-ref.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/image-with-ref.svg new file mode 100644 index 0000000000..fe77fb37ac --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/image-with-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> + <style> + g { display: none; } + g:target { display: inline; } + </style> + <g id="ref"> + <rect x="50" y="50" width="100" height="100" fill="black"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/image.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/image.svg new file mode 100644 index 0000000000..28dbaa0238 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/image.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> + <rect x="50" y="50" width="100" height="100" fill="black"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/mask-half-transparent-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/mask-half-transparent-100x100.svg new file mode 100644 index 0000000000..78f6993552 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/mask-half-transparent-100x100.svg @@ -0,0 +1,9 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <mask id="mask" mask-type="alpha"> + <rect x="0" y="0" width="100" height="50" fill-opacity="1"/> + <rect x="0" y="50" width="100" height="50" fill-opacity="0"/> + </mask> + </defs> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/mask.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/mask.svg new file mode 100644 index 0000000000..cab55923d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/mask.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> + <mask id="mask"> + <rect x="50" y="50" width="100" height="100" fill="white"/> + </mask> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.png b/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.png Binary files differnew file mode 100644 index 0000000000..43b8e542a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.svg new file mode 100644 index 0000000000..0ba285bf00 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/red-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="red" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/red-luminance-100x100.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/red-luminance-100x100.svg new file mode 100644 index 0000000000..05075f5210 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/red-luminance-100x100.svg @@ -0,0 +1,4 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100%" height="100%" fill="RGB(201,201,255)" fill-opacity="1"/> +</svg> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.png b/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.png Binary files differnew file mode 100644 index 0000000000..f451746654 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.svg b/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.svg new file mode 100644 index 0000000000..658aed9f1e --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/support/transparent-100x50-blue-100x50.svg @@ -0,0 +1,5 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect x="0" y="0" width="100%" height="50%" fill="blue" fill-opacity="1"/> + <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="0"/> +</svg> |
