From 0529ce46915d3c50ff0cf50419cb4abe6499ccb9 Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner <jackalmage@gmail.com>
Date: Fri, 8 Nov 2024 14:07:29 -0800
Subject: [PATCH] [css-borders-4] Add color border test from Tim

---
 css-borders-4/ridge-borders/color.html | 235 +++++++++++++++++++++++++
 1 file changed, 235 insertions(+)
 create mode 100644 css-borders-4/ridge-borders/color.html
diff --git a/css-borders-4/ridge-borders/color.html b/css-borders-4/ridge-borders/color.html
new file mode 100644
index 00000000000..166505ff77f
--- /dev/null
+++ b/css-borders-4/ridge-borders/color.html
@@ -0,0 +1,235 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Color border tests</title>
+<style>
+body {
+    border: 0;
+    margin: 0;
+    text-align: center;
+}
+
+table {
+    border-spacing: 5px;
+    display: inline-table;
+}
+
+h2 {
+    padding: 12px;
+    margin: 0;
+    font: bold 24px Arial;
+    cursor: default;
+}
+
+td {
+    cursor: default;
+    color: black;
+    font: 16px Arial;
+    text-align: center;
+    padding: 2px;
+    width: 150px;
+    max-width: 150px;
+    min-width: 150px;
+    border-style: var(--border-style);
+    border-width: 10px;
+}
+</style>
+<body style="background-color:white">
+    border-style:
+    <select id="borderStyle">
+        <option value="solid">solid</option>
+        <option value="groove">groove</option>
+        <option value="ridge">ridge</option>
+        <option value="inset">inset</option>
+        <option value="outset">outset</option>
+    </select>
+    <table>
+        <tr>
+            <td style="border-color:white" title="white = #ffffff">white</td>
+            <td style="border-color:gainsboro" title="gainsboro = #dcdcdc">gainsboro</td>
+            <td style="border-color:silver" title="silver = #c0c0c0">silver</td>
+            <td style="border-color:darkgray" title="darkgray = #a9a9a9">darkgray</td>
+            <td style="border-color:gray" title="gray = #808080">gray</td>
+            <td style="border-color:dimgray" title="dimgray = #696969">dimgray</td>
+            <td style="border-color:black" title="black = #000000">black</td>
+        </tr>
+        <tr>
+            <td style="border-color:whitesmoke" title="whitesmoke = #f5f5f5">whitesmoke</td>
+            <td style="border-color:lightgray" title="lightgray = #d3d3d3">lightgray</td>
+            <td style="border-color:lightcoral" title="lightcoral = #f08080">lightcoral</td>
+            <td style="border-color:rosybrown" title="rosybrown = #bc8f8f">rosybrown</td>
+            <td style="border-color:indianred" title="indianred = #cd5c5c">indianred</td>
+            <td style="border-color:red" title="red = #ff0000">red</td>
+            <td style="border-color:maroon" title="maroon = #800000">maroon</td>
+        </tr>
+        <tr>
+            <td style="border-color:snow" title="snow = #fffafa">snow</td>
+            <td style="border-color:mistyrose" title="mistyrose = #ffe4e1">mistyrose</td>
+            <td style="border-color:salmon" title="salmon = #fa8072">salmon</td>
+            <td style="border-color:orangered" title="orangered = #ff4500">orangered</td>
+            <td style="border-color:chocolate" title="chocolate = #d2691e">chocolate</td>
+            <td style="border-color:brown" title="brown = #a52a2a">brown</td>
+            <td style="border-color:darkred" title="darkred = #8b0000">darkred</td>
+        </tr>
+        <tr>
+            <td style="border-color:seashell" title="seashell = #fff5ee">seashell</td>
+            <td style="border-color:peachpuff" title="peachpuff = #ffdab9">peachpuff</td>
+            <td style="border-color:tomato" title="tomato = #ff6347">tomato</td>
+            <td style="border-color:darkorange" title="darkorange = #ff8c00">darkorange</td>
+            <td style="border-color:peru" title="peru = #cd853f">peru</td>
+            <td style="border-color:firebrick" title="firebrick = #b22222">firebrick</td>
+            <td style="border-color:olive" title="olive = #808000">olive</td>
+        </tr>
+        <tr>
+            <td style="border-color:linen" title="linen = #faf0e6">linen</td>
+            <td style="border-color:bisque" title="bisque = #ffe4c4">bisque</td>
+            <td style="border-color:darksalmon" title="darksalmon = #e9967a">darksalmon</td>
+            <td style="border-color:orange" title="orange = #ffa500">orange</td>
+            <td style="border-color:goldenrod" title="goldenrod = #daa520">goldenrod</td>
+            <td style="border-color:sienna" title="sienna = #a0522d">sienna</td>
+            <td style="border-color:darkolivegreen" title="darkolivegreen = #556b2f">darkolivegreen</td>
+        </tr>
+        <tr>
+            <td style="border-color:oldlace" title="oldlace = #fdf5e6">oldlace</td>
+            <td style="border-color:antiquewhite" title="antiquewhite = #faebd7">antiquewhite</td>
+            <td style="border-color:coral" title="coral = #ff7f50">coral</td>
+            <td style="border-color:gold" title="gold = #ffd700">gold</td>
+            <td style="border-color:limegreen" title="limegreen = #32cd32">limegreen</td>
+            <td style="border-color:saddlebrown" title="saddlebrown = #8b4513">saddlebrown</td>
+            <td style="border-color:darkgreen" title="darkgreen = #006400">darkgreen</td>
+        </tr>
+        <tr>
+            <td style="border-color:floralwhite" title="floralwhite = #fffaf0">floralwhite</td>
+            <td style="border-color:navajowhite" title="navajowhite = #ffdead">navajowhite</td>
+            <td style="border-color:lightsalmon" title="lightsalmon = #ffa07a">lightsalmon</td>
+            <td style="border-color:darkkhaki" title="darkkhaki = #bdb76b">darkkhaki</td>
+            <td style="border-color:lime" title="lime = #00ff00">lime</td>
+            <td style="border-color:darkgoldenrod" title="darkgoldenrod = #b8860b">darkgoldenrod</td>
+            <td style="border-color:green" title="green = #008000">green</td>
+        </tr>
+        <tr>
+            <td style="border-color:cornsilk" title="cornsilk = #fff8dc">cornsilk</td>
+            <td style="border-color:blanchedalmond" title="blanchedalmond = #ffebcd">blanchedalmond</td>
+            <td style="border-color:sandybrown" title="sandybrown = #f4a460">sandybrown</td>
+            <td style="border-color:yellow" title="yellow = #ffff00">yellow</td>
+            <td style="border-color:mediumseagreen" title="mediumseagreen = #3cb371">mediumseagreen</td>
+            <td style="border-color:olivedrab" title="olivedrab = #6b8e23">olivedrab</td>
+            <td style="border-color:forestgreen" title="forestgreen = #228b22">forestgreen</td>
+        </tr>
+        <tr>
+            <td style="border-color:ivory" title="ivory = #fffff0">ivory</td>
+            <td style="border-color:papayawhip" title="papayawhip = #ffefd5">papayawhip</td>
+            <td style="border-color:burlywood" title="burlywood = #deb887">burlywood</td>
+            <td style="border-color:yellowgreen" title="yellowgreen = #9acd32">yellowgreen</td>
+            <td style="border-color:springgreen" title="springgreen = #00ff7f">springgreen</td>
+            <td style="border-color:seagreen" title="seagreen = #2e8b57">seagreen</td>
+            <td style="border-color:darkslategray" title="darkslategray = #2f4f4f">darkslategray</td>
+        </tr>
+        <tr>
+            <td style="border-color:beige" title="beige = #f5f5dc">beige</td>
+            <td style="border-color:moccasin" title="moccasin = #ffe4b5">moccasin</td>
+            <td style="border-color:tan" title="tan = #d2b48c">tan</td>
+            <td style="border-color:chartreuse" title="chartreuse = #7fff00">chartreuse</td>
+            <td style="border-color:mediumspringgreen" title="mediumspringgreen = #00fa9a">mediumspringgreen</td>
+            <td style="border-color:lightseagreen" title="lightseagreen = #20b2aa">lightseagreen</td>
+            <td style="border-color:teal" title="teal = #008080">teal</td>
+        </tr>
+        <tr>
+            <td style="border-color:lightyellow" title="lightyellow = #ffffe0">lightyellow</td>
+            <td style="border-color:wheat" title="wheat = #f5deb3">wheat</td>
+            <td style="border-color:khaki" title="khaki = #f0e68c">khaki</td>
+            <td style="border-color:lawngreen" title="lawngreen = #7cfc00">lawngreen</td>
+            <td style="border-color:aqua" title="aqua = #00ffff">aqua</td>
+            <td style="border-color:darkturquoise" title="darkturquoise = #00ced1">darkturquoise</td>
+            <td style="border-color:darkcyan" title="darkcyan = #008b8b">darkcyan</td>
+        </tr>
+        <tr>
+            <td style="border-color:lightgoldenrodyellow" title="lightgoldenrodyellow = #fafad2">lightgoldenrodyellow</td>
+            <td style="border-color:lemonchiffon" title="lemonchiffon = #fffacd">lemonchiffon</td>
+            <td style="border-color:greenyellow" title="greenyellow = #adff2f">greenyellow</td>
+            <td style="border-color:darkseagreen" title="darkseagreen = #8fbc8f">darkseagreen</td>
+            <td style="border-color:cyan" title="cyan = #00ffff">cyan</td>
+            <td style="border-color:deepskyblue" title="deepskyblue = #00bfff">deepskyblue</td>
+            <td style="border-color:midnightblue" title="midnightblue = #191970">midnightblue</td>
+        </tr>
+        <tr>
+            <td style="border-color:honeydew" title="honeydew = #f0fff0">honeydew</td>
+            <td style="border-color:palegoldenrod" title="palegoldenrod = #eee8aa">palegoldenrod</td>
+            <td style="border-color:lightgreen" title="lightgreen = #90ee90">lightgreen</td>
+            <td style="border-color:mediumaquamarine" title="mediumaquamarine = #66cdaa">mediumaquamarine</td>
+            <td style="border-color:cadetblue" title="cadetblue = #5f9ea0">cadetblue</td>
+            <td style="border-color:steelblue" title="steelblue = #4682b4">steelblue</td>
+            <td style="border-color:navy" title="navy = #000080">navy</td>
+        </tr>
+        <tr>
+            <td style="border-color:mintcream" title="mintcream = #f5fffa">mintcream</td>
+            <td style="border-color:palegreen" title="palegreen = #98fb98">palegreen</td>
+            <td style="border-color:skyblue" title="skyblue = #87ceeb">skyblue</td>
+            <td style="border-color:turquoise" title="turquoise = #40e0d0">turquoise</td>
+            <td style="border-color:dodgerblue" title="dodgerblue = #1e90ff">dodgerblue</td>
+            <td style="border-color:blue" title="blue = #0000ff">blue</td>
+            <td style="border-color:darkblue" title="darkblue = #00008b">darkblue</td>
+        </tr>
+        <tr>
+            <td style="border-color:azure" title="azure = #f0ffff">azure</td>
+            <td style="border-color:aquamarine" title="aquamarine = #7fffd4">aquamarine</td>
+            <td style="border-color:lightskyblue" title="lightskyblue = #87cefa">lightskyblue</td>
+            <td style="border-color:mediumturquoise" title="mediumturquoise = #48d1cc">mediumturquoise</td>
+            <td style="border-color:lightslategray" title="lightslategray = #778899">lightslategray</td>
+            <td style="border-color:blueviolet" title="blueviolet = #8a2be2">blueviolet</td>
+            <td style="border-color:mediumblue" title="mediumblue = #0000cd">mediumblue</td>
+        </tr>
+        <tr>
+            <td style="border-color:lightcyan" title="lightcyan = #e0ffff">lightcyan</td>
+            <td style="border-color:paleturquoise" title="paleturquoise = #afeeee">paleturquoise</td>
+            <td style="border-color:lightsteelblue" title="lightsteelblue = #b0c4de">lightsteelblue</td>
+            <td style="border-color:cornflowerblue" title="cornflowerblue = #6495ed">cornflowerblue</td>
+            <td style="border-color:slategray" title="slategray = #708090">slategray</td>
+            <td style="border-color:darkorchid" title="darkorchid = #9932cc">darkorchid</td>
+            <td style="border-color:darkslateblue" title="darkslateblue = #483d8b">darkslateblue</td>
+        </tr>
+        <tr>
+            <td style="border-color:aliceblue" title="aliceblue = #f0f8ff">aliceblue</td>
+            <td style="border-color:powderblue" title="powderblue = #b0e0e6">powderblue</td>
+            <td style="border-color:thistle" title="thistle = #d8bfd8">thistle</td>
+            <td style="border-color:mediumslateblue" title="mediumslateblue = #7b68ee">mediumslateblue</td>
+            <td style="border-color:royalblue" title="royalblue = #4169e1">royalblue</td>
+            <td style="border-color:darkviolet" title="darkviolet = #9400d3">darkviolet</td>
+            <td style="border-color:rebeccapurple" title="rebeccapurple = #663399">rebeccapurple</td>
+        </tr>
+        <tr>
+            <td style="border-color:ghostwhite" title="ghostwhite = #f8f8ff">ghostwhite</td>
+            <td style="border-color:lightblue" title="lightblue = #add8e6">lightblue</td>
+            <td style="border-color:plum" title="plum = #dda0dd">plum</td>
+            <td style="border-color:mediumpurple" title="mediumpurple = #9370db">mediumpurple</td>
+            <td style="border-color:slateblue" title="slateblue = #6a5acd">slateblue</td>
+            <td style="border-color:magenta" title="magenta = #ff00ff">magenta</td>
+            <td style="border-color:indigo" title="indigo = #4b0082">indigo</td>
+        </tr>
+        <tr>
+            <td style="border-color:lavender" title="lavender = #e6e6fa">lavender</td>
+            <td style="border-color:pink" title="pink = #ffc0cb">pink</td>
+            <td style="border-color:violet" title="violet = #ee82ee">violet</td>
+            <td style="border-color:orchid" title="orchid = #da70d6">orchid</td>
+            <td style="border-color:mediumorchid" title="mediumorchid = #ba55d3">mediumorchid</td>
+            <td style="border-color:mediumvioletred" title="mediumvioletred = #c71585">mediumvioletred</td>
+            <td style="border-color:purple" title="purple = #800080">purple</td>
+        </tr>
+        <tr>
+            <td style="border-color:lavenderblush" title="lavenderblush = #fff0f5">lavenderblush</td>
+            <td style="border-color:lightpink" title="lightpink = #ffb6c1">lightpink</td>
+            <td style="border-color:hotpink" title="hotpink = #ff69b4">hotpink</td>
+            <td style="border-color:palevioletred" title="palevioletred = #db7093">palevioletred</td>
+            <td style="border-color:deeppink" title="deeppink = #ff1493">deeppink</td>
+            <td style="border-color:crimson" title="crimson = #dc143c">crimson</td>
+            <td style="border-color:darkmagenta" title="darkmagenta = #8b008b">darkmagenta</td>
+        </tr>
+    </table>
+
+    <script>
+        borderStyle.addEventListener("change", () => {
+            document.body.style.setProperty("--border-style", borderStyle.value);
+        });
+        document.body.style.setProperty("--border-style", borderStyle.value);
+
+    </script>
+</body>
\ No newline at end of file

white	gainsboro	silver	darkgray	gray	dimgray	black
whitesmoke	lightgray	lightcoral	rosybrown	indianred	red	maroon
snow	mistyrose	salmon	orangered	chocolate	brown	darkred
seashell	peachpuff	tomato	darkorange	peru	firebrick	olive
linen	bisque	darksalmon	orange	goldenrod	sienna	darkolivegreen
oldlace	antiquewhite	coral	gold	limegreen	saddlebrown	darkgreen
floralwhite	navajowhite	lightsalmon	darkkhaki	lime	darkgoldenrod	green
cornsilk	blanchedalmond	sandybrown	yellow	mediumseagreen	olivedrab	forestgreen
ivory	papayawhip	burlywood	yellowgreen	springgreen	seagreen	darkslategray
beige	moccasin	tan	chartreuse	mediumspringgreen	lightseagreen	teal
lightyellow	wheat	khaki	lawngreen	aqua	darkturquoise	darkcyan
lightgoldenrodyellow	lemonchiffon	greenyellow	darkseagreen	cyan	deepskyblue	midnightblue
honeydew	palegoldenrod	lightgreen	mediumaquamarine	cadetblue	steelblue	navy
mintcream	palegreen	skyblue	turquoise	dodgerblue	blue	darkblue
azure	aquamarine	lightskyblue	mediumturquoise	lightslategray	blueviolet	mediumblue
lightcyan	paleturquoise	lightsteelblue	cornflowerblue	slategray	darkorchid	darkslateblue
aliceblue	powderblue	thistle	mediumslateblue	royalblue	darkviolet	rebeccapurple
ghostwhite	lightblue	plum	mediumpurple	slateblue	magenta	indigo
lavender	pink	violet	orchid	mediumorchid	mediumvioletred	purple
lavenderblush	lightpink	hotpink	palevioletred	deeppink	crimson	darkmagenta