| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Length unit 'ch' used in pseudo elements without text should be recalculated after loading a web font</title> |
| <link rel="help" href="https://www.w3.org/TR/css-values-4/#font-relative-lengths"> |
| <link rel="help" href="https://drafts.csswg.org/css-pseudo-4#generated-content"> |
| <link rel="author" href="xiaochengh@chromium.org"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| .before::before, |
| .after::after, |
| .backdrop::backdrop { |
| font: 25px/1 "custom font", monospace; |
| background: linear-gradient(45deg, red, blue); |
| background-size: 1ch 1ch; |
| } |
| </style> |
| |
| <div class="container before"></div> |
| <div class="container after"></div> |
| <dialog class="container backdrop"></dialog> |
| |
| <script> |
| function parseBackgroundSizeInPx(element, pseudoElement) { |
| const x = getComputedStyle(element, pseudoElement).backgroundSize.split(' ')[0]; |
| if (!x.endsWith('px')) |
| return NaN; |
| return parseFloat(x); |
| } |
| |
| const testCases = ['before', 'after', 'backdrop']; |
| const elements = testCases.map(testCase => document.querySelector('.' + testCase)); |
| const asyncTests = testCases.map( |
| testCase => async_test(`ch in pseudo-element ::${testCase} should be recalculated after loading a web font`)); |
| |
| // Before loading custom font, tests should be rendered with monospace |
| // fallback and have a '1ch' measurement much shorter than 25px. |
| for (let i = 0; i < testCases.length; ++i) { |
| asyncTests[i].step(() => { |
| const backgroundSizePx = parseBackgroundSizeInPx(elements[i], '::' + testCases[i]); |
| assert_less_than(backgroundSizePx, 24); |
| }); |
| } |
| |
| // Insert custom font into style sheet and load it |
| const customFont = new FontFace('custom font', 'url(/fonts/Ahem.ttf)'); |
| document.fonts.add(customFont); |
| |
| // After loading custom font, tests should be rendered with the custom font, |
| // which is Ahem, and have a '1ch' measurement that equals 25px. |
| customFont.load().then( |
| () => { |
| for (let i = 0; i < testCases.length; ++i) { |
| asyncTests[i].step(() => { |
| const backgroundSizePx = parseBackgroundSizeInPx(elements[i], '::' + testCases[i]); |
| assert_equals(backgroundSizePx, 25); |
| asyncTests[i].done(); |
| }); |
| } |
| }, |
| () => { |
| for (let i = 0; i < testCases.length; ++i) { |
| asyncTests[i].step(() => { |
| assert_unreached('Failed to load font'); |
| }); |
| } |
| } |
| ); |
| </script> |
