Add support for rlh font unit.

Invalidation is already written for rex, so for it to work for rlh it is only needed to set same flags on. Fixed: 1381037 Change-Id: Ib956d0e53d1b99fe633107fa5341c5ef8d12a7b4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4128915 Commit-Queue: Daniil Sakhapov <sakhapov@google.com> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1088148}
web-platform-tests · Jan 3, 2023 · 48488f2 · 48488f2
1 parent dc896c6
commit 48488f2
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 1 deletion.
diff --git a/css/css-contain/container-queries/font-relative-units-dynamic.html b/css/css-contain/container-queries/font-relative-units-dynamic.html
@@ -204,6 +204,34 @@
 }, 'lh units respond to changes');
 </script>
 
+<template>
+  <style>
+    :root {
+      font-size: 10px;
+      line-height: 5;
+    }
+    :root.larger {
+      font-size: 20px;
+    }
+    @container (width <= 1rlh) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => document.documentElement.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  document.documentElement.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'rlh units respond to changes');
+</script>
+
 <template>
   <style>
     main { font-size: 10px; }

diff --git a/css/css-contain/container-queries/font-relative-units.html b/css/css-contain/container-queries/font-relative-units.html
@@ -5,7 +5,7 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/cq-testcommon.js"></script>
 <style>
-  :root { font-size: 10px; }
+  :root { font-size: 10px; line-height: 10px; }
   #em_container {
     container-type: inline-size;
     width: 100px;
@@ -59,6 +59,9 @@
   @container (width: 10lh) {
     #lh_test { color: green }
   }
+  @container (width: 50rlh) {
+    #rlh_test { color: green }
+  }
 </style>
 <div id="em_container">
   <div id="em_test"></div>
@@ -78,6 +81,7 @@
 </div>
 <div id="lh_container">
   <div id="lh_test"></div>
+  <div id="rlh_test"></div>
 </div>
 <script>
   setup(() => assert_implements_container_queries());
@@ -92,4 +96,5 @@
   test(() => assert_equals(getComputedStyle(ic_test).color, green), "ic relative inline-size");
   test(() => assert_equals(getComputedStyle(ric_test).color, green), "ric relative inline-size");
   test(() => assert_equals(getComputedStyle(lh_test).color, green), "lh relative inline-size");
+  test(() => assert_equals(getComputedStyle(rlh_test).color, green), "rlh relative inline-size");
 </script>
diff --git a/css/css-values/rlh-invalidation.html b/css/css-values/rlh-invalidation.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>CSS Values and Units Test: rlh invalidation</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="help" href="https://drafts.csswg.org/css-values/#font-relative-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="test rlh invalidation">
+<style>
+  @import url("/fonts/ahem.css");
+  html {
+    font-family: 'Ahem';
+    font-size: 40px;
+    line-height: 2;
+  }
+  body {
+    font-family: monospace;
+    font-size: 20px;
+    line-height: 5;
+  }
+  div {
+    width: 10rlh;
+  }
+</style>
+
+<html>
+  <body>
+    <div id="div"></div>
+  </body>
+</html>
+
+<script>
+  setup({ single_test: true });
+  let old_width = div.getBoundingClientRect().width;
+  document.documentElement.style.lineHeight = "4";
+  let new_width = div.getBoundingClientRect().width;
+  assert_not_equals(old_width, new_width, "expect rlh units to update on line-height update");
+  old_width = new_width;
+  document.documentElement.style.fontSize = "41px";
+  new_width = div.getBoundingClientRect().width;
+  assert_not_equals(old_width, new_width, "expect rlh units to update on font-size update");
+  done();
+</script>