From 491b4fd247fdf8f2e4e11a9f166d3308daa03e94 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Tue, 22 Apr 2025 01:43:35 +0200
Subject: [PATCH] Added heading anchor links

Added anchor links to the headings of tested specs. This allows to jump to the specs and copy their anchor.
The anchor links are only shown when hovering the related heading.
---
 csstest.js | 11 +++++++++++
 style.css  | 13 +++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/csstest.js b/csstest.js
index b356202a..1e2a0f11 100644
--- a/csstest.js
+++ b/csstest.js
@@ -126,6 +126,17 @@ var Test = function (spec) {
 				}),
 			);
 		}
+
+		contents.push(
+			$.create({
+				tag: 'a',
+				properties: {
+					href: '#' + spec.id,
+					textContent: '#',
+					className: 'section-link',
+				},
+			}),
+		);
 	}
 
 	var h1 = $.create({
diff --git a/style.css b/style.css
index 6b0d2e4a..d58b9496 100644
--- a/style.css
+++ b/style.css
@@ -107,6 +107,11 @@ h2 {
 	display: flex;
 	align-items: center;
 	font-size: 180%;
+	position: relative;
+}
+
+#content > section section section h1:hover > .section-link {
+	display: block;
 }
 
 #content > section section section section h1 {
@@ -180,6 +185,14 @@ details summary > .spec-link::before {
 	vertical-align: -4px;
 }
 
+.section-link {
+	display: none;
+	position: absolute;
+	left: calc(-1 * 1.2em);
+	width: 1.2em;
+	text-align: center;
+}
+
 body > h1 {
 	position: fixed;
 	left: 0;