An <li>'s number is drawn at the bottom of a leading <graph>, <image>, <video> or <figure>

[dqnykamp]

Summary

When an <ol>/<ul> list item's first child is a block whose baseline is its bottom edge rather than its first line, the browser paints the item's native ::marker at the bottom of that box instead of beside its top. For a <graph> or an <image> that puts the number hundreds of pixels below where a reader expects it.

Measured in Chrome 150 by scanning the list gutter for the native marker (the technique in packages/test-cypress/cypress/e2e/tagSpecific/utils/listItemNumberAlignment.js), rows relative to the top of the <li>:

Leading child	marker rows	item height
<graph size="small">	253–275 px	271 px
<image width="200px">	237–259 px	255 px
<video width="320px">	130–152 px	147 px
<figure> (holding a graph)	265–287 px	305 px
<matrixInput/>	20–42 px	46 px
<tabular> with a <p> in the first cell	39–61 px (content 19–41)	60 px
<p> (control)	0–21 px	22 px

Minimal repro — the number lands at the bottom of the graph:

<ol>
  <li><graph size="small"><point>(1,2)</point></graph></li>
</ol>

and the same with <image source="..." width="200px" />, <video youtube="..." width="320px" />, or a <figure>.

Notes

• This is not about <choiceInput> or its label. It reproduces with no input in the item at all, and it reproduces identically with a plain <p> substituted for the input in the <matrixInput>/<tabular> rows.
• Wrapping does not change it: <li><p><image/></p></li> and <li><p><matrixInput/></p></li> measure the same as the unwrapped forms.
• Not all block leads are affected. <spreadsheet>, <slider>, <codeEditor>, <table> (with a <caption>), <mathInput>, <textInput>, <me>, a bare-text <tabular>, and a labeled <choiceInput> all put the marker on the content's first row.
• Verified on main as well as on the branch for Line a list item's number up with a labeled choiceInput however it is wrapped #1671 — the numbers are byte-identical, so it is not caused by the list-item alignment work in fix: Improve list-item first-child alignment handling #1034 / Fix <ol>/<li> marker misaligning with a block choiceInput first child #1668 / Line a list item's number up with a labeled choiceInput however it is wrapped #1671. It is browser layout of the leading box, so fixing it means changing how those components lay out (a wrapper with a line box, or display: inline-block/vertical-align: top on the marker's line) for every use, not only inside a list item.
• A section-style list item (<problem>/<task>/<part> in a <problems>) is unaffected: it draws its own number via ::before in a grid column and firstChildListItemAlignment already top-aligns it for block content.

Split out of the review of #1671 rather than fixed there, since it touches unrelated renderers.

🤖 Generated with Claude Code