Bug 1313898 - Part 5. SVG-mask/clip-path invalidation reftest.
clip-path-invalidation-1a.html/mask-invalidation-2a.html:
Verify the rendering result of changing scale transform of masked/clipped
element on LAYER_INACTIVE path.
clip-path-invalidation-1b.html/mask-invalidation-2b.html:
Verify the rendering result of changing scale transform of masked/clipped
element on LAYER_ACTIVE path.
clip-path-invalidation-1c.html/mask-invalidation-2c.html:
Verify the rendering result of changing the content of mask/clipPath element
on LAYER_INACTIVE path.
clip-path-invalidation-1d.html/mask-invalidation-2d.html:
Verify the rendering result of changing the content of mask/clipPath element
on LAYER_ACTIVE path.
MozReview-Commit-ID: 1ZFgzAea8T8
new file mode 100644
--- /dev/null
+++ b/layout/reftests/invalidation/clip-path-invalidation-1a.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clipPath invalidation.</title>
+ <style type="text/css">
+ div.outer {
+ position: absolute;
+ background-color: purple;
+ border: solid purple;
+ width: 10px;
+ height: 10px;
+ transform: scale(20);
+ transform-origin: top left;
+ }
+
+ div.clipped {
+ clip-path: url(#cp1);
+ }
+ </style>
+ </head>
+ <body>
+ <div id="d1" class="outer clipped"></div>
+ <script type="text/javascript">
+ function changeTransform()
+ {
+ document.getElementById("d1").style.transform = "scale(10)";
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate",
+ changeTransform, false);
+ </script>
+ <svg height="0">
+ <clipPath id="cp1">
+ <rect x="10" y="10" width="5" height="5"/>
+ </clipPath>
+ </svg>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/invalidation/clip-path-invalidation-1b.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clipPath invalidation.</title>
+ <style type="text/css">
+ div.outer {
+ position: absolute;
+ background-color: purple;
+ border: solid purple;
+ width: 10px;
+ height: 10px;
+ transform: scale(20);
+ transform-origin: top left;
+ }
+
+ div.clipped {
+ clip-path: url(#cp1);
+ }
+
+ div.inner {
+ width: 5px;
+ height: 5px;
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="d1" class="outer clipped"><div class="inner"></div></div>
+ <script type="text/javascript">
+ function changeTransform()
+ {
+ document.getElementById("d1").style.transform = "scale(10)";
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate",
+ changeTransform, false);
+ </script>
+ <svg height="0">
+ <clipPath id="cp1">
+ <rect x="10" y="10" width="5" height="5"/>
+ </clipPath>
+ </svg>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/invalidation/clip-path-invalidation-1c.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clipPath invalidation.</title>
+ <style type="text/css">
+ div.outer {
+ position: absolute;
+ background-color: purple;
+ border: solid purple;
+ width: 200px;
+ height: 200px;
+ }
+
+ div.clipped {
+ clip-path: url(#cp1);
+ }
+ </style>
+ </head>
+ <body>
+ <div id="d1" class="outer clipped"></div>
+ <script type="text/javascript">
+ function changeClipPath()
+ {
+ document.getElementById("r1").setAttribute("width", "50");
+ document.getElementById("r1").setAttribute("height", "50");
+ document.getElementById("r1").setAttribute("x", "100");
+ document.getElementById("r1").setAttribute("y", "100");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate",
+ changeClipPath, false);
+ </script>
+ <svg height="0">
+ <clipPath id="cp1">
+ <rect id="r1" x="50" y="50" width="100" height="100"/>
+ </clipPath>
+ </svg>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/invalidation/clip-path-invalidation-1d.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: clipPath invalidation.</title>
+ <style type="text/css">
+ div.outer {
+ position: absolute;
+ background-color: purple;
+ border: solid purple;
+ width: 200px;
+ height: 200px;
+ }
+
+ div.clipped {
+ clip-path: url(#cp1);
+ }
+
+ div.inner {
+ width: 5px;
+ height: 5px;
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+
+ </style>
+ </head>
+ <body>
+ <div id="d1" class="outer clipped"><div class="inner"></div></div>
+ <script type="text/javascript">
+ function changeClipPath()
+ {
+ document.getElementById("r1").setAttribute("width", "50");
+ document.getElementById("r1").setAttribute("height", "50");
+ document.getElementById("r1").setAttribute("x", "100");
+ document.getElementById("r1").setAttribute("y", "100");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate",
+ changeClipPath, false);
+ </script>
+ <svg height="0">
+ <clipPath id="cp1">
+ <rect id="r1" x="50" y="50" width="100" height="100"/>
+ </clipPath>
+ </svg>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/invalidation/mask-invalidation-2-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask repainting.</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">
+ <rect x="100" y="100" width="50" height="50" style="stroke:none; fill: purple;"/>
+ </svg>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/invalidation/mask-invalidation-2a.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask invalidation.</title>
+ <style type="text/css">
+ div.outer {
+ position: absolute;
+ background-color: purple;
+ border: solid purple;
+ width: 10px;
+ height: 10px;
+ transform: scale(20);
+ transform-origin: top left;
+ }
+
+ div.mask {
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 10"><rect x="10" y="10" width="5" height="5" fill="black"/></svg>');
+ }
+
+ </style>
+ </head>
+ <body>
+ <div id="d1" class="outer mask"></div>
+ <script type="text/javascript">
+ function changeTransform()
+ {
+ document.getElementById("d1").style.transform = "scale(10)";
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate",
+ changeTransform, false);
+ </script>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/invalidation/mask-invalidation-2b.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask invalidation.</title>
+ <style type="text/css">
+ div.outer {
+ position: absolute;
+ background-color: purple;
+ border: solid purple;
+ width: 10px;
+ height: 10px;
+ transform: scale(20);
+ transform-origin: top left;
+ }
+
+ div.mask {
+ mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 10"><rect x="10" y="10" width="5" height="5" fill="black"/></svg>');
+ }
+
+ div.inner {
+ width: 5px;
+ height: 5px;
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+
+ </style>
+ </head>
+ <body>
+ <div id="d1" class="outer mask"><div class="inner"></div></div>
+ <script type="text/javascript">
+ function changeTransform()
+ {
+ document.getElementById("d1").style.transform = "scale(10)";
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate",
+ changeTransform, false);
+ </script>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/invalidation/mask-invalidation-2c.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask invalidation.</title>
+ <style type="text/css">
+ div.outer {
+ position: absolute;
+ background-color: purple;
+ border: solid purple;
+ width: 200px;
+ height: 200px;
+ }
+
+ div.mask {
+ mask-image: url(#m1);
+ }
+ </style>
+ </head>
+ <body>
+ <div id="d1" class="outer mask"></div>
+ <script type="text/javascript">
+ function changeMask()
+ {
+ document.getElementById("r1").setAttribute("width", "50");
+ document.getElementById("r1").setAttribute("height", "50");
+ document.getElementById("r1").setAttribute("x", "100");
+ document.getElementById("r1").setAttribute("y", "100");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate",
+ changeMask, false);
+ </script>
+ <svg height="0">
+ <mask id="m1" x="0" y="0" width="1" height="1">
+ <rect id="r1" x="50" y="50" width="100" height="100" style="stroke:none; fill: #ffffff;"/>
+ </mask>
+ </svg>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/invalidation/mask-invalidation-2d.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Masking: mask invalidation.</title>
+ <style type="text/css">
+ div.outer {
+ position: absolute;
+ background-color: purple;
+ border: solid purple;
+ width: 200px;
+ height: 200px;
+ }
+
+ div.mask {
+ mask-image: url(#m1);
+ }
+
+ div.inner {
+ width: 5px;
+ height: 5px;
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+
+ </style>
+ </head>
+ <body>
+ <div id="d1" class="outer mask"><div class="inner"></div></div>
+ <script type="text/javascript">
+ function changeMask()
+ {
+ document.getElementById("r1").setAttribute("width", "50");
+ document.getElementById("r1").setAttribute("height", "50");
+ document.getElementById("r1").setAttribute("x", "100");
+ document.getElementById("r1").setAttribute("y", "100");
+
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate",
+ changeMask, false);
+ </script>
+ <svg height="0">
+ <mask id="m1" x="0" y="0" width="1" height="1">
+ <rect id="r1" x="50" y="50" width="100" height="100" style="stroke:none; fill: #ffffff;"/>
+ </mask>
+ </svg>
+ </body>
+</html>
--- a/layout/reftests/invalidation/reftest.list
+++ b/layout/reftests/invalidation/reftest.list
@@ -76,8 +76,18 @@ pref(layers.single-tile.enabled,false) !
== background-position-2e.html background-position-2-ref.html
== background-position-2f.html background-position-2-ref.html
== zero-opacity-animation.html about:blank
== zero-opacity-text.html about:blank
== negative-w-component.html negative-w-component-ref.html
== mask-invalidation-1a.html mask-invalidation-1-ref.html
== mask-invalidation-1b.html mask-invalidation-1-ref.html
+
+== mask-invalidation-2a.html mask-invalidation-2-ref.html
+== mask-invalidation-2b.html mask-invalidation-2-ref.html
+== mask-invalidation-2c.html mask-invalidation-2-ref.html
+== mask-invalidation-2d.html mask-invalidation-2-ref.html
+
+== clip-path-invalidation-1a.html mask-invalidation-2-ref.html
+== clip-path-invalidation-1b.html mask-invalidation-2-ref.html
+== clip-path-invalidation-1c.html mask-invalidation-2-ref.html
+== clip-path-invalidation-1d.html mask-invalidation-2-ref.html
