這是一篇專門用來測試長 ToC 的文章。內容不追求建立完整知識體系，而是讓側欄有足夠多的章節可以被捲動、標記與追蹤。
01 先看文章地圖
長文章需要一張可以快速掃描的地圖。當章節數量增加，目錄本身也會變成需要被設計的閱讀工具。
01-1 先確認章節數量
第一個測試點是目錄是否能容納比可視高度更多的項目。
01-2 再確認階層縮排
子標題應該保留目前網站的縮排規則，讓 h2 與 h3 仍然容易分辨。
02 讀取目前位置
讀者不需要記住自己剛剛讀到哪裡。捲動文章時，目錄應該提供穩定的視覺提示。
03 觀察第一段進度
進度線從章節上方開始，隨著該段內容進入 viewport 而增加高度。
03-1 進度線的起點
進度線的起點應該和目前的目錄項目對齊，而不是漂浮在整個側欄的邊緣。
03-2 進度線的終點
當下一個標題靠近閱讀區域時，上一段的進度應該逐漸完成。
04 測試連續的閱讀區段
當同一個 viewport 同時包含兩個章節時，兩個項目都可以顯示閱讀中的背景，但只有閱讀基準線上的項目是目前位置。
05 測試已讀狀態
離開一個章節後，進度線應該留下已讀狀態。這能幫助讀者快速知道哪些內容已經經過。
05-1 從已讀回到目前
使用 hash 回到舊章節時，目錄需要重新計算目前位置，而不是保留上一個 scroll 狀態。
05-2 從目前繼續往下
繼續向下閱讀時，新的章節會接手 accent 色的進度線。
06 測試長標題
這是一個刻意比較長的標題，用來觀察目錄項目換行之後，背景、進度線與下一個項目之間是否仍然保持整齊。
07 測試第二層階層
目錄不只會有一層標題。多個 h3 應該可以連續出現，而且不會讓 h2 的視覺層級消失。
07-1 第一個子章節
第一個子章節用來檢查縮排與閱讀進度是否仍然跟 h2 使用同一套計算。
07-2 第二個子章節
第二個子章節讓測試頁有更多項目，也能確認連續 active 區段的上下邊界。
08 測試目錄內部滾動
當目錄高度超過側欄可用高度，列表本身應該可以滾動，文章頁面則維持正常滾動。
09 觀察 sticky 側欄
側欄會在桌面版 sticky，目錄列表的滾動容器不應該把整個側欄一起推離畫面。
09-1 滾動容器的邊界
容器有固定的最大高度後，最後幾個標題仍然應該可以透過目錄內部滾動被找到。
09-2 閱讀進度與列表滾動
文章進度和目錄列表的 scroll position 是兩件事，兩者都需要保持可理解的狀態。
10 測試 hash 導覽
點擊任何目錄項目都應該可以跳到對應標題，並且讓該標題成為新的目前位置。
11 測試回到上方
從文章底部一路回到頂部時，已讀狀態會逐步退回，進度線也應該跟著重新計算。
11-1 回到第一個章節
第一個章節是初始狀態的代表，頁面載入與回到頂部都應該能正確高亮它。
12 測試窄螢幕
窄螢幕通常不顯示桌面側欄，因此這篇文章也可以用來確認 ToC 在 responsive layout 下不會造成內容溢出。
13 測試深色模式
深色模式下，半透明背景與 accent 進度線需要仍然有足夠的對比，不能只在亮色模式可見。
14 完成長 ToC 測試
如果你已經看到這裡，代表文章本身已經足夠長，可以回到側欄檢查最後幾個項目是否能透過內部滾動找到，並確認目前進度仍然清楚。
15 測試更多章節
第二段測試繼續增加標題數量，讓目錄的可視區域與完整內容之間有更明顯的差距。
15-1 觀察中段項目
中段項目用來確認內部滾動不會只在列表開頭正常。
15-2 觀察中段進度
當文章閱讀到中間位置時，進度線與 active 背景應該仍然可以辨識。
16 測試更多 h2
大量 h2 會讓目錄的主要階層快速變長，也能確認每個項目都有一致的行高與間距。
17 測試更多 h3
這一節加入下一組子標題，檢查 h3 縮排在目錄很長時仍然保持穩定。
17-1 子標題一
子標題一是普通長度的項目，用來建立後續項目的比較基準。
17-2 子標題二
子標題二延續同一組 active section，讓進度線可以在連續項目之間移動。
18 測試長段落前的標題
標題前後的內容長度不同時，section 的進度計算仍然應該依照下一個 heading 的位置更新。
19 測試多個短章節
短章節會讓相鄰標題距離很近，可以用來觀察 progress rail 是否會出現太小而看不見的高度。
19-1 短章節甲
這是一個短章節，內容刻意保持簡潔。
19-2 短章節乙
這是另一個短章節，確認連續標題仍然有清楚的上下界線。
20 測試側欄高度
目錄列表使用最大高度限制後，側欄本身仍然應該維持 sticky，而不是隨著列表內容變得過高。
21 測試列表底部
把目錄內部滾動到底部，最後幾個項目應該可以完整顯示，不能被 sticky 側欄或頁面底部截斷。
21-1 最後一組子標題
這個子標題靠近文章中段的另一個分界，用來測試最後項目前的 active 狀態。
22 測試重新進入章節
從其他位置透過 hash 回到這一節時，ToC 應該重新標記目前位置，而不是沿用上一個項目的 class。
23 測試快速捲動
快速捲動會跳過許多 heading，進度更新仍然需要以當下的 viewport 座標為準。
24 測試視窗尺寸變更
調整視窗高度後，目錄的可視高度與每個 section 的進度都應該重新計算。
24-1 縮小視窗
縮小視窗會讓更多 ToC 項目進入內部滾動範圍。
24-2 放大視窗
放大視窗則可能讓更多項目同時可見，但最大高度仍然不應超過側欄的限制。
25 測試不同主題
亮色與深色主題都應該保持進度線與半透明背景的對比，不依賴單一固定色值。
26 測試鍵盤閱讀
使用鍵盤瀏覽文章時，focus 狀態與目前閱讀狀態不應該互相覆蓋，ToC 仍要清楚指出 active section。
26-1 聚焦目錄連結
聚焦任一連結後，使用者應該仍然可以辨識它和目前閱讀位置的差異。
27 測試文章結尾
接近文章結尾時，最後幾個 section 會依序成為目前位置，最後一條進度線也應該完成。
28 測試回到文章開頭
從結尾回到開頭後，第一個目錄項目應該重新成為目前位置，其他項目的已讀狀態也應該退回。
28-1 重新開始閱讀
重新開始閱讀可以用來確認狀態更新沒有只支援單向向下捲動。
29 第二輪測試完成
這一輪新增的標題讓目錄總數接近原本的兩倍。現在可以測試列表頂部、中段與底部的滾動，以及不同閱讀位置的高亮與進度線。