| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| This test makes sure that you can opt-in to honoring the 'trak' table by specifying text-rendering: optimizeLegibility. |
| The first and third lines below should have the same width. The middle one can (but doesn't have to) have a different width. |
| <p><span id="first" style="font: 100px 'system-ui'; font-weight: 300;">hamburgefonstiv</span></p> |
| <p><span id="second" style="font: 100px '.AppleSystemUIFontLight', '.SFNSDisplay-Light', '.SFUIDisplay-Light';">hamburgefonstiv</span></p> |
| <p><span id="third" style="font: 100px '.AppleSystemUIFontLight', '.SFNSDisplay-Light', '.SFUIDisplay-Light'; text-rendering: optimizeLegibility;">hamburgefonstiv</span></p> |
| <script> |
| var first = document.getElementById("first"); |
| var third = document.getElementById("third"); |
| shouldBe("first.getClientRects().length", "1"); |
| shouldBe("third.getClientRects().length", "1"); |
| shouldBe("first.getClientRects()[0].right", "third.getClientRects()[0].right"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
