Blitz - WPT: list-style-image.html

wpt / css / css-viewport / zoom / list-style-image.html

/css/css-viewport/zoom/list-style-image.html

<!DOCTYPE html>
<title>CSS zoom applies to list-style-image</title>
<link rel="author" title="Stefan Zager" href="mailto:szager@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-viewport/">
<link rel="match" href="reference/list-style-image-ref.html">

<style>
.marker {
  list-style-image: url('#marker');
}
ul {
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
.zoom {
  zoom: 2;
}
</style>

<div>
  <ul>
    <li class="marker">unzoomed</li>
  </ul>
</div>

<div>
  <ul class="zoom">
    <li class="marker">zoomed</li>
  </ul>
</div>

<div class="marker">
  <ul class="zoom">
    <li>zoomed inherited</li>
  </ul>
</div>

<svg viewBox="0 0 100 100" style="display:none">
  <defs>
    <g id="marker">
      <circle cx="50%" cy="50%" r="50%" stroke="none" />
    </g>
  </defs>
</svg>

/css/css-viewport/zoom/reference/list-style-image-ref.html

<!DOCTYPE html>
<title>CSS zoom applies to list-style-image</title>
<link rel="author" title="Stefan Zager" href="mailto:szager@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-viewport/">

<style>
body {
  list-style-image: url('#marker');
  --scale: 1;
}
ul {
  font-size: calc(1rem * var(--scale));
  margin-block-start: calc(1rem * var(--scale));
  margin-block-end: calc(1rem * var(--scale));
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: calc(40px * var(--scale));
}
.zoom {
  --scale: 2;
}
</style>

<div>
  <ul>
    <li>unzoomed</li>
  </ul>
</div>

<div>
  <ul class="zoom">
    <li>zoomed</li>
  </ul>
</div>

<div>
  <ul class="zoom">
    <li>zoomed inherited</li>
  </ul>
</div>

<svg viewBox="0 0 100 100" style="display:none">
  <defs>
    <g id="marker">
      <circle cx="50%" cy="50%" r="50%" stroke="none" />
    </g>
  </defs>
</svg>