<style>
span {
    font-family: -apple-system-monospaced-numbers;
    font-size: 24px
}
</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 result = document.getElementById("result");

    var aRect = a.getBoundingClientRect();
    var bRect = b.getBoundingClientRect();

    if (aRect.width == bRect.width)
        result.textContent = "PASS: widths were the same";
    else
        result.textContent = "FAIL: widths were not the same";
}
</script>
<p>These next two lines should be the same width</p>
<p><span id="a">00:11:22.33</span></p>
<p><span id="b">11:11:11.11</span></p>

<p id="result"></p>