rect-calc-dynamic-viewport.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/geometry/reftests/rect-calc-dynamic-viewport.html - WPT Dashboard Interop Dashboard

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