Blitz - WPT: border-width-keywords.html

wpt / css / css-viewport / zoom / border-width-keywords.html

/css/css-viewport/zoom/border-width-keywords.html

<!DOCTYPE html>
<html>

<head>
  <title>CSS zoom applies to border-width keywords</title>
  <link rel="help" href="https://drafts.csswg.org/css-viewport/">
  <link rel="match" href="reference/border-width-keywords-ref.html">

  <style>
    .initial {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
      border-color: blue;
      border-style: solid;
      border-top-width: initial;
      border-right-width: initial;
      border-bottom-width: initial;
      border-left-width: initial;
      zoom: 2;
    }

    .thin {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
      border: thin solid blue;
      zoom: 2;
    }

    .medium {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
      border: medium solid blue;
      zoom: 2;
    }

    .thick {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
      border: thick solid blue;
      zoom: 2;
    }
  </style>
</head>

<body>
  <div class="initial"></div>
  <div class="thin"></div>
  <div class="medium"></div>
  <div class="thick"></div>
</body>

</html>

/css/css-viewport/zoom/reference/border-width-keywords-ref.html

<!DOCTYPE html>
<html>

<head>
  <style>
    .initial {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      border-color: blue;
      border-style: solid;
      border-top-width: 6px;
      border-right-width: 6px;
      border-bottom-width: 6px;
      border-left-width: 6px;
    }

    .thin {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      border: 2px solid blue;
    }

    .medium {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      border: 6px solid blue;
    }

    .thick {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      border: 10px solid blue;
    }
  </style>
</head>

<body>
  <div class="initial"></div>
  <div class="thin"></div>
  <div class="medium"></div>
  <div class="thick"></div>
</body>

</html>