[css-borders-4] Add test files for ridge borders

w3c · Nov 8, 2024 · e1e6db5 · e1e6db5
1 parent e9f2614
commit e1e6db5
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 0 deletions.
diff --git a/css-borders-4/ridge-borders/111-chrome.png b/css-borders-4/ridge-borders/111-chrome.png
diff --git a/css-borders-4/ridge-borders/111-firefox.png b/css-borders-4/ridge-borders/111-firefox.png
diff --git a/css-borders-4/ridge-borders/888-chrome.png b/css-borders-4/ridge-borders/888-chrome.png
diff --git a/css-borders-4/ridge-borders/888-firefox.png b/css-borders-4/ridge-borders/888-firefox.png
diff --git a/css-borders-4/ridge-borders/black-chrome.png b/css-borders-4/ridge-borders/black-chrome.png
diff --git a/css-borders-4/ridge-borders/black-firefox.png b/css-borders-4/ridge-borders/black-firefox.png
diff --git a/css-borders-4/ridge-borders/eee-chrome.png b/css-borders-4/ridge-borders/eee-chrome.png
diff --git a/css-borders-4/ridge-borders/eee-firefox.png b/css-borders-4/ridge-borders/eee-firefox.png
diff --git a/css-borders-4/ridge-borders/index.html b/css-borders-4/ridge-borders/index.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
+<title>Ridge Border Tester</title>
+
+<table>
+	<thead>
+		<tr><th>Color<th>Solid<th>Ridge<th>Chrome<th>Firefox<th>Actual Colors
+	</thead>
+	<tr style="--color: black">
+		<th>black
+		<td><div class="border solid"></div>
+		<td><div class="border ridge"></div>
+		<td><img src=black-chrome.png>
+		<td><img src=black-firefox.png>
+		<td>Chrome: #545454 / #000
+			<br>Firefox: #b2b2b2 / #4c4c4c
+	<tr style="--color: #111">
+		<th>#111
+		<td><div class="border solid"></div>
+		<td><div class="border ridge"></div>
+		<td><img src=111-chrome.png>
+		<td><img src=111-firefox.png>
+		<td>Chrome: #656565 / #000
+			<br>Firefox: #111 / #0b0b0b
+	<tr style="--color: #888">
+		<th>#888
+		<td><div class="border solid"></div>
+		<td><div class="border ridge"></div>
+		<td><img src=888-chrome.png>
+		<td><img src=888-firefox.png>
+		<td>Chrome: #888 / #343434
+			<br>Firefox: #888 / #5b5b5b
+	<tr style="--color: #eee">
+		<th>#eee
+		<td><div class="border solid"></div>
+		<td><div class="border ridge"></div>
+		<td><img src=eee-chrome.png>
+		<td><img src=eee-firefox.png>
+		<td>Chrome: #eee / #9a9a9a
+			<br>Firefox: #eee / #9f9f9f
+	<tr style="--color: white">
+		<th>white
+		<td><div class="border solid"></div>
+		<td><div class="border ridge"></div>
+		<td><img src=white-chrome.png>
+		<td><img src=white-firefox.png>
+		<td>Chrome: #fff / #ababab
+			<br>Firefox: #fff / #aaa
+</table>
+<style>
+table {
+	--size: 20px;
+}
+td {
+	padding: .5em;
+}
+img {
+	display: block;
+	width: calc(3 * var(--size));
+	height: calc(3 * var(--size));
+}
+div.border {
+	width: var(--size);
+	height: var(--size);
+	border: var(--size) var(--color);
+	border-radius: var(--size);
+
+	&.solid {
+		border-style: solid;
+	}
+	&.ridge { 
+		border-style: ridge;
+	}
+}
+td:has(div.border) {
+	background: repeating-linear-gradient(45deg, #eee 0 5px, #ddd 5px 10px);
+}
+</style>
diff --git a/css-borders-4/ridge-borders/white-chrome.png b/css-borders-4/ridge-borders/white-chrome.png
diff --git a/css-borders-4/ridge-borders/white-firefox.png b/css-borders-4/ridge-borders/white-firefox.png