non-scaling-stroke-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/painting/reftests/non-scaling-stroke-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<title>non-scaling-stroke with scaling</title>

<link rel="help" href="https://svgwg.org/svg2-draft/painting.html#PaintingVectorEffects" />

<link rel="match" href="green-100x100.svg" />

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

<body>

  <style>

    body {

      border: none;

      margin: 0;

      width: 200px;

      height: 200px;

      transform: scale(2);

    svg {

      width: 100px;

      height: 100px;

    rect {

      fill: red;

      stroke: green;

      stroke-width: 50px;

      transform: scale(0);

      animation: reset 0.01s ease-in-out 1 both;

      vector-effect: non-scaling-stroke;

    @keyframes reset { to { transform: none; }}

  </style>

  <svg>

    <rect width="75" height="75"/>

    <script>

      document.querySelector('rect').onanimationend = takeScreenshot;

    </script>

  </svg>

</body>

</html>