Blitz - WPT: rect-calc-dynamic-viewport.html

wpt / svg / geometry / reftests / rect-calc-dynamic-viewport.html

/svg/geometry/reftests/rect-calc-dynamic-viewport.html

<!doctype html>
<html class="reftest-wait">
<title>Changing container size of SVG with calc() width/height/x/y/rx/ry on &lt;rect></title>
<link rel="match" href="rect-calc-dynamic-viewport-ref.html">
<script src="/common/rendering-utils.js"></script>
<script src="/common/reftest-wait.js"></script>
<div id="hcontainer" style="width: 50px; height: 100px; position: absolute">
  <svg width="100%" height="100%">
    <rect style="width: calc(50% + 50px)" height="100"/>
  </svg>
  <svg width="100%" height="100%">
    <rect width="100" height="100" style="x: calc(25% + 25px)"/>
  </svg>
  <svg width="100%" height="100%">
    <rect width="100" height="100" style="rx: calc(25% + 25px)"/>
  </svg>
</div>
<div id="vcontainer" style="width: 100px; height: 50px; position: absolute; left: 116px">
  <svg width="100%" height="100%">
    <rect width="100" style="height: calc(50% + 50px)"/>
  </svg>
  <svg width="100%" height="100%">
    <rect width="100" height="100" style="y: calc(25% + 25px)"/>
  </svg>
  <svg width="100%" height="100%">
    <rect width="100" height="100" style="ry: calc(25% + 25px)"/>
  </svg>
</div>
<script>
  waitForAtLeastOneFrame().then(() => {
    document.getElementById('hcontainer').style.width = '100px';
    document.getElementById('vcontainer').style.height = '100px';
    takeScreenshot();
  });
</script>

/svg/geometry/reftests/rect-calc-dynamic-viewport-ref.html

<!doctype html>
<title>Changing container size of SVG with calc() width/height/x/y/rx/ry on &lt;rect> (reference)</title>
<div id="hcontainer" style="width: 100px; height: 100px; position: absolute">
  <svg width="100" height="100">
    <rect width="100" height="100"/>
  </svg>
  <svg width="100" height="100">
    <rect width="100" height="100" x="50"/>
  </svg>
  <svg width="100" height="100">
    <rect width="100" height="100" rx="50"/>
  </svg>
</div>
<div id="vcontainer" style="width: 100px; height: 100px; position: absolute; left: 116px">
  <svg width="100" height="100">
    <rect width="100" height="100"/>
  </svg>
  <svg width="100" height="100">
    <rect width="100" height="100" y="50"/>
  </svg>
  <svg width="100" height="100">
    <rect width="100" height="100" ry="50"/>
  </svg>
</div>