rect-calc-dynamic-viewport.html (1338B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>Changing container size of SVG with calc() width/height/x/y/rx/ry on <rect></title> 4 <link rel="match" href="rect-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 <rect style="width: calc(50% + 50px)" height="100"/> 10 </svg> 11 <svg width="100%" height="100%"> 12 <rect width="100" height="100" style="x: calc(25% + 25px)"/> 13 </svg> 14 <svg width="100%" height="100%"> 15 <rect width="100" height="100" style="rx: calc(25% + 25px)"/> 16 </svg> 17 </div> 18 <div id="vcontainer" style="width: 100px; height: 50px; position: absolute; left: 116px"> 19 <svg width="100%" height="100%"> 20 <rect width="100" style="height: calc(50% + 50px)"/> 21 </svg> 22 <svg width="100%" height="100%"> 23 <rect width="100" height="100" style="y: calc(25% + 25px)"/> 24 </svg> 25 <svg width="100%" height="100%"> 26 <rect width="100" height="100" style="ry: calc(25% + 25px)"/> 27 </svg> 28 </div> 29 <script> 30 waitForAtLeastOneFrame().then(() => { 31 document.getElementById('hcontainer').style.width = '100px'; 32 document.getElementById('vcontainer').style.height = '100px'; 33 takeScreenshot(); 34 }); 35 </script>