SVGLength-ch.html | Explore in Territory

<!DOCTYPE HTML>
<title>SVGLength with 'ch' unit</title>
<link rel="help" href="https://www.w3.org/TR/SVG/types.html#InterfaceSVGLength">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#ch_ref, text {
  font-family:initial;
  font-size:20px;
  text-orientation: upright;
}
</style>
<div id="ch_ref" style="width:10ch;"></div>
<svg>
  <text id="ch_test" x="10ch"/>
</svg>
<script>
  let ch_ref = document.getElementById("ch_ref");
  let ref_width = ch_ref.getBoundingClientRect().width;
  let ch_test = document.getElementById("ch_test");
  let ch_length = ch_test.x.baseVal[0];

  test(() => {
    assert_equals(ch_length.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
    assert_approx_equals(ch_length.value, ref_width, 0.1);
  }, "ch unit in SVGLength");

  test(() => {
    ch_length.value = ref_width * 4;
    assert_approx_equals(ch_length.valueInSpecifiedUnits, 40, 0.3);
    ch_length.value = ref_width;
    assert_approx_equals(ch_length.value, ref_width, 0.3);
  }, "Convert back to ch from new user unit value");

  test(() => {
    ch_test.setAttribute("style", "writing-mode: vertical-rl;");
    ch_ref.style.writingMode = "vertical-rl";
    assert_approx_equals(ch_length.value, ch_ref.getBoundingClientRect().width, 0.1);
    ch_test.removeAttribute("style");
    ch_ref.style.writingMode = "";
  }, "upright vertical ch unit in SVGLength");

</script>
chromium/third_party/blink/web_tests/external/wpt/svg/types/scripted/SVGLength-ch.html
