Skip to content

Commit

Permalink
[css-borders-4] Add color border test from Tim
Browse files Browse the repository at this point in the history
  • Loading branch information
@tabatkins
tabatkins committed Nov 8, 2024
1 parent e1e6db5 commit 0529ce4
Showing 1 changed file with 235 additions and 0 deletions.
235 changes: 235 additions & 0 deletions css-borders-4/ridge-borders/color.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 0529ce4

Please sign in to comment.