1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: system colors</title>
5 <link rel="author" title="L. David Baron" href="https://dbaron.org/">
6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
7 <link rel="help" href="http://www.w3.org/TR/css3-color/#css2-system">
8 <meta name="flags" content="">
9 <meta name="assert" content="That system colors are displayed as described.">
10 <style type="text/css">
11 html, body { background: #9f9; }
12 p, div { border: medium solid red; background: red; color: red; }
13 </style>
14 </head>
15 <body>
16
17 <p style="border: none; background: white; color: black">Nothing in this document should be red unless the operating environment provides red as a color for one of the things mentioned.</p>
18
19 <p style="border: none; background: white; color: black">Every line of text in this document should be a color distinct enough from its background to be legible.</p>
20
21 <p style="border-top: 4px solid ButtonHighlight; border-right: 4px solid ButtonShadow; border-bottom: 4px solid ButtonShadow; border-left: 4px solid ButtonHighlight; background: ButtonFace; color: ButtonText">
22 This should have the text color, background color, and solid border that makes it look like the closest simulation of a raised button (with the light source in the upper left) in the operating environment that is possible using a box with a single border around it.
23 </p>
24
25 <div style="border-top: 2px solid ThreeDHighlight; border-right: 2px solid ThreeDDarkShadow; border-bottom: 2px solid ThreeDDarkShadow; border-left: 2px solid ThreeDHighlight">
26 <div style="border-top: 2px solid ThreeDLightShadow; border-right: 2px solid ThreeDShadow; border-bottom: 2px solid ThreeDShadow; border-left: 2px solid ThreeDLightShadow; background: ThreeDFace; color: ButtonText">
27 <!-- is ButtonText an appropriate color to use here? -->
28 This should have the background color and <em>two</em> solid borders that makes it look like the closest simulation of a raised button (with the light source in the upper left) in the operating environment that is possible using a box with a two-layer border around it.
29 </div>
30 </div>
31
32 <p style="border: medium solid ActiveBorder; background: ActiveCaption; color: CaptionText">If the operating environment provides such colors, this should have the text color and background color of an active window caption, and a border the color of the border of active windows.</p>
33
34 <p style="border: medium solid InactiveBorder; background: InactiveCaption; color: InactiveCaptionText">If the operating environment provides such colors, this should have the text color and background color of an inactive window caption, and a border the color of the border of inactive windows.</p>
35
36 <p style="border: none; background: AppWorkspace; color: WindowText">
37 This should have the background color used by multiple document interface (MDI) applications, if the operating environment provides such a color.
38 </p>
39
40 <p style="background: Background; color: WindowText; border: none">
41 This should have the background color of the desktop, if the operating environment provides such a color.
42 </p>
43
44 <p style="background: Window; color: GrayText; border: none">
45 This should have the text color of disabled controls, if the operating environment provides such a color.
46 </p>
47
48 <p style="background: Highlight; color: HighlightText; border: none">
49 This should have the text color and background color of highlighted items, if the operating system provides such colors.
50 </p>
51
52 <p style="background: InfoBackground; color: InfoText; border: none">
53 This should have the text color and background color of tooltips, if the operating system provides such colors.
54 </p>
55
56 <p style="background: Menu; color: MenuText; border: none">
57 This should have the text color and background color of menus, if the operating system provides such colors.
58 </p>
59
60 <p style="border: none; background: white; color: black">The following (empty) square should have the background color of the area that scrollbar sliders slide over, if the operating environment provides such a color:</p>
61 <p style="background: Scrollbar; color: CaptionText; border: none; margin-left: auto; margin-right: auto; width: 2em; height: 2em;">
62
63 </p>
64
65 <p style="background: Window; color: WindowText; border: none">
66 This should have the text color and background color of text fields, if the operating system provides such colors.
67 </p>
68
69 <p style="border: 2px solid WindowFrame; background: white; color: black">
70 This should have a border the color of a window's frame, if the operating system provides such a color.
71 </p>
72
73 </body>
74 </html>