52 lines
1.3 KiB
HTML
52 lines
1.3 KiB
HTML
<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>
|