| <style> |
| span { |
| font-size: 24px |
| } |
| |
| #a { |
| font-family: system-ui; |
| } |
| |
| #b { |
| font-family: -apple-system; |
| } |
| |
| #c { |
| font-family: -apple-system-font; |
| } |
| |
| </style> |
| <script> |
| if (window.testRunner) |
| window.testRunner.dumpAsText(); |
| |
| window.addEventListener("load", run, false); |
| |
| function run() { |
| var a = document.getElementById("a"); |
| var b = document.getElementById("b"); |
| var c = document.getElementById("c"); |
| var result = document.getElementById("result"); |
| |
| var aRect = a.getBoundingClientRect(); |
| var bRect = b.getBoundingClientRect(); |
| var cRect = c.getBoundingClientRect(); |
| |
| if (aRect.width == bRect.width) |
| result.innerHTML = "PASS: system-ui and -apple-system widths were the same"; |
| else |
| result.innerHTML = "FAIL: system-ui and -apple-system widths were not the same"; |
| |
| if (aRect.width == cRect.width) |
| result.innerHTML += "<br/>PASS: system-ui and -apple-system-font widths were the same"; |
| else |
| result.innerHTML += "<br/>FAIL: system-ui and -apple-system-font widths were not the same"; |
| } |
| </script> |
| <p>These next three lines should be the same width</p> |
| <p><span id="a">This is some text</span></p> |
| <p><span id="b">This is some text</span></p> |
| <p><span id="c">This is some text</span></p> |
| |
| <p id="result"></p> |