diff options
Diffstat (limited to 'layout/reftests/w3c-css/submitted/masking')
143 files changed, 4522 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/masking/blank.html b/layout/reftests/w3c-css/submitted/masking/blank.html new file mode 100644 index 0000000000..abb1b54728 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/blank.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>Blank document</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<body> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html new file mode 100644 index 0000000000..ee48c80015 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path border-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element."> + <style type="text/css"> + div { + position: absolute; + left: 50px; + top: 50px; + background-color: blue; + width: 30px; + height: 30px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) border-box; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html new file mode 100644 index 0000000000..2c18099aba --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path border-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 15px; top: 10px;"> + <rect x="35" y="40" width="100" height="100" fill="blue" + clip-path="circle(50%) border-box"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html new file mode 100644 index 0000000000..0eec4cc229 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path border-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style type="text/css"> + svg { + position: absolute; + left: 50px; + top: 50px; + background-color: blue; + width: 30px; + height: 30px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) border-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html new file mode 100644 index 0000000000..fcbae31ac9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path content-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element."> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + left: 10px; + top: 10px; + width: 100px; + height: 100px; + padding: 40px; + clip-path: circle(farthest-side) content-box; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html new file mode 100644 index 0000000000..eab70f987e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path content-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <rect x="50" y="50" width="100" height="100" fill="blue" + clip-path="circle(50%) content-box"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html new file mode 100644 index 0000000000..16622dca84 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path content-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path content-box works correctly or not."> + </head> + <style type="text/css"> + svg { + position: absolute; + left: 10px; + top: 10px; + width: 100px; + height: 100px; + padding: 40px; + clip-path: circle(farthest-side) content-box; + } + </style> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html new file mode 100644 index 0000000000..ca850ec8b9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path fill-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style type="text/css"> + svg { + position: absolute; + left: 40px; + top: 40px; + background-color: blue; + width: 30px; + height: 30px; + margin: 10px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) fill-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html new file mode 100644 index 0000000000..add81e8dfe --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path geometry box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <circle cx="100" cy="100" r="50" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html new file mode 100644 index 0000000000..b9ee9ab63b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path geometry box</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <polygon points="100,50 150,100 150,150 50,150 50,100" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html new file mode 100644 index 0000000000..4b93657e69 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path margin-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-2-ref.html"> + <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not."> + <style type="text/css"> + div { + position: absolute; + left: 0px; + top: 0px; + background-color: blue; + width: 100px; + height: 100px; + margin: 50px; + clip-path: polygon(0% 75%, 50% 25%, 100% 75%) margin-box; + } + </style> + </head> + <body> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html new file mode 100644 index 0000000000..d605e046fc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>Reference for clip-path linked to local-ref URL</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" width="0"> + <defs> + <clipPath id="c1"> + <circle cy="110" cx="137" r="90" /> + </clipPath> + </defs> + </svg> + <style> + div { + width: 300px; + height: 300px; + background-color: blue; + clip-path: url(#c1); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html new file mode 100644 index 0000000000..e24afbcd6b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<html> + <head> + <head> + <base href="http://example.com"> + <meta charset="utf-8"> + <title>Testcase for clip-path linked to local-ref 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-clip-path"> + <link rel="match" href="clip-path-localRef-1-ref.html"> + <meta name="assert" content="Test checks after changing base URL, whether fragment URLs works correctly or not."> + <svg height="0" width="0"> + <defs> + <clipPath id="c1"> + <circle cy="110" cx="137" r="90" /> + </clipPath> + </defs> + </svg> + <style> + div { + width: 300px; + height: 300px; + background-color: blue; + clip-path: url(#c1); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html new file mode 100644 index 0000000000..6634c93f64 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path margin-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 10px; top: 15px;"> + <rect x="40" y="35" width="100" height="100" fill="blue" + clip-path="circle(50%) margin-box"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html new file mode 100644 index 0000000000..55e6fe2f29 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>CSS clip-path 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.foreground { + position: absolute; + background-color: rgb(0,0,255); + z-index: 100; + width: 50px; + height: 50px; + } + + div.background { + position: absolute; + background-color: rgb(0,255,255); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div class="foreground"></div> + <div class="background"></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html new file mode 100644 index 0000000000..c895cdffc5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path with mix-blend-mode</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-clip-path"> + <link rel="match" href="clip-path-mix-blend-mode-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path works with mix-blend-mode correctly or not."> + <style type="text/css"> + div { + position: absolute; + width: 100px; + height: 100px; + } + + div.foreground { + background-color: rgb(255,0,255); + clip-path: url(#top_left); + z-index: 100; + mix-blend-mode: multiply; + } + + div.background { + background-color: rgb(0,255,255); + } + </style> + </head> + <body> + <div class="foreground"></div> + <div class="background"></div> + <svg height="0" width="0"> + <defs> + <clipPath id="top_left"> + <rect x="0" y="0" width="50" height="50"/> + </clipPath> + </defs> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html new file mode 100644 index 0000000000..4dc5e1714e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path padding-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element."> + <style type="text/css"> + div { + position: absolute; + left: 50px; + top: 50px; + background-color: blue; + width: 50px; + height: 50px; + padding: 25px; + clip-path: circle(farthest-side) padding-box; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html new file mode 100644 index 0000000000..717a6bfe12 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path padding-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <rect x="50" y="50" width="100" height="100" fill="blue" + clip-path="circle(50%) padding-box"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html new file mode 100644 index 0000000000..0ec0216347 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path padding-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style type="text/css"> + svg { + position: absolute; + left: 50px; + top: 50px; + background-color: blue; + width: 50px; + height: 50px; + padding: 25px; + clip-path: circle(farthest-side) padding-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html new file mode 100644 index 0000000000..a72f8b00ea --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path stroke-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style type="text/css"> + svg { + position: absolute; + left: 40px; + top: 40px; + background-color: blue; + width: 30px; + height: 30px; + margin: 10px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) stroke-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html new file mode 100644 index 0000000000..ba81b5df73 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path stroke-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;"> + <rect x="60" y="60" width="80" height="80" fill="blue" stroke="blue" stroke-width="20" clip-path="circle(50%) stroke-box"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html new file mode 100644 index 0000000000..f1f816b2f4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path view-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path view-box works correctly or not."> + </head> + <body> + <svg width="200" height="200" style="position: absolute; left: 10px; top: 10px;"> + <rect x="20" y="20" width="135" height="135" fill="blue" + clip-path="circle(25% at calc(50% - 10px) calc(50% - 10px)) view-box"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html new file mode 100644 index 0000000000..08c91b84bf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path view-box with viewbox</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path view-box with viewbox works correctly or not."> + </head> + <body> + <svg width="200" height="200" viewBox="50 50 100 100" preserveAspectRatio="none" style="position: absolute; left: 10px; top: 10px;"> + <rect x="0" y="0" width="200" height="200" fill="blue" + clip-path="circle(25% at calc(50% - 5px) calc(50% - 5px)) view-box"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html new file mode 100644 index 0000000000..dd3cae8ef0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Masking: clip-path: clip path view-box</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-clip-path"> + <link rel="match" href="clip-path-geometryBox-1-ref.html"> + <meta name="assert" content="Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG SVG element."> + <style type="text/css"> + svg { + position: absolute; + left: 40px; + top: 40px; + background-color: blue; + width: 30px; + height: 30px; + margin: 10px; + padding: 10px; + border: solid blue 25px; + clip-path: circle(farthest-side) view-box; + } + </style> + </head> + <body> + <svg width="200" height="200"> + <rect x="0" y="0" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html new file mode 100644 index 0000000000..0f9197e1f6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html @@ -0,0 +1,42 @@ +<!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; + } + </style> + </head> + <body> + <div class="color border"></div> + <div class="color padding"></div> + <div class="color content"></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html new file mode 100644 index 0000000000..c981536b86 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html @@ -0,0 +1,57 @@ +<!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, and content-box values of mask-clip should clip to the appropriate boxes."> + <style type="text/css"> + div { + /* + * 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; + } + </style> + </head> + <body> + <div class="outer mask border"></div> + <div class="outer mask padding"></div> + <div class="outer mask content"></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html new file mode 100644 index 0000000000..9249622cc4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html new file mode 100644 index 0000000000..795e52b8ae --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html new file mode 100644 index 0000000000..be158c923b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html new file mode 100644 index 0000000000..0eb098d1b7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html new file mode 100644 index 0000000000..cbf91daad9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html new file mode 100644 index 0000000000..7db800814c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html new file mode 100644 index 0000000000..3fd983fb11 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html new file mode 100644 index 0000000000..2b26e9ac66 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html new file mode 100644 index 0000000000..2800844061 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html new file mode 100644 index 0000000000..62e00660a3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html new file mode 100644 index 0000000000..9bf74102f9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html new file mode 100644 index 0000000000..1328d06c95 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html new file mode 100644 index 0000000000..11f0ae7d93 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html new file mode 100644 index 0000000000..db949934e4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-2.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2.html new file mode 100644 index 0000000000..a071cff3fa --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html new file mode 100644 index 0000000000..ec29e333c7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html new file mode 100644 index 0000000000..b3a6d39650 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html new file mode 100644 index 0000000000..bd805cde97 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html new file mode 100644 index 0000000000..32bd4454d7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html new file mode 100644 index 0000000000..f1ef1be709 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html new file mode 100644 index 0000000000..15223e34d6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html new file mode 100644 index 0000000000..e925105baa --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html new file mode 100644 index 0000000000..1236c0c334 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html new file mode 100644 index 0000000000..37608bfe20 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html new file mode 100644 index 0000000000..ae3ad76a20 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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="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/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html new file mode 100644 index 0000000000..ed0022a4c9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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="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/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html new file mode 100644 index 0000000000..19a251ef0f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-5.html b/layout/reftests/w3c-css/submitted/masking/mask-image-5.html new file mode 100644 index 0000000000..d98ddf8de5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html new file mode 100644 index 0000000000..d85e075fd4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-image-6.html b/layout/reftests/w3c-css/submitted/masking/mask-image-6.html new file mode 100644 index 0000000000..ac31e4cf4e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html new file mode 100644 index 0000000000..38977a0aad --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html new file mode 100644 index 0000000000..e5c11e9bf0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html new file mode 100644 index 0000000000..0f7dbd571f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html new file mode 100644 index 0000000000..2b5e1fd3e7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html new file mode 100644 index 0000000000..5c75ce71d3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html new file mode 100644 index 0000000000..5def84f067 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html new file mode 100644 index 0000000000..1bd42abfb1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html @@ -0,0 +1,28 @@ +<!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."> + <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/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html new file mode 100644 index 0000000000..0de78f7612 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.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="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/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html new file mode 100644 index 0000000000..1673d7c4e8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html @@ -0,0 +1,27 @@ +<!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."> + <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/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html new file mode 100644 index 0000000000..df7e684d2a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html new file mode 100644 index 0000000000..3788a5591a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html new file mode 100644 index 0000000000..bbb5ef2c41 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html new file mode 100644 index 0000000000..90ee89b15d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html new file mode 100644 index 0000000000..e323bd3529 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html new file mode 100644 index 0000000000..cee15ee713 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html new file mode 100644 index 0000000000..669810e61a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html new file mode 100644 index 0000000000..9a1671c3d4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html new file mode 100644 index 0000000000..46be4b8b08 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html new file mode 100644 index 0000000000..d8427338d4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html new file mode 100644 index 0000000000..b5f7b31051 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html new file mode 100644 index 0000000000..dd2630356e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html new file mode 100644 index 0000000000..724a1e3ab2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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: center 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/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html new file mode 100644 index 0000000000..742a65ea15 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html new file mode 100644 index 0000000000..7ddf68b28a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html new file mode 100644 index 0000000000..9d17692e83 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html new file mode 100644 index 0000000000..9b46546d31 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html new file mode 100644 index 0000000000..70959c0984 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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 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/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html new file mode 100644 index 0000000000..e5dce03b4a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html new file mode 100644 index 0000000000..dc8c9ecb93 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-5.html b/layout/reftests/w3c-css/submitted/masking/mask-position-5.html new file mode 100644 index 0000000000..295402263d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html new file mode 100644 index 0000000000..b94527eb0a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-6.html b/layout/reftests/w3c-css/submitted/masking/mask-position-6.html new file mode 100644 index 0000000000..e1d9eca553 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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; + } + + #inner2 { + mask-position: left 40% bottom; + } + + #inner3 { + mask-position: right 60% bottom; + } + + #inner4 { + mask-position: right 30px bottom; + } + </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/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html new file mode 100644 index 0000000000..c3c8d85ebd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-position-7.html b/layout/reftests/w3c-css/submitted/masking/mask-position-7.html new file mode 100644 index 0000000000..30e9a75817 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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 top 40%; + } + + #inner2 { + mask-position: right top 20px; + } + + #inner3 { + mask-position: right bottom 60%; + } + + #inner4 { + mask-position: right 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/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html new file mode 100644 index 0000000000..01ed86d127 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html new file mode 100644 index 0000000000..a7fc586fd5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html new file mode 100644 index 0000000000..fa386cdac1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html new file mode 100644 index 0000000000..e349239fbf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html new file mode 100644 index 0000000000..4d4b869ce9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html new file mode 100644 index 0000000000..cb950d4f2c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html new file mode 100644 index 0000000000..01d55f9629 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html new file mode 100644 index 0000000000..aa21231924 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html new file mode 100644 index 0000000000..5ef49cc612 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html new file mode 100644 index 0000000000..f2644bb1b0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html new file mode 100644 index 0000000000..73e3df2703 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html new file mode 100644 index 0000000000..6560a81ee3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html new file mode 100644 index 0000000000..afbeb72f10 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html new file mode 100644 index 0000000000..a04557639a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html new file mode 100644 index 0000000000..041e48d03d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html new file mode 100644 index 0000000000..4f321d9c58 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html new file mode 100644 index 0000000000..50ab373eb8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html new file mode 100644 index 0000000000..fcae5ba0ed --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html new file mode 100644 index 0000000000..a7346bfcb2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html new file mode 100644 index 0000000000..19fc42d6ec --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html new file mode 100644 index 0000000000..961019bf16 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html b/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html new file mode 100644 index 0000000000..171e11805b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html new file mode 100644 index 0000000000..7152f6ff95 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html new file mode 100644 index 0000000000..5411da9f87 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html new file mode 100644 index 0000000000..f9cf2cb6bc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html new file mode 100644 index 0000000000..26195541d1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html new file mode 100644 index 0000000000..ba5bbbc55c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length.html new file mode 100644 index 0000000000..961357e12f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html new file mode 100644 index 0000000000..603346d6e6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html new file mode 100644 index 0000000000..4ac9c8e81f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html new file mode 100644 index 0000000000..96a3d1bdca --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html new file mode 100644 index 0000000000..2c023ec13c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html new file mode 100644 index 0000000000..69f89b8a98 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html new file mode 100644 index 0000000000..7b04d9b6d5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html new file mode 100644 index 0000000000..2e056df521 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list b/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list new file mode 100644 index 0000000000..bc897987eb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list @@ -0,0 +1,85 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# All mask properties test cases are meant to be failed +# until bug 1251161 is fixed, which means enabling mask shorthand. +# To enable it in compile time, refer to bug 1243734 + +# mask-composite test cases +== mask-composite-1a.html mask-composite-1a.html +== mask-composite-1b.html mask-composite-1b.html +== mask-composite-1c.html mask-composite-1c.html +== mask-composite-2a.html mask-composite-2a.html +== mask-composite-2b.html mask-composite-2b.html +== mask-composite-2c.html mask-composite-2c.html + +# mask-mode test cases +== mask-mode-a.html mask-mode-a.html +== mask-mode-b.html mask-mode-b.html +== mask-mode-to-mask-type.html mask-mode-to-mask-type.html + +# mask-image test cases +== mask-image-1a.html mask-image-1a.html +== mask-image-1b.html mask-image-1b.html +== mask-image-1c.html mask-image-1c.html +== mask-image-2.html mask-image-2.html +== mask-image-3a.html mask-image-3a.html +== mask-image-3b.html mask-image-3b.html +== mask-image-3c.html mask-image-3c.html +== mask-image-3d.html mask-image-3d.html +== mask-image-3e.html mask-image-3e.html +== mask-image-3f.html mask-image-3f.html +== mask-image-3g.html mask-image-3g.html +== mask-image-4a.html mask-image-4a.html +== mask-image-4b.html mask-image-4b.html + +# mask-clip test cases +== mask-clip-1.html mask-clip-1.html + +# mask-position test cases +== mask-position-1a.html mask-position-1a.html +== mask-position-1b.html mask-position-1b.html +== mask-position-1c.html mask-position-1c.html +== mask-position-2a.html mask-position-2a.html +== mask-position-2b.html mask-position-2b.html +== mask-position-3a.html mask-position-3a.html +== mask-position-3b.html mask-position-3b.html +== mask-position-4a.html mask-position-4a.html +== mask-position-4b.html mask-position-4b.html +== mask-position-4c.html mask-position-4c.html +== mask-position-4d.html mask-position-4d.html +== mask-position-5.html mask-position-5.html +== mask-position-6.html mask-position-6.html +== mask-position-7.html mask-position-7.html + +# mask-repeat test cases +== mask-repeat-1.html mask-repeat-1.html +# bug 1258623 +== mask-repeat-2.html mask-repeat-2.html +# bug 1258626 +== mask-repeat-3.html mask-repeat-3.html +# bug 1258626 + +# mask-origin test cases +== mask-origin-1.html mask-origin-1.html +# bug 1258286 +== mask-origin-2.html mask-origin-2.html +# bug 1260094 + +# mask-size test cases +== mask-size-auto.html mask-size-auto.html +== mask-size-auto-auto.html mask-size-auto-auto.html +== mask-size-auto-length.html mask-size-auto-length.html +== mask-size-auto-percent.html mask-size-auto-percent.html +== mask-size-contain-clip-border.html mask-size-contain-clip-border.html +== mask-size-contain-clip-padding.html mask-size-contain-clip-padding.html +== mask-size-contain-position-fifty-fifty.html mask-size-contain-position-fifty-fifty.html +== mask-size-contain.html mask-size-contain.html +== mask-size-cover.html mask-size-cover.html +== mask-size-length.html mask-size-length.html +== mask-size-length-auto.html mask-size-length-auto.html +== mask-size-length-length.html mask-size-length-length.html +== mask-size-length-percent.html mask-size-length-percent.html +== mask-size-percent.html mask-size-percent.html +== mask-size-percent-auto.html mask-size-percent-auto.html +== mask-size-percent-length.html mask-size-percent-length.html +== mask-size-percent-percent.html mask-size-percent-percent.html +== mask-size-percent-percent-stretch.html mask-size-percent-percent-stretch.html diff --git a/layout/reftests/w3c-css/submitted/masking/reftest.list b/layout/reftests/w3c-css/submitted/masking/reftest.list new file mode 100644 index 0000000000..0cb5611c97 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/reftest.list @@ -0,0 +1,112 @@ +# For those test items with failure type fuzzy-if added, please refer to bug 1231643#c10. + +# mask-composite test cases +fails == mask-composite-1a.html mask-composite-1-ref.html +fails == mask-composite-1b.html mask-composite-1-ref.html +fails == mask-composite-1c.html mask-composite-1-ref.html +fails == mask-composite-2a.html mask-composite-2-ref.html +fails == mask-composite-2b.html mask-composite-2-ref.html +fails == mask-composite-2c.html mask-composite-2-ref.html + +# mask-mode test cases +fails == mask-mode-a.html mask-mode-ref.html +fails == mask-mode-b.html mask-mode-ref.html +fails == mask-mode-to-mask-type.html mask-mode-to-mask-type-ref.html + +# mask-image test cases +fails == mask-image-1a.html mask-image-1-ref.html +fails == mask-image-1b.html mask-image-1-ref.html +fails == mask-image-1c.html mask-image-1-ref.html +== mask-image-1d.html mask-image-1-ref.html +fails == mask-image-2.html mask-image-2-ref.html +fails == mask-image-3a.html mask-image-3-ref.html +fails == mask-image-3b.html mask-image-3-ref.html +fails == mask-image-3c.html mask-image-3-ref.html +fails == mask-image-3d.html mask-image-3-ref.html +fails == mask-image-3e.html mask-image-3-ref.html +fails == mask-image-3f.html mask-image-3-ref.html +fails == mask-image-3g.html mask-image-3-ref.html +fails == mask-image-3h.html mask-image-3-ref.html +fails == mask-image-4a.html blank.html +fails == mask-image-4b.html blank.html +== mask-image-5.html mask-image-5-ref.html +== mask-image-6.html mask-image-6-ref.html + +# mask-clip test cases +fails == mask-clip-1.html mask-clip-1-ref.html + +# mask-position test cases +fails == mask-position-1a.html mask-position-1-ref.html +fails == mask-position-1b.html mask-position-1-ref.html +fails == mask-position-1c.html mask-position-1-ref.html +fails == mask-position-2a.html mask-position-2-ref.html +fails == mask-position-2b.html mask-position-2-ref.html +fails == mask-position-3a.html mask-position-3-ref.html +fails == mask-position-3b.html mask-position-3-ref.html +fails == mask-position-4a.html mask-position-4-ref.html +fails == mask-position-4b.html mask-position-4-ref.html +fails == mask-position-4c.html mask-position-4-ref.html +fails == mask-position-4d.html mask-position-4-ref.html +fails == mask-position-5.html mask-position-5-ref.html +fails == mask-position-6.html mask-position-6-ref.html +fails == mask-position-7.html mask-position-7-ref.html + +# mask-repeat test cases +fails == mask-repeat-1.html mask-repeat-1-ref.html +fails == mask-repeat-2.html mask-repeat-2-ref.html +fails == mask-repeat-3.html mask-repeat-3-ref.html + +# mask-origin test cases +fails == mask-origin-1.html mask-origin-1-ref.html +fails == mask-origin-2.html mask-origin-2-ref.html # bug 1260094 + +# mask-size test cases +fails == mask-size-auto.html mask-size-auto-ref.html +fails == mask-size-auto-auto.html mask-size-auto-ref.html +fails == mask-size-auto-length.html mask-size-auto-length-ref.html +fails == mask-size-auto-percent.html mask-size-auto-length-ref.html +fails == mask-size-contain-clip-border.html mask-size-contain-clip-border-ref.html +fails == mask-size-contain-clip-padding.html mask-size-contain-clip-padding-ref.html +fails == mask-size-contain-position-fifty-fifty.html mask-size-contain-position-fifty-fifty-ref.html +fails == mask-size-contain.html mask-size-contain-ref.html +fails == mask-size-cover.html mask-size-cover-ref.html +fails == mask-size-length.html mask-size-length-length-ref.html +fails == mask-size-length-auto.html mask-size-length-length-ref.html +fails == mask-size-length-length.html mask-size-length-length-ref.html +fails == mask-size-length-percent.html mask-size-length-percent-ref.html +fails == mask-size-percent.html mask-size-percent-percent-ref.html +fails == mask-size-percent-auto.html mask-size-percent-percent-ref.html +fails == mask-size-percent-length.html mask-size-percent-percent-ref.html +fails == mask-size-percent-percent.html mask-size-percent-percent-ref.html +fails == mask-size-percent-percent-stretch.html mask-size-percent-percent-stretch-ref.html + +default-preferences pref(layout.css.clip-path-shapes.enabled,true) + +fuzzy-if(winWidget,1,21) == clip-path-contentBox-1a.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,1,21) == clip-path-contentBox-1b.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,1,21) == clip-path-contentBox-1c.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1a.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1b.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1c.html clip-path-geometryBox-1-ref.html +fuzzy(64,370) == clip-path-borderBox-1a.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,1,21) == clip-path-borderBox-1b.html clip-path-geometryBox-1-ref.html +fuzzy(64,370) == clip-path-borderBox-1c.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,1,21) == clip-path-marginBox-1a.html clip-path-geometryBox-1-ref.html +fuzzy(64,370) == clip-path-fillBox-1a.html clip-path-geometryBox-1-ref.html +fuzzy(64,370) == clip-path-strokeBox-1a.html clip-path-geometryBox-1-ref.html +fuzzy(64,370) == clip-path-strokeBox-1b.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,1,21) == clip-path-viewBox-1a.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,1,21) == clip-path-viewBox-1b.html clip-path-geometryBox-1-ref.html +fuzzy(64,370) == clip-path-viewBox-1c.html clip-path-geometryBox-1-ref.html +fuzzy-if(winWidget,9,98) == clip-path-geometryBox-2.html clip-path-geometryBox-2-ref.html + +== clip-path-localRef-1.html clip-path-localRef-1-ref.html + +default-preferences + +# mask with opacity test cases +fails == mask-opacity-1a.html mask-opacity-1-ref.html +fails == mask-opacity-1b.html mask-opacity-1-ref.html +fuzzy(1,5000) == mask-opacity-1c.html mask-opacity-1-ref.html + +== clip-path-mix-blend-mode-1.html clip-path-mix-blend-mode-1-ref.html diff --git a/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg b/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg new file mode 100644 index 0000000000..c9a82b4939 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg b/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg new file mode 100644 index 0000000000..a68a1fa5b5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png Binary files differnew file mode 100644 index 0000000000..3b72d5ce53 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg new file mode 100644 index 0000000000..38cae60fc0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png Binary files differnew file mode 100644 index 0000000000..65b1e88a56 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg new file mode 100644 index 0000000000..459f21d5cf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg new file mode 100644 index 0000000000..5b79155b66 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png Binary files differnew file mode 100644 index 0000000000..d65838b7f0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg new file mode 100644 index 0000000000..87fd691a01 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg new file mode 100644 index 0000000000..795bd7e5c9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg new file mode 100644 index 0000000000..78f6993552 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png Binary files differnew file mode 100644 index 0000000000..43b8e542a9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg new file mode 100644 index 0000000000..0ba285bf00 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg new file mode 100644 index 0000000000..05075f5210 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png Binary files differnew file mode 100644 index 0000000000..f451746654 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png diff --git a/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg new file mode 100644 index 0000000000..658aed9f1e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/masking/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> |
