font-relative-units.html (1537B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <meta name="assert" content="test font-relative units and zoom"> 9 <style> 10 html { 11 font-size: 20px; 12 line-height: 1; 13 zoom: 2; 14 } 15 16 .unit { 17 height: 20px; 18 outline: 1px solid black; 19 outline-offset: -1px; 20 } 21 22 .unit::after { 23 content: attr(id); 24 font-size: 10px; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="div"></div> 30 <script> 31 const units = [ 32 ['em', 'rem'], 33 ['lh', 'rlh'], 34 ['ex', 'rex'], 35 ['cap', 'rcap'], 36 ['ch', 'rch'], 37 ['ic', 'ric'], 38 ]; 39 40 for (const pair of units) { 41 for (const unit of pair) { 42 div.insertAdjacentHTML("beforeend", `<div class="unit" id="${unit}" style="width: 5${unit}"></div>`); 43 } 44 } 45 46 setup({ explicit_done: true }); 47 document.fonts.ready.then(() => { 48 for (const [localUnit, rootUnit] of units) { 49 test(() => { 50 let localUnitWidth = document.getElementById(localUnit).getBoundingClientRect().width; 51 let rootUnitWidth = document.getElementById(rootUnit).getBoundingClientRect().width; 52 assert_equals(localUnitWidth, rootUnitWidth, `expect 1${localUnit} = 1${rootUnit} at the same effective zoom`); 53 }, `${localUnit} = ${rootUnit}`); 54 } 55 done(); 56 }); 57 </script> 58 </body> 59 </html>