<!DOCTYPE html>
<html>
  <head>
    <title>Render corner shape</title>
    <link rel="match" href="render-corner-shape-ref.html" >
    <link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shape-rendering">
    <meta name="fuzzy" content="maxDifference=0-200;totalPixels=0-400">
    <meta
      name="variant"
      content="?border-top-right-radius=100&corner-top-right-shape=0&shadow-spread=30"
    >
    <meta
      name="variant"
      content="?border-radius=40&corner-shape=3&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?border-radius=40&corner-shape=-1.5&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?border-radius=40&corner-shape=-infinity&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?border-radius=50&corner-shape=0&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?border-radius=25&corner-shape=2&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?border-radius=5&corner-top-left-shape=0.5&corner-bottom-right-shape=-0.5&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=0&corner-top-right-shape=notch&corner-bottom-right-shape=2&corner-bottom-left-shape=-1&border-width=20&shadow-spread=20&border-radius=50"
    >
    <meta
      name="variant"
      content="?border-top-left-radius=10,70&corner-top-left-shape=0&shadow-spread=15"
    >
    <meta
      name="variant"
      content="?border-top-left-radius=10,70&corner-top-left-shape=-0.5&shadow-spread=15"
    >
    <meta
      name="variant"
      content="?border-radius=20,50%&corner-shape=0&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?border-radius=50%&corner-shape=0&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?border-radius=50%,25&corner-shape=1&shadow-spread=20&border-width=10"
    >
    <meta
      name="variant"
      content="?border-radius=50%,25&corner-shape=0.4&shadow-spread=20&border-width=10"
    >
    <meta
      name="variant"
      content="?border-radius=50%,25&corner-shape=0&shadow-spread=20&border-width=10"
    >
    <meta
      name="variant"
      content="?border-radius=50%,25&corner-shape=-0.4&shadow-spread=20&border-width=10"
    >
    <meta
      name="variant"
      content="?border-radius=50%,25&corner-shape=-1&shadow-spread=20&border-width=10"
    >
    <meta
      name="variant"
      content="?border-radius=10,50%&corner-shape=0&shadow-spread=20"
    >
    <meta
      name="variant"
      content="?border-radius=20&corner-shape=-0.5&shadow-spread=30"
    >
    <meta
      name="variant"
      content="?border-radius=20,40&corner-shape=-0.5&shadow-spread=40"
    >
    <meta
      name="variant"
      content="?border-radius=20,40&corner-shape=-0.5&shadow-spread=16"
    >
    <meta
      name="variant"
      content="?border-radius=20,40&corner-shape=-1&shadow-spread=16"
    >
    <meta
      name="variant"
      content="?width=50&height=30&border-radius=5&corner-shape=1&shadow-spread=50"
    >
    <meta
      name="variant"
      content="?width=50&height=30&border-radius=5&corner-shape=2&shadow-spread=50"
    >
    <meta
      name="variant"
      content="?width=50&height=30&corner-top-left-shape=0&corner-top-right-shape=notch&corner-bottom-right-shape=2&corner-bottom-left-shape=-1&shadow-spread=50&border-radius=5"
    >
    <meta
      name="variant"
      content="?corner-shape=2&border-top-right-radius=100%&shadow-position=inset&shadow-spread=20"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=100%&shadow-position=inset&shadow-spread=20"
    >
    <meta
      name="variant"
      content="?corner-shape=0.5&border-top-right-radius=100%&shadow-position=inset&shadow-spread=20"
    >
    <meta
      name="variant"
      content="?corner-shape=0&border-top-right-radius=100%&shadow-position=inset&shadow-spread=20"
    >
    <meta
      name="variant"
      content="?corner-shape=-0.5&border-top-right-radius=100%&shadow-position=inset&shadow-spread=20"
    >
    <meta
      name="variant"
      content="?corner-shape=-1&border-top-right-radius=100%&shadow-position=inset&shadow-spread=20"
    >
    <meta
      name="variant"
      content="?corner-shape=-2&border-top-right-radius=100%&shadow-position=inset&shadow-spread=20"
    >
    <meta
      name="variant"
      content="?corner-shape=2&border-top-right-radius=100%&border-top-width=20&border-bottom-width=20&shadow-position=inset&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?corner-shape=1&border-top-right-radius=100%&border-top-width=20&border-bottom-width=20&shadow-position=inset&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?corner-shape=0.5&border-top-right-radius=100%&border-top-width=20&border-bottom-width=20&shadow-position=inset&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?corner-shape=0&border-top-right-radius=100%&border-top-width=20&border-bottom-width=20&shadow-position=inset&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?corner-shape=-1&border-top-right-radius=100%&border-top-width=20&border-bottom-width=20&shadow-position=inset&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?corner-shape=-0.5&border-top-right-radius=100%&border-top-width=20&border-bottom-width=20&shadow-position=inset&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?corner-shape=-2&border-top-right-radius=100%&border-top-width=20&border-bottom-width=20&shadow-position=inset&shadow-spread=10"
    >
    <meta
      name="variant"
      content="?corner-shape=0&border-top-left-radius=50%&border-bottom-left-radius=50%&border-left-width=40&shadow-position=inset&shadow-spread=20"
    >
    <meta
      name="variant"
      content="?corner-shape=0.2&border-top-left-radius=50%&border-bottom-left-radius=50%&border-left-width=40&shadow-position=inset&shadow-offset-x=40"
    >
    <meta
      name="variant"
      content="?corner-shape=scoop&border-radius=20%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=-2&border-radius=20%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=bevel&border-radius=40&border-width=10"
    >
    <meta
      name="variant"
      content="?border-radius=20&corner-shape=0.7&border-width=30"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=scoop&corner-top-right-shape=scoop&border-radius=50%"
    >
    <meta
      name="variant"
      content="?corner-shape=squircle&border-radius=25%&border-width=20"
    >
    <meta name="variant" content="?corner-shape=squircle&border-radius=50%" >
    <meta
      name="variant"
      content="?corner-shape=-7&border-radius=20%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=5&border-radius=20%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=bevel&corner-bottom-right-shape=bevel&border-radius=40&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=-4&border-radius=40%"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=2.5&border-radius=20%&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-top-right-shape=scoop&border-radius=20%&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-shape=0.8&border-radius=40&border-width=10"
    >
    <meta
      name="variant"
      content="?border-radius=50%&corner-top-left-shape=scoop&corner-bottom-right-shape=scoop&corner-top-right-shape=notch&corner-bottom-left-shape=notch"
    >
    <meta
      name="variant"
      content="?border-radius=50%&corner-top-right-shape=scoop&corner-bottom-left-shape=scoop&corner-top-left-shape=notch&corner-bottom-right-shape=notch"
    >
    <meta
      name="variant"
      content="?corner-shape=squircle&border-top-left-radius=30%"
    >
    <meta
      name="variant"
      content="?corner-shape=-2&border-top-left-radius=40%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=squircle&border-top-right-radius=30"
    >
    <meta
      name="variant"
      content="?corner-shape=square&border-bottom-left-radius=5"
    >
    <meta name="variant" content="?corner-shape=2.3&border-radius=40%" >
    <meta name="variant" content="?corner-shape=3&border-top-right-radius=33" >
    <meta
      name="variant"
      content="?corner-top-right-shape=-4&border-top-right-radius=50"
    >
    <meta
      name="variant"
      content="?corner-bottom-right-shape=0.8&border-bottom-right-radius=50%"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=bevel&border-radius=40"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=scoop&border-radius=40"
    >
    <meta name="variant" content="?corner-top-left-shape=-4&border-radius=40" >
    <meta
      name="variant"
      content="?corner-top-left-shape=0.5&border-radius=40"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=-0.5&border-radius=40"
    >
    <meta
      name="variant"
      content="?corner-shape=squircle&border-top-left-radius=25%&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-bottom-left-shape=bevel&border-bottom-left-radius=30"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=bevel&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-top-right-shape=bevel&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-bottom-left-shape=bevel&border-width=10&border-radius=20"
    >
    <meta
      name="variant"
      content="?corner-bottom-right-shape=bevel&border-width=10&border-radius=20"
    >
    <meta
      name="variant"
      content="?corner-bottom-right-shape=bevel&corner-bottom-left-shape=bevel"
    >
    <meta
      name="variant"
      content="?border-top-left-radius=50%&corner-shape=0.7&border-left-width=30&border-top-width=30"
    >
    <meta
      name="variant"
      content="?corner-shape=notch&border-radius=30&border-width=30"
    >
    <meta
      name="variant"
      content="?corner-shape=bevel&border-top-right-radius=100%,50&border-width=10&border-top-width=40"
    >
    <meta
      name="variant"
      content="?corner-shape=0.5&border-top-right-radius=100%,50&border-width=10&border-top-width=40"
    >
    <meta
      name="variant"
      content="?corner-shape=-0.5&border-top-right-radius=100%,50&border-width=10&border-top-width=40"
    >
    <meta
      name="variant"
      content="?corner-shape=-3&border-top-right-radius=100%,50&border-width=10&border-top-width=40"
    >
    <meta
      name="variant"
      content="?border-top-left-radius=50&corner-shape=-5&border-left-width=55&border-top-width=20"
    >
    <meta
      name="variant"
      content="?border-top-left-radius=100%&corner-shape=-0.3&border-left-width=50"
    >
    <meta
      name="variant"
      content="?border-radius=50%,40&corner-shape=-0.5&border-top-width=20&border-bottom-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=notch&border-radius=30&border-width=5&border-top-width=20&border-bottom-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=bevel&border-radius=40&border-width=20&border-left-width=10&border-right-width=40"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=0&corner-top-right-shape=notch&corner-bottom-right-shape=2&corner-bottom-left-shape=-1&border-top-width=5&border-right-width=20&border-left-width=20&border-radius=50"
    >
    <meta
      name="variant"
      content="?corner-shape=2&border-top-left-radius=100%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=1&border-top-left-radius=100%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=0.5&border-top-left-radius=100%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=0&border-top-left-radius=100%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=-0.5&border-top-left-radius=100%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=-1&border-top-left-radius=100%&border-width=20"
    >
    <meta
      name="variant"
      content="?corner-shape=-2&border-top-left-radius=100%&border-width=20"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=100&corner-top-right-shape=0&shadow-spread=50&clip-path=margin-box&margin-top=30"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=30,15&corner-top-right-shape=-0.7&shadow-spread=60&clip-path=margin-box&margin-top=15&margin-right=45"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=80,40&corner-top-right-shape=-1.5&shadow-spread=60&clip-path=margin-box&margin-top=15&margin-right=45"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=100&corner-top-right-shape=0&shadow-spread=50&clip-path=margin-box&margin-top=-10"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=30,60&corner-top-right-shape=-0.7&shadow-spread=60&clip-path=margin-box&margin-top=-10&margin-right=45"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=80,40&corner-top-right-shape=-1.5&shadow-spread=60&clip-path=margin-box&margin-top=-10&margin-right=45"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=100&shadow-spread=50&clip-path=margin-box&margin-top=-10"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=80,40&shadow-spread=60&clip-path=margin-box&margin-top=-10&margin-right=45"
    >
    <meta
      name="variant"
      content="?corner-top-left-shape=0&corner-top-right-shape=notch&corner-bottom-right-shape=2&corner-bottom-left-shape=-1&shadow-spread=30&border-radius=50&clip-path=margin-box&margin=5&margin-top=20&margin-bottom=20"
    >
    <meta
      name="variant"
      content="?border-radius=20&corner-shape=0&shadow-spread=80&clip-path=margin-box&margin=15&margin-top=40&margin-bottom=40&border-width=10"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=80,40&corner-shape=0.7&shadow-spread=90&clip-path=margin-box&margin-top=20&margin-right=65&border-width=10"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=80,40&corner-shape=0.7&shadow-spread=90&clip-path=margin-box&margin-top=0&margin-right=65&border-width=10"
    >
    <meta
      name="variant"
      content="?border-top-right-radius=80,40&corner-shape=0.7&shadow-spread=90&clip-path=margin-box&margin-top=-10&margin-right=65&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-shape=1&border-top-right-radius=40,60&shadow-spread=90&clip-path=margin-box&margin-top=30&margin-right=-20&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-shape=0.7&border-top-right-radius=40,60&shadow-spread=90&clip-path=margin-box&margin-top=30&margin-right=-20&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-shape=0.4&border-top-right-radius=40,60&shadow-spread=90&clip-path=margin-box&margin-top=30&margin-right=-20&border-width=10"
    >
    <meta
      name="variant"
      content="?corner-shape=0.1&border-top-right-radius=40,60&shadow-spread=90&clip-path=margin-box&margin-top=30&margin-right=-20&border-width=10"
    >

    <script src="./resources/render-corner-shape.js"></script>
  </head>
  <body>
    <script>
      const element = create_element_with_corner_shape(
        new URLSearchParams(location.search),
        "actual"
      );
      document.body.appendChild(element);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Render corner shape</title>
    <script src="./resources/render-corner-shape.js"></script>
  </head>
  <body>
    <script>
      const element = create_element_with_corner_shape(
        new URLSearchParams(location.search),
        "ref"
      );
      document.body.appendChild(element);
    </script>
  </body>
</html>