1 files changed, 100 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/font-relative-units.html b/testing/web-platform/tests/css/css-contain/container-queries/font-relative-units.html
new file mode 100644
index 0000000000..7f711ebf96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/font-relative-units.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<title>CSS Container Queries Test: font-relative units</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  :root { font-size: 10px; line-height: 10px; }
+  #em_container {
+    container-type: inline-size;
+    width: 100px;
+    font-size: 100px;
+  }
+  #ex_container {
+    container-type: inline-size;
+    font-size: 50px;
+    width: 10ex;
+    height: 50rex;
+  }
+  #ch_container {
+    container-type: inline-size;
+    font-size: 50px;
+    width: 10ch;
+  }
+  #ic_container {
+    container-type: inline-size;
+    font-size: 50px;
+    width: 10ic;
+  }
+  #lh_container {
+    container-type: inline-size;
+    line-height: 50px;
+    width: 10lh;
+  }
+  @container (width: 1em) {
+    #em_test { color: green }
+  }
+  @container (width: 10rem) {
+    #rem_test { color: green }
+  }
+  @container (width: 10ex) {
+    #ex_test { color: green }
+  }
+  @container (49rex <= width <= 100rex) {
+    #rex_test { color: green }
+  }
+  @container (width: 10ch) {
+    #ch_test { color: green }
+  }
+  @container (width: 50rch) {
+    #rch_test { color: green }
+  }
+  @container (width: 10ic) {
+    #ic_test { color: green }
+  }
+  @container (width: 50ric) {
+    #ric_test { color: green }
+  }
+  @container (width: 10lh) {
+    #lh_test { color: green }
+  }
+  @container (width: 50rlh) {
+    #rlh_test { color: green }
+  }
+</style>
+<div id="em_container">
+  <div id="em_test"></div>
+  <div id="rem_test"></div>
+</div>
+<div id="ex_container">
+  <div id="ex_test"></div>
+  <div id="rex_test"></div>
+</div>
+<div id="ch_container">
+  <div id="ch_test"></div>
+  <div id="rch_test"></div>
+</div>
+<div id="ic_container">
+  <div id="ic_test"></div>
+  <div id="ric_test"></div>
+</div>
+<div id="lh_container">
+  <div id="lh_test"></div>
+  <div id="rlh_test"></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+  test(() => assert_equals(getComputedStyle(em_test).color, green), "em relative inline-size");
+  test(() => assert_equals(getComputedStyle(rem_test).color, green), "rem relative inline-size");
+  test(() => assert_equals(getComputedStyle(ex_test).color, green), "ex relative inline-size");
+  test(() => assert_equals(getComputedStyle(rex_test).color, green), "rex relative inline-size");
+  test(() => assert_equals(getComputedStyle(ch_test).color, green), "ch relative inline-size");
+  test(() => assert_equals(getComputedStyle(rch_test).color, green), "rch relative inline-size");
+  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>