blob: dfb9c2b8b6bf866b3dfa7f1cc179050aae282c2b [file] [log] [blame]
<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>