t451-system-colors-a

system colors

WeasyPrint

This browser

Assertion
That system colors are displayed as described.

Source

 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 			&nbsp;
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>