font-size-adjust-computed.html (3620B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Fonts Module Level 5: getComputedStyle().fontSizeAdjust</title> 6 <link rel="help" href="https://www.w3.org/TR/css-fonts-5/#font-size-adjust-prop"> 7 <meta name="assert" content="font-size-adjust computed value is as specified."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <style> 12 /* Use a font with known metrics so we can verify that from-font 13 computes to the expected value from the font. */ 14 @font-face { 15 font-family: ahem-ex-500; 16 src: url(ahem-ex-500.otf); 17 } 18 #target { 19 font-family: ahem-ex-500 !important; 20 font-size: 1000px; 21 } 22 #container { 23 container-type: inline-size; 24 width: 10px; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="container"> 30 <div id="target"></div> 31 </div> 32 <script> 33 function compareFontSizeAdjustFromFont(actual, expected) { 34 // Depending on font configurations, the retrieved aspect_value may slightly 35 // differ, causing a few pixels' variation from the expected result. 36 const actual_computed_style = actual.split(" "); 37 const expected_computed_style = expected.split(" "); 38 assert_true(actual_computed_style.length === 2 && expected_computed_style.length === 2); 39 40 const actual_font_metric = actual_computed_style[0]; 41 const expected_font_metric = expected_computed_style[0]; 42 assert_equals(actual_font_metric, expected_font_metric); 43 44 const actual_aspect_value = parseFloat(actual_computed_style[1]); 45 const expected_aspect_value = parseFloat(expected_computed_style[1]); 46 assert_approx_equals(actual_aspect_value, expected_aspect_value, 0.00001); 47 } 48 49 promise_test(async (t) => { 50 await document.fonts.load("1000px ahem-ex-500"); 51 52 test_computed_value('font-size-adjust', 'none'); 53 54 test_computed_value('font-size-adjust', '0.5'); 55 test_computed_value('font-size-adjust', 'ex-height 0.5', '0.5'); // default basis 'ex-height' omitted from serialization 56 test_computed_value('font-size-adjust', 'cap-height 0.8'); 57 test_computed_value('font-size-adjust', 'ch-width 0.4'); 58 test_computed_value('font-size-adjust', 'ic-width 0.9'); 59 test_computed_value('font-size-adjust', 'ic-height 1.1'); 60 61 // The ahem-ex-500 font has both ex-height and cap-height set at 0.5em, and ch-width is 1em. 62 // Ideographic metrics are not available, so fall back to 1em. 63 test_computed_value('font-size-adjust', 'from-font', '0.5'); 64 test_computed_value('font-size-adjust', 'ex-height from-font', '0.5'); // default basis 'ex-height' omitted from serialization 65 test_computed_value('font-size-adjust', 'cap-height from-font', 'cap-height 0.5'); 66 test_computed_value('font-size-adjust', 'ch-width from-font', 'ch-width 1', undefined, {comparisonFunction: compareFontSizeAdjustFromFont}); 67 test_computed_value('font-size-adjust', 'ic-width from-font', 'ic-width 1', undefined, {comparisonFunction: compareFontSizeAdjustFromFont}); 68 test_computed_value('font-size-adjust', 'ic-height from-font', 'ic-height 1'); 69 70 test_computed_value('font-size-adjust', 'calc(0.5)', '0.5'); 71 test_computed_value('font-size-adjust', 'ex-height calc(0.5)', '0.5'); // default basis 'ex' omitted from serialization 72 test_computed_value('font-size-adjust', 'cap-height calc(0.5)', 'cap-height 0.5'); 73 test_computed_value('font-size-adjust', 'cap-height calc(0.5 + 1)', 'cap-height 1.5'); 74 test_computed_value('font-size-adjust', 'cap-height calc(-0.5)', 'cap-height 0'); 75 test_computed_value('font-size-adjust', 'cap-height calc(10 + (sign(20cqw - 10px) * 5))', 'cap-height 5'); 76 }) 77 </script> 78 </body> 79 </html>