svg-baseval-in-display-none.html (2170B)
1 <!DOCTYPE html> 2 <title>baseVal in symbol and other display:none</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength"/> 6 <link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGAnimatedLength__baseVal"/> 7 <svg width="0" height="0"> 8 <svg width="600" height="400" font-size="5"> 9 <symbol width="40em" height="20em"> 10 <g font-size="10px"> 11 <rect id="r1" x="5em" y="6em" width="20%" height="30%" /> 12 <circle id="c1" cx="5em" cy="6em" r="10em" /> 13 </g> 14 </symbol> 15 <g font-size="10px" style="display:none"> 16 <rect id="r2" x="5em" y="6em" width="20%" height="30%" /> 17 <circle id="c2" cx="5em" cy="6em" r="10em" /> 18 </g> 19 </svg> 20 </svg> 21 <script> 22 let r1 = document.getElementById("r1"), 23 c1 = document.getElementById("c1"), 24 r2 = document.getElementById("r2"), 25 c2 = document.getElementById("c2"); 26 27 const assertBaseVal = (length, expected, info) => { 28 assert_equals(length.baseVal.value, expected, info); 29 }; 30 31 let tEm = async_test("With em"); 32 let tEmDone = tEm.step_func_done(() => { 33 assertBaseVal(r1.x, 50, "r1.x"); 34 assertBaseVal(r1.y, 60, "r1.y"); 35 assertBaseVal(c1.cx, 50, "c1.cx"); 36 assertBaseVal(c1.cy, 60, "c1.cy"); 37 assertBaseVal(c1.r, 100, "c1.r"); 38 39 assertBaseVal(r2.x, 50, "r2.x"); 40 assertBaseVal(r2.y, 60, "r2.y"); 41 assertBaseVal(c2.cx, 50, "c2.cx"); 42 assertBaseVal(c2.cy, 60, "c2.cy"); 43 assertBaseVal(c2.r, 100, "c2.r"); 44 }); 45 46 let tEmPercentage = async_test("With em and percentage"); 47 let tEmPercentageDone = tEmPercentage.step_func_done(() => { 48 assertBaseVal(r1.width, 120, "r1.width"); 49 assertBaseVal(r1.height, 120, "r1.height"); 50 51 assertBaseVal(r2.width, 120, "r2.width"); 52 assertBaseVal(r2.height, 120, "r2.height"); 53 }); 54 55 const main = () => { 56 window.requestAnimationFrame(() => { 57 tEmDone(); 58 tEmPercentageDone(); 59 }); 60 }; 61 62 if (document.readyState === "complete") { 63 main(); 64 } else { 65 window.addEventListener("load", main); 66 } 67 </script>