From cc5d3285ea84513e3c73b0ee76fa12730332c3e8 Mon Sep 17 00:00:00 2001
From: Daniil Sakhapov <sakhapov@chromium.org>
Date: Fri, 4 Jul 2025 13:57:31 +0200
Subject: [PATCH 1/2] Add an example for 'scroll-target-group' property

As requested in Intent to Ship thread:
https://groups.google.com/a/chromium.org/g/blink-dev/c/R_VD_FkYrF8/m/XDzix9lbAwAJ
adding an example to show how to use 'scroll-target-group' property to
highlight the currently visible chapter within a table of contents.
---
 css-overflow-5/Overview.bs | 43 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs
index 39d547f4beb6..8d389755f2d0 100644
--- a/css-overflow-5/Overview.bs
+++ b/css-overflow-5/Overview.bs
@@ -250,6 +250,49 @@ The 'scroll target group' property</h4>
 
 	</dl>
 
+	<div class='example'>
+		The following snippet demonstrates how to automatically highlight the currently visible chapter within a table of contents
+		<pre><code highlight="html">
+			&lt;!DOCTYPE HTML&gt;
+			&lt;title&gt;scroll-target-group example with a table of contents&lt;/title&gt;
+			&lt;style&gt;
+			  #toc {
+					background-color: gray;
+					right: 10px;
+					top: 10px;
+					position: fixed;
+					/* Triggers the browser's algorithm for calculating :target-current. */
+					scroll-target-group: auto;
+				}
+
+				a {
+					color: blue;
+					display: block;
+					padding: 10px;
+					text-decoration: none;
+				}
+
+				a:target-current {
+					color: red;
+				}
+
+				.chapter {
+					background: lightgray;
+					height: 60vh;
+					margin: 10px;
+				}
+			&lt;/style&gt;
+			&lt;div id="toc"&gt;
+			  &lt;a href="#intro"&gt;Introduction&lt;/a&gt;
+			  &lt;a href="#ch1"&gt;Chapter 1&lt;/a&gt;
+			  &lt;a href="#ch2"&gt;Chapter 2&lt;/a&gt;
+			&lt;/div&gt;
+			&lt;div id="intro" class="chapter"&gt;Introduction content&lt;/div&gt;
+			&lt;div id="ch1" class="chapter"&gt;Chapter 1 content&lt;/div&gt;
+			&lt;div id="ch2" class="chapter"&gt;Chapter 2 content&lt;/div&gt;
+		</code></pre>
+	</div>
+
 <h4 id="scroll-marker-group-property">
 The 'scroll-marker-group' property</h4>
 

From f429704dcb97de698bd5b4c59562efa65e86331a Mon Sep 17 00:00:00 2001
From: Daniil Sakhapov <sakhapov@chromium.org>
Date: Fri, 4 Jul 2025 15:52:47 +0200
Subject: [PATCH 2/2] Address review comments, use <ol> and <li>

---
 css-overflow-5/Overview.bs | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs
index 8d389755f2d0..014430dd6e80 100644
--- a/css-overflow-5/Overview.bs
+++ b/css-overflow-5/Overview.bs
@@ -256,7 +256,7 @@ The 'scroll target group' property</h4>
 			&lt;!DOCTYPE HTML&gt;
 			&lt;title&gt;scroll-target-group example with a table of contents&lt;/title&gt;
 			&lt;style&gt;
-			  #toc {
+				ol {
 					background-color: gray;
 					right: 10px;
 					top: 10px;
@@ -265,13 +265,6 @@ The 'scroll target group' property</h4>
 					scroll-target-group: auto;
 				}
 
-				a {
-					color: blue;
-					display: block;
-					padding: 10px;
-					text-decoration: none;
-				}
-
 				a:target-current {
 					color: red;
 				}
@@ -282,11 +275,11 @@ The 'scroll target group' property</h4>
 					margin: 10px;
 				}
 			&lt;/style&gt;
-			&lt;div id="toc"&gt;
-			  &lt;a href="#intro"&gt;Introduction&lt;/a&gt;
-			  &lt;a href="#ch1"&gt;Chapter 1&lt;/a&gt;
-			  &lt;a href="#ch2"&gt;Chapter 2&lt;/a&gt;
-			&lt;/div&gt;
+			&lt;ol&gt;
+				&lt;li&gt;&lt;a href="#intro"&gt;Introduction&lt;/a&gt;&lt;/li&gt;
+				&lt;li&gt;&lt;a href="#ch1"&gt;Chapter 1&lt;/a&gt;&lt;/li&gt;
+				&lt;li&gt;&lt;a href="#ch2"&gt;Chapter 2&lt;/a&gt;&lt;/li&gt;
+			&lt;/ol&gt;
 			&lt;div id="intro" class="chapter"&gt;Introduction content&lt;/div&gt;
 			&lt;div id="ch1" class="chapter"&gt;Chapter 1 content&lt;/div&gt;
 			&lt;div id="ch2" class="chapter"&gt;Chapter 2 content&lt;/div&gt;