Adding upstream version 115.8.0esr.upstream/115.8.0esr

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:47:29 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:47:29 +0000
commit: 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
tree: a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/svg/styling
parent: Initial commit. (diff)
download: firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz
firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip
29 files changed, 1258 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/styling/css-selectors-case-sensitivity.html b/testing/web-platform/tests/svg/styling/css-selectors-case-sensitivity.html
new file mode 100644
index 0000000000..c1e07a5328
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/css-selectors-case-sensitivity.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<title>SVG CSS Selectors - Case-sensitivity</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/styling.html">
+<link rel="help" href="https://drafts.csswg.org/selectors/#case-sensitive">
+<link rel="help" href="https://drafts.csswg.org/selectors/#attribute-case">
+<link rel="help" href="https://crbug.com/1246296">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  [viewBox] { color: green }
+  [VIEWBOX] { background-color: green }
+  foreignObject { color: green }
+  FOREIGNOBJECT { background-color: green }
+</style>
+<div viewBox id="t1"></div>
+<div viewbox id="t2"></div>
+<svg viewBox="0 0 800 10" id="t3"></svg>
+<svg VIEWBOX="0 0 800 10" id="t4"></svg>
+<foreignObject id="t5"></div>
+<foreignobject id="t6"></div>
+<svg><foreignObject id="t7"></foreignObject></svg>
+<svg><FOREIGNOBJECT id="t8"></FOREIGNOBJECT></svg>
+<script>
+  test(() => {
+    assert_equals(t1.attributes[0].name, "viewbox");
+    assert_equals(t2.attributes[0].name, "viewbox");
+    assert_equals(t3.attributes[0].name, "viewBox");
+    assert_equals(t4.attributes[0].name, "viewBox");
+  }, "Normalization of viewBox on html and svg elements in html documents.");
+
+  test(() => {
+    assert_equals(t5.localName, "foreignobject");
+    assert_equals(t6.localName, "foreignobject");
+    assert_equals(t7.localName, "foreignObject");
+    assert_equals(t8.localName, "foreignObject");
+  }, "Normalization of foreignObject html and svg elements in html documents.");
+
+  test(() => {
+    assert_equals(getComputedStyle(t1).color, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t2).color, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t2).backgroundColor, "rgb(0, 128, 0)");
+  }, "viewBox attribute without namespace on html element matches case-insensitively in html document.");
+
+  test(() => {
+    assert_equals(getComputedStyle(t3).color, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t3).backgroundColor, "rgba(0, 0, 0, 0)");
+  }, "Camel-cased viewBox on svg in html document matches sensitively.");
+
+  test(() => {
+    assert_equals(getComputedStyle(t4).color, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t4).backgroundColor, "rgba(0, 0, 0, 0)");
+  }, "Normalized camel-cased viewBox on svg in html document matches case-sensitively.");
+
+  test(() => {
+    assert_equals(getComputedStyle(t5).color, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t5).backgroundColor, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t6).color, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t6).backgroundColor, "rgb(0, 128, 0)");
+  }, "foreignObject html element matches case-insensitively in html document.");
+
+  test(() => {
+    assert_equals(getComputedStyle(t7).color, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t7).backgroundColor, "rgba(0, 0, 0, 0)");
+  }, "Camel-cased svg foreignObject in html document matches sensitively.");
+
+  test(() => {
+    assert_equals(getComputedStyle(t8).color, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(t8).backgroundColor, "rgba(0, 0, 0, 0)");
+  }, "Normalized camel-cased svg foreignObject in html document matches case-sensitively.");
+</script>
diff --git a/testing/web-platform/tests/svg/styling/font-size-number-calc-crash.svg b/testing/web-platform/tests/svg/styling/font-size-number-calc-crash.svg
new file mode 100644
index 0000000000..6b56d9df2b
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/font-size-number-calc-crash.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" font-size="calc(0)"></svg>
+<!-- Loading this test should not cause a crash. https://crbug.com/1172750 -->
diff --git a/testing/web-platform/tests/svg/styling/invalidation/nth-child-of-class-ref.svg b/testing/web-platform/tests/svg/styling/invalidation/nth-child-of-class-ref.svg
new file mode 100644
index 0000000000..780bb9f3f6
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/invalidation/nth-child-of-class-ref.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <g>
+    <circle cx="10" cy="10" r="10" fill="green"/>
+    <circle cx="30" cy="10" r="10" fill="black"/>
+    <circle cx="50" cy="10" r="10" fill="black"/>
+    <circle cx="70" cy="10" r="10" fill="black"/>
+    <circle cx="90" cy="10" r="10" fill="green"/>
+    <circle cx="10" cy="30" r="10" fill="green"/>
+    <circle cx="30" cy="30" r="10" fill="red"/>
+    <circle cx="50" cy="30" r="10" fill="red"/>
+    <circle cx="70" cy="30" r="10" fill="red"/>
+    <circle cx="90" cy="30" r="10" fill="green"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/invalidation/nth-child-of-class.svg b/testing/web-platform/tests/svg/styling/invalidation/nth-child-of-class.svg
new file mode 100644
index 0000000000..a91f421337
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/invalidation/nth-child-of-class.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" class="reftest-wait">
+  <title>CSS Selectors Invalidation: :nth-child(... of class) in SVG</title>
+  <h:link rel="match" href="nth-child-of-class-ref.svg"/>
+  <h:link rel="help" href="https://drafts.csswg.org/selectors-4/#nth-child-pseudo"/>
+  <h:link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1821258"/>
+  <h:link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net"/>
+  <script href="/common/rendering-utils.js"/>
+  <script href="/common/reftest-wait.js"/>
+  <style>
+    :nth-child(odd of .c) {
+      fill: green;
+    }
+  </style>
+  <g id="circles">
+    <circle class="c" cx="10" cy="10" r="10"/>
+    <circle class="c" cx="30" cy="10" r="10"/>
+    <circle class="c" cx="50" cy="10" r="10" id="toggler"/>
+    <circle cx="70" cy="10" r="10"/>
+    <circle class="c" cx="90" cy="10" r="10"/>
+  </g>
+  <use href="#circles" y="20" fill="red"/>
+  <script><![CDATA[
+    const toggler = document.querySelector("#toggler");
+    requestAnimationFrame(() =>
+        requestAnimationFrame(() => {
+            toggler.classList.toggle("c");
+            takeScreenshot();
+        }));
+  ]]></script>
+  <!--
+  This reftest will only pass if the :nth-child(.. of <selector>) invalidation
+  considers DOM elements of any type (including SVG elements), not only HTML
+  elements.
+  -->
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/invalidation/nth-last-child-of-class.svg b/testing/web-platform/tests/svg/styling/invalidation/nth-last-child-of-class.svg
new file mode 100644
index 0000000000..ff439bf17b
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/invalidation/nth-last-child-of-class.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" class="reftest-wait">
+  <title>CSS Selectors Invalidation: :nth-last-child(... of class) in SVG</title>
+  <h:link rel="match" href="nth-child-of-class-ref.svg"/>
+  <h:link rel="help" href="https://drafts.csswg.org/selectors-4/#nth-last-child-pseudo"/>
+  <h:link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1821258"/>
+  <h:link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net"/>
+  <script href="/common/rendering-utils.js"/>
+  <script href="/common/reftest-wait.js"/>
+  <style>
+    :nth-last-child(odd of .c) {
+      fill: green;
+    }
+  </style>
+  <g id="circles">
+    <circle class="c" cx="10" cy="10" r="10"/>
+    <circle class="c" cx="30" cy="10" r="10"/>
+    <circle class="c" cx="50" cy="10" r="10" id="toggler"/>
+    <circle cx="70" cy="10" r="10"/>
+    <circle class="c" cx="90" cy="10" r="10"/>
+  </g>
+  <use href="#circles" y="20" fill="red"/>
+  <script><![CDATA[
+    const toggler = document.querySelector("#toggler");
+    requestAnimationFrame(() =>
+        requestAnimationFrame(() => {
+            toggler.classList.toggle("c");
+            takeScreenshot();
+        }));
+  ]]></script>
+  <!--
+  This reftest will only pass if the :nth-last-child(.. of <selector>)
+  invalidation considers DOM elements of any type (including SVG elements), not
+  only HTML elements.
+  -->
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/padding-on-svg-via-img-ref.tentative.html b/testing/web-platform/tests/svg/styling/padding-on-svg-via-img-ref.tentative.html
new file mode 100644
index 0000000000..37608e4b82
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/padding-on-svg-via-img-ref.tentative.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+<img src="support/circle.svg">
+<img src="support/circle.svg">
+<img src="support/circle.svg">
+</body>
diff --git a/testing/web-platform/tests/svg/styling/padding-on-svg-via-img.tentative.html b/testing/web-platform/tests/svg/styling/padding-on-svg-via-img.tentative.html
new file mode 100644
index 0000000000..bdb0ce0212
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/padding-on-svg-via-img.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!--
+  Padding behavior in svg-as-image is not specified well, but the major
+  browsers have identical behaviors.
+
+  This HTML should show multiple full circles, and they are aligned to
+  100px grid.  Padding-right doesn't contribute to SVG image sizes.
+-->
+<link rel="match" href="padding-on-svg-via-img-ref.tentative.html"/>
+<body>
+<img src="support/circle-padding-right.svg">
+<img src="support/circle-padding-right.svg">
+<img src="support/circle-padding-right.svg">
+</body>
diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes-irrelevant.html b/testing/web-platform/tests/svg/styling/presentation-attributes-irrelevant.html
new file mode 100644
index 0000000000..f96d1d9de6
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/presentation-attributes-irrelevant.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>SVG presentation attributes - on irrelevant elements</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/styling.html#PresentationAttributes">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="presentation-attributes.js"></script>
+<svg id="svg"></svg>
+<script>
+// Test that all of the presentation attributes with no special rules are
+// also supported on elements that the corresponding property does not
+// apply to.
+
+for (let p in PROPERTIES) {
+  if (CSS.supports(p, "initial") && PROPERTIES[p].irrelevantElement) {
+    test(function() {
+      assertPresentationAttributeIsSupported(PROPERTIES[p].irrelevantElement, p, PROPERTIES[p].value, p);
+    }, `${p} presentation attribute supported on an irrelevant element`);
+  }
+}
+</script>
diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes-relevant.html b/testing/web-platform/tests/svg/styling/presentation-attributes-relevant.html
new file mode 100644
index 0000000000..b5f9343690
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/presentation-attributes-relevant.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>SVG presentation attributes - on relevant elements</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/styling.html#PresentationAttributes">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="presentation-attributes.js"></script>
+<svg id="svg"></svg>
+<script>
+// Test that all of the presentation attributes with no special rules are
+// supported on elements that the corresponding properties apply to.
+
+for (let p in PROPERTIES) {
+  if (CSS.supports(p, "initial")) {
+    test(function() {
+      assertPresentationAttributeIsSupported(PROPERTIES[p].relevantElement, p, PROPERTIES[p].value, p);
+    }, `${p} presentation attribute supported on a relevant element`);
+  }
+}
+</script>
diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes-special-cases.html b/testing/web-platform/tests/svg/styling/presentation-attributes-special-cases.html
new file mode 100644
index 0000000000..c99ed704cf
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/presentation-attributes-special-cases.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>SVG presentation attributes - special cases</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/styling.html#PresentationAttributes">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="presentation-attributes.js"></script>
+<svg id="svg"></svg>
+<script>
+// 1. Test the special cases where presentation attributes are only allowed on
+// a specific set of elements.
+
+if (propertiesAreSupported(["cx", "cy"])) {
+  for (let e of ["circle", "ellipse"]) {
+    test(function() {
+      for (let p of ["cx", "cy"]) {
+        assertPresentationAttributeIsSupported(e, p, "1", p);
+      }
+    }, `cx and cy presentation attributes supported on ${e} element`);
+  }
+}
+
+if (propertiesAreSupported(["x", "y", "width", "height"])) {
+  for (let e of ["foreignObject", "image", "rect", "svg", "symbol", "use"]) {
+    test(function() {
+      for (let p of ["x", "y", "width", "height"]) {
+        assertPresentationAttributeIsSupported(e, p, "1", p);
+      }
+    }, `x, y, width, and height presentation attributes supported on ${e} element`);
+  }
+}
+
+if (CSS.supports("r", "initial")) {
+  test(function() {
+    assertPresentationAttributeIsSupported("circle", "r", "1", "r");
+  }, `r presentation attribute supported on circle element`);
+}
+
+if (propertiesAreSupported(["rx", "ry"])) {
+  for (let e of ["ellipse", "rect"]) {
+    test(function() {
+      for (let p of ["rx", "ry"]) {
+        assertPresentationAttributeIsSupported(e, p, "1", p);
+      }
+    }, `rx and ry presentation attributes supported on ${e} element`);
+  }
+}
+
+if (CSS.supports("d", "initial")) {
+  test(function() {
+    assertPresentationAttributeIsSupported("path", "d", "M0,0 L1,1", "d");
+  }, `d presentation attribute supported on path element`);
+}
+
+
+// 2. Test that for those presentation attributes only allowed on a specific
+// set of elements, that they are not supported on some other SVG element.
+// (We use 'g' as that element for testing.)
+
+if (propertiesAreSupported(["cx", "cy"])) {
+  test(function() {
+    for (let p of ["cx", "cy"]) {
+      assertPresentationAttributeIsNotSupported("g", p, "1", p);
+    }
+  }, `cx and cy presentation attributes not supported on other elements`);
+}
+
+if (propertiesAreSupported(["x", "y", "width", "height"])) {
+  test(function() {
+    for (let p of ["x", "y", "width", "height"]) {
+      assertPresentationAttributeIsNotSupported("g", p, "1", p);
+    }
+  }, `x, y, width, and height presentation attributes not supported on other elements`);
+}
+
+if (CSS.supports("r", "initial")) {
+  test(function() {
+    assertPresentationAttributeIsNotSupported("g", "r", "1", "r");
+  }, `r presentation attribute not supported on other elements`);
+}
+
+if (propertiesAreSupported(["rx", "ry"])) {
+  test(function() {
+    for (let p of ["rx", "ry"]) {
+      assertPresentationAttributeIsNotSupported("g", p, "1", p);
+    }
+  }, `rx and ry presentation attributes not supported on other elements`);
+}
+
+if (CSS.supports("d", "initial")) {
+  test(function() {
+    assertPresentationAttributeIsNotSupported("g", "d", "M0,0 L1,1", "d");
+  }, `d presentation attribute not supported on other elements`);
+}
+
+
+// 3. Test that the fill presentation attribute is not supported on any
+// animation elements.
+
+if (CSS.supports("fill", "initial")) {
+  for (let e of ["animate", "animateMotion", "animateTransform", "discard", "set"]) {
+    test(function() {
+      assertPresentationAttributeIsNotSupported(e, "fill", "blue", "fill");
+    }, `fill presentation attribute not supported on ${e}`);
+  }
+}
+
+
+if (CSS.supports("transform", "initial")) {
+  // 4. Test support for the presentation attributes of the transform property,
+  // which have a different spelling depending on which element they're on.
+
+  test(function() {
+    assertPresentationAttributeIsSupported("g", "transform", "scale(2)", "transform");
+  }, `transform presentation attribute supported on g`);
+
+  test(function() {
+    assertPresentationAttributeIsSupported("pattern", "patternTransform", "scale(2)", "transform");
+  }, `patternTransform presentation attribute supported on pattern`);
+
+  for (let e of ["linearGradient", "radialGradient"]) {
+    test(function() {
+      assertPresentationAttributeIsSupported(e, "gradientTransform", "scale(2)", "transform");
+    }, `patternTransform presentation attribute supported on ${e}`);
+  }
+
+
+  // 5. Test that the wrong spellings of the presentation attributes of the
+  // transform property are not supported.
+
+  test(function() {
+    for (let e of ["pattern", "linearGradient", "radialGradient"]) {
+      assertPresentationAttributeIsNotSupported(e, "transform", "scale(2)", "transform");
+    }
+  }, `transform presentation attribute not supported on pattern or gradient elements`);
+
+  test(function() {
+    for (let e of ["g", "linearGradient", "radialGradient"]) {
+      assertPresentationAttributeIsNotSupported(e, "patternTransform", "scale(2)", "transform");
+    }
+  }, `patternTransform presentation attribute not supported on g or gradient elements`);
+
+  test(function() {
+    for (let e of ["g", "pattern"]) {
+      assertPresentationAttributeIsNotSupported(e, "gradientTransform", "scale(2)", "transform");
+    }
+  }, `gradientTransform presentation attribute not supported on g or pattern elements`);
+}
+</script>
diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes-unknown.html b/testing/web-platform/tests/svg/styling/presentation-attributes-unknown.html
new file mode 100644
index 0000000000..487175b144
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/presentation-attributes-unknown.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>SVG presentation attributes - on unknown SVG elements</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/styling.html#PresentationAttributes">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="presentation-attributes.js"></script>
+<svg id="svg"></svg>
+<script>
+// Test that all of the presentation attributes with no special
+// rules are supported on unknown SVG elements.
+
+for (let p in PROPERTIES) {
+  if (CSS.supports(p, "initial") && PROPERTIES[p].irrelevantElement) {
+    test(function() {
+      assertPresentationAttributeIsSupported("unknown", p, PROPERTIES[p].value, p);
+    }, `${p} presentation attribute supported on an unknown SVG element`);
+  }
+}
+</script>
diff --git a/testing/web-platform/tests/svg/styling/presentation-attributes.js b/testing/web-platform/tests/svg/styling/presentation-attributes.js
new file mode 100644
index 0000000000..96d9568e3b
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/presentation-attributes.js
@@ -0,0 +1,397 @@
+const PROPERTIES = {
+  "alignment-baseline": {
+    value: "middle",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "baseline-shift": {
+    value: "1",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "clip-path": {
+    value: "url(#e)",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "clip-rule": {
+    value: "evenodd",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "color": {
+    value: "blue",
+    relevantElement: "g",
+    irrelevantElement: "image",
+  },
+  "color-interpolation-filters": {
+    value: "sRGB",
+    relevantElement: "filter",
+    irrelevantElement: "linearGradient",
+  },
+  "color-interpolation": {
+    value: "linearRGB",
+    relevantElement: "linearGradient",
+    irrelevantElement: "image",
+  },
+  "cursor": {
+    value: "pointer",
+    relevantElement: "g",
+    irrelevantElement: "defs",
+  },
+  "cx": {
+    value: "1",
+    relevantElement: "circle",
+    irrelevantElement: null,
+  },
+  "cy": {
+    value: "1",
+    relevantElement: "circle",
+    irrelevantElement: null,
+  },
+  "direction": {
+    value: "rtl",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "display": {
+    value: "block",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "d": {
+    value: "M0,0 L1,1",
+    relevantElement: "path",
+    irrelevantElement: null,
+  },
+  "dominant-baseline": {
+    value: "middle",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "fill": {
+    value: "blue",
+    relevantElement: "g",
+    irrelevantElement: "image",
+  },
+  "fill-opacity": {
+    value: "0.5",
+    relevantElement: "g",
+    irrelevantElement: "image",
+  },
+  "fill-rule": {
+    value: "evenodd",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "filter": {
+    value: "url(#e)",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "flood-color": {
+    value: "blue",
+    relevantElement: "feFlood",
+    irrelevantElement: "rect",
+  },
+  "flood-opacity": {
+    value: "0.5",
+    relevantElement: "feFlood",
+    irrelevantElement: "rect",
+  },
+  "font-family": {
+    value: "Test Family",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "font-size": {
+    value: "50",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "font-size-adjust": {
+    value: "0.5",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "font-stretch": {
+    value: "expanded",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "font-style": {
+    value: "italic",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "font-variant": {
+    value: "small-caps",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "font-weight": {
+    value: "900",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "glyph-orientation-vertical": {
+    value: "90",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "height": {
+    value: "1",
+    relevantElement: "rect",
+    irrelevantElement: null,
+  },
+  "image-rendering": {
+    value: ["optimizeSpeed", "pixelated"],
+    relevantElement: "image",
+    irrelevantElement: "path",
+  },
+  "letter-spacing": {
+    value: "1px",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "lighting-color": {
+    value: "blue",
+    relevantElement: "feDiffuseLighting",
+    irrelevantElement: "rect",
+  },
+  "marker-end": {
+    value: "url(#e)",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "marker-mid": {
+    value: "url(#e)",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "marker-start": {
+    value: "url(#e)",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "mask-type": {
+    value: "alpha",
+    relevantElement: "mask",
+    irrelevantElement: "rect",
+  },
+  "mask": {
+    value: "url(#e)",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "opacity": {
+    value: "0.5",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "overflow": {
+    value: "scroll",
+    relevantElement: "svg",
+    irrelevantElement: "rect",
+  },
+  "paint-order": {
+    value: "fill stroke",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "pointer-events": {
+    value: "none",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "r": {
+    value: "1",
+    relevantElement: "circle",
+    irrelevantElement: null,
+  },
+  "rx": {
+    value: "1",
+    relevantElement: "rect",
+    irrelevantElement: null,
+  },
+  "ry": {
+    value: "1",
+    relevantElement: "rect",
+    irrelevantElement: null,
+  },
+  "shape-rendering": {
+    value: "geometricPrecision",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "stop-color": {
+    value: "blue",
+    relevantElement: "stop",
+    irrelevantElement: "rect",
+  },
+  "stop-opacity": {
+    value: "0.5",
+    relevantElement: "stop",
+    irrelevantElement: "rect",
+  },
+  "stroke": {
+    value: "blue",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "stroke-dasharray": {
+    value: "1 1",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "stroke-dashoffset": {
+    value: "1",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "stroke-linecap": {
+    value: "round",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "stroke-linejoin": {
+    value: "round",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "stroke-miterlimit": {
+    value: "1",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "stroke-opacity": {
+    value: "0.5",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "stroke-width": {
+    value: "2",
+    relevantElement: "path",
+    irrelevantElement: "image",
+  },
+  "text-anchor": {
+    value: "middle",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "text-decoration": {
+    value: "underline",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "text-overflow": {
+    value: "ellipsis",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "text-rendering": {
+    value: "geometricPrecision",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "transform-origin": {
+    value: "1px 1px",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "transform": {
+    value: "scale(2)",
+    relevantElement: "g",
+    irrelevantElement: null,
+  },
+  "unicode-bidi": {
+    value: "embed",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "vector-effect": {
+    value: "non-scaling-stroke",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "visibility": {
+    value: "hidden",
+    relevantElement: "g",
+    irrelevantElement: "linearGradient",
+  },
+  "white-space": {
+    value: "pre",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "width": {
+    value: "1",
+    relevantElement: "rect",
+    irrelevantElement: null,
+  },
+  "word-spacing": {
+    value: "1",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "writing-mode": {
+    value: "vertical-rl",
+    relevantElement: "text",
+    irrelevantElement: "rect",
+  },
+  "x": {
+    value: "1",
+    relevantElement: "rect",
+    irrelevantElement: null,
+  },
+  "y": {
+    value: "1",
+    relevantElement: "rect",
+    irrelevantElement: null,
+  },
+};
+
+function presentationAttributeIsSupported(element, attribute, value, property) {
+  let e = document.createElementNS("http://www.w3.org/2000/svg", element);
+  svg.append(e);
+  let propertyValueBefore = getComputedStyle(e).getPropertyValue(property);
+  e.setAttribute(attribute, value);
+  // Also set another attribute that is likely to be a presentation attribute,
+  // in order to provoke bugs.
+  const otherAttribute = attribute === 'stroke' ? 'fill' : 'stroke';
+  e.setAttribute(otherAttribute, 'red');
+  let propertyValueAfter = getComputedStyle(e).getPropertyValue(property);
+  e.remove();
+  return propertyValueBefore != propertyValueAfter;
+}
+
+function assertPresentationAttributeIsSupported(element, attribute, values, property) {
+  if (typeof values === 'string')
+    values = [values];
+  let supported = values.some(
+    value => presentationAttributeIsSupported(element, attribute, value, property));
+  assert_true(
+    supported,
+    `Presentation attribute ${attribute}="${values.join(" | ")}" should be supported on ${element} element`
+  );
+}
+
+function assertPresentationAttributeIsNotSupported(element, attribute, values, property) {
+  if (typeof values === 'string')
+    values = [values];
+  let supported = values.some(
+    value => presentationAttributeIsSupported(element, attribute, value, property));
+  assert_false(
+    supported,
+    `Presentation attribute ${attribute}="${values.join(" | ")}" should not be supported on ${element} element`
+  );
+}
+
+function propertiesAreSupported(properties) {
+  for (let p of properties) {
+    if (!CSS.supports(p, "initial")) {
+      return false;
+    }
+  }
+  return true;
+}
diff --git a/testing/web-platform/tests/svg/styling/render/transform-box-ref.svg b/testing/web-platform/tests/svg/styling/render/transform-box-ref.svg
new file mode 100644
index 0000000000..b41f8bb2a7
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/render/transform-box-ref.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300" height="200" viewBox="0 0 300 200">
+  <style>
+    rect {
+      fill: cyan;
+      stroke: cyan;
+      stroke-width: 16px;
+    }
+  </style>
+  <g transform="translate(140, 130)">
+    <rect id="r" x="-30" y="-10" width="80" height="20" />
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/render/transform-box.svg b/testing/web-platform/tests/svg/styling/render/transform-box.svg
new file mode 100644
index 0000000000..99a273c176
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/render/transform-box.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300" height="200" viewBox="0 0 300 200">
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/styling.html#RequiredProperties"/>
+    <h:link rel="match" href="transform-box-ref.svg"/>
+    <h:meta name="assert" content="The transform-box property impacts SVG rendering."/>
+  </metadata>
+
+  <style>
+    #r {
+      fill: cyan;
+      stroke: cyan;
+      stroke-width: 8px;
+      transform-box: fill-box;
+      transform-origin: 75% 100%;
+      transform: scale(2, 2);
+    }
+  </style>
+  <g transform="translate(140, 130)">
+    <rect id="r" x="0" y="0" width="40" height="10" />
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual-ref.svg b/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual-ref.svg
new file mode 100644
index 0000000000..7cb98da727
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual-ref.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300" height="200" viewBox="0 0 300 200">
+  <style>
+    rect {
+      fill: green;
+    }
+  </style>
+  <g transform="translate(140, 130)">
+    <rect x="-30" y="-20" width="80" height="30"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual.svg b/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual.svg
new file mode 100644
index 0000000000..e05c2f01c1
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/render/transform-origin-not-explicit-style-visual.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300" height="200" viewBox="0 0 300 200">
+  <metadata>
+    <h:link rel="help" href="ttps://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"/>
+    <link rel="match" href="transform-origin-not-explicit-style-ref.svg"/>
+    <h:meta name="assert" content="The transform-origin attribute impacts SVG rendering."/>
+  </metadata>
+  <style>
+    rect {
+      fill: green;
+    }
+  </style>
+  <g transform="translate(140, 130)">
+    <rect x="0" y="0" width="40" height="10" transform="scale(2, 3)" transform-origin="30 10"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/render/transform-origin-ref.svg b/testing/web-platform/tests/svg/styling/render/transform-origin-ref.svg
new file mode 100644
index 0000000000..b0e3b47e0d
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/render/transform-origin-ref.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300" height="200" viewBox="0 0 300 200">
+  <style>
+    rect {
+      fill: cyan;
+    }
+  </style>
+  <g transform="translate(140, 130)">
+    <rect x="-30" y="-20" width="80" height="30" />
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/render/transform-origin.svg b/testing/web-platform/tests/svg/styling/render/transform-origin.svg
new file mode 100644
index 0000000000..07e7dd7ee2
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/render/transform-origin.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300" height="200" viewBox="0 0 300 200">
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/styling.html#RequiredProperties"/>
+    <h:link rel="match" href="transform-origin-ref.svg"/>
+    <h:meta name="assert" content="The transform-origin property impacts SVG rendering."/>
+  </metadata>
+
+  <style>
+    rect {
+      fill: cyan;
+      transform-origin: 30px 10px;
+      transform: scale(2, 3);
+    }
+  </style>
+  <g transform="translate(140, 130)">
+    <rect x="0" y="0" width="40" height="10" />
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/render/transform-ref.svg b/testing/web-platform/tests/svg/styling/render/transform-ref.svg
new file mode 100644
index 0000000000..02f49c6da3
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/render/transform-ref.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300" height="200" viewBox="0 0 300 200">
+  <style>
+    rect {
+      fill: cyan;
+    }
+  </style>
+  <rect x="169" y="141" width="40" height="10" />
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/render/transform.svg b/testing/web-platform/tests/svg/styling/render/transform.svg
new file mode 100644
index 0000000000..1924026f98
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/render/transform.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="300" height="200" viewBox="0 0 300 200">
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/styling.html#RequiredProperties"/>
+    <h:link rel="match" href="transform-ref.svg"/>
+    <h:meta name="assert" content="The transform property impacts SVG rendering."/>
+  </metadata>
+
+  <style>
+    rect {
+      fill: cyan;
+      transform: translate(29px, 11px);
+    }
+  </style>
+  <rect x="140" y="130" width="40" height="10" />
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/required-properties.svg b/testing/web-platform/tests/svg/styling/required-properties.svg
new file mode 100644
index 0000000000..37bf0fdf7e
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/required-properties.svg
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml">
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/styling.html#RequiredProperties"/>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/propidx.html"/>
+    <h:meta name="assert" content="All required properties are supported"/>
+    <!-- Note: This test does not verify that the properties are actually applied to SVG rendering. -->
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <script><![CDATA[
+  var properties = [
+    // Properties listed in https://svgwg.org/svg2-draft/propidx.html
+    "alignment-baseline",
+    "baseline-shift",
+    "clip",
+    "clip-path",
+    "clip-rule",
+    "color",
+    "color-interpolation",
+    "cursor",
+    "direction",
+    "display",
+    "dominant-baseline",
+    "fill",
+    "fill-opacity",
+    "fill-rule",
+    "filter",
+    "flood-color",
+    "flood-opacity",
+    "font",
+    "font-family",
+    "font-size",
+    "font-size-adjust",
+    "font-stretch",
+    "font-style",
+    "font-variant",
+    "font-weight",
+    "glyph-orientation-vertical",
+    "image-rendering",
+    "letter-spacing",
+    "lighting-color",
+    "line-height",
+    "marker",
+    "marker-end",
+    "marker-mid",
+    "marker-start",
+    "mask",
+    "opacity",
+    "overflow",
+    "paint-order",
+    "pointer-events",
+    "shape-rendering",
+    "stop-color",
+    "stop-opacity",
+    "stroke",
+    "stroke-dasharray",
+    "stroke-dashoffset",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "stroke-miterlimit",
+    "stroke-opacity",
+    "stroke-width",
+    "text-anchor",
+    "text-decoration",
+    "text-rendering",
+    "unicode-bidi",
+    "vector-effect",
+    "visibility",
+    "word-spacing",
+    "white-space",
+    "writing-mode",
+
+    // Properties listed in https://svgwg.org/svg2-draft/styling.html#RequiredProperties
+    "display",
+    "overflow",
+    "visibility",
+    "cursor",
+    "text-overflow",
+    "clip",
+    "clip-path",
+    "clip-rule",
+    "mask",
+    "color",
+    "opacity",
+    "color-interpolation-filters",
+    "filter",
+    "flood-color",
+    "flood-opacity",
+    "isolation",
+    "lighting-color",
+    "transform",
+    "transform-box",
+    "transform-origin",
+    "letter-spacing",
+    "text-align",
+    "text-align-all",
+    "text-align-last",
+    "text-indent",
+    "word-spacing",
+    "white-space",
+    "text-space-collapse",
+    "vertical-align",
+    "dominant-baseline",
+    "alignment-baseline",
+    "baseline-shift",
+    "direction",
+    "text-orientation",
+    "writing-mode",
+    "font",
+    "font-family",
+    "font-feature-settings",
+    "font-kerning",
+    "font-size",
+    "font-size-adjust",
+    "font-stretch",
+    "font-style",
+    "font-variant",
+    "font-variant-position",
+    "font-variant-ligatures",
+    "font-variant-caps",
+    "font-variant-numeric",
+    "font-variant-east-asian",
+    "font-weight",
+    "text-decoration",
+    "text-decoration-line",
+    "text-decoration-style",
+    "text-decoration-color"
+  ];
+  properties.sort();
+
+  var target = document.getElementById('target');
+  var previous = null;
+  for (var property of properties) {
+    if (property === previous)
+      continue; // Avoid duplicate test names
+    previous = property;
+
+    test(function() {
+      assert_true(property in target.style);
+    }, 'Property "' + property + '" is supported');
+  }
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/style-sheet-interfaces.svg b/testing/web-platform/tests/svg/styling/style-sheet-interfaces.svg
new file mode 100644
index 0000000000..9532e64929
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/style-sheet-interfaces.svg
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml">
+  <metadata>
+    <h:link rel="help" href="https://www.w3.org/TR/SVG11/styling.html#StyleElement"/>
+    <h:meta name="assert" content="SVGStyle objects have the properties specified in their interfaces"/>
+  </metadata>
+  <h:script src="/resources/testharness.js" type="text/javascript"/>
+  <h:script src="/resources/testharnessreport.js" type="text/javascript"/>
+  <style id="styleElement" type="text/css" media="all" title="internal style sheet" disabled="disabled">
+    @import url('support/a-green.css');
+    * { margin: 0; padding: 0; }
+  </style>
+  <script>
+    var styleElement = document.getElementById("styleElement");
+
+    var styleSheet;
+
+    // styleElement.sheet exists and is a CSSStyleSheet
+    test(function() {
+        assert_idl_attribute(styleElement, "sheet");
+        assert_readonly(styleElement, "sheet");
+        styleSheet = styleElement.sheet;
+        assert_true(styleSheet instanceof CSSStyleSheet);
+    }, "sheet_property");
+
+    // The sheet property on LinkStyle should always return the current associated style sheet.
+    test(function () {
+      var style = document.createElementNS("http://www.w3.org/2000/svg", "style");
+      document.querySelector("svg").appendChild(style);
+      var sheet1 = style.sheet;
+      assert_equals(sheet1.cssRules.length, 0);
+      style.appendChild(document.createTextNode("a { color: green; }"));
+      assert_equals(style.sheet.cssRules.length, 1);
+    }, "sheet_property_updates");
+
+    // ownerRule, cssRules, insertRule and deleteRule properties exist on CSSStyleSheet
+    // ownerRule, cssRules are read only
+    test(function() {
+        assert_idl_attribute(styleSheet, "ownerRule");
+        assert_idl_attribute(styleSheet, "cssRules");
+        assert_inherits(styleSheet, "insertRule");
+        assert_inherits(styleSheet, "deleteRule");
+
+        assert_readonly(styleSheet, "ownerRule");
+        assert_readonly(styleSheet, "cssRules");
+    }, "CSSStyleSheet_properties");
+
+    var importSheet;
+    // CSSStyleSheet initial property values are correct
+    test(function() {
+        assert_equals(styleSheet.ownerRule, null);
+        assert_true(styleSheet.cssRules.length > 0);
+        assert_true(styleSheet.cssRules.item(0) instanceof CSSImportRule);
+        importSheet = styleSheet.cssRules.item(0).styleSheet;
+    }, "CSSStyleSheet_property_values");
+
+    // type, disabled, ownerNode, parentStyleSheet, href, title, and media properties exist on StyleSheet
+    // type, ownerNode, parentStyleSheet, href, and title properties are read only
+    test(function() {
+        assert_idl_attribute(styleSheet, "type");
+        assert_idl_attribute(styleSheet, "disabled");
+        assert_idl_attribute(styleSheet, "ownerNode");
+        assert_idl_attribute(styleSheet, "parentStyleSheet");
+        assert_idl_attribute(styleSheet, "href");
+        assert_idl_attribute(styleSheet, "title");
+        assert_idl_attribute(styleSheet, "media");
+
+        assert_readonly(styleSheet, "type");
+        assert_readonly(styleSheet, "ownerNode");
+        assert_readonly(styleSheet, "parentStyleSheet");
+        assert_readonly(styleSheet, "href");
+        assert_readonly(styleSheet, "title");
+    }, "StyleSheet_properties");
+
+    // StyleSheet initial property values are correct
+    test(function() {
+        assert_equals(styleSheet.type, "text/css");
+        assert_equals(styleSheet.disabled, false);
+
+        assert_equals(styleSheet.ownerNode, styleElement);
+        assert_equals(importSheet.ownerNode, null);
+
+        assert_equals(styleSheet.href, null);
+        assert_regexp_match(importSheet.href, /support\/a-green.css$/);
+
+        assert_equals(styleSheet.parentStyleSheet, null);
+        assert_equals(importSheet.parentStyleSheet, styleSheet);
+
+        assert_equals(styleSheet.title, "internal style sheet");
+        assert_equals(styleSheet.media.item(0), "all");
+    }, "StyleSheet_property_values");
+  </script>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/support/a-green.css b/testing/web-platform/tests/svg/styling/support/a-green.css
new file mode 100644
index 0000000000..b0dbb071d5
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/support/a-green.css
@@ -0,0 +1 @@
+.a { color: green; }
diff --git a/testing/web-platform/tests/svg/styling/support/circle-padding-right.svg b/testing/web-platform/tests/svg/styling/support/circle-padding-right.svg
new file mode 100644
index 0000000000..bf39907c41
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/support/circle-padding-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" style="padding-right:30px">
+  <circle cx="50" cy="50" r="48"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/support/circle.svg b/testing/web-platform/tests/svg/styling/support/circle.svg
new file mode 100644
index 0000000000..8d897abee3
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/support/circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+  <circle cx="50" cy="50" r="48"/>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/use-element-animations.html b/testing/web-platform/tests/svg/styling/use-element-animations.html
new file mode 100644
index 0000000000..b096060118
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/use-element-animations.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<title>SVG Test: Independent CSS animations on svg:use instantiation and corresponding element</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement">
+<link rel="match" href="use-element-transitions-ref.html">
+<style>
+  use {
+    font-size: 40px;
+  }
+  g {
+    font-size: 120px;
+  }
+  @keyframes font-anim {
+    0% { /* starts from computed font-size */ }
+    100% { font-size: 80px; }
+  }
+  text {
+    animation: font-anim 100s steps(2, start);
+  }
+</style>
+<svg>
+  <use id="use_elm" xlink:href="#tmpl" />
+  <g id="g_elm">
+    <text id="tmpl" x="10" y="100">Hello!</text>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/use-element-transitions-ref.html b/testing/web-platform/tests/svg/styling/use-element-transitions-ref.html
new file mode 100644
index 0000000000..f564b90de8
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/use-element-transitions-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Test Reference</title>
+<style>
+  use { font-size: 60px; }
+  g { font-size: 100px; }
+</style>
+<svg>
+  <use id="use_elm" xlink:href="#tmpl" />
+  <g id="g_elm">
+    <text id="tmpl" x="10" y="100">Hello!</text>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/svg/styling/use-element-transitions.html b/testing/web-platform/tests/svg/styling/use-element-transitions.html
new file mode 100644
index 0000000000..68653835f4
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/use-element-transitions.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>SVG Test: Independent CSS transitions on svg:use instantiation and corresponding element</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement">
+<link rel="match" href="use-element-transitions-ref.html">
+<style>
+  use {
+    font-size: 40px;
+  }
+  g {
+    font-size: 120px;
+  }
+  text {
+    transition: font-size 100s steps(2, start);
+  }
+</style>
+<svg>
+  <use id="use_elm" xlink:href="#tmpl" />
+  <g id="g_elm">
+    <text id="tmpl" x="10" y="100">Hello!</text>
+  </g>
+</svg>
+<script>
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      tmpl.style.fontSize = "80px";
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/svg/styling/use-element-web-animations.html b/testing/web-platform/tests/svg/styling/use-element-web-animations.html
new file mode 100644
index 0000000000..bbf878b3a9
--- /dev/null
+++ b/testing/web-platform/tests/svg/styling/use-element-web-animations.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<title>SVG Test: Independent Web animations on svg:use instantiation and corresponding element</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement">
+<link rel="match" href="use-element-transitions-ref.html">
+<style>
+  use {
+    font-size: 40px;
+  }
+  g {
+    font-size: 120px;
+  }
+</style>
+<svg>
+  <use id="use_elm" xlink:href="#tmpl" />
+  <g id="g_elm">
+    <text id="tmpl" x="10" y="100">Hello!</text>
+  </g>
+</svg>
+<script>
+  tmpl.animate([
+      { /* starts from computed font-size */ easing: "steps(2, start)"},
+      { font-size: "80px" }
+  ], 100000);
+</script>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:47:29 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:47:29 +0000
commit	0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
tree	a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/svg/styling
parent	Initial commit. (diff)
download	firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip