Bug 1554488 - Add WPT test for baseVal behavior inside symbol/display…

…:none r=birtles This test is for baseVal behavior interacting with <symbol>, display:none and font-size. Differential Revision: https://phabricator.services.mozilla.com/D32624
iaxat · Jun 4, 2019 · 432956e · 432956e
1 parent c4f84d1
commit 432956e
Showing 1 changed file with 67 additions and 0 deletions.
diff --git a/testing/web-platform/tests/svg/geometry/svg-baseval-in-display-none.html b/testing/web-platform/tests/svg/geometry/svg-baseval-in-display-none.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<title>baseVal in symbol and other display:none</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength"/>
+<link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGAnimatedLength__baseVal"/>
+<svg width="0" height="0">
+  <svg width="600" height="400" font-size="5">
+    <symbol width="40em" height="20em">
+      <g font-size="10px">
+        <rect id="r1" x="5em" y="6em" width="20%" height="30%" />
+        <circle id="c1" cx="5em" cy="6em" r="10em" />
+      </g>
+    </symbol>
+    <g font-size="10px" style="display:none">
+      <rect id="r2" x="5em" y="6em" width="20%" height="30%" />
+      <circle id="c2" cx="5em" cy="6em" r="10em" />
+    </g>
+  </svg>
+</svg>
+<script>
+  let r1 = document.getElementById("r1"),
+      c1 = document.getElementById("c1"),
+      r2 = document.getElementById("r2"),
+      c2 = document.getElementById("c2");
+
+  const assertBaseVal = (length, expected, info) => {
+    assert_equals(length.baseVal.value, expected, info);
+  };
+
+  let tEm = async_test("With em");
+  let tEmDone = tEm.step_func_done(() => {
+    assertBaseVal(r1.x, 50, "r1.x");
+    assertBaseVal(r1.y, 60, "r1.y");
+    assertBaseVal(c1.cx, 50, "c1.cx");
+    assertBaseVal(c1.cy, 60, "c1.cy");
+    assertBaseVal(c1.r, 100, "c1.r");
+
+    assertBaseVal(r2.x, 50, "r2.x");
+    assertBaseVal(r2.y, 60, "r2.y");
+    assertBaseVal(c2.cx, 50, "c2.cx");
+    assertBaseVal(c2.cy, 60, "c2.cy");
+    assertBaseVal(c2.r, 100, "c2.r");
+  });
+
+  let tEmPercentage = async_test("With em and percentage");
+  let tEmPercentageDone = tEmPercentage.step_func_done(() => {
+    assertBaseVal(r1.width, 40, "r1.width");
+    assertBaseVal(r1.height, 30, "r1.height");
+
+    assertBaseVal(r2.width, 120, "r2.width");
+    assertBaseVal(r2.height, 120, "r2.height");
+  });
+
+  const main = () => {
+    window.requestAnimationFrame(() => {
+      tEmDone();
+      tEmPercentageDone();
+    });
+  };
+
+  if (document.readyState === "complete") {
+    main();
+  } else {
+    window.addEventListener("load", main);
+  }
+</script>