b7c3d086bf
Adds docs/render with a handover covering what shipped on this branch, the verification methodology, build gotchas, and the prioritized list of remaining work, alongside the phase plan and the index of the Gecko layout study that informed it. Adds render-repros: one HTML fixture per bug fixed here (absolute fills, mixed inline+block layout, carousel clipping, z-index order, clear, tables, image density and alt fallback) plus run.sh to render them all in obscura and Chromium for side-by-side checking. Run before and after any layout or paint change.
19 lines
1.5 KiB
HTML
19 lines
1.5 KiB
HTML
<!DOCTYPE html><html><head><title>img density + alt</title><style>body{margin:0;font-family:sans-serif}
|
|
.box{border:2px solid red;margin:6px;display:inline-block}</style></head><body>
|
|
<p>Density: A raw 648px, B srcset 2x -> ~324 CSS px, C 648w + sizes:300px -> ~300px</p>
|
|
<div><span>A:</span><div class="box"><img src="https://web.dev/static/images/ai-feature.png"></div></div>
|
|
<div><span>B:</span><div class="box"><img srcset="https://web.dev/static/images/ai-feature.png 2x"></div></div>
|
|
<div><span>C:</span><div class="box"><img srcset="https://web.dev/static/images/ai-feature.png 648w" sizes="300px"></div></div>
|
|
<p>Broken-image fallback: D alt text only, E alt="" nothing, F no alt -> grey box</p>
|
|
<div>D: <img src="https://web.dev/nope-404.png" alt="a description of the missing photo" style="width:200px;height:60px"></div>
|
|
<div>E: <img src="https://web.dev/nope-404.png" alt="" style="width:200px;height:60px"></div>
|
|
<div>F: <img src="https://web.dev/nope-404.png" style="width:200px;height:60px"></div>
|
|
<p>G: cover img half-outside an overflow:hidden viewport must not bleed past the red border:</p>
|
|
<div style="width:300px;height:100px;overflow:hidden;border:2px solid red;margin-left:120px">
|
|
<div style="display:flex;transform:translate(-150px,0)">
|
|
<img src="https://web.dev/static/images/ai-feature.png" style="width:300px;height:100px;object-fit:cover;flex-shrink:0">
|
|
<img src="https://web.dev/static/images/ai-feature.png" style="width:300px;height:100px;object-fit:cover;flex-shrink:0">
|
|
</div>
|
|
</div>
|
|
</body></html>
|