ellipse-calc-dynamic-viewport.html (1125B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>Changing container size of SVG with calc() cx/cy/rx/ry on <ellipse></title> 4 <link rel="match" href="ellipse-calc-dynamic-viewport-ref.html"> 5 <script src="/common/rendering-utils.js"></script> 6 <script src="/common/reftest-wait.js"></script> 7 <div id="hcontainer" style="width: 50px; height: 100px; position: absolute"> 8 <svg width="100%" height="100%"> 9 <ellipse cy="50" style="rx: calc(50% + 50px)" ry="50"/> 10 </svg> 11 <svg width="100%" height="100%"> 12 <ellipse style="cx: calc(25% + 25px)" cy="50" rx="50" ry="50"/> 13 </svg> 14 </div> 15 <div id="vcontainer" style="width: 100px; height: 50px; position: absolute; left: 116px"> 16 <svg width="100%" height="100%"> 17 <ellipse cx="50" rx="50" style="ry: calc(50% + 50px)"/> 18 </svg> 19 <svg width="100%" height="100%"> 20 <ellipse cx="50" style="cy: calc(25% + 25px)" rx="50" ry="50"/> 21 </svg> 22 </div> 23 <script> 24 waitForAtLeastOneFrame().then(() => { 25 document.getElementById('hcontainer').style.width = '100px'; 26 document.getElementById('vcontainer').style.height = '100px'; 27 takeScreenshot(); 28 }); 29 </script>