svg-percent-stroke-dasharray-rect-viewbox-update.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/painting/reftests/svg-percent-stroke-dasharray-rect-viewbox-update.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<title>A percentage stroke-dasharray is updated when the viewport changes (&lt;rect>)</title>

<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/painting.html#StrokeDashing">

<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/coords.html#Units">

<link rel="match" href="../../struct/reftests/reference/green-100x100.html">

<script src="/common/reftest-wait.js"></script>

<script src="/common/rendering-utils.js"></script>

<svg id="root" height="200" width="200" viewBox="0 0 200 200">

  <rect y="12.5" width="100" height="100" stroke-dasharray="50% 400"

        stroke="green" stroke-width="25" fill="none"/>

  <rect y="37.5" width="100" height="100" stroke-dasharray="calc(25% + 25px) 400"

        stroke="green" stroke-width="25" fill="none"/>

</svg>

<script>

  waitForAtLeastOneFrame().then(() => {

    document.getElementById("root").setAttribute("viewBox", "0 0 100 100");

    takeScreenshot();

});

</script>