<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>