amadan

rastrillo / fiesta Public

← Discussions

Task 8: rst-side and rst-side-nav, red then green open

On branch fiesta-1-1

claude operated by paul@keymail.dev session 33749ae8 · claude-code/2.1.312 · DOCS-T1

Commit 5aea74d, "rst-side: a sidebar inside a panel, a row of links when the panel is narrow". Implementer: Claude Opus 5.5 (claude-opus-5-5), default reasoning setting.

Step 1: the CSS readers and @container

On a scratch worktree with the side rules and the @container block added to tokens.css, go test ./check failed only on TestEverySelectorAppearsInAnExample (no example yet). Five controls, each placed inside the @container block, were each named by the gate that owns them, so every reader reads the block as it reads an @media block and none needed a fix:

  • [rst-side-nav] b { color: … } (no class twin): spelling_test.go:286: tokens.css:2183: "[rst-side-nav] b" is an attribute selector with no class selector it is the twin of.
  • .rst-page, [rst-page] { padding: 0; }: baseline_test.go:706: css/tokens.css: @container (max-width: 34rem) { [rst-page] { padding: 0 } } is new and [rst-page]: no compound positively requires a name 1.0 does not style; no newOnOldMarkup entry is this selector
  • .rst-side--zz, [rst-side~="zz"]: coverage_test.go:354: the stylesheets style rst-side~=zz and no example writes it
  • --rst-radius: 3px: css_test.go:50: tokens.css declares "--rst-radius:"; colour and shape belong in themes/
  • .rst-side b, [rst-side] b { cursor: pointer; }: sizing_test.go:487: tokens.css styles a control no row of §1.4's inventory names

Red, by assertion, against the example with no side CSS

--- FAIL: TestTheSideNavIsAColumnBesideItsPanel (0.60s)
    side_browser_test.go:140: /: link 2 starts at 59.6, link 1 at 0.0; the links of a column share one edge
    side_browser_test.go:143: /: link 2's top is 2.0, above link 1's bottom 18.0; the links stack
    side_browser_test.go:140: /: link 3 starts at 129.0, link 1 at 0.0; the links of a column share one edge
    side_browser_test.go:143: /: link 3's top is 2.0, above link 2's bottom 18.0; the links stack
    side_browser_test.go:140: /: link 4 starts at 176.4, link 1 at 0.0; the links of a column share one edge
    side_browser_test.go:143: /: link 4's top is 2.0, above link 3's bottom 18.0; the links stack
    side_browser_test.go:147: /: the content's left edge is 0.0, left of the nav's right edge 640.0; the content sits beside the nav
    side_browser_test.go:153: /: the nav's borders are 0px at its inline end, 0px at its start and 0px below; want one 1px hairline at the inline end
    side_browser_test.go:156: /: the nav's top is 0.0 and the content's 38.4; side by side, they start on one line
    side_browser_test.go:140: /rtl: link 2 starts at 1125.5, link 1 at 1056.2; the links of a column share one edge
    side_browser_test.go:143: /rtl: link 2's top is 2.0, above link 1's bottom 18.0; the links stack
    side_browser_test.go:140: /rtl: link 3 starts at 1172.9, link 1 at 1056.2; the links of a column share one edge
    side_browser_test.go:143: /rtl: link 3's top is 2.0, above link 2's bottom 18.0; the links stack
    side_browser_test.go:140: /rtl: link 4 starts at 1265.0, link 1 at 1056.2; the links of a column share one edge
    side_browser_test.go:143: /rtl: link 4's top is 2.0, above link 3's bottom 18.0; the links stack
    side_browser_test.go:150: /rtl: the content's right edge is 1265.0, right of the nav's left edge 625.0; right to left, the content sits to the nav's left
    side_browser_test.go:153: /rtl: the nav's borders are 0px at its inline end, 0px at its start and 0px below; want one 1px hairline at the inline end
    side_browser_test.go:156: /rtl: the nav's top is 0.0 and the content's 38.4; side by side, they start on one line
--- FAIL: TestANarrowPanelPutsTheLinksInARow (0.77s)
    side_browser_test.go:203: /page at 320: the nav's borders are 0px below, 0px at its inline end and 0px at its start; want the hairline under the nav and none beside it
    side_browser_test.go:199: /page-long at 320: link 2's top is 26.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:199: /page-long at 320: link 3's top is 50.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:199: /page-long at 320: link 4's top is 74.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:203: /page-long at 320: the nav's borders are 0px below, 0px at its inline end and 0px at its start; want the hairline under the nav and none beside it
    side_browser_test.go:206: /page-long at 320: the nav's row is 305px wide in 305px; four long labels must overflow it, or this leg proves nothing about scrolling
    side_browser_test.go:199: /page-long-rtl at 320: link 2's top is 26.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:199: /page-long-rtl at 320: link 3's top is 50.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:199: /page-long-rtl at 320: link 4's top is 74.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:203: /page-long-rtl at 320: the nav's borders are 0px below, 0px at its inline end and 0px at its start; want the hairline under the nav and none beside it
    side_browser_test.go:206: /page-long-rtl at 320: the nav's row is 305px wide in 305px; four long labels must overflow it, or this leg proves nothing about scrolling
    side_browser_test.go:203: /page-rtl at 320: the nav's borders are 0px below, 0px at its inline end and 0px at its start; want the hairline under the nav and none beside it
    side_browser_test.go:203: /panel at 1280: the nav's borders are 0px below, 0px at its inline end and 0px at its start; want the hairline under the nav and none beside it
    side_browser_test.go:199: /panel-long at 1280: link 2's top is 23.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:199: /panel-long at 1280: link 3's top is 23.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:199: /panel-long at 1280: link 4's top is 44.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:203: /panel-long at 1280: the nav's borders are 0px below, 0px at its inline end and 0px at its start; want the hairline under the nav and none beside it
    side_browser_test.go:206: /panel-long at 1280: the nav's row is 300px wide in 300px; four long labels must overflow it, or this leg proves nothing about scrolling
    side_browser_test.go:199: /panel-long-rtl at 1280: link 2's top is 23.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:199: /panel-long-rtl at 1280: link 3's top is 23.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:199: /panel-long-rtl at 1280: link 4's top is 44.0, link 1's 2.0; in a narrow panel the links are one row
    side_browser_test.go:203: /panel-long-rtl at 1280: the nav's borders are 0px below, 0px at its inline end and 0px at its start; want the hairline under the nav and none beside it
    side_browser_test.go:206: /panel-long-rtl at 1280: the nav's row is 300px wide in 300px; four long labels must overflow it, or this leg proves nothing about scrolling
    side_browser_test.go:203: /panel-rtl at 1280: the nav's borders are 0px below, 0px at its inline end and 0px at its start; want the hairline under the nav and none beside it
--- FAIL: TestTheSideNavLinksAreMenuRows (0.54s)
    side_browser_test.go:318: the current link is rgba(0, 0, 0, 0) with box-shadow "none"; the current menu row is rgb(235, 241, 254) with "none"
    side_browser_test.go:321: the current link's text is rgb(0, 0, 238); the current menu row's is rgb(24, 24, 27)
    side_browser_test.go:318: the hovered link is rgba(0, 0, 0, 0) with box-shadow "none"; the hovered menu row is rgb(245, 247, 253) with "rgba(255, 255, 255, 0.8) 0px 1px 0px 0px inset"
    side_browser_test.go:321: the hovered link's text is rgb(0, 0, 238); the hovered menu row's is rgb(24, 24, 27)
    side_browser_test.go:318: the pressed link is rgba(0, 0, 0, 0) with box-shadow "none"; the pressed menu row is rgb(236, 241, 252) with "rgba(255, 255, 255, 0.8) 0px 1px 0px 0px inset"
    side_browser_test.go:321: the pressed link's text is rgb(255, 0, 0); the pressed menu row's is rgb(24, 24, 27)
    side_browser_test.go:318: the tapped link is rgba(0, 0, 0, 0) with box-shadow "none"; the tapped menu row is rgb(236, 241, 252) with "none"
    side_browser_test.go:328: the current link's weight is 400, want 600, as a current menu row's label
    side_browser_test.go:342: link 1 is 16.0px tall, under the 32.0px target floor
    side_browser_test.go:342: link 2 is 16.0px tall, under the 32.0px target floor
    side_browser_test.go:342: link 3 is 16.0px tall, under the 32.0px target floor
    side_browser_test.go:342: link 4 is 16.0px tall, under the 32.0px target floor
    side_browser_test.go:359: a link focused from the keyboard has outline auto 1px, want solid 2px though no rst-page is around it

TestTheSideNavLinksWorkWithNoScript passed against the stub: it holds the markup. Already passing; M7 and M8 below turn it red.

The CSS alone, before the widenings, the inventory row and the media wants

--- FAIL: TestEveryOneOhDeclarationStillApplies (0.01s)
    baseline_test.go:526: css/shell.css: 1.0.0 makes 35 declarations, the tree 35
    baseline_test.go:526: css/themes/day.css: 1.0.0 makes 114 declarations, the tree 114
    baseline_test.go:526: css/themes/plain.css: 1.0.0 makes 101 declarations, the tree 101
    baseline_test.go:526: css/themes/signal.css: 1.0.0 makes 101 declarations, the tree 101
    baseline_test.go:526: css/tokens.css: 1.0.0 makes 5835 declarations, the tree 6057
    baseline_test.go:554: css/tokens.css: 1.0.0's :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__menu a, .rst-dropdown__menu button, .rst-dropdown__menu .rst-menu-group > summary, .rst-row-menu__panel a, .rst-row-menu__panel button, .rst-locale button, .rst-scheme button, .rst-combo__option, .rst-dtp__row, .rst-dtp__pick, .rst-cal_
    baseline_test.go:554: css/tokens.css: 1.0.0's :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__menu a, .rst-dropdown__menu button, .rst-dropdown__menu .rst-menu-group > summary, .rst-row-menu__panel a, .rst-row-menu__panel button, .rst-locale button, .rst-scheme button, .rst-combo__option, .rst-dtp__row, .rst-dtp__pick, .rst-cal_
    baseline_test.go:554: css/tokens.css: 1.0.0's :where([rst-btn], [rst-search], [rst-search-clear], [rst-ftok] a, [rst-help], [rst-dropdown] > summary, [rst-dropdown-menu] a, [rst-dropdown-menu] button, [rst-dropdown-menu] [rst-menu-group] > summary, [rst-row-menu-panel] a, [rst-row-menu-panel] button, [rst-locale] button, [rst-scheme] button, [rst-combo-option], [rst-dtp-row], [rst-dtp-pick], [
    baseline_test.go:554: css/tokens.css: 1.0.0's :where([rst-btn], [rst-search], [rst-search-clear], [rst-ftok] a, [rst-help], [rst-dropdown] > summary, [rst-dropdown-menu] a, [rst-dropdown-menu] button, [rst-dropdown-menu] [rst-menu-group] > summary, [rst-row-menu-panel] a, [rst-row-menu-panel] button, [rst-locale] button, [rst-scheme] button, [rst-combo-option], [rst-dtp-row], [rst-dtp-pick], [
    baseline_test.go:554: css/tokens.css: 1.0.0's :where(.rst-page, .rst-page-header, .rst-list, .rst-lbar, .rst-search, .rst-empty, .rst-pagination) :focus-visible { outline: 2px solid var(--rst-accent) } is gone; a 1.0 page would render without it
    baseline_test.go:554: css/tokens.css: 1.0.0's :where(.rst-page, .rst-page-header, .rst-list, .rst-lbar, .rst-search, .rst-empty, .rst-pagination) :focus-visible { outline-offset: 2px } is gone; a 1.0 page would render without it
    baseline_test.go:554: css/tokens.css: 1.0.0's :where([rst-page], [rst-page-header], [rst-list], [rst-lbar], [rst-search], [rst-empty], [rst-pagination]) :focus-visible { outline: 2px solid var(--rst-accent) } is gone; a 1.0 page would render without it
    baseline_test.go:554: css/tokens.css: 1.0.0's :where([rst-page], [rst-page-header], [rst-list], [rst-lbar], [rst-search], [rst-empty], [rst-pagination]) :focus-visible { outline-offset: 2px } is gone; a 1.0 page would render without it
    baseline_test.go:561: widenedSelectors[":where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__menu a, .rst-dropdown__menu button, .rst-dropdown__menu .rst-menu-group > summary, .rst-row-menu__panel a, .rst-row-menu__panel button, .rst-locale button, .rst-scheme button, .rst-combo__option, .rst-dtp__row, .rst-dtp__pick, .rst-cal__nav, 
    baseline_test.go:561: widenedSelectors[":where([rst-btn], [rst-search], [rst-search-clear], [rst-ftok] a, [rst-help], [rst-dropdown] > summary, [rst-dropdown-menu] a, [rst-dropdown-menu] button, [rst-dropdown-menu] [rst-menu-group] > summary, [rst-row-menu-panel] a, [rst-row-menu-panel] button, [rst-locale] button, [rst-scheme] button, [rst-combo-option], [rst-dtp-row], [rst-dtp-pick], [rst-ca
--- FAIL: TestEveryNewRuleRequiresNewMarkup (0.05s)
    baseline_test.go:706: css/tokens.css: :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__menu a, .rst-dropdown__menu button, .rst-dropdown__menu .rst-menu-group > summary, .rst-row-menu__panel a, .rst-row-menu__panel button, .rst-locale button, .rst-scheme button, .rst-combo__option, .rst-dtp__row, .rst-dtp__pick, .rst-cal__nav, .r
    baseline_test.go:706: css/tokens.css: :where(.rst-btn, .rst-search, .rst-search__clear, .rst-ftok a, .rst-help, .rst-dropdown > summary, .rst-dropdown__menu a, .rst-dropdown__menu button, .rst-dropdown__menu .rst-menu-group > summary, .rst-row-menu__panel a, .rst-row-menu__panel button, .rst-locale button, .rst-scheme button, .rst-combo__option, .rst-dtp__row, .rst-dtp__pick, .rst-cal__nav, .r
    baseline_test.go:706: css/tokens.css: :where([rst-btn], [rst-search], [rst-search-clear], [rst-ftok] a, [rst-help], [rst-dropdown] > summary, [rst-dropdown-menu] a, [rst-dropdown-menu] button, [rst-dropdown-menu] [rst-menu-group] > summary, [rst-row-menu-panel] a, [rst-row-menu-panel] button, [rst-locale] button, [rst-scheme] button, [rst-combo-option], [rst-dtp-row], [rst-dtp-pick], [rst-cal-
    baseline_test.go:706: css/tokens.css: :where([rst-btn], [rst-search], [rst-search-clear], [rst-ftok] a, [rst-help], [rst-dropdown] > summary, [rst-dropdown-menu] a, [rst-dropdown-menu] button, [rst-dropdown-menu] [rst-menu-group] > summary, [rst-row-menu-panel] a, [rst-row-menu-panel] button, [rst-locale] button, [rst-scheme] button, [rst-combo-option], [rst-dtp-row], [rst-dtp-pick], [rst-cal-
    baseline_test.go:706: css/tokens.css: :where(.rst-page, .rst-page-header, .rst-list, .rst-lbar, .rst-search, .rst-empty, .rst-pagination, .rst-side) :focus-visible { outline: 2px solid var(--rst-accent) } is new and :where(.rst-page, .rst-page-header, .rst-list, .rst-lbar, .rst-search, .rst-empty, .rst-pagination, .rst-side) :focus-visible: `:where(` is outside the grammar
    baseline_test.go:706: css/tokens.css: :where(.rst-page, .rst-page-header, .rst-list, .rst-lbar, .rst-search, .rst-empty, .rst-pagination, .rst-side) :focus-visible { outline-offset: 2px } is new and :where(.rst-page, .rst-page-header, .rst-list, .rst-lbar, .rst-search, .rst-empty, .rst-pagination, .rst-side) :focus-visible: `:where(` is outside the grammar
    baseline_test.go:706: css/tokens.css: :where([rst-page], [rst-page-header], [rst-list], [rst-lbar], [rst-search], [rst-empty], [rst-pagination], [rst-side]) :focus-visible { outline: 2px solid var(--rst-accent) } is new and :where([rst-page], [rst-page-header], [rst-list], [rst-lbar], [rst-search], [rst-empty], [rst-pagination], [rst-side]) :focus-visible: `:where(` is outside the grammar
    baseline_test.go:706: css/tokens.css: :where([rst-page], [rst-page-header], [rst-list], [rst-lbar], [rst-search], [rst-empty], [rst-pagination], [rst-side]) :focus-visible { outline-offset: 2px } is new and :where([rst-page], [rst-page-header], [rst-list], [rst-lbar], [rst-search], [rst-empty], [rst-pagination], [rst-side]) :focus-visible: `:where(` is outside the grammar
--- FAIL: TestEveryInteractiveRuleIsInTheTapInventory (0.02s)
    sizing_test.go:487: tokens.css styles a control no row of §1.4's inventory names:
    sizing_test.go:487: tokens.css styles a control no row of §1.4's inventory names:
    sizing_test.go:487: tokens.css styles a control no row of §1.4's inventory names:
    sizing_test.go:487: tokens.css styles a control no row of §1.4's inventory names:
    sizing_test.go:487: tokens.css styles a control no row of §1.4's inventory names:
    sizing_test.go:487: tokens.css styles a control no row of §1.4's inventory names:
    sizing_test.go:487: tokens.css styles a control no row of §1.4's inventory names:

Mutations (scratch worktree, each reverted)

M10-no-focus-scope

--- FAIL: TestTheSideNavLinksAreMenuRows (0.60s)
    side_browser_test.go:359: a link focused from the keyboard has outline auto 1px, want solid 2px though no rst-page is around it

M11-no-floor

--- FAIL: TestEveryTapTargetIsAtLeast44Pixels (5.24s)
        sizing_browser_test.go:764: 390x844 touch, overlays closed: a “General” is 82.4×33.8, under the 44×44 floor
        sizing_browser_test.go:764: 390x844 touch, overlays closed: a “Members” is 85.7×33.8, under the 44×44 floor
        sizing_browser_test.go:765: 390x844 touch: 168 controls measured
        sizing_browser_test.go:764: 1024x768 touch, overlays closed: a “General” is 85.7×33.8, under the 44×44 floor
        sizing_browser_test.go:764: 1024x768 touch, overlays closed: a “Members” is 85.7×33.8, under the 44×44 floor

M12-current-not-600

--- FAIL: TestTheSideNavLinksAreMenuRows (0.59s)
    side_browser_test.go:328: the current link's weight is 400, want 600, as a current menu row's label

M13-no-tap-tint

--- FAIL: TestTheSideNavLinksAreMenuRows (0.55s)
    side_browser_test.go:318: the tapped link is rgba(0, 0, 0, 0) with box-shadow "none"; the tapped menu row is rgb(236, 241, 252) with "none"

M14-not-in-forced

--- FAIL: TestForcedColoursAndPrintFlattenTheAxisAndCoverEveryComponent (0.00s)
    depth_media_test.go:50: the @media (forced-colors: active) { block does not carry "[rst-side-nav] a[aria-current]"

M15-not-in-print

--- FAIL: TestForcedColoursAndPrintFlattenTheAxisAndCoverEveryComponent (0.00s)
    depth_media_test.go:50: the @media print { block does not carry "[rst-side-nav] a[aria-current]"

M16-narrowing-only

--- FAIL: TestEveryNewRuleRequiresNewMarkup (0.05s)
    baseline_test.go:723: css/tokens.css: div:not(.rst-side__nav) { padding: var(--rst-sp-4) } is new and div:not(.rst-side__nav): no compound positively requires a name 1.0 does not style (names inside :not() never count); no newOnOldMarkup entry is this selector
    baseline_test.go:723: css/tokens.css: div:not([rst-side-nav]) { padding: var(--rst-sp-4) } is new and div:not([rst-side-nav]): no compound positively requires a name 1.0 does not style (names inside :not() never count); no newOnOldMarkup entry is this selector

M1-no-columns

--- FAIL: TestTheSideNavIsAColumnBesideItsPanel (0.56s)
    side_browser_test.go:147: /: the content's left edge is 0.0, left of the nav's right edge 640.0; the content sits beside the nav
    side_browser_test.go:156: /: the nav's top is 0.0 and the content's 158.0; side by side, they start on one line
    side_browser_test.go:150: /rtl: the content's right edge is 1265.0, right of the nav's left edge 625.0; right to left, the content sits to the nav's left
    side_browser_test.go:156: /rtl: the nav's top is 0.0 and the content's 158.0; side by side, they start on one line

M2-physical-border

--- FAIL: TestTheSideNavIsAColumnBesideItsPanel (0.56s)
    side_browser_test.go:153: /rtl: the nav's borders are 0px at its inline end, 1px at its start and 0px below; want one 1px hairline at the inline end

M3-no-container-block

--- FAIL: TestANarrowPanelPutsTheLinksInARow (0.76s)
    side_browser_test.go:192: /page at 320: the nav spans 0.0 to 125.4 in a panel of 0.0 to 305.0; in a narrow panel it spans the panel
    side_browser_test.go:195: /page at 320: the content's top is 0.0, above the nav's bottom 219.8; in a narrow panel the nav sits above the content
    side_browser_test.go:199: /page at 320: link 2's top is 58.0, link 1's 12.0; in a narrow panel the links are one row
    side_browser_test.go:199: /page at 320: link 3's top is 104.0, link 1's 12.0; in a narrow panel the links are one row
    side_browser_test.go:199: /page at 320: link 4's top is 150.0, link 1's 12.0; in a narrow panel the links are one row

M4-no-overflow

--- FAIL: TestANarrowPanelPutsTheLinksInARow (0.79s)
    side_browser_test.go:209: /page at 320: the page is 354px wide in a 320px viewport; the row scrolls inside the nav, never the page
    side_browser_test.go:209: /page-long at 320: the page is 1083px wide in a 320px viewport; the row scrolls inside the nav, never the page
    side_browser_test.go:209: /page-long-rtl at 320: the page is 1083px wide in a 320px viewport; the row scrolls inside the nav, never the page
    side_browser_test.go:209: /page-rtl at 320: the page is 354px wide in a 320px viewport; the row scrolls inside the nav, never the page

M5-labels-wrap

--- FAIL: TestANarrowPanelPutsTheLinksInARow (0.76s)
    side_browser_test.go:206: /page-long at 320: link 1's label takes 5 lines; in the row a label stays on one line and the row scrolls
    side_browser_test.go:206: /page-long at 320: link 2's label takes 4 lines; in the row a label stays on one line and the row scrolls
    side_browser_test.go:206: /page-long at 320: link 3's label takes 4 lines; in the row a label stays on one line and the row scrolls
    side_browser_test.go:206: /page-long at 320: link 4's label takes 4 lines; in the row a label stays on one line and the row scrolls
    side_browser_test.go:206: /page-long-rtl at 320: link 1's label takes 5 lines; in the row a label stays on one line and the row scrolls

M6-window-query

--- FAIL: TestANarrowPanelPutsTheLinksInARow (0.77s)
    side_browser_test.go:192: /panel at 1280: the nav spans 0.0 to 116.0 in a panel of 0.0 to 300.0; in a narrow panel it spans the panel
    side_browser_test.go:195: /panel at 1280: the content's top is 0.0, above the nav's bottom 175.3; in a narrow panel the nav sits above the content
    side_browser_test.go:199: /panel at 1280: link 2's top is 46.0, link 1's 12.0; in a narrow panel the links are one row
    side_browser_test.go:199: /panel at 1280: link 3's top is 80.0, link 1's 12.0; in a narrow panel the links are one row
    side_browser_test.go:199: /panel at 1280: link 4's top is 114.0, link 1's 12.0; in a narrow panel the links are one row

M7-link-nowhere

--- FAIL: TestTheSideNavLinksWorkWithNoScript (0.54s)
    side_browser_test.go:242: the link to "/settings/people" is not one of the state's sampleURLs [/settings/billing /settings/general /settings/members /settings/notifications]; a link must go somewhere the app has

M8-link-untabbable

--- FAIL: TestTheSideNavLinksWorkWithNoScript (0.65s)
    side_browser_test.go:253: after 2 presses of Tab the focus is on "/settings/billing", want the link to "/settings/members"
    side_browser_test.go:253: after 3 presses of Tab the focus is on "/settings/notifications", want the link to "/settings/billing"
    side_browser_test.go:253: after 4 presses of Tab the focus is on "BODY", want the link to "/settings/notifications"

M9-no-hover

--- FAIL: TestTheSideNavLinksAreMenuRows (0.55s)
    side_browser_test.go:318: the hovered link is rgba(0, 0, 0, 0) with box-shadow "none"; the hovered menu row is rgb(245, 247, 253) with "rgba(255, 255, 255, 0.8) 0px 1px 0px 0px inset"
    side_browser_test.go:321: the hovered link's text is rgb(82, 82, 92); the hovered menu row's is rgb(24, 24, 27)
    side_browser_test.go:318: the pressed link is rgb(236, 241, 252) with box-shadow "none"; the pressed menu row is rgb(236, 241, 252) with "rgba(255, 255, 255, 0.8) 0px 1px 0px 0px inset"
    side_browser_test.go:321: the pressed link's text is rgb(82, 82, 92); the pressed menu row's is rgb(24, 24, 27)

M5 (max-content dropped) passed the first version of the narrow test: the long labels wrapped onto several lines inside the row. The test now holds every label in the row to one line, and M5 is red as shown.

Green

  • go test ./check ./internal/gallery ./example . ./internal/www ./internal/build -count=1: all ok.
  • ./hack/gotest.sh browser check -run 'Side|TestANarrowPanel|TestEveryTapTargetIsAtLeast44Pixels|TestEveryExampleStateMeetsTheFloors|TestEveryNavSurfaceHasItsStates|TestBothSpellingsComputeTheSameStyles|TestForcedColoursKeepBordersAndSelection|TestPrintDrawsBordersAndNoDepth': ok (76 s; the floors drives served all 159 states).
  • ./hack/gotest.sh browser internal.gallery -run 'TestPreviewFrameHeightsFit|TestEveryExamplePassesAxe': ok (430 s), after the heights below.
  • go vet -tags browser ./check ./internal/gallery, make size.

Heights, first run against a 40px placeholder:

    heights_browser_test.go:584: en/side-nav.html at 1500px Desktop side-nav/four-sections-the-first-open: its document needs 190px and its frame is 40px; at least 210
    heights_browser_test.go:605: en/side-nav.html at 1500px Mobile side-nav/four-sections-the-first-open: its document needs 273px and its frame is 40px; at least 293
    heights_browser_test.go:745: ru/side-nav.html at 320px side-nav/four-sections-the-first-open: its document needs 297px and its frame is 40px; at least 317
    heights_browser_test.go:745: ga/side-nav.html at 320px side-nav/four-sections-the-first-open: its document needs 297px and its frame is 40px; at least 317
    heights_browser_test.go:745: en/side-nav.html at 320px side-nav/four-sections-the-first-open: its document needs 273px and its frame is 40px; at least 293
    heights_browser_test.go:745: ar/side-nav.html at 320px side-nav/four-sections-the-first-open: its document needs 273px and its frame is 40px; at least 293

Size (gzip 6, allotment 360: on target)

| File | Before | After | Change | |---|---|---|---| | fiesta.css | 23,412 | 23,699 | +287 | | fiesta-plain.css | 22,698 | 22,979 | +281 | | fiesta-signal.css | 22,810 | 23,091 | +281 |

Hub

Hub CI on 5aea74d: passed, all 48 shards; the suite step took 110 s; the size step reads fiesta.css at 23,699.

The red runs above were taken before the narrow test gained its one-line-per-label assertion, so their line numbers are the earlier file's.

Screenshots (1280 and 390, LTR and RTL, plus a 300px card at 1280 in both directions): /home/paulca/.cache/fiesta-1-1-task-8-shots/

claude operated by paul@keymail.dev session 33749ae8 · claude-code/2.1.312 · DOCS-T1

Fixes after Astra's review: af340e7, red then green

Commit af340e7 "Keep a side nav link reached with Tab whole in the row, ring included" (css/tokens.css, check/sidebrowsertest.go). Hub CI on af340e7: passed, 48 of 48 shards, suite 110 s.

Finding. Beyond the clipped ring, Chromium does not scroll a focused element that is already partly in view: Tab to the second of four long links left it half under the row's edge (scrollLeft stayed 0), and Shift+Tab back did the same. An inset ring alone does not fix that. scroll-padding-inline sets the region Chromium counts as in view; 8, 16 and 40px each still left a link partly out of view on some leg, 49% (a sliver at the centre) passes every leg. The ring is also drawn inset (outline-offset: -2px) in the row.

Red, before the fix (TestKeyboardFocusShowsTheWholeRingInTheRow): 12 rings cut off, 28 rings outside their link

    side_browser_test.go:443: / at 1280, Tab to /settings/members: the focus ring spans 259.9 to 504.0 across and 8.0 to 48.0 down, outside the row's visible 0.0 to 300.0 and 0.0 to 56.0; the row cuts it off
    side_browser_test.go:443: / at 1280, Tab to /settings/notifications: the focus ring spans 256.6 to 521.1 across and 8.0 to 48.0 down, outside the row's visible 0.0 to 300.0 and 0.0 to 56.0; the row cuts it off
    side_browser_test.go:443: / at 1280, Shift+Tab to /settings/members: the focus ring spans -200.1 to 44.0 across and 8.0 to 48.0 down, outside the row's visible 0.0 to 300.0 and 0.0 to 56.0; the row cuts it off
    side_browser_test.go:443: /page at 320, Tab to /settings/members: the focus ring spans 287.8 to 557.9 across and 8.0 to 60.0 down, outside the row's visible 0.0 to 305.0 and 0.0 to 68.0; the row cuts it off
    side_browser_test.go:443: /page at 320, Tab to /settings/notifications: the focus ring spans 270.9 to 563.7 across and 8.0 to 60.0 down, outside the row's visible 0.0 to 305.0 and 0.0 to 68.0; the row cuts it off
    side_browser_test.go:443: /page at 320, Shift+Tab to /settings/members: the focus ring spans -235.2 to 34.9 across and 8.0 to 60.0 down, outside the row's visible 0.0 to 305.0 and 0.0 to 68.0; the row cuts it off
    side_browser_test.go:443: /page-rtl at 320, Tab to /settings/members: the focus ring spans -252.9 to 17.2 across and 8.0 to 60.0 down, outside the row's visible 0.0 to 305.0 and 0.0 to 68.0; the row cuts it off
    side_browser_test.go:443: /page-rtl at 320, Tab to /settings/notifications: the focus ring spans -258.7 to 34.1 across and 8.0 to 60.0 down, outside the row's visible 0.0 to 305.0 and 0.0 to 68.0; the row cuts it off
    side_browser_test.go:443: /page-rtl at 320, Shift+Tab to /settings/members: the focus ring spans 270.1 to 540.2 across and 8.0 to 60.0 down, outside the row's visible 0.0 to 305.0 and 0.0 to 68.0; the row cuts it off
    side_browser_test.go:443: /rtl at 1280, Tab to /settings/members: the focus ring spans 761.0 to 1005.1 across and 8.0 to 48.0 down, outside the row's visible 965.0 to 1265.0 and 0.0 to 56.0; the row cuts it off
    side_browser_test.go:443: /rtl at 1280, Tab to /settings/notifications: the focus ring spans 743.9 to 1008.4 across and 8.0 to 48.0 down, outside the row's visible 965.0 to 1265.0 and 0.0 to 56.0; the row cuts it off
    side_browser_test.go:443: /rtl at 1280, Shift+Tab to /settings/members: the focus ring spans 1221.0 to 1465.1 across and 8.0 to 48.0 down, outside the row's visible 965.0 to 1265.0 and 0.0 to 56.0; the row cuts it off
    side_browser_test.go:440: / at 1280, Tab to /settings/general: the focus ring reaches 4.0px outside the link; in the row it is drawn inside, or the row's edge cuts it wherever the link meets that 
    side_browser_test.go:440: / at 1280, Tab to /settings/members: the focus ring reaches 4.0px outside the link; in the row it is drawn inside, or the row's edge cuts it wherever the link meets that 
    side_browser_test.go:440: / at 1280, Tab to /settings/billing: the focus ring reaches 4.0px outside the link; in the row it is drawn inside, or the row's edge cuts it wherever the link meets that 
    side_browser_test.go:440: / at 1280, Tab to /settings/notifications: the focus ring reaches 4.0px outside the link; in the row it is drawn inside, or the row's edge cuts it wherever the link meets

TestASideInAFlexRowIsGivenItsWidth passed on the CSS as it was (it holds a composition); its mutations follow.

Mutations

F1-no-scroll-padding

--- FAIL: TestKeyboardFocusShowsTheWholeRingInTheRow (0.67s)
    side_browser_test.go:443: / at 1280, Tab to /settings/members: the focus ring spans 263.9 to 500.0 across and 12.0 to 44.0 down, outside the row's visible 0.0 to 300.0 and 0.0 to 56.0; the row cuts it off
    side_browser_test.go:443: / at 1280, Tab to /settings/notifications: the focus ring spans 260.6 to 517.1 across and 12.0 to 44.0 down, outside the row's visible 0.0 to 300.0 and 0.0 to 56.0; the row cuts it off
    side_browser_test.go:443: / at 1280, Shift+Tab to /settings/members: the focus ring spans -196.1 to 40.0 across and 12.0 to 44.0 down, outside the row's visible 0.0 to 300.0 and 0.0 to 56.0; the row cuts it off

F2-ring-outside

--- FAIL: TestKeyboardFocusShowsTheWholeRingInTheRow (0.71s)
    side_browser_test.go:440: / at 1280, Tab to /settings/general: the focus ring reaches 4.0px outside the link; in the row it is drawn inside, or the row's edge cuts it wherever the link meets that edge
    side_browser_test.go:440: / at 1280, Tab to /settings/members: the focus ring reaches 4.0px outside the link; in the row it is drawn inside, or the row's edge cuts it wherever the link meets that edge
    side_browser_test.go:440: / at 1280, Tab to /settings/billing: the focus ring reaches 4.0px outside the link; in the row it is drawn inside, or the row's edge cuts it wherever the link meets that edge

F3-not-given-width

--- FAIL: TestASideInAFlexRowIsGivenItsWidth (0.55s)
    side_browser_test.go:493: in a 1000px row beside a 200px column, flex: 1 1 0: the side is 0.0px wide, its links on 1 lines, its content 32.0px; want 800px, a column of four, and room for the content
    side_browser_test.go:496: in a 500px row beside a 200px column, flex: 1 1 0: the side is 0.0px wide, its links on 1 lines, flowing column; want 300px and one row

F4-no-container

--- FAIL: TestASideInAFlexRowIsGivenItsWidth (0.55s)
    side_browser_test.go:496: in a 500px row beside a 200px column, flex: 1 1 0: the side is 300.0px wide, its links on 4 lines, flowing row; want 300px and one row
    side_browser_test.go:499: left to size itself in a flex row, the side is 523.2px wide; it was zero wide, and the note on the example says so: change the note if this is now true

F3 is a test-side mutation: the side given flex: 0 1 auto instead of flex: 1 1 0.

Green

  • go test ./check; browser: the side tests, TestANarrowPanelPutsTheLinksInARow, TestKeyboardFocusShowsTheWholeRingInTheRow, TestASideInAFlexRowIsGivenItsWidth, the tap drive, both floors drives, TestBothSpellingsComputeTheSameStyles.

Size (Task 8 now +312 of its 360)

| File | Before | After | Change | |---|---|---|---| | fiesta.css | 23,699 | 23,724 | +25 | | fiesta-plain.css | 22,979 | 23,005 | +26 | | fiesta-signal.css | 23,091 | 23,118 | +27 |

The width note on the example waits for Paul's approved sentence.