| <!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> |