Feature tests; link decoration; set-up for AO3 draft.

feature-tests.css

@@ -0,0 +1,113 @@
+/* feature tests */
+
+.feature-tests {
+	font-size: 85%;
+	--test-border: blue;
+}
+
+.feature-tests span.test-colorfn-rgb {
+	border: 1px solid rgb(50,50,100,1.0);
+}
+
+.feature-tests span.test-colorfn-hsl {
+	border: 1px solid hsl(36deg 50% 60%);
+}
+
+.feature-tests span.test-colorfn-oklab {
+	border: 1px solid oklab(59% 0.1 0.1);
+}
+
+.feature-tests span.test-colorfn-button {
+	color: ButtonFace;
+	background-color: ButtonText;
+}
+
+.feature-tests span.test-colorfn-accent {
+	color: AccentColor;
+	background-color: AccentColorText;
+}
+
+.feature-tests span.tests-length {
+	display: inline-block;
+	height: 0.5lh;
+	border-top: 1px solid gray;
+}
+
+.feature-tests span.tests-length.cm {
+	width: 5cm;
+}
+
+.feature-tests span.tests-length.ch {
+	width: 4ch;
+}
+
+.feature-tests span.tests-length.vw {
+	width: 25vw;
+}
+
+.feature-tests span.test-colorscheme {
+	border: 1px solid blue;
+	min-width: 2ch;
+}
+
+.feature-tests span.test-orientation {
+	border: 1px solid blue;
+	min-width: 2ch;
+}
+
+@media (prefers-color-scheme: light) {
+	.feature-tests span.test-colorscheme:after {
+		content: "light";
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.feature-tests span.test-colorscheme:after {
+		content: "dark";
+	}
+}
+
+@media (orientation: landscape) {
+	.feature-tests span.test-orientation::after {
+		content: "landscape";
+	}
+}
+
+@media (orientation: portrait) {
+	.feature-tests span.test-orientation::after {
+		content: "portrait";
+	}
+}
+
+.feature-tests span.test-variable {
+	border: 1px solid var(--test-border, red);
+}
+
+.feature-tests [lang="es"] {
+	border: 1px solid yellow;
+}
+
+.feature-tests :lang(fr) {
+	border: 1px solid blue;
+}
+
+.feature-tests span.test-content::after {
+	content: attr(data-checkmark);
+}
+
+.feature-tests span.test-property[data-border] {
+	border: 1px solid transparent;
+	border-color: attr(data-border);
+}
+
+.feature-tests span[data-opacity] {
+	--tone: 50;
+	border: none;
+	border: 1px solid rgb(0, 0, calc(200 + var(--tone)));
+}
+
+.feature-tests span[data-blink="yes"] {
+	animation: blinker 2s step-start infinite;
+	border: 1px solid blue;
+}
+