ApricityUI Layout Test
Advanced Layout Regression
用于集中回归 relative / absolute / fixed、margin collapse、inline 递归换行、百分比高度链、flex-wrap、grid 高级 track。
Coverage
relative offset
absolute / fixed
margin collapse
nested inline wrap
percentage height chain
flex-wrap + gap
fr / minmax / repeat()
auto-fill
justify-self / align-self
Notes
每个案例尽量只观察一组布局特性,便于肉眼判断回归。
固定定位角标用于确认 fixed 是否相对视口,而不是相对容器。
百分比高度左侧应成立,右侧无显式父高时应退回 auto。
1. Nested Inline Fragmentation
预期:窄容器里嵌套 inline 文本可以跨行断开;最后的 tail 标签会被推到后续行。
prefix outer nested-inline-fragment-should-wrap-across-lines tail
2. Margin Collapse + Relative + Absolute
预期:左侧两块纵向 margin 折叠,不是简单相加;中间 relative 盒子视觉偏移,但右侧 sibling 仍按原流位置接续;ABS 锚定在容器右上。
mb 12
mt 8
relative +7 / +5
flow sibling
flow
flow 2
ABS
3. Percentage Height Chain
预期:左侧 120 → 50% → 50% 最终子块高度成立;右侧父元素无显式高度时,50% 子块不应拉伸出生效高度。
explicit chain
50%
auto parent
50%
4. Flex Wrap / Gap / Cross-axis
预期:两项第一行放满后换到第二行;短项在更高的行盒内做 cross-axis 居中;row-gap / column-gap 都可见。
70×20
20×10
5. Grid Advanced Tracks
预期:上排演示 20px + 1fr + 2fr;中排演示 repeat(2, minmax(24px, 1fr));下排演示 repeat(auto-fill, 20px) 和 self alignment。
20px
1fr
2fr
M1
M2
A1
A2
A3
A4
self
FIXED