Media Queries not using font data for ex and ch

MediaValues do not use FontMetrics for ex/ch units. Added a test that checks the ex/ch sizes matches for width property and mq-width, with an epsilon to catch rounding issues. Bug: 1264962 Change-Id: I28417e3b5c863e29bdb9b9865081a8a9e4694c3d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3251079 Reviewed-by: Dominik Röttsches <drott@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#936884}
web-platform-tests · Nov 1, 2021 · 1e41eff · 1e41eff
1 parent 0b61dc7
commit 1e41eff
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/css/mediaqueries/relative-units-005.html b/css/mediaqueries/relative-units-005.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<title>CSS Media Queries Test: ex and ch from initial font</title>
+<link rel="help" href="https://drafts.csswg.org/mediaqueries/#units">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="ex_ref" style="width: 100ex"></div>
+<div id="ch_ref" style="width: 100ch"></div>
+<script>
+  const viewport_width = document.documentElement.offsetWidth;
+
+  test(() => {
+    const viewport_ex = (viewport_width * 100) / ex_ref.offsetWidth;
+    const ex_query = `(min-width: ${viewport_ex-0.5}ex) and (max-width: ${viewport_ex+0.5}ex)`;
+    assert_true(matchMedia(ex_query).matches);
+  }, "ex unit in media queries should match initial font");
+
+  test(() => {
+    const viewport_ch = (viewport_width * 100) / ch_ref.offsetWidth;
+    const ch_query = `(min-width: ${viewport_ch-0.5}ch) and (max-width: ${viewport_ch+0.5}ch)`;
+    assert_true(matchMedia(ch_query).matches);
+  }, "ch unit in media queries should match initial font");
+</script>