Skip to content

Commit 0529ce4

Browse files
tabatkinstabatkins
committed
[css-borders-4] Add color border test from Tim
1 parent e1e6db5 commit 0529ce4

File tree

1 file changed

+235
-0
lines changed

1 file changed

+235
-0
lines changed

‎css-borders-4/ridge-borders/color.html

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<!doctype html>
2+
<meta charset=utf-8>
3+
<title>Color border tests</title>
4+
<style>
5+
body {
6+
border: 0;
7+
margin: 0;
8+
text-align: center;
9+
}
10+
11+
table {
12+
border-spacing: 5px;
13+
display: inline-table;
14+
}
15+
16+
h2 {
17+
padding: 12px;
18+
margin: 0;
19+
font: bold 24px Arial;
20+
cursor: default;
21+
}
22+
23+
td {
24+
cursor: default;
25+
color: black;
26+
font: 16px Arial;
27+
text-align: center;
28+
padding: 2px;
29+
width: 150px;
30+
max-width: 150px;
31+
min-width: 150px;
32+
border-style: var(--border-style);
33+
border-width: 10px;
34+
}
35+
</style>
36+
<body style="background-color:white">
37+
border-style:
38+
<select id="borderStyle">
39+
<option value="solid">solid</option>
40+
<option value="groove">groove</option>
41+
<option value="ridge">ridge</option>
42+
<option value="inset">inset</option>
43+
<option value="outset">outset</option>
44+
</select>
45+
<table>
46+
<tr>
47+
<td style="border-color:white" title="white = #ffffff">white</td>
48+
<td style="border-color:gainsboro" title="gainsboro = #dcdcdc">gainsboro</td>
49+
<td style="border-color:silver" title="silver = #c0c0c0">silver</td>
50+
<td style="border-color:darkgray" title="darkgray = #a9a9a9">darkgray</td>
51+
<td style="border-color:gray" title="gray = #808080">gray</td>
52+
<td style="border-color:dimgray" title="dimgray = #696969">dimgray</td>
53+
<td style="border-color:black" title="black = #000000">black</td>
54+
</tr>
55+
<tr>
56+
<td style="border-color:whitesmoke" title="whitesmoke = #f5f5f5">whitesmoke</td>
57+
<td style="border-color:lightgray" title="lightgray = #d3d3d3">lightgray</td>
58+
<td style="border-color:lightcoral" title="lightcoral = #f08080">lightcoral</td>
59+
<td style="border-color:rosybrown" title="rosybrown = #bc8f8f">rosybrown</td>
60+
<td style="border-color:indianred" title="indianred = #cd5c5c">indianred</td>
61+
<td style="border-color:red" title="red = #ff0000">red</td>
62+
<td style="border-color:maroon" title="maroon = #800000">maroon</td>
63+
</tr>
64+
<tr>
65+
<td style="border-color:snow" title="snow = #fffafa">snow</td>
66+
<td style="border-color:mistyrose" title="mistyrose = #ffe4e1">mistyrose</td>
67+
<td style="border-color:salmon" title="salmon = #fa8072">salmon</td>
68+
<td style="border-color:orangered" title="orangered = #ff4500">orangered</td>
69+
<td style="border-color:chocolate" title="chocolate = #d2691e">chocolate</td>
70+
<td style="border-color:brown" title="brown = #a52a2a">brown</td>
71+
<td style="border-color:darkred" title="darkred = #8b0000">darkred</td>
72+
</tr>
73+
<tr>
74+
<td style="border-color:seashell" title="seashell = #fff5ee">seashell</td>
75+
<td style="border-color:peachpuff" title="peachpuff = #ffdab9">peachpuff</td>
76+
<td style="border-color:tomato" title="tomato = #ff6347">tomato</td>
77+
<td style="border-color:darkorange" title="darkorange = #ff8c00">darkorange</td>
78+
<td style="border-color:peru" title="peru = #cd853f">peru</td>
79+
<td style="border-color:firebrick" title="firebrick = #b22222">firebrick</td>
80+
<td style="border-color:olive" title="olive = #808000">olive</td>
81+
</tr>
82+
<tr>
83+
<td style="border-color:linen" title="linen = #faf0e6">linen</td>
84+
<td style="border-color:bisque" title="bisque = #ffe4c4">bisque</td>
85+
<td style="border-color:darksalmon" title="darksalmon = #e9967a">darksalmon</td>
86+
<td style="border-color:orange" title="orange = #ffa500">orange</td>
87+
<td style="border-color:goldenrod" title="goldenrod = #daa520">goldenrod</td>
88+
<td style="border-color:sienna" title="sienna = #a0522d">sienna</td>
89+
<td style="border-color:darkolivegreen" title="darkolivegreen = #556b2f">darkolivegreen</td>
90+
</tr>
91+
<tr>
92+
<td style="border-color:oldlace" title="oldlace = #fdf5e6">oldlace</td>
93+
<td style="border-color:antiquewhite" title="antiquewhite = #faebd7">antiquewhite</td>
94+
<td style="border-color:coral" title="coral = #ff7f50">coral</td>
95+
<td style="border-color:gold" title="gold = #ffd700">gold</td>
96+
<td style="border-color:limegreen" title="limegreen = #32cd32">limegreen</td>
97+
<td style="border-color:saddlebrown" title="saddlebrown = #8b4513">saddlebrown</td>
98+
<td style="border-color:darkgreen" title="darkgreen = #006400">darkgreen</td>
99+
</tr>
100+
<tr>
101+
<td style="border-color:floralwhite" title="floralwhite = #fffaf0">floralwhite</td>
102+
<td style="border-color:navajowhite" title="navajowhite = #ffdead">navajowhite</td>
103+
<td style="border-color:lightsalmon" title="lightsalmon = #ffa07a">lightsalmon</td>
104+
<td style="border-color:darkkhaki" title="darkkhaki = #bdb76b">darkkhaki</td>
105+
<td style="border-color:lime" title="lime = #00ff00">lime</td>
106+
<td style="border-color:darkgoldenrod" title="darkgoldenrod = #b8860b">darkgoldenrod</td>
107+
<td style="border-color:green" title="green = #008000">green</td>
108+
</tr>
109+
<tr>
110+
<td style="border-color:cornsilk" title="cornsilk = #fff8dc">cornsilk</td>
111+
<td style="border-color:blanchedalmond" title="blanchedalmond = #ffebcd">blanchedalmond</td>
112+
<td style="border-color:sandybrown" title="sandybrown = #f4a460">sandybrown</td>
113+
<td style="border-color:yellow" title="yellow = #ffff00">yellow</td>
114+
<td style="border-color:mediumseagreen" title="mediumseagreen = #3cb371">mediumseagreen</td>
115+
<td style="border-color:olivedrab" title="olivedrab = #6b8e23">olivedrab</td>
116+
<td style="border-color:forestgreen" title="forestgreen = #228b22">forestgreen</td>
117+
</tr>
118+
<tr>
119+
<td style="border-color:ivory" title="ivory = #fffff0">ivory</td>
120+
<td style="border-color:papayawhip" title="papayawhip = #ffefd5">papayawhip</td>
121+
<td style="border-color:burlywood" title="burlywood = #deb887">burlywood</td>
122+
<td style="border-color:yellowgreen" title="yellowgreen = #9acd32">yellowgreen</td>
123+
<td style="border-color:springgreen" title="springgreen = #00ff7f">springgreen</td>
124+
<td style="border-color:seagreen" title="seagreen = #2e8b57">seagreen</td>
125+
<td style="border-color:darkslategray" title="darkslategray = #2f4f4f">darkslategray</td>
126+
</tr>
127+
<tr>
128+
<td style="border-color:beige" title="beige = #f5f5dc">beige</td>
129+
<td style="border-color:moccasin" title="moccasin = #ffe4b5">moccasin</td>
130+
<td style="border-color:tan" title="tan = #d2b48c">tan</td>
131+
<td style="border-color:chartreuse" title="chartreuse = #7fff00">chartreuse</td>
132+
<td style="border-color:mediumspringgreen" title="mediumspringgreen = #00fa9a">mediumspringgreen</td>
133+
<td style="border-color:lightseagreen" title="lightseagreen = #20b2aa">lightseagreen</td>
134+
<td style="border-color:teal" title="teal = #008080">teal</td>
135+
</tr>
136+
<tr>
137+
<td style="border-color:lightyellow" title="lightyellow = #ffffe0">lightyellow</td>
138+
<td style="border-color:wheat" title="wheat = #f5deb3">wheat</td>
139+
<td style="border-color:khaki" title="khaki = #f0e68c">khaki</td>
140+
<td style="border-color:lawngreen" title="lawngreen = #7cfc00">lawngreen</td>
141+
<td style="border-color:aqua" title="aqua = #00ffff">aqua</td>
142+
<td style="border-color:darkturquoise" title="darkturquoise = #00ced1">darkturquoise</td>
143+
<td style="border-color:darkcyan" title="darkcyan = #008b8b">darkcyan</td>
144+
</tr>
145+
<tr>
146+
<td style="border-color:lightgoldenrodyellow" title="lightgoldenrodyellow = #fafad2">lightgoldenrodyellow</td>
147+
<td style="border-color:lemonchiffon" title="lemonchiffon = #fffacd">lemonchiffon</td>
148+
<td style="border-color:greenyellow" title="greenyellow = #adff2f">greenyellow</td>
149+
<td style="border-color:darkseagreen" title="darkseagreen = #8fbc8f">darkseagreen</td>
150+
<td style="border-color:cyan" title="cyan = #00ffff">cyan</td>
151+
<td style="border-color:deepskyblue" title="deepskyblue = #00bfff">deepskyblue</td>
152+
<td style="border-color:midnightblue" title="midnightblue = #191970">midnightblue</td>
153+
</tr>
154+
<tr>
155+
<td style="border-color:honeydew" title="honeydew = #f0fff0">honeydew</td>
156+
<td style="border-color:palegoldenrod" title="palegoldenrod = #eee8aa">palegoldenrod</td>
157+
<td style="border-color:lightgreen" title="lightgreen = #90ee90">lightgreen</td>
158+
<td style="border-color:mediumaquamarine" title="mediumaquamarine = #66cdaa">mediumaquamarine</td>
159+
<td style="border-color:cadetblue" title="cadetblue = #5f9ea0">cadetblue</td>
160+
<td style="border-color:steelblue" title="steelblue = #4682b4">steelblue</td>
161+
<td style="border-color:navy" title="navy = #000080">navy</td>
162+
</tr>
163+
<tr>
164+
<td style="border-color:mintcream" title="mintcream = #f5fffa">mintcream</td>
165+
<td style="border-color:palegreen" title="palegreen = #98fb98">palegreen</td>
166+
<td style="border-color:skyblue" title="skyblue = #87ceeb">skyblue</td>
167+
<td style="border-color:turquoise" title="turquoise = #40e0d0">turquoise</td>
168+
<td style="border-color:dodgerblue" title="dodgerblue = #1e90ff">dodgerblue</td>
169+
<td style="border-color:blue" title="blue = #0000ff">blue</td>
170+
<td style="border-color:darkblue" title="darkblue = #00008b">darkblue</td>
171+
</tr>
172+
<tr>
173+
<td style="border-color:azure" title="azure = #f0ffff">azure</td>
174+
<td style="border-color:aquamarine" title="aquamarine = #7fffd4">aquamarine</td>
175+
<td style="border-color:lightskyblue" title="lightskyblue = #87cefa">lightskyblue</td>
176+
<td style="border-color:mediumturquoise" title="mediumturquoise = #48d1cc">mediumturquoise</td>
177+
<td style="border-color:lightslategray" title="lightslategray = #778899">lightslategray</td>
178+
<td style="border-color:blueviolet" title="blueviolet = #8a2be2">blueviolet</td>
179+
<td style="border-color:mediumblue" title="mediumblue = #0000cd">mediumblue</td>
180+
</tr>
181+
<tr>
182+
<td style="border-color:lightcyan" title="lightcyan = #e0ffff">lightcyan</td>
183+
<td style="border-color:paleturquoise" title="paleturquoise = #afeeee">paleturquoise</td>
184+
<td style="border-color:lightsteelblue" title="lightsteelblue = #b0c4de">lightsteelblue</td>
185+
<td style="border-color:cornflowerblue" title="cornflowerblue = #6495ed">cornflowerblue</td>
186+
<td style="border-color:slategray" title="slategray = #708090">slategray</td>
187+
<td style="border-color:darkorchid" title="darkorchid = #9932cc">darkorchid</td>
188+
<td style="border-color:darkslateblue" title="darkslateblue = #483d8b">darkslateblue</td>
189+
</tr>
190+
<tr>
191+
<td style="border-color:aliceblue" title="aliceblue = #f0f8ff">aliceblue</td>
192+
<td style="border-color:powderblue" title="powderblue = #b0e0e6">powderblue</td>
193+
<td style="border-color:thistle" title="thistle = #d8bfd8">thistle</td>
194+
<td style="border-color:mediumslateblue" title="mediumslateblue = #7b68ee">mediumslateblue</td>
195+
<td style="border-color:royalblue" title="royalblue = #4169e1">royalblue</td>
196+
<td style="border-color:darkviolet" title="darkviolet = #9400d3">darkviolet</td>
197+
<td style="border-color:rebeccapurple" title="rebeccapurple = #663399">rebeccapurple</td>
198+
</tr>
199+
<tr>
200+
<td style="border-color:ghostwhite" title="ghostwhite = #f8f8ff">ghostwhite</td>
201+
<td style="border-color:lightblue" title="lightblue = #add8e6">lightblue</td>
202+
<td style="border-color:plum" title="plum = #dda0dd">plum</td>
203+
<td style="border-color:mediumpurple" title="mediumpurple = #9370db">mediumpurple</td>
204+
<td style="border-color:slateblue" title="slateblue = #6a5acd">slateblue</td>
205+
<td style="border-color:magenta" title="magenta = #ff00ff">magenta</td>
206+
<td style="border-color:indigo" title="indigo = #4b0082">indigo</td>
207+
</tr>
208+
<tr>
209+
<td style="border-color:lavender" title="lavender = #e6e6fa">lavender</td>
210+
<td style="border-color:pink" title="pink = #ffc0cb">pink</td>
211+
<td style="border-color:violet" title="violet = #ee82ee">violet</td>
212+
<td style="border-color:orchid" title="orchid = #da70d6">orchid</td>
213+
<td style="border-color:mediumorchid" title="mediumorchid = #ba55d3">mediumorchid</td>
214+
<td style="border-color:mediumvioletred" title="mediumvioletred = #c71585">mediumvioletred</td>
215+
<td style="border-color:purple" title="purple = #800080">purple</td>
216+
</tr>
217+
<tr>
218+
<td style="border-color:lavenderblush" title="lavenderblush = #fff0f5">lavenderblush</td>
219+
<td style="border-color:lightpink" title="lightpink = #ffb6c1">lightpink</td>
220+
<td style="border-color:hotpink" title="hotpink = #ff69b4">hotpink</td>
221+
<td style="border-color:palevioletred" title="palevioletred = #db7093">palevioletred</td>
222+
<td style="border-color:deeppink" title="deeppink = #ff1493">deeppink</td>
223+
<td style="border-color:crimson" title="crimson = #dc143c">crimson</td>
224+
<td style="border-color:darkmagenta" title="darkmagenta = #8b008b">darkmagenta</td>
225+
</tr>
226+
</table>
227+
228+
<script>
229+
borderStyle.addEventListener("change", () => {
230+
document.body.style.setProperty("--border-style", borderStyle.value);
231+
});
232+
document.body.style.setProperty("--border-style", borderStyle.value);
233+
234+
</script>
235+
</body>

0 commit comments

Comments
 (0)