font-relative-units.html (3731B)
1 <!doctype html> 2 <title>CSS Container Queries Test: font-relative units</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 @import url("/fonts/ahem.css"); 9 :root { font-family: 'Ahem'; font-size: 10px; line-height: 10px; } 10 #log { font-family: sans-serif; } 11 #em_container { 12 container-type: inline-size; 13 width: 100px; 14 font-size: 100px; 15 } 16 #ex_container { 17 container-type: inline-size; 18 font-size: 50px; 19 width: 10ex; 20 height: 50rex; 21 } 22 #cap_container { 23 container-type: inline-size; 24 font-size: 50px; 25 width: 10cap; 26 } 27 #ch_container { 28 container-type: inline-size; 29 font-size: 50px; 30 width: 10ch; 31 } 32 #ic_container { 33 container-type: inline-size; 34 font-size: 50px; 35 width: 10ic; 36 } 37 #lh_container { 38 container-type: inline-size; 39 line-height: 50px; 40 width: 10lh; 41 } 42 @container (width: 1em) { 43 #em_test { color: green } 44 } 45 @container (width: 10rem) { 46 #rem_test { color: green } 47 } 48 @container (width: 10cap) { 49 #cap_test { color: green } 50 } 51 @container (width: 50rcap) { 52 #rcap_test { color: green } 53 } 54 @container (width: 10ex) { 55 #ex_test { color: green } 56 } 57 @container (width: 50rex) { 58 #rex_test { color: green } 59 } 60 @container (width: 10ch) { 61 #ch_test { color: green } 62 } 63 @container (width: 50rch) { 64 #rch_test { color: green } 65 } 66 @container (width: 10ic) { 67 #ic_test { color: green } 68 } 69 @container (width: 50ric) { 70 #ric_test { color: green } 71 } 72 @container (width: 10lh) { 73 #lh_test { color: green } 74 } 75 @container (width: 50rlh) { 76 #rlh_test { color: green } 77 } 78 </style> 79 <div id="em_container"> 80 <div id="em_test"></div> 81 <div id="rem_test"></div> 82 </div> 83 <div id="cap_container"> 84 <div id="cap_test"></div> 85 <div id="rcap_test"></div> 86 </div> 87 <div id="ex_container"> 88 <div id="ex_test"></div> 89 <div id="rex_test"></div> 90 </div> 91 <div id="ch_container"> 92 <div id="ch_test"></div> 93 <div id="rch_test"></div> 94 </div> 95 <div id="ic_container"> 96 <div id="ic_test"></div> 97 <div id="ric_test"></div> 98 </div> 99 <div id="lh_container"> 100 <div id="lh_test"></div> 101 <div id="rlh_test"></div> 102 </div> 103 <script> 104 setup(() => assert_implements_size_container_queries(), { explicit_done: true }); 105 106 const green = "rgb(0, 128, 0)"; 107 108 document.fonts.ready.then(() => { 109 test(() => assert_equals(getComputedStyle(em_test).color, green), "em relative inline-size"); 110 test(() => assert_equals(getComputedStyle(rem_test).color, green), "rem relative inline-size"); 111 test(() => assert_equals(getComputedStyle(ex_test).color, green), "ex relative inline-size"); 112 test(() => assert_equals(getComputedStyle(rex_test).color, green), "rex relative inline-size"); 113 test(() => assert_equals(getComputedStyle(ch_test).color, green), "ch relative inline-size"); 114 test(() => assert_equals(getComputedStyle(rch_test).color, green), "rch relative inline-size"); 115 test(() => assert_equals(getComputedStyle(ic_test).color, green), "ic relative inline-size"); 116 test(() => assert_equals(getComputedStyle(ric_test).color, green), "ric relative inline-size"); 117 test(() => assert_equals(getComputedStyle(lh_test).color, green), "lh relative inline-size"); 118 test(() => assert_equals(getComputedStyle(rlh_test).color, green), "rlh relative inline-size"); 119 test(() => assert_equals(getComputedStyle(cap_test).color, green), "cap relative inline-size"); 120 test(() => assert_equals(getComputedStyle(rcap_test).color, green), "rcap relative inline-size"); 121 done(); 122 }) 123 </script>