Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: e893060fea346c1b05076d048d34bfac0ed23172 authored by Chris Nardi on 02 April 2018, 17:04:26 UTC
Remove test that CSSStyleSheet.media is read-only
Tip revision: e893060
t451-system-colors-a.xht 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CSS Test: system colors</title>
		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
		<link rel="help" href="http://www.w3.org/TR/css3-color/#css2-system" />
		<meta name="flags" content="" />
		<meta name="assert" content="That system colors are displayed as described." />
		<style type="text/css"><![CDATA[
		html, body { background: #9f9; }
		p, div { border: medium solid red; background: red; color: red; }
		]]></style>
	</head>
	<body>

		<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>

		<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>

		<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">
			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.
		</p>

		<div style="border-top: 2px solid ThreeDHighlight; border-right: 2px solid ThreeDDarkShadow; border-bottom: 2px solid ThreeDDarkShadow; border-left: 2px solid ThreeDHighlight">
			<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">
				<!-- is ButtonText an appropriate color to use here? -->
				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.
			</div>
		</div>

		<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>

		<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>

		<p style="border: none; background: AppWorkspace; color: WindowText">
			This should have the background color used by multiple document interface (MDI) applications, if the operating environment provides such a color.
		</p>

		<p style="background: Background; color: WindowText; border: none">
			This should have the background color of the desktop, if the operating environment provides such a color.
		</p>

		<p style="background: Window; color: GrayText; border: none">
			This should have the text color of disabled controls, if the operating environment provides such a color.
		</p>

		<p style="background: Highlight; color: HighlightText; border: none">
			This should have the text color and background color of highlighted items, if the operating system provides such colors.
		</p>

		<p style="background: InfoBackground; color: InfoText; border: none">
			This should have the text color and background color of tooltips, if the operating system provides such colors.
		</p>

		<p style="background: Menu; color: MenuText; border: none">
			This should have the text color and background color of menus, if the operating system provides such colors.
		</p>

		<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>
		<p style="background: Scrollbar; color: CaptionText; border: none; margin-left: auto; margin-right: auto; width: 2em; height: 2em;">
			&nbsp;
		</p>

		<p style="background: Window; color: WindowText; border: none">
			This should have the text color and background color of text fields, if the operating system provides such colors.
		</p>

		<p style="border: 2px solid WindowFrame; background: white; color: black">
			This should have a border the color of a window's frame, if the operating system provides such a color.
		</p>

	</body>
</html>
back to top