Skip to content

Commit e1e6db5

Browse files
tabatkinstabatkins
committed
[css-borders-4] Add test files for ridge borders
1 parent e9f2614 commit e1e6db5

File tree

11 files changed

+79
-0
lines changed

11 files changed

+79
-0
lines changed

‎css-borders-4/ridge-borders/111-chrome.png‎

1.53 KB
Loading

‎css-borders-4/ridge-borders/111-firefox.png‎

1.33 KB
Loading

‎css-borders-4/ridge-borders/888-chrome.png‎

1.54 KB
Loading

‎css-borders-4/ridge-borders/888-firefox.png‎

1.51 KB
Loading

‎css-borders-4/ridge-borders/black-chrome.png‎

1.49 KB
Loading

‎css-borders-4/ridge-borders/black-firefox.png‎

1.57 KB
Loading

‎css-borders-4/ridge-borders/eee-chrome.png‎

1.42 KB
Loading

‎css-borders-4/ridge-borders/eee-firefox.png‎

1.43 KB
Loading

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!doctype html>
2+
<meta charset=utf-8>
3+
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
4+
<title>Ridge Border Tester</title>
5+
6+
<table>
7+
<thead>
8+
<tr><th>Color<th>Solid<th>Ridge<th>Chrome<th>Firefox<th>Actual Colors
9+
</thead>
10+
<tr style="--color: black">
11+
<th>black
12+
<td><div class="border solid"></div>
13+
<td><div class="border ridge"></div>
14+
<td><img src=black-chrome.png>
15+
<td><img src=black-firefox.png>
16+
<td>Chrome: #545454 / #000
17+
<br>Firefox: #b2b2b2 / #4c4c4c
18+
<tr style="--color: #111">
19+
<th>#111
20+
<td><div class="border solid"></div>
21+
<td><div class="border ridge"></div>
22+
<td><img src=111-chrome.png>
23+
<td><img src=111-firefox.png>
24+
<td>Chrome: #656565 / #000
25+
<br>Firefox: #111 / #0b0b0b
26+
<tr style="--color: #888">
27+
<th>#888
28+
<td><div class="border solid"></div>
29+
<td><div class="border ridge"></div>
30+
<td><img src=888-chrome.png>
31+
<td><img src=888-firefox.png>
32+
<td>Chrome: #888 / #343434
33+
<br>Firefox: #888 / #5b5b5b
34+
<tr style="--color: #eee">
35+
<th>#eee
36+
<td><div class="border solid"></div>
37+
<td><div class="border ridge"></div>
38+
<td><img src=eee-chrome.png>
39+
<td><img src=eee-firefox.png>
40+
<td>Chrome: #eee / #9a9a9a
41+
<br>Firefox: #eee / #9f9f9f
42+
<tr style="--color: white">
43+
<th>white
44+
<td><div class="border solid"></div>
45+
<td><div class="border ridge"></div>
46+
<td><img src=white-chrome.png>
47+
<td><img src=white-firefox.png>
48+
<td>Chrome: #fff / #ababab
49+
<br>Firefox: #fff / #aaa
50+
</table>
51+
<style>
52+
table {
53+
--size: 20px;
54+
}
55+
td {
56+
padding: .5em;
57+
}
58+
img {
59+
display: block;
60+
width: calc(3 * var(--size));
61+
height: calc(3 * var(--size));
62+
}
63+
div.border {
64+
width: var(--size);
65+
height: var(--size);
66+
border: var(--size) var(--color);
67+
border-radius: var(--size);
68+
69+
&.solid {
70+
border-style: solid;
71+
}
72+
&.ridge {
73+
border-style: ridge;
74+
}
75+
}
76+
td:has(div.border) {
77+
background: repeating-linear-gradient(45deg, #eee 0 5px, #ddd 5px 10px);
78+
}
79+
</style>

‎css-borders-4/ridge-borders/white-chrome.png‎

1.11 KB
Loading

0 commit comments

Comments
 (0)