Blitz - WPT: render-corner-shape.html

wpt / css / css-borders / corner-shape / render-corner-shape.html

/css/css-borders/corner-shape/render-corner-shape.html

<!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="?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="?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&border-width=10"
    >
    <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&border-width=10"
    >
    <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"
    >

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

/css/css-borders/corner-shape/render-corner-shape-ref.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>