Blitz - WPT: border-image-width.html

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

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

<!DOCTYPE html>
<title>CSS zoom applies to border-image-width when specified and inherited</title>
<link rel="help" href="https://drafts.csswg.org/css-viewport/">
<link rel="match" href="border-image-width-ref.html">
<style>
.box {
  width: 60px;
  height: 60px;
  border-image: url("data:image/svg+xml,%3csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100' height='100' fill='red'/%3e%3c/svg%3e") 30;
  border-image-width: 8px;
  margin: 10px;
}
.zoom {
  zoom: 2;
}
</style>

<div class="box"></div>

<div class="zoom">
  <div class="box"></div>
</div>

<div class="zoom box"></div>

/css/css-viewport/zoom/border-image-width-ref.html

<!DOCTYPE html>
<title>CSS zoom applies to border-width when specified and inherited</title>
<link rel="help" href="https://drafts.csswg.org/css-viewport/">

<style>
body {
  --scale: 1;
}
.box {
  width: calc(60px * var(--scale));
  height: calc(60px * var(--scale));
  border-image: url("data:image/svg+xml,%3csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100' height='100' fill='red'/%3e%3c/svg%3e") 30;
  border-image-width: calc(8px * var(--scale));
  margin: calc(10px * var(--scale));
}
.zoom {
  --scale: 2;
}
</style>

<div class="box"></div>

<div class="zoom">
  <div class="box"></div>
</div>

<div class="zoom box"></div>