lh-with-zoom.html | Explore in Territory

<!doctype html>
<title>CSS Values Test: lh unit not affected by non-standard zoom property</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="parent" style="line-height:10px">
  <div id="outer" style="zoom:10;line-height:1lh;width:10lh;height:100px">
    <div id="inner" style="zoom:2; line-height:2lh;width:10lh;height:100px"></div>
  </div>
</div>
<script>
  test(() => {
    assert_equals(getComputedStyle(outer).height, "100px");
    assert_equals(getComputedStyle(inner).height, "100px");
  }, "Sanity check that zoom does not affect computed px lengths");

  test(() => {
    assert_equals(getComputedStyle(outer).lineHeight, "10px");
  }, "line-height:1lh based on parent line-height with different zoom");

  test(() => {
    assert_equals(getComputedStyle(outer).width, "100px");
  }, "width:10lh based on line-height with zoom 10");

  test(() => {
    assert_equals(getComputedStyle(inner).lineHeight, "20px");
  }, "line-height:2lh based on parent line-height with different zoom");

  test(() => {
    assert_equals(getComputedStyle(inner).width, "200px");
  }, "width:10lh based on line-height with zoom 2");
</script>
chromium/third_party/blink/web_tests/wpt_internal/css/css-values/lh-with-zoom.html
