ch-empty-pseudo-recalc-on-font-load.html (2533B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Length unit 'ch' used in pseudo elements without text should be recalculated after loading a web font</title> 4 <link rel="help" href="https://www.w3.org/TR/css-font-loading-3/#font-face-load"> 5 <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths"> 6 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4#generated-content"> 7 <link rel="author" href="xiaochengh@chromium.org"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 .before::before, 12 .after::after, 13 .backdrop::backdrop { 14 font: 25px/1 "custom font", monospace; 15 background: linear-gradient(45deg, red, blue); 16 background-size: 1ch 1ch; 17 } 18 </style> 19 20 <div class="container before"></div> 21 <div class="container after"></div> 22 <dialog class="container backdrop"></dialog> 23 24 <script> 25 function parseBackgroundSizeInPx(element, pseudoElement) { 26 const x = getComputedStyle(element, pseudoElement).backgroundSize.split(' ')[0]; 27 if (!x.endsWith('px')) 28 return NaN; 29 return parseFloat(x); 30 } 31 32 const testCases = ['before', 'after', 'backdrop']; 33 const elements = testCases.map(testCase => document.querySelector('.' + testCase)); 34 const asyncTests = testCases.map( 35 testCase => async_test(`ch in pseudo-element ::${testCase} should be recalculated after loading a web font`)); 36 37 // Before loading custom font, tests should be rendered with monospace 38 // fallback and have a '1ch' measurement much shorter than 25px. 39 for (let i = 0; i < testCases.length; ++i) { 40 asyncTests[i].step(() => { 41 const backgroundSizePx = parseBackgroundSizeInPx(elements[i], '::' + testCases[i]); 42 assert_less_than(backgroundSizePx, 24); 43 }); 44 } 45 46 // Insert custom font into style sheet and load it 47 const customFont = new FontFace('custom font', 'url(/fonts/Ahem.ttf)'); 48 document.fonts.add(customFont); 49 50 // After loading custom font, tests should be rendered with the custom font, 51 // which is Ahem, and have a '1ch' measurement that equals 25px. 52 customFont.load().then( 53 () => { 54 for (let i = 0; i < testCases.length; ++i) { 55 asyncTests[i].step(() => { 56 const backgroundSizePx = parseBackgroundSizeInPx(elements[i], '::' + testCases[i]); 57 assert_equals(backgroundSizePx, 25); 58 asyncTests[i].done(); 59 }); 60 } 61 }, 62 () => { 63 for (let i = 0; i < testCases.length; ++i) { 64 asyncTests[i].step(() => { 65 assert_unreached('Failed to load font'); 66 }); 67 } 68 } 69 ); 70 </script>