Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/CSS2/syntax/colors-006.xht - WPT Dashboard Interop Dashboard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>CSS Test: Comparing color keywords and hex values</title>
<link rel="match" href="colors-006-ref.xht" />
<meta name="assert" content="Color matching of keywords and hex values." />
<style type="text/css">
#maroon
{
background: maroon;
}
#maroonhex
{
background: #800000;
}
#red
{
background: red;
}
#redhex
{
background: #ff0000;
}
#orange
{
background: orange;
}
#orangehex
{
background: #ffa500;
}
#yellow
{
background: yellow;
}
#yellowhex
{
background: #ffff00;
}
#olive
{
background: olive;
}
#olivehex
{
background: #808000;
}
#purple
{
background: purple;
}
#purplehex
{
background: #800080;
}
#fuchsia
{
background: fuchsia;
}
#fuchsiahex
{
background: #ff00ff;
}
#white
{
background: white;
}
#whitehex
{
background: #ffffff;
}
#lime
{
background: lime;
}
#limehex
{
background: #00ff00;
}
#green
{
background: green;
}
#greenhex
{
background: #008000;
}
#navy
{
background: navy;
}
#navyhex
{
background: #000080;
}
#blue
{
background: blue;
}
#bluehex
{
background: #0000ff;
}
#aqua
{
background: aqua;
}
#aquahex
{
background: #00ffff;
}
#teal
{
background: teal;
}
#tealhex
{
background: #008080;
}
#black
{
background: black;
}
#blackhex
{
background: #000000;
}
#silver
{
background: silver;
}
#silverhex
{
background: #c0c0c0;
}
#gray
{
background: gray;
}
#grayhex
{
background: #808080;
}
td
{
height: 0.5in;
width: 0.5in;
}
</style>
</head>
<body>
<p>Test passes if the first row of boxes below match the second row of boxes below.</p>
<table>
<tr>
<td id="maroon"></td>
<td id="red"></td>
<td id="orange"></td>
<td id="yellow"></td>
<td id="olive"></td>
<td id="purple"></td>
<td id="fuchsia"></td>
<td id="white"></td>
<td id="lime"></td>
<td id="green"></td>
<td id="navy"></td>
<td id="blue"></td>
<td id="aqua"></td>
<td id="teal"></td>
<td id="black"></td>
<td id="silver"></td>
<td id="gray"></td>
</tr>
<tr>
<td id="maroonhex"></td>
<td id="redhex"></td>
<td id="orangehex"></td>
<td id="yellowhex"></td>
<td id="olivehex"></td>
<td id="purplehex"></td>
<td id="fuchsiahex"></td>
<td id="whitehex"></td>
<td id="limehex"></td>
<td id="greenhex"></td>
<td id="navyhex"></td>
<td id="bluehex"></td>
<td id="aquahex"></td>
<td id="tealhex"></td>
<td id="blackhex"></td>
<td id="silverhex"></td>
<td id="grayhex"></td>
</tr>
</table>
</body>
</html>