2 files changed, 43 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/pservers/reftests/gradient-transform-03.svg b/testing/web-platform/tests/svg/pservers/reftests/gradient-transform-03.svg
new file mode 100644
index 0000000000..25e304614d
--- /dev/null
+++ b/testing/web-platform/tests/svg/pservers/reftests/gradient-transform-03.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" class="reftest-wait">
+  <title>Gradient with 'transform' property added dynamically</title>
+  <h:link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#pservers-LinearGradientElementGradientTransformAttribute"/>
+  <h:link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-attribute-specificity"/>
+  <h:link rel="match" href="reference/green-100x100.svg"/>
+  <h:script src="/common/reftest-wait.js"/>
+  <h:script src="/common/rendering-utils.js"/>
+
+  <linearGradient id="lg">
+    <stop offset="0" stop-color="green"/>
+    <stop offset="0.5" stop-color="green"/>
+    <stop offset="1" stop-color="red"/>
+  </linearGradient>
+  <rect width="100" height="100" fill="url(#lg)"/>
+  <script>
+    waitForAtLeastOneFrame().then(() => {
+      const gradient = document.getElementById('lg');
+      gradient.style.transform = 'scale(2)';
+      takeScreenshot();
+    });
+  </script>
+</svg>
diff --git a/testing/web-platform/tests/svg/pservers/reftests/pattern-transform-03.svg b/testing/web-platform/tests/svg/pservers/reftests/pattern-transform-03.svg
new file mode 100644
index 0000000000..b2e0e7aaa2
--- /dev/null
+++ b/testing/web-platform/tests/svg/pservers/reftests/pattern-transform-03.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" class="reftest-wait">
+  <title>Pattern with 'transform' property added dynamically</title>
+  <h:link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#pservers-PatternElementPatternTransformAttribute"/>
+  <h:link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-attribute-specificity"/>
+  <h:link rel="match" href="reference/green-100x100.svg"/>
+  <h:script src="/common/reftest-wait.js"/>
+  <h:script src="/common/rendering-utils.js"/>
+
+  <pattern id="pat" width="100" height="100">
+    <rect x="25" y="25" width="75" height="75" fill="red"/>
+    <rect width="75" height="75" fill="green"/>
+  </pattern>
+  <rect width="100" height="100" fill="url(#pat)"/>
+  <script>
+    waitForAtLeastOneFrame().then(() => {
+      const pattern = document.getElementById('pat');
+      pattern.style.transform = 'translate(-25px, -25px) scale(2)';
+      takeScreenshot();
+    });
+  </script>
+</svg>