zoomed-ex-em-font-sizes.html | Explore in Territory

<!DOCTYPE html>
<title>Test that ex, em, rem and ch font sizes are unaffected by zoom level</title>
<script src="../../resources/ahem.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  svg {
      font-size: 100px;
      font-family: ahem;
  }
</style>
<svg width="100%" height="1em" xmlns="http://www.w3.org/2000/svg" version="1.1">

  <text id="em" y="1em" dy="4em">XXXXXX XXX</text>
  <text id="rem" y="1em" dy="25rem">XXXXXX XXX</text>
  <text id="ex" y="1em" dy="5ex">XXXXXX XXX</text>
  <text id="ch" y="1em" dy="4ch">XXXXXX XXX</text>

  <script>
    var zoomLevels = [0.3, 4];
    var html = document.documentElement;
    var textElements = document.querySelectorAll('text');

    [].forEach.call(textElements, function(elm) {
        html.style.zoom = 1;
        var reference_y = elm.getStartPositionOfChar(0).y;

        zoomLevels.forEach(function (zoom) {
            html.style.zoom = zoom;
            test(function () {
                assert_approx_equals(elm.getStartPositionOfChar(0).y, reference_y, 2);
            }, "Unit " + elm.id + " not affected by zoom level " + zoom);
        });

        // Clean up to avoid being classified as a text test; avoids an -expected.txt file.
        elm.remove();
    });
    html.style.zoom = 1;
  </script>
</svg>
chromium/third_party/blink/web_tests/svg/custom/zoomed-ex-em-font-sizes.html
