Blitz - WPT: outline-width-keywords.html

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

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

<!DOCTYPE html>
<html>

<head>
  <title>CSS zoom applies to outline-width keywords</title>
  <link rel="help" href="https://drafts.csswg.org/css-viewport/">
  <link rel="match" href="reference/outline-width-keywords-ref.html">
  <style>
    .initial {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
      outline-color: blue;
      outline-style: solid;
      outline-width: initial;
      zoom: 2;
    }

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

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

    .thick {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
      outline: 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/outline-width-keywords-ref.html

<!DOCTYPE html>
<html>

<head>
  <style>
    .initial {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      outline: 6px solid blue;
    }

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

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

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

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

</html>