| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property"> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../support/get-char-advances.js"></script> |
| <style> |
| .test { |
| font-family: Ahem; |
| font-size: 40px; |
| } |
| .no-autospace { |
| text-autospace: no-autospace; |
| } |
| </style> |
| <div id="container"> |
| <div class="test" expect="1,5">国国אבג国国</div> |
| <div class="test" expect="1,5">国国<span>אב</span>ג国国</div> |
| <div class="test" expect="1,11">国国مُرَبَّعْ国国</div> |
| </div> |
| <script> |
| // Compute expected advances from advances without `text-autospace` and the |
| // `expect` attribute. |
| const container = document.getElementById('container'); |
| container.classList.add('no-autospace'); |
| const tests = []; |
| for (const element of document.getElementsByClassName('test')) { |
| const em = parseFloat(getComputedStyle(element).fontSize); |
| const spacing = em / 8; |
| const advances = getCharAdvances(element); |
| const expect = element.getAttribute('expect').split(',').map(i => parseInt(i)); |
| for (const i of expect) { |
| advances[i] += spacing; |
| } |
| tests.push({element: element, advances: advances}); |
| } |
| |
| // Apply `text-autospace` and compare the actual advances. |
| container.classList.remove('no-autospace'); |
| for (const t of tests) { |
| const advances = getCharAdvances(t.element); |
| test(() => { |
| assert_array_equals(advances, t.advances); |
| }) |
| } |
| </script> |
