Expose more semantic system colors.
[WebKit-https.git] / LayoutTests / fast / css / apple-system-control-colors.html
1 <script>
2     
3     if (window.testRunner)
4         window.testRunner.dumpAsText();
5     
6     window.addEventListener("load", run, false);
7     
8     function run() {
9         var divs = document.querySelectorAll("div");
10         for (var i = 0; i < divs.length; i++) {
11             var div = divs[i];
12             var span = div.querySelector("span");
13             div.innerHTML += " : " + window.getComputedStyle(span).backgroundColor;
14         }
15     }
16 </script>
17 <style>
18     .swatch {
19         display: inline-block;
20         width: 40px;
21         height: 40px;
22     }
23 </style>
24 <div><span class="swatch" style="background-color: -apple-system-header-text"></span>-apple-system-header-text</div>
25 <div><span class="swatch" style="background-color: -apple-system-text-background"></span>-apple-system-text-background</div>
26 <div><span class="swatch" style="background-color: -apple-system-control-background"></span>-apple-system-control-background</div>
27 <div><span class="swatch" style="background-color: -apple-system-alternate-selected-text"></span>-apple-system-alternate-selected-text</div>
28 <div><span class="swatch" style="background-color: -apple-system-control-accent"></span>-apple-system-control-accent</div>
29 <div><span class="swatch" style="background-color: -apple-system-even-alternating-content-background"></span>-apple-system-even-alternating-content-background</div>
30 <div><span class="swatch" style="background-color: -apple-system-odd-alternating-content-background"></span>-apple-system-odd-alternating-content-background</div>
31 <div><span class="swatch" style="background-color: -apple-system-selected-content-background"></span>-apple-system-selected-content-background</div>
32 <div><span class="swatch" style="background-color: -apple-system-unemphasized-selected-content-background"></span>-apple-system-unemphasized-selected-content-background</div>
33 <div><span class="swatch" style="background-color: -apple-system-selected-text"></span>-apple-system-selected-text</div>
34 <div><span class="swatch" style="background-color: -apple-system-unemphasized-selected-text"></span>-apple-system-unemphasized-selected-text</div>
35 <div><span class="swatch" style="background-color: -apple-system-selected-text-background"></span>-apple-system-selected-text-background</div>
36 <div><span class="swatch" style="background-color: -apple-system-unemphasized-selected-text-background"></span>-apple-system-unemphasized-selected-text-background</div>
37 <div><span class="swatch" style="background-color: -apple-system-placeholder-text"></span>-apple-system-placeholder-text</div>
38 <div><span class="swatch" style="background-color: -apple-system-find-highlight-background"></span>-apple-system-find-highlight-background</div>
39 <div><span class="swatch" style="background-color: -apple-system-label"></span>-apple-system-label</div>
40 <div><span class="swatch" style="background-color: -apple-system-secondary-label"></span>-apple-system-secondary-label</div>
41 <div><span class="swatch" style="background-color: -apple-system-tertiary-label"></span>-apple-system-tertiary-label</div>
42 <div><span class="swatch" style="background-color: -apple-system-quaternary-label"></span>-apple-system-quaternary-label</div>
43 <div><span class="swatch" style="background-color: -apple-system-grid"></span>-apple-system-grid</div>
44 <div><span class="swatch" style="background-color: -apple-system-separator"></span>-apple-system-separator</div>
45 <div style="color: -apple-system-label"><span class="swatch" style="background-color: currentcolor;"></span>current-color with inherited -apple-system-label</div>