Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-color/t43-svg-keywords-a.xht - WPT Dashboard Interop Dashboard
<head>
<title>CSS Test: HTML4 color keywords</title>
<link rel="match" href="t43-svg-keywords-a-ref.html" />
<meta name="assert" content="Test that the HTML4 color keywords have the correct values." />
<style type="text/css"><![CDATA[
html, body { background: #dddddd; color: #000000; }
table { border-spacing: 0; padding: 0; border: none; }
td { border: none; padding: 0; }
]]></style>
</head>
<body>
<p>Each row in the following table (except the first and last, to show where the columns are) should have two cells with the same background color. None of them should match the background of the page.</p>
<table>
<tr><td style="background: black"> </td><td style="background: white"> </td></tr>
<tr><td style="background: aliceblue"> </td> <td style="background: #f0f8ff"> </td></tr>
<tr><td style="background: antiquewhite"> </td> <td style="background: #faebd7"> </td></tr>
<tr><td style="background: aqua"> </td> <td style="background: #00ffff"> </td></tr>
<tr><td style="background: aquamarine"> </td> <td style="background: #7fffd4"> </td></tr>
<tr><td style="background: azure"> </td> <td style="background: #f0ffff"> </td></tr>
<tr><td style="background: beige"> </td> <td style="background: #f5f5dc"> </td></tr>
<tr><td style="background: bisque"> </td> <td style="background: #ffe4c4"> </td></tr>
<tr><td style="background: black"> </td> <td style="background: #000000"> </td></tr>
<tr><td style="background: blanchedalmond"> </td> <td style="background: #ffebcd"> </td></tr>
<tr><td style="background: blue"> </td> <td style="background: #0000ff"> </td></tr>
<tr><td style="background: blueviolet"> </td> <td style="background: #8a2be2"> </td></tr>
<tr><td style="background: brown"> </td> <td style="background: #a52a2a"> </td></tr>
<tr><td style="background: burlywood"> </td> <td style="background: #deb887"> </td></tr>
<tr><td style="background: cadetblue"> </td> <td style="background: #5f9ea0"> </td></tr>
<tr><td style="background: chartreuse"> </td> <td style="background: #7fff00"> </td></tr>
<tr><td style="background: chocolate"> </td> <td style="background: #d2691e"> </td></tr>
<tr><td style="background: coral"> </td> <td style="background: #ff7f50"> </td></tr>
<tr><td style="background: cornflowerblue"> </td> <td style="background: #6495ed"> </td></tr>
<tr><td style="background: cornsilk"> </td> <td style="background: #fff8dc"> </td></tr>
<tr><td style="background: crimson"> </td> <td style="background: #dc143c"> </td></tr>
<tr><td style="background: cyan"> </td> <td style="background: #00ffff"> </td></tr>
<tr><td style="background: darkblue"> </td> <td style="background: #00008b"> </td></tr>
<tr><td style="background: darkcyan"> </td> <td style="background: #008b8b"> </td></tr>
<tr><td style="background: darkgoldenrod"> </td> <td style="background: #b8860b"> </td></tr>
<tr><td style="background: darkgray"> </td> <td style="background: #a9a9a9"> </td></tr>
<tr><td style="background: darkgreen"> </td> <td style="background: #006400"> </td></tr>
<tr><td style="background: darkgrey"> </td> <td style="background: #a9a9a9"> </td></tr>
<tr><td style="background: darkkhaki"> </td> <td style="background: #bdb76b"> </td></tr>
<tr><td style="background: darkmagenta"> </td> <td style="background: #8b008b"> </td></tr>
<tr><td style="background: darkolivegreen"> </td> <td style="background: #556b2f"> </td></tr>
<tr><td style="background: darkorange"> </td> <td style="background: #ff8c00"> </td></tr>
<tr><td style="background: darkorchid"> </td> <td style="background: #9932cc"> </td></tr>
<tr><td style="background: darkred"> </td> <td style="background: #8b0000"> </td></tr>
<tr><td style="background: darksalmon"> </td> <td style="background: #e9967a"> </td></tr>
<tr><td style="background: darkseagreen"> </td> <td style="background: #8fbc8f"> </td></tr>
<tr><td style="background: darkslateblue"> </td> <td style="background: #483d8b"> </td></tr>
<tr><td style="background: darkslategray"> </td> <td style="background: #2f4f4f"> </td></tr>
<tr><td style="background: darkslategrey"> </td> <td style="background: #2f4f4f"> </td></tr>
<tr><td style="background: darkturquoise"> </td> <td style="background: #00ced1"> </td></tr>
<tr><td style="background: darkviolet"> </td> <td style="background: #9400d3"> </td></tr>
<tr><td style="background: deeppink"> </td> <td style="background: #ff1493"> </td></tr>
<tr><td style="background: deepskyblue"> </td> <td style="background: #00bfff"> </td></tr>
<tr><td style="background: dimgray"> </td> <td style="background: #696969"> </td></tr>
<tr><td style="background: dimgrey"> </td> <td style="background: #696969"> </td></tr>
<tr><td style="background: dodgerblue"> </td> <td style="background: #1e90ff"> </td></tr>
<tr><td style="background: firebrick"> </td> <td style="background: #b22222"> </td></tr>
<tr><td style="background: floralwhite"> </td> <td style="background: #fffaf0"> </td></tr>
<tr><td style="background: forestgreen"> </td> <td style="background: #228b22"> </td></tr>
<tr><td style="background: fuchsia"> </td> <td style="background: #ff00ff"> </td></tr>
<tr><td style="background: gainsboro"> </td> <td style="background: #dcdcdc"> </td></tr>
<tr><td style="background: ghostwhite"> </td> <td style="background: #f8f8ff"> </td></tr>
<tr><td style="background: gold"> </td> <td style="background: #ffd700"> </td></tr>
<tr><td style="background: goldenrod"> </td> <td style="background: #daa520"> </td></tr>
<tr><td style="background: gray"> </td> <td style="background: #808080"> </td></tr>
<tr><td style="background: green"> </td> <td style="background: #008000"> </td></tr>
<tr><td style="background: greenyellow"> </td> <td style="background: #adff2f"> </td></tr>
<tr><td style="background: grey"> </td> <td style="background: #808080"> </td></tr>
<tr><td style="background: honeydew"> </td> <td style="background: #f0fff0"> </td></tr>
<tr><td style="background: hotpink"> </td> <td style="background: #ff69b4"> </td></tr>
<tr><td style="background: indianred"> </td> <td style="background: #cd5c5c"> </td></tr>
<tr><td style="background: indigo"> </td> <td style="background: #4b0082"> </td></tr>
<tr><td style="background: ivory"> </td> <td style="background: #fffff0"> </td></tr>
<tr><td style="background: khaki"> </td> <td style="background: #f0e68c"> </td></tr>
<tr><td style="background: lavender"> </td> <td style="background: #e6e6fa"> </td></tr>
<tr><td style="background: lavenderblush"> </td> <td style="background: #fff0f5"> </td></tr>
<tr><td style="background: lawngreen"> </td> <td style="background: #7cfc00"> </td></tr>
<tr><td style="background: lemonchiffon"> </td> <td style="background: #fffacd"> </td></tr>
<tr><td style="background: lightblue"> </td> <td style="background: #add8e6"> </td></tr>
<tr><td style="background: lightcoral"> </td> <td style="background: #f08080"> </td></tr>
<tr><td style="background: lightcyan"> </td> <td style="background: #e0ffff"> </td></tr>
<tr><td style="background: lightgoldenrodyellow"> </td> <td style="background: #fafad2"> </td></tr>
<tr><td style="background: lightgray"> </td> <td style="background: #d3d3d3"> </td></tr>
<tr><td style="background: lightgreen"> </td> <td style="background: #90ee90"> </td></tr>
<tr><td style="background: lightgrey"> </td> <td style="background: #d3d3d3"> </td></tr>
<tr><td style="background: lightpink"> </td> <td style="background: #ffb6c1"> </td></tr>
<tr><td style="background: lightsalmon"> </td> <td style="background: #ffa07a"> </td></tr>
<tr><td style="background: lightseagreen"> </td> <td style="background: #20b2aa"> </td></tr>
<tr><td style="background: lightskyblue"> </td> <td style="background: #87cefa"> </td></tr>
<tr><td style="background: lightslategray"> </td> <td style="background: #778899"> </td></tr>
<tr><td style="background: lightslategrey"> </td> <td style="background: #778899"> </td></tr>
<tr><td style="background: lightsteelblue"> </td> <td style="background: #b0c4de"> </td></tr>
<tr><td style="background: lightyellow"> </td> <td style="background: #ffffe0"> </td></tr>
<tr><td style="background: lime"> </td> <td style="background: #00ff00"> </td></tr>
<tr><td style="background: limegreen"> </td> <td style="background: #32cd32"> </td></tr>
<tr><td style="background: linen"> </td> <td style="background: #faf0e6"> </td></tr>
<tr><td style="background: magenta"> </td> <td style="background: #ff00ff"> </td></tr>
<tr><td style="background: maroon"> </td> <td style="background: #800000"> </td></tr>
<tr><td style="background: mediumaquamarine"> </td> <td style="background: #66cdaa"> </td></tr>
<tr><td style="background: mediumblue"> </td> <td style="background: #0000cd"> </td></tr>
<tr><td style="background: mediumorchid"> </td> <td style="background: #ba55d3"> </td></tr>
<tr><td style="background: mediumpurple"> </td> <td style="background: #9370db"> </td></tr>
<tr><td style="background: mediumseagreen"> </td> <td style="background: #3cb371"> </td></tr>
<tr><td style="background: mediumslateblue"> </td> <td style="background: #7b68ee"> </td></tr>
<tr><td style="background: mediumspringgreen"> </td> <td style="background: #00fa9a"> </td></tr>
<tr><td style="background: mediumturquoise"> </td> <td style="background: #48d1cc"> </td></tr>
<tr><td style="background: mediumvioletred"> </td> <td style="background: #c71585"> </td></tr>
<tr><td style="background: midnightblue"> </td> <td style="background: #191970"> </td></tr>
<tr><td style="background: mintcream"> </td> <td style="background: #f5fffa"> </td></tr>
<tr><td style="background: mistyrose"> </td> <td style="background: #ffe4e1"> </td></tr>
<tr><td style="background: moccasin"> </td> <td style="background: #ffe4b5"> </td></tr>
<tr><td style="background: navajowhite"> </td> <td style="background: #ffdead"> </td></tr>
<tr><td style="background: navy"> </td> <td style="background: #000080"> </td></tr>
<tr><td style="background: oldlace"> </td> <td style="background: #fdf5e6"> </td></tr>
<tr><td style="background: olive"> </td> <td style="background: #808000"> </td></tr>
<tr><td style="background: olivedrab"> </td> <td style="background: #6b8e23"> </td></tr>
<tr><td style="background: orange"> </td> <td style="background: #ffa500"> </td></tr>
<tr><td style="background: orangered"> </td> <td style="background: #ff4500"> </td></tr>
<tr><td style="background: orchid"> </td> <td style="background: #da70d6"> </td></tr>
<tr><td style="background: palegoldenrod"> </td> <td style="background: #eee8aa"> </td></tr>
<tr><td style="background: palegreen"> </td> <td style="background: #98fb98"> </td></tr>
<tr><td style="background: paleturquoise"> </td> <td style="background: #afeeee"> </td></tr>
<tr><td style="background: palevioletred"> </td> <td style="background: #db7093"> </td></tr>
<tr><td style="background: papayawhip"> </td> <td style="background: #ffefd5"> </td></tr>
<tr><td style="background: peachpuff"> </td> <td style="background: #ffdab9"> </td></tr>
<tr><td style="background: peru"> </td> <td style="background: #cd853f"> </td></tr>
<tr><td style="background: pink"> </td> <td style="background: #ffc0cb"> </td></tr>
<tr><td style="background: plum"> </td> <td style="background: #dda0dd"> </td></tr>
<tr><td style="background: powderblue"> </td> <td style="background: #b0e0e6"> </td></tr>
<tr><td style="background: purple"> </td> <td style="background: #800080"> </td></tr>
<tr><td style="background: red"> </td> <td style="background: #ff0000"> </td></tr>
<tr><td style="background: rosybrown"> </td> <td style="background: #bc8f8f"> </td></tr>
<tr><td style="background: royalblue"> </td> <td style="background: #4169e1"> </td></tr>
<tr><td style="background: saddlebrown"> </td> <td style="background: #8b4513"> </td></tr>
<tr><td style="background: salmon"> </td> <td style="background: #fa8072"> </td></tr>
<tr><td style="background: sandybrown"> </td> <td style="background: #f4a460"> </td></tr>
<tr><td style="background: seagreen"> </td> <td style="background: #2e8b57"> </td></tr>
<tr><td style="background: seashell"> </td> <td style="background: #fff5ee"> </td></tr>
<tr><td style="background: sienna"> </td> <td style="background: #a0522d"> </td></tr>
<tr><td style="background: silver"> </td> <td style="background: #c0c0c0"> </td></tr>
<tr><td style="background: skyblue"> </td> <td style="background: #87ceeb"> </td></tr>
<tr><td style="background: slateblue"> </td> <td style="background: #6a5acd"> </td></tr>
<tr><td style="background: slategray"> </td> <td style="background: #708090"> </td></tr>
<tr><td style="background: slategrey"> </td> <td style="background: #708090"> </td></tr>
<tr><td style="background: snow"> </td> <td style="background: #fffafa"> </td></tr>
<tr><td style="background: springgreen"> </td> <td style="background: #00ff7f"> </td></tr>
<tr><td style="background: steelblue"> </td> <td style="background: #4682b4"> </td></tr>
<tr><td style="background: tan"> </td> <td style="background: #d2b48c"> </td></tr>
<tr><td style="background: teal"> </td> <td style="background: #008080"> </td></tr>
<tr><td style="background: thistle"> </td> <td style="background: #d8bfd8"> </td></tr>
<tr><td style="background: tomato"> </td> <td style="background: #ff6347"> </td></tr>
<tr><td style="background: turquoise"> </td> <td style="background: #40e0d0"> </td></tr>
<tr><td style="background: violet"> </td> <td style="background: #ee82ee"> </td></tr>
<tr><td style="background: wheat"> </td> <td style="background: #f5deb3"> </td></tr>
<tr><td style="background: white"> </td> <td style="background: #ffffff"> </td></tr>
<tr><td style="background: whitesmoke"> </td> <td style="background: #f5f5f5"> </td></tr>
<tr><td style="background: yellow"> </td> <td style="background: #ffff00"> </td></tr>
<tr><td style="background: yellowgreen"> </td> <td style="background: #9acd32"> </td></tr>
<tr><td style="background: white"> </td><td style="background: black"> </td></tr>
</table>
</body>
</html>