左侧浮动目录压力测试文章
这篇文章专门用来测试新加入的左侧浮动目录。它没有真实的知识结论，主要目标是制造足够多、足够深、足够长的标题，并在标题之间放入长段落、短段落、列表、代码块和超长连续文字，观察目录在桌面端、窄屏端、页面滚动、锚点跳转、当前章节高亮、层级缩进、标题换行和溢出截断时是否表现稳定。
第一部分：普通二级标题与页面初始目录状态
页面刚打开时，目录应当能展示本文的主要结构。如果目录组件会根据视口高度自动滚动，那么当前章节在文章顶部附近时，目录不应该出现明显跳动。如果目录组件会折叠较深层级，那么这里也适合观察二级标题和三级标题的默认展示规则。
初始可见区域
这是一段较长的中文段落，用来撑开正文宽度和阅读区域。目录测试时最容易忽略的是正文内容本身对布局的影响：当正文有长行、长词、代码块或者没有空格的连续字符串时，页面可能会产生横向滚动，而横向滚动又会影响左侧目录的固定定位、遮挡关系和可点击区域。因此这里特意写得比较啰嗦，让页面在正常阅读流里先有一段稳定内容，然后再逐步进入更复杂的标题层级。
初始滚动定位
如果点击左侧目录中的这一项，页面应该滚动到当前小节附近，标题不应该被顶部导航栏遮住。若使用了 scroll-margin-top，这里能看出偏移是否合理。若没有设置偏移，标题可能贴在浏览器顶部，看起来像是跳转到了正文中间。
四级标题：初始区域下的更深层级
四级标题是否出现在目录中，取决于目录组件的设计。如果它应该出现，就需要检查缩进是否足够清楚；如果它不应该出现，也要确认正文中的四级标题不会破坏目录解析。
第二部分：一个故意写得非常非常非常非常非常非常非常非常非常非常非常非常非常长的二级标题，用来测试目录项换行、截断、省略号、悬停提示和点击区域
这个标题很长，主要是为了测试左侧浮动目录的宽度处理。理想情况下，目录不应该把正文区域挤歪，也不应该让长标题无限向右扩展。可以接受的处理方式包括换行、单行省略、最多两行截断，或者在悬停时显示完整标题，但不能让目录项盖住正文。
长标题下的普通三级标题
长标题之后接一个普通三级标题，用来观察目录从复杂项回到普通项时的视觉节奏。目录的层级缩进需要稳定，不应该因为上一项换行而导致下一项对齐异常。
一个也很长但层级更浅的三级标题：用于观察三级目录项在可用宽度不足时是否依然保持缩进、行高和当前项高亮背景的完整性
这段内容继续制造滚动空间。许多目录实现会给当前目录项添加背景色或左侧边框。如果目录项发生换行，高亮背景应该覆盖完整的行盒区域，而不是只覆盖第一行；左侧边框也不应该因为文字高度增加而错位。
四级标题也来一段很长的名字：当四级标题显示在目录中时，它可能最容易因为缩进后剩余宽度不足而产生难看的断行
四级标题的文本更深、更窄，所以特别容易暴露目录宽度不足的问题。如果目录允许四级标题展示，建议观察它和三级标题之间的字号、缩进、颜色权重是否有足够差异。
第三部分：超长连续文字压力测试
下面这一段有一个没有空格的超长字符串，用来测试正文、目录提取、锚点生成和页面横向溢出。正常情况下，正文应该能够断行或在容器内滚动，目录不应该因为解析到这类内容而异常。
超长中文连续段落
这是一个为了测试布局而写的超长连续字符串：左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试左侧浮动目录压力测试。
超长英文连续字符串
下面是一段没有空格的英文和数字混合字符串。它通常比中文更容易撑破容器，因为浏览器默认未必会在任意位置断词。
ThisIsAnIntentionallyExtremelyLongUnbrokenIdentifierForTestingTheFloatingTableOfContentsAndArticleLayoutWhenAReaderOrGeneratorProducesAPathologicalTokenThatCannotNaturallyWrapInsideTheMainContentColumnAndCouldAccidentallyCreateHorizontalOverflowAcrossTheWholePage1234567890ThisIsAnIntentionallyExtremelyLongUnbrokenIdentifierForTestingTheFloatingTableOfContentsAndArticleLayoutWhenAReaderOrGeneratorProducesAPathologicalTokenThatCannotNaturallyWrapInsideTheMainContentColumnAndCouldAccidentallyCreateHorizontalOverflowAcrossTheWholePage1234567890
超长链接样式文本
如果正文中出现很长的 URL，目录不应受到影响，正文区域也应有合理的断行策略。
第四部分：密集标题压力测试
这一部分故意放很多短小标题，测试目录条目数量变多以后，左侧目录是否可以独立滚动，当前项是否能保持在可见区域内，以及目录底部是否会被页面底部或浏览器边缘截断。
密集小节 01
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
密集小节 02
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
密集小节 03
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
密集小节 04
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
密集小节 05
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
密集小节 06
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
密集小节 07
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
密集小节 08
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
密集小节 09
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
密集小节 10
这是一段填充文字。当前小节短小，适合观察目录高亮是否快速切换。
第五部分：列表、代码块与标题混排
目录通常只提取标题，但正文里的其他块级元素会影响滚动高度。这里加入列表和代码块，看目录定位是否依然准确。
列表前后的标题
- 第一项：用于测试普通列表对正文高度的影响。
- 第二项：用于测试列表项较长时的换行效果，尤其是当列表项文字长度接近正文列宽时，左侧目录不应跟着抖动或重新计算出错。
- 第三项：用于测试列表结束后下一个标题的锚点定位。
代码块前后的标题
def build_toc_test_case(headings):
for level, title in headings:
print(f"{level}: {title}")
build_toc_test_case([
("h2", "普通标题"),
("h3", "较长标题"),
("h4", "更深层级标题"),
])代码块如果太宽，正文可能出现横向滚动。这里的代码块不算极端，只是测试普通代码块和目录的共存。
代码块后的四级标题
四级标题位于代码块之后，适合检查目录的锚点计算是否被代码块高度影响。
第六部分：重复语义标题
这一部分模拟真实文章里经常出现的重复标题，例如“背景”“方案”“总结”。如果目录锚点由标题文本生成，需要确认重复标题不会产生冲突；如果由构建器自动生成唯一 ID，需要确认目录点击能跳到正确位置。
背景
第一处“背景”。这里说明的是测试背景。
方案
第一处“方案”。这里说明的是测试方案。
总结
第一处“总结”。这里说明的是测试总结。
第七部分：第二组重复语义标题
同样的三级标题再出现一次，用来观察重复锚点。
背景
第二处“背景”。点击目录中的这一项时，应该来到第二组，而不是跳回第一组。
方案
第二处“方案”。目录项的高亮也应该对应第二组。
总结
第二处“总结”。如果这里跳转或高亮异常，通常说明标题 ID 去重策略有问题。
第八部分：长段落滚动稳定性
这一部分是大段文本，用来增加文章长度。滚动过程中，目录应保持固定位置，当前章节切换应自然，不应该出现闪烁、错位、反复跳动或高亮过早/过晚的问题。
长段落 A
测试左侧浮动目录时，单纯准备很多标题并不够，因为标题之间的正文长度会改变观察体验。若每个标题下面只有一两句话，滚动过程会很快，当前项高亮切换也会过于频繁，不容易看出边界问题。真实文章往往有较长段落、引用、代码块、图片和列表，它们共同决定页面滚动高度。这里的段落故意写得很长：当读者从上往下滚动时，目录应该稳稳停在左侧；当当前小节进入视口时，目录应该把对应项标为当前；当当前项位于目录可滚动区域之外时，目录应该适当跟随或至少允许用户手动滚动到它；当窗口高度较小时，目录底部不应该被裁掉到完全无法访问。除此之外，还要检查正文和目录之间的间距是否舒适，目录是否会遮挡正文，正文是否因为目录出现而变窄到影响阅读。
长段落 B
继续增加一段长文本，用来观察滚动距离和目录高亮的延迟。不同实现可能使用 IntersectionObserver、滚动事件、浏览器原生 :target、或者构建时生成的静态目录。无论使用哪一种方案，用户感知到的行为都应该简单：我在读哪个小节，目录就告诉我哪个小节；我点击哪个目录项，页面就跳到哪个小节；标题很长时，我仍然能看懂它属于哪一级；标题很多时，我仍然能找到当前位置。这里还可以测试浏览器缩放，比如 90%、100%、125% 和 150%，看目录是否依然稳定。
长段落 C
最后再放一段长文本作为缓冲。目录组件经常在文章末尾附近出现高亮边界问题，因为最后一个章节可能没有足够内容滚到视口顶部，导致高亮迟迟不切换，或者提前停在倒数第二个章节。这个小节之后还会有几个结尾标题，用来观察页面底部区域的当前项判定。
第九部分：结尾区域
文章即将结束。这个区域用于测试滚动到页面底部时，左侧目录是否能正确高亮最后几个章节。
倒数第二个三级标题
如果滚动到底部后仍然高亮在上一个大章节，这里就能看出来。
最后一个三级标题
这是最后一个三级标题。点击目录中的最后一项后，页面应该尽量把它滚动到可读位置，即使下方内容不足以让标题贴到顶部。
最终总结
测试点包括：多级标题、长标题、超长连续文字、重复标题、密集标题、长段落、代码块、列表、页面底部高亮、目录独立滚动和锚点跳转。如果这些场景都能正常工作，左侧浮动目录在真实文章里基本就比较稳了。