zoomed-stroke-width-em.html | Explore in Territory

<!DOCTYPE html>
<title>Zoomed EM resolution for 'stroke-width'</title>
<script src="../../resources/ahem.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  html {
    font-size: 50px;
    font-family: Ahem;
    zoom: 4;
  }
  body {
    font-size: initial;
    font-family: initial;
    zoom: 0.25;
  }
</style>
<svg font-size="50" font-family="Ahem" style="zoom: 3">
  <rect width="100" height="100" stroke-width="1em"/>
  <rect width="100" height="100" stroke-width="1rem"/>
</svg>
<script>
  const elements = document.querySelectorAll('rect');

  test(function() {
    let computed_size = getComputedStyle(elements[0]).getPropertyValue('stroke-width');
    assert_equals(computed_size, '50px', 'em');
  }, document.title + ', em');

  test(function() {
    let computed_size = getComputedStyle(elements[1]).getPropertyValue('stroke-width');
    assert_equals(computed_size, '50px', 'rem');
  }, document.title + ', rem');
</script>

chromium/third_party/blink/web_tests/svg/zoom/zoomed-stroke-width-em.html