<script>

if (window.testRunner)
    window.testRunner.dumpAsText();

window.addEventListener("load", run, false);

function run() {
    var divs = document.querySelectorAll("div");
    for (var i = 0; i < divs.length; i++) {
        var div = divs[i];
        var span = div.querySelector("span");
        div.innerHTML += " : " + window.getComputedStyle(span).backgroundColor;
    }
}
</script>
<style>
.swatch {
    display: inline-block;
    width: 40px;
    height: 40px;
}
</style>
<div><span class="swatch" style="background-color: -apple-system-blue"></span>-apple-system-blue</div>
<div><span class="swatch" style="background-color: -apple-system-brown"></span>-apple-system-brown</div>
<div><span class="swatch" style="background-color: -apple-system-gray"></span>-apple-system-gray</div>
<div><span class="swatch" style="background-color: -apple-system-green"></span>-apple-system-green</div>
<div><span class="swatch" style="background-color: -apple-system-orange"></span>-apple-system-orange</div>
<div><span class="swatch" style="background-color: -apple-system-pink"></span>-apple-system-pink</div>
<div><span class="swatch" style="background-color: -apple-system-purple"></span>-apple-system-purple</div>
<div><span class="swatch" style="background-color: -apple-system-red"></span>-apple-system-red</div>
<div><span class="swatch" style="background-color: -apple-system-yellow"></span>-apple-system-yellow</div>
<div><span class="swatch" style="background-color: -apple-wireless-playback-target-active"></span>-apple-wireless-playback-target-active</div>
<div style="color: -apple-system-blue"><span class="swatch" style="background-color: currentcolor;"></span>current-color with inherited -apple-system-blue</div>