Blitz - WPT: border-shape-polygon-miter-limit.html

wpt / css / css-borders / border-shape / border-shape-polygon-miter-limit.html

/css/css-borders/border-shape/border-shape-polygon-miter-limit.html

<!DOCTYPE html>
<title>CSS Borders Test: border-shape polygon stroke keeps miter joins</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="match" href="border-shape-polygon-miter-limit-ref.html">
<style>
  .test {
    border-shape: polygon(0% 0%, 100% 100%, 100% 0%, 0% 100%) border-box;
    width: 66px;
    height: 150px;
    margin: 50px 20px;
    display: inline-block;
  }

  .t1 {
    border: 20px solid green;
  }

  .t2 {
    border: 19px solid green;
  }
</style>
<div class="test t1"></div>
<div class="test t2"></div>

/css/css-borders/border-shape/border-shape-polygon-miter-limit-ref.html

<!DOCTYPE html>
<title>CSS Borders Reference: border-shape polygon stroke miter limit</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<style>
  .test {
    width: 66px;
    height: 150px;
    margin: 50px 20px;
    display: inline-block;
    overflow: visible;
  }

  .t1 {
    border: 20px solid transparent;
  }

  .t2 {
    border: 19px solid transparent;
  }
</style>
<svg class="test t1" viewBox="0 0 66 150">
  <polygon points="-20,-20 86,170 86,-20 -20,170" fill="none" stroke="green" stroke-width="20"
    stroke-miterlimit="1000" />
</svg>
<svg class="test t2" viewBox="0 0 66 150">
  <polygon points="-19,-19 85,169 85,-19 -19,169" fill="none" stroke="green" stroke-width="19"
    stroke-miterlimit="1000" />
</svg>