LayoutTests/fast/css/apple-system-control-colors.html

<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-header-text"></span>-apple-system-header-text</div>
<div><span class="swatch" style="background-color: -apple-system-text-background"></span>-apple-system-text-background</div>
<div><span class="swatch" style="background-color: -apple-system-control-background"></span>-apple-system-control-background</div>
<div><span class="swatch" style="background-color: -apple-system-alternate-selected-text"></span>-apple-system-alternate-selected-text</div>
<div><span class="swatch" style="background-color: -apple-system-control-accent"></span>-apple-system-control-accent</div>
<div><span class="swatch" style="background-color: -apple-system-even-alternating-content-background"></span>-apple-system-even-alternating-content-background</div>
<div><span class="swatch" style="background-color: -apple-system-odd-alternating-content-background"></span>-apple-system-odd-alternating-content-background</div>
<div><span class="swatch" style="background-color: -apple-system-selected-content-background"></span>-apple-system-selected-content-background</div>
<div><span class="swatch" style="background-color: -apple-system-unemphasized-selected-content-background"></span>-apple-system-unemphasized-selected-content-background</div>
<div><span class="swatch" style="background-color: -apple-system-selected-text"></span>-apple-system-selected-text</div>
<div><span class="swatch" style="background-color: -apple-system-unemphasized-selected-text"></span>-apple-system-unemphasized-selected-text</div>
<div><span class="swatch" style="background-color: -apple-system-selected-text-background"></span>-apple-system-selected-text-background</div>
<div><span class="swatch" style="background-color: -apple-system-unemphasized-selected-text-background"></span>-apple-system-unemphasized-selected-text-background</div>
<div><span class="swatch" style="background-color: -apple-system-placeholder-text"></span>-apple-system-placeholder-text</div>
<div><span class="swatch" style="background-color: -apple-system-find-highlight-background"></span>-apple-system-find-highlight-background</div>
<div><span class="swatch" style="background-color: -apple-system-label"></span>-apple-system-label</div>
<div><span class="swatch" style="background-color: -apple-system-secondary-label"></span>-apple-system-secondary-label</div>
<div><span class="swatch" style="background-color: -apple-system-tertiary-label"></span>-apple-system-tertiary-label</div>
<div><span class="swatch" style="background-color: -apple-system-quaternary-label"></span>-apple-system-quaternary-label</div>
<div><span class="swatch" style="background-color: -apple-system-grid"></span>-apple-system-grid</div>
<div><span class="swatch" style="background-color: -apple-system-separator"></span>-apple-system-separator</div>
<div><span class="swatch" style="background-color: -apple-system-container-border"></span>-apple-system-container-border</div>
<div style="color: -apple-system-label"><span class="swatch" style="background-color: currentcolor;"></span>current-color with inherited -apple-system-label</div>