makeover-webview 0.111.0

//! Tests for [`super`].

use super::*;
use makeover_layout::Edge;

#[test]
fn every_fallback_class_is_one_a_checker_knows_about() {
    // The obligation ROW_PART_CLASSES carries, for the same reason: a class
    // this crate can write and the vocabulary list does not carry is
    // invisible to the dead-vocabulary seal and to the overlap check both.
    for fallback in [
        Fallback::Wrap,
        Fallback::Stack,
        Fallback::Shed,
        Fallback::Menu,
    ] {
        assert!(
            RUN_CLASSES.contains(&fallback_class(fallback)),
            "{fallback:?} is missing from RUN_CLASSES"
        );
    }
    let names = crate::vocabulary::names(&Emit::default());
    for name in RUN_CLASSES {
        assert!(names.contains(*name), "{name} is not in the vocabulary");
    }
}

#[test]
fn a_run_gives_every_member_a_floor_it_cannot_be_squeezed_below() {
    // The whole of what stops the overlap, and it is not a fallback: it
    // applies to every run whatever the group declared. flexbox's default
    // min-width is auto, which lets an item be compressed below its own
    // content in a nowrap row, and that is how a toolbar is drawn over a
    // tab strip even with nothing out of flow.
    let css = run_rules(&Emit::default());
    assert!(css.contains(".run > * {\n    min-width: min-content;\n}"));
    // No pixel and no breakpoint. That half of the ruling holds absolutely:
    // nothing in this mechanism asks the viewport anything.
    assert!(!css.contains("px"));
    assert!(!css.contains("@media"));

    // One length in the whole of it, and `4f5705b1` is why "no number
    // anywhere" could not survive as written. The floor above is derived by the
    // browser, and a member holding a table has almost no min-content to derive
    // from: a table's headings and cells are `container-type: inline-size`, and
    // a size container is not measured through, so the floor reads a few
    // headings and a wrapping run of fills never breaks its line. Room that
    // cannot be derived has to be stated. It stays a custom property, so the
    // number is the app's to set and the default below is the only length this
    // mechanism names.
    let without_stated_room = css.replace("min(100%, var(--run-room, 20rem))", "");
    assert!(!without_stated_room.contains("rem"), "{css}");
}

#[test]
fn a_member_that_asks_to_fill_absorbs_what_is_left() {
    // The second half of what a column says, reaching a row of regions
    // (quasicoherent `cf981aaa`). A zero basis and not `auto`, because equal
    // division between several fills is `Width::Fill`'s own stated rule and
    // `auto` divides the leftovers in proportion to the contents instead.
    let css = run_rules(&Emit::default());
    assert!(css.contains(".run > [data-width=\"fill\"] {\n    flex: 1 1 0;\n}"));

    // Under `Wrap` the basis becomes the stated room instead, which is what
    // lets the line break at all (`4f5705b1`). The basis only: the grow and
    // shrink above are what make several fills divide one line equally, and
    // overriding them here would cost that on every run that still fits.
    assert!(
        css.contains(
            ".run-wrap > [data-width=\"fill\"] {\n    flex-basis: min(100%, var(--run-room, 20rem));\n}"
        ),
        "{css}"
    );

    // The floor is not overridden. A fill that could shrink under its own
    // contents would overlap its neighbour, which is the rule this whole
    // mechanism exists to keep. The one member it comes off is the tab strip
    // of a menu run the script is measuring, which clips and folds rather than
    // overlapping: see `a_tab_strip_in_a_measured_menu_run_clips_rather_than_wraps`.
    assert_eq!(css.matches("min-width: 0").count(), 1, "{css}");
    let floor_lifted = css
        .split("}\n")
        .find(|rule| rule.contains("min-width: 0"))
        .unwrap_or_default();
    assert!(
        floor_lifted.starts_with(".run-menu[data-menu] > [role=\"tablist\"]"),
        "{floor_lifted}"
    );

    // A member that says nothing gets nothing: content is what a flex item
    // with the floor and no grow already is.
    assert!(!css.contains("data-width=\"content\""));
}

#[test]
fn room_is_never_asked_of_the_viewport() {
    // The 913 case: a window in SizeClass::Expanded holding a group out of
    // room. A viewport query answers about the window and would be wrong
    // about the group, which is also why a table narrows by its own columns'
    // floors and never by a viewport width.
    let css = run_rules(&Emit::default());
    for size in [SizeClass::Compact, SizeClass::Medium] {
        assert!(!css.contains(&size.media_condition()));
    }
}

#[test]
fn every_fallback_lands_as_a_class_and_an_unknown_one_lands_plainly() {
    let css = run_rules(&Emit::default());
    for fallback in [
        Fallback::Wrap,
        Fallback::Stack,
        Fallback::Shed,
        Fallback::Menu,
    ] {
        let class = fallback_class(fallback);
        assert!(css.contains(&format!(".{class} {{")), "{class} unemitted");
    }
    // Stack is the one that also says what a member does with the line it
    // took, which is what separates it from wrapping.
    assert!(css.contains(".run-stack > * {\n    flex: 1 1 max-content;\n}"));
}

#[test]
fn the_emitted_bevel_matches_what_the_apps_already_hand_write() {
    // Balanced Breakfast's styles.css, verbatim. Adoption has to be a
    // deletion, not a redesign, or nobody will take it.
    let opts = Emit::default();
    assert_eq!(
        bevel_shadow(Bevel::Raised, &opts),
        "inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark)"
    );
    assert_eq!(
        bevel_shadow(Bevel::Inset, &opts),
        "inset 1px 1px 0 var(--bevel-dark), inset -1px -1px 0 var(--bevel-light)"
    );
}

#[test]
fn no_colour_ever_reaches_the_output() {
    let css = stylesheet(&Emit::default());
    assert!(!css.contains('#'), "a hex literal escaped into the CSS");
    assert!(
        !css.contains("rgb"),
        "a colour function escaped into the CSS"
    );
    // Every colour is named, never resolved.
    assert!(css.contains("var(--surface-raised)"));
    assert!(css.contains("var(--bevel-light)"));
}

#[test]
fn a_well_falls_back_through_css_rather_than_through_rust() {
    assert_eq!(
        fill_var(Fill::Well),
        "var(--surface-well, var(--surface-page))"
    );
    // Nothing else needs one.
    assert_eq!(fill_var(Fill::Raised), "var(--surface-raised)");
    assert_eq!(fill_var(Fill::Page), "var(--surface-page)");
}

#[test]
fn raised_and_well_do_not_collapse_onto_each_other() {
    let css = depth_rules(&Emit::default());
    assert!(css.contains(".raised {"));
    assert!(css.contains(".well {"));
    assert!(css.contains("var(--bevel-raised)"));
    assert!(css.contains("var(--bevel-inset)"));
}

/// The cast shadow is composed here from the tone `makeover` derives, so
/// neither crate has to hold the other's numbers.
///
/// It is a `:root` property and deliberately not a depth class. There is no
/// `Depth::Overlay` in the description layer, and adding one would be a
/// claim about what a screen means rather than about how it is painted;
/// until something asks for it, a consumer names the property on the rule
/// for the menu or the toast it already has.
#[test]
fn the_cast_shadow_is_a_root_property_not_a_depth() {
    let css = bevel_properties(&Emit::default());
    assert!(css.contains("--elevation-overlay:"));
    assert!(css.contains("var(--elevation)"));
    assert!(
        !depth_rules(&Emit::default()).contains("elevation"),
        "elevation is not a depth class"
    );
}

#[test]
fn the_cascade_carries_the_pressed_state() {
    let css = surface_rules(&Emit::default());
    // The one thing this renderer gets free that the other two resolve by
    // hand, eighteen call sites deep in audiofiles' case. Asserted on a
    // named surface: pressing belongs to the control, not to the depth.
    assert!(css.contains(".card:is(a, button, label, [data-act]):active {"));
    assert!(css.contains(".button:active {"));
}

#[test]
fn a_card_answers_the_pointer_only_when_it_is_a_control() {
    // One name for the card that is read and the card that is pressed. The
    // bare class is a raised object; every state is keyed on the element.
    let css = surface_rules(&Emit::default());
    assert!(css.contains(".card {"), "{css}");
    for state in [":hover", ":active", ":focus-visible", ":disabled"] {
        assert!(
            !css.contains(&format!(".card{state}")),
            "a card that does nothing claimed {state}: {css}"
        );
        assert!(
            css.contains(&format!(".card:is(a, button, label, [data-act]){state}")),
            "a pressable card lost {state}: {css}"
        );
    }
}

#[test]
fn the_depth_class_is_a_surface_and_not_a_control() {
    let css = depth_rules(&Emit::default());
    // The static surface the vocabulary was missing. Sixteen goingson
    // elements wore .card and cancelled its hover and press to get this,
    // because a raised object that is not pressable had no other spelling.
    for state in [":hover", ":active", ":focus-visible", ":disabled"] {
        assert!(
            !css.contains(&format!(".raised{state}")),
            "the depth class claimed {state}: {css}"
        );
    }
    assert!(css.contains("var(--bevel-raised)"), "still raised: {css}");
}

#[test]
fn pressing_moves_the_fill_and_not_only_the_edge() {
    // The decision-1 guard, and the regression that mattered: emitting the
    // bevel flip alone is what left goingson hand-writing `background:
    // var(--surface-sunken)` on .btn, .card and .tag/.badge alike, so none
    // of the three could be deleted.
    let pressed = interactive_rules("button", Depth::Raised, &Emit::default());
    assert!(pressed.contains(".button:active {"));
    assert!(
        pressed.contains("background: var(--surface-well, var(--surface-page))"),
        "pressed dropped its fill: {pressed}"
    );
    assert!(pressed.contains("box-shadow: var(--bevel-inset)"));
}

#[test]
fn pressed_takes_its_fill_from_the_description_not_from_the_app() {
    // goingson presses to --surface-sunken. The description says a pressed
    // raised region reads as a well, and makeover says outright that
    // surface-sunken cannot serve as one, so the app is the thing that
    // moves.
    //
    // Scoped to the pressed rules rather than to the whole sheet: since
    // makeover-layout 0.3.0 an unchosen tab is legitimately
    // --surface-sunken, so the token appearing somewhere in the output no
    // longer means the app's choice leaked in.
    let css = stylesheet(&Emit::default());
    let mut checked = 0;
    for rule in css.split("}\n") {
        if !rule.contains(":active") {
            continue;
        }
        checked += 1;
        assert!(
            !rule.contains("surface-sunken"),
            "a pressed rule took the app's fill: {rule}"
        );
    }
    assert!(checked > 0, "no pressed rules found to check");
    assert_eq!(
        Depth::Raised.pressed().fill(),
        Some(Fill::Well),
        "the description changed under us"
    );
}

#[test]
fn the_whole_stylesheet_is_emitted_in_the_family_layer() {
    // The point of 0.11.0. Unlayered normal declarations outrank every
    // named layer, so an app declaring `@layer base, components` loses
    // every rule it owns to this file until this file is layered too.
    let css = stylesheet(&Emit::default());
    assert!(css.contains(&format!("@layer {CSS_LAYER} {{")));

    // Exactly one layer block, and nothing outside it but the banner.
    assert_eq!(css.matches("@layer").count(), 2, "banner names it once");
    let opened = css.find("@layer makeover {").expect("layer opens");
    for (i, line) in css.lines().enumerate() {
        let before_layer = css.lines().take(i).map(str::len).sum::<usize>() < opened;
        if before_layer || line.is_empty() {
            continue;
        }
        assert!(
            line.starts_with("    ") || line == "}" || line.starts_with("   "),
            "line outside the layer: {line:?}"
        );
    }
}

#[test]
fn the_generated_sheet_carries_no_trailing_whitespace() {
    // A checked-in generated file that a formatter wants to rewrite is a
    // diff every time somebody saves it.
    let css = stylesheet(&Emit::default());
    for (i, line) in css.lines().enumerate() {
        assert_eq!(line, line.trim_end(), "trailing whitespace on line {i}");
    }
}

#[test]
fn the_banner_tells_an_app_how_to_order_the_layer() {
    // Without a declared order the layer's position depends on which
    // generated file the browser sees first, which is not a contract.
    let css = stylesheet(&Emit::default());
    assert!(css.contains("@layer makeover, base, components, responsive;"));
    // And the banner is outside the layer, not a rule inside it.
    assert!(css.starts_with("/* Generated by makeover-webview"));
}

#[test]
fn the_banner_names_the_emitter_so_a_stale_pin_is_visible_on_sight() {
    // A consumer whose lockfile pins an old version gets a well-formed
    // sheet with components missing and no error. balanced_breakfast ran
    // on 657 bytes from a 0.1.0 emitter while its manifest asked for
    // 0.5.1, and the only way it surfaced was diffing two apps' generated
    // files. The version and the count are what the file says instead.
    let css = stylesheet(&Emit::default());
    let banner = css.lines().next().unwrap();
    assert!(
        banner.contains(VERSION),
        "{banner} does not name the emitter"
    );
    let classes = vocabulary::classes_in_css(&css).len();
    assert!(classes > 0);
    assert!(
        banner.contains(&format!("{classes} classes")),
        "{banner} does not carry the class count"
    );
}

#[test]
fn a_primitive_owns_every_state_it_implies() {
    // The whole point of 0.10.0. Anything emitting a hover rule owes the
    // other three, or the consuming app supplies them by out-specifying a
    // rule it does not own: 19 such rules in goingson, 21 in the MNW
    // server, and three focus rings that do not match.
    let css = stylesheet(&Emit::default());
    let pressable_card = pressable_card("card");
    for selector in [
        "button",
        pressable_card.as_str(),
        "chip",
        "tab",
        "segment",
        "toggle",
    ] {
        assert!(css.contains(&format!(".{selector}:hover {{")), "{selector}");
        assert!(
            css.contains(&format!(".{selector}:active {{")),
            "{selector}"
        );
        assert!(
            css.contains(&format!(".{selector}:focus-visible {{")),
            "{selector} has no focus ring"
        );
        assert!(
            css.contains(&format!(".{selector}:disabled,")),
            "{selector} has no disabled state"
        );
    }
}

#[test]
fn a_field_takes_focus_and_refuses_input_without_taking_a_hover() {
    // A text field does not light up under the pointer, so it gets the two
    // states it has and not the two it does not.
    let css = stylesheet(&Emit::default());
    assert!(css.contains(".field:focus-visible {"));
    assert!(css.contains(".field:disabled,"));
    assert!(!css.contains(".field:hover {"));
    assert!(!css.contains(".field:active {"));
}

#[test]
fn a_textarea_grows_with_its_value_and_a_single_line_field_does_not() {
    // A whole-message field is its value, not a window onto it. The growth
    // rule is scoped to the multiline element, so an input or select keeps the
    // one line it has.
    let css = stylesheet(&Emit::default());
    assert!(css.contains("textarea.field {"));
    assert!(css.contains("field-sizing: content;"));
    assert!(css.contains("min-block-size: var(--field-min-lines, 3lh);"));
    // Scoped to the multiline element: one declaration, on `textarea.field`,
    // never the bare `.field` a single-line input and select share.
    assert_eq!(css.matches("field-sizing").count(), 1);
}

#[test]
fn disabled_is_emitted_after_hover_so_source_order_settles_it() {
    // Every one of these selectors is specificity (0,2,0), so nothing but
    // order decides which wins. A disabled button taking the hover fill is
    // the exact bug goingson's `.button:disabled:hover` was written to fix,
    // and the reason it had to reach (0,3,0) to do it.
    let css = interactive_rules("button", Depth::Raised, &Emit::default());
    let hover = css.find(":hover").expect("hover");
    let active = css.find(":active").expect("active");
    let focus = css.find(":focus-visible").expect("focus");
    let disabled = css.find(":disabled").expect("disabled");
    assert!(hover < active && active < focus && focus < disabled);

    // And it restores the surface, or the hover fill survives underneath.
    let tail = &css[disabled..];
    assert!(tail.contains("background: var(--surface-raised)"));
}

#[test]
fn a_flat_control_takes_its_hover_fill_back_when_it_stops_answering() {
    // The same contest one depth over, and the half `depth_declarations`
    // could not state. Flat declares neither axis, so before 0.68.0 the
    // disabled rule won on source order with nothing to say and the hover
    // surface stayed under a control that had stopped answering. Reaches
    // both facet arms and a suggestion entry.
    for depth in [Depth::Flat, Depth::Sunken, Depth::Overlay] {
        let css = disabled_rule("x", depth);
        assert!(css.contains("box-shadow"), "{depth:?}: {css}");
    }
    let flat = disabled_rule("x", Depth::Flat);
    assert!(flat.contains("background: none;"), "{flat}");
    assert!(flat.contains("box-shadow: none;"), "{flat}");

    // Every rule the caller emits states both axes now, so whichever wins
    // the source-order contest leaves nothing of the one below it.
    let css = interactive_rules("x", Depth::Flat, &Emit::default());
    let disabled = css.find(":disabled").expect("disabled");
    assert!(css[disabled..].contains("background: none;"), "{css}");
}

#[test]
fn a_disabled_state_reaches_things_that_cannot_be_disabled() {
    // `:disabled` matches form elements only, and a chip is a div. Keying
    // on the ARIA attribute too is the pattern the invalid field already
    // set: one fact, read by the styling and the accessibility tree alike.
    let css = disabled_rule("chip", Depth::Raised);
    assert!(css.contains(".chip:disabled,"));
    assert!(css.contains(".chip[aria-disabled=\"true\"]"));
    assert!(css.contains("cursor: not-allowed"));
}

#[test]
fn the_focus_ring_does_not_disturb_the_bevel_it_lands_on() {
    // `outline` has its own property, so unlike the invalid ring there is
    // no bevel to restate beside it and nothing to keep in agreement.
    let opts = Emit::default();
    let css = focus_rule("button", Depth::Raised, &opts);
    assert!(css.contains("outline: 2px solid var(--focus-ring)"));
    assert!(!css.contains("box-shadow"), "the ring restated the bevel");
}

#[test]
fn a_well_takes_the_ring_inside_and_a_raised_surface_outside() {
    // One ring, placed by depth. The offset comes off `Depth::bevel` and
    // not off a per-component choice, which is what gave three apps three
    // different rings.
    let opts = Emit::default();
    assert!(focus_rule("field", Depth::Well, &opts).contains("outline-offset: calc(-1 * 2px)"));
    assert!(focus_rule("button", Depth::Raised, &opts).contains("outline-offset: 2px"));
    // Nothing to sit inside of, so it sits outside.
    assert!(focus_rule("badge", Depth::Sunken, &opts).contains("outline-offset: 2px"));

    // And the ring is not the bevel. Reusing border_width emitted a 1px
    // ring that every consumer had already overridden.
    assert_ne!(opts.focus_width, opts.border_width);
}

#[test]
fn hover_is_gated_on_capability_and_the_keyboard_path_is_not() {
    // goingson's section 60 exists only to take back the hover state this
    // crate handed it. Gating at the source is what deletes that section
    // in all three apps rather than having each fight for it.
    let css = stylesheet(&Emit::default());
    let condition = format!("@media {}", Density::Pointer.media_condition());
    assert!(css.contains(&condition));

    // What is gated is every hover state the surfaces carry. The row's
    // actions used to be the other half of this test and are not gated any
    // more, because they are not hidden any more: a rule that reveals
    // nothing needs no capability answer.
    let gated: Vec<&str> = css.lines().filter(|line| line.contains(":hover")).collect();
    assert!(!gated.is_empty(), "{css}");
    for line in gated {
        let indent = line.len() - line.trim_start().len();
        assert!(indent > 4, "an ungated hover rule: {line}");
    }
    assert!(!css.contains(".row:hover"), "{css}");
}

#[test]
fn the_capability_answer_is_asked_for_and_not_assumed() {
    // Both halves come from the crates that own them. If `Affordance`
    // ever says a fingertip has hover, this stops gating on its own.
    assert!(!Affordance::Hover.available(Density::Touch, SizeClass::Compact));
    assert!(Affordance::Hover.available(Density::Pointer, SizeClass::Compact));
    assert_eq!(hover_condition(), Some(Density::Pointer.media_condition()));

    // And the size class passed to that call is not a claim about width.
    assert!(Affordance::Hover.reads_density());
    for size in [SizeClass::Compact, SizeClass::Medium, SizeClass::Expanded] {
        assert!(!Affordance::Hover.available(Density::Touch, size));
    }
}

#[test]
fn hover_resolves_against_the_token_makeover_already_derives() {
    let css = interactive_rules("card", Depth::Raised, &Emit::default());
    assert!(css.contains(".card:hover {"));
    assert!(css.contains("background: var(--hover-surface)"));
    // Not the app's choice, which was --surface-overlay.
    assert!(!css.contains("surface-overlay"));
}

#[test]
fn a_badge_gets_no_edge_and_no_fill() {
    // Decision 2, and the one visible redesign in phase A. Token::Badge is
    // Flat: an edge on a label says it can be pressed.
    let css = token_rules(&Emit::default());
    let badge = css
        .lines()
        .skip_while(|l| !l.starts_with(".badge {"))
        .take_while(|l| !l.starts_with('}'))
        .collect::<Vec<_>>()
        .join("\n");
    // Flat is no bevel, not no box: a chip is a fill inside a hairline edge,
    // wiki `table-model`, and neither says it can be pressed.
    assert!(!badge.contains("box-shadow"), "badge took a bevel: {badge}");
    assert!(
        badge.contains("background: var(--surface-raised);"),
        "{badge}"
    );
    assert!(
        badge.contains("border: 1px solid var(--border);"),
        "{badge}"
    );
    assert_eq!(Token::Badge.depth(false), Depth::Flat);
    assert_eq!(Token::Badge.depth(true), Depth::Flat);
}

#[test]
fn a_badge_carries_a_tone_and_neutral_is_the_bare_class() {
    let css = token_rules(&Emit::default());
    // Neutral is the absence of a status, not a status named "none".
    assert!(css.contains("color: var(--content);"));
    assert!(!css.contains("data-tone=\"content-muted\""));
    for tone in ["info", "success", "warning", "danger"] {
        assert!(
            css.contains(&format!(".badge[data-tone=\"{tone}\"]")),
            "missing tone {tone}"
        );
        // The tone moves to the fill and the edge; the ink stays content,
        // since tone-coloured text measured 1.34:1.
        assert!(css.contains(&format!("background: var(--{tone}-surface);")));
        assert!(css.contains(&format!("border-color: var(--{tone});")));
        let toned = css
            .split(&format!(".badge[data-tone=\"{tone}\"] {{"))
            .nth(1)
            .and_then(|rest| rest.split('}').next())
            .unwrap_or_default();
        assert!(
            !toned.lines().any(|l| l.trim_start().starts_with("color:")),
            "{toned}"
        );
    }
}

#[test]
fn a_chip_is_raised_and_latches_into_a_well() {
    let css = token_rules(&Emit::default());
    assert!(css.contains(".chip {"));
    assert!(css.contains(".chip.latched {"));
    assert!(css.contains(".chip:active {"));
    // The whole difference from a badge: it answers a click.
    assert!(Token::Chip { removable: false }.interactive());
    assert!(!Token::Badge.interactive());
}

#[test]
fn only_a_tab_comes_forward_when_chosen() {
    // The folder semantic. Collapsing the three selectors would lose it.
    let css = selector_rules(&Emit::default());
    assert!(css.contains(".tab.chosen {"));
    assert!(css.contains(".segment.chosen {"));
    assert!(css.contains(".toggle.chosen {"));
    assert_eq!(Selector::Tabs.chosen(), Depth::Raised);
    assert_eq!(Selector::Segmented.chosen(), Depth::Well);
    assert_eq!(Selector::Toggle.chosen(), Depth::Well);

    let tab = css
        .lines()
        .skip_while(|l| !l.starts_with(".tab.chosen {"))
        .take_while(|l| !l.starts_with('}'))
        .collect::<Vec<_>>()
        .join("\n");
    assert!(
        tab.contains("var(--bevel-raised-open)"),
        "tab was held in: {tab}"
    );
    // The join, and not only the coming-forward. A closed bottom run reads as
    // a chip near its pane; these are what make it the front of the pane. The
    // surface is the pane's own, and the pull-down covers the pane's top run
    // where it passes underneath. See `joined_rule`.
    assert!(tab.contains("background: var(--surface-raised)"), "{tab}");
    assert!(tab.contains("margin-block-end:"), "{tab}");

    // The corners are on the BASE class, not on this arm: every tab in a
    // folder strip rounds at the top and stays square at the bottom, chosen or
    // not, because the corners belong to the strip's shape rather than to
    // which option is up. Asserted against the whole sheet for that reason:
    // finding this inside the chosen block would mean it had gone back to
    // being the chosen tab's own property, which is the shape an app's
    // unlayered `.tab` rule beat outright.
    assert!(
        css.contains(
            ".tab {\n    border-radius: var(--radius-control) var(--radius-control) 0 0;\n}"
        ),
        "{css}"
    );

    // A segment and a toggle open nothing, so neither joins anything.
    assert!(!Selector::Segmented.joins_its_pane());
    assert!(!Selector::Toggle.joins_its_pane());
    assert!(Selector::Tabs.joins_its_pane());
}

#[test]
fn a_tab_strip_in_a_measured_menu_run_clips_rather_than_wraps() {
    // The script folds while the strip overflows. A strip that wraps, or that
    // the min-content floor holds at full width, never overflows, so nothing
    // folds and the tabs wrap into rows.
    let css = run_rules(&Emit::default());
    let strip = ".run-menu[data-menu] > [role=\"tablist\"]:not([aria-orientation=\"vertical\"]) {";
    let block = css
        .lines()
        .skip_while(|l| !l.starts_with(strip))
        .take_while(|l| !l.starts_with('}'))
        .collect::<Vec<_>>()
        .join("\n");
    assert!(block.contains("flex-wrap: nowrap"), "{css}");
    assert!(block.contains("min-width: 0"), "{css}");
    assert!(block.contains("overflow-x: clip"), "{css}");
}

#[test]
fn a_vertical_strip_joins_its_pane_on_the_side() {
    // The folder semantic turned a quarter. A tab in a column beside its pane
    // opens toward the pane, so the open run is the inline end, the pull is
    // toward it, and the corners round on the far side. Drawn closed, it read
    // as a raised chip with page colour between it and what it opens.
    let css = selector_rules(&Emit::default());
    let chosen = css
        .lines()
        .skip_while(|l| !l.starts_with("[aria-orientation=\"vertical\"] .tab.chosen {"))
        .take_while(|l| !l.starts_with('}'))
        .collect::<Vec<_>>()
        .join("\n");
    assert!(chosen.contains("var(--bevel-raised-open-side)"), "{chosen}");
    assert!(
        chosen.contains("margin-inline-end: calc(-1 * 1px)"),
        "{chosen}"
    );
    // It stays level with its neighbours: the across strip's pull-down does
    // not apply to a tab in a column.
    assert!(chosen.contains("margin-block-end: 0"), "{chosen}");
    assert!(
        css.contains(
            "[aria-orientation=\"vertical\"] .tab {\n    border-radius: var(--radius-control) 0 0 var(--radius-control);\n}"
        ),
        "{css}"
    );

    // The side-open edge is the open bevel with its shaded run on the bottom
    // and nothing on the right: the lit runs are the raised edge's own.
    let properties = bevel_properties(&Emit::default());
    assert!(
        properties.contains(
            "--bevel-raised-open-side: inset 1px 1px 0 var(--bevel-light), inset 0 -1px 0 var(--bevel-dark);"
        ),
        "{properties}"
    );
}

#[test]
fn a_folded_vertical_strip_joins_its_pane_from_above() {
    // Laid out across its pane, a column of tabs drawn with the side join
    // would open toward nothing. Inside the folded container it takes the
    // across join back.
    let css = selector_rules(&Emit::default());
    let folded = css
        .split_once(&format!(
            "@container {STRIP_CONTAINER} (inline-size < {STRIP_FOLD}) {{\n"
        ))
        .expect("a folded arm")
        .1;
    assert!(
        folded.starts_with(
            "[aria-orientation=\"vertical\"] .tab {\n    border-radius: var(--radius-control) var(--radius-control) 0 0;\n}"
        ),
        "{folded}"
    );
    let chosen = folded
        .lines()
        .skip_while(|l| !l.starts_with("[aria-orientation=\"vertical\"] .tab.chosen {"))
        .take_while(|l| !l.starts_with('}'))
        .collect::<Vec<_>>()
        .join("\n");
    assert!(chosen.contains("var(--bevel-raised-open)"), "{chosen}");
    assert!(chosen.contains("margin-inline-end: 0"), "{chosen}");
    assert!(
        chosen.contains("margin-block-end: calc(-1 * 1px)"),
        "{chosen}"
    );
}

#[test]
fn an_unchosen_tab_recedes_without_looking_picked() {
    let css = selector_rules(&Emit::default());
    // Recessed by colour and given no edge. An edge would make every option
    // look picked; flat would leave the chosen one nothing to come forward
    // from, which is the gap makeover-layout 0.3.0 closed.
    assert!(
        css.contains(".tab {\n    background: var(--surface-sunken);\n}"),
        "unchosen tab is not recessed: {css}"
    );
    assert_eq!(Selector::Tabs.unchosen(), Depth::Sunken);
    assert!(css.contains(".tab:hover {"));
}

#[test]
fn a_segment_stands_up_so_the_chosen_one_can_be_held_in() {
    // The inverse of the tab, and why the three selectors are not one
    // member with a flag.
    let css = selector_rules(&Emit::default());
    assert!(css.contains(".segment {\n    background: var(--surface-raised);"));
    assert_eq!(Selector::Segmented.unchosen(), Depth::Raised);
    assert_eq!(Selector::Segmented.chosen(), Depth::Well);
}

#[test]
fn a_rows_actions_are_shown_at_rest() {
    let css = row_rules(&Emit::default());

    // The hover reveal is gone, and with it every escape it needed. What
    // it hid was hidden from pointer users alone, who are the ones
    // scanning a list to learn what can be done to a row.
    assert!(!css.contains("opacity"), "{css}");
    assert!(!css.contains("pointer-events"), "{css}");
    assert!(!css.contains(":hover"), "{css}");
    assert!(!css.contains(":focus-within"), "{css}");

    // Nor is it hidden any other way. `display: none` would reflow the row
    // and `visibility: hidden` would take the actions out of the focus
    // order; the point is that neither is reached for.
    assert!(!css.contains("display: none"), "{css}");
    assert!(!css.contains("visibility:"), "{css}");
}

#[test]
fn a_figures_tone_is_an_edge_and_never_either_number() {
    // 0.86.0, replacing 0.13.0's delta-or-value split. Both arms of that split
    // painted text in a fill colour: measured on goingson, a toned value read
    // 1.24:1, 1.53:1 and 2.27:1. With neither number taking the tone there is
    // nothing left for `:has` to choose between, so the rule is one again.
    let css = stylesheet(&Emit::default());

    assert!(css.contains(".figure[data-tone=\"success\"] {"), "{css}");
    // No part of a figure is drawn in the tone.
    for part in ["figure-value", "figure-change", "figure-caption"] {
        assert!(
            !css.contains(&format!("[data-tone=\"success\"] > .{part}")),
            "the tone reached .{part}: {css}"
        );
    }
    // And the split it replaced is gone rather than left dangling.
    assert!(!css.contains(":not(:has(> .figure-change))"), "{css}");
}

#[test]
fn the_three_text_parts_take_their_intents_and_actions_inherits() {
    let css = row_rules(&Emit::default());
    assert!(css.contains(".row-primary {\n    color: var(--content);"));
    assert!(css.contains(".row-secondary {\n    color: var(--content-secondary);"));
    assert!(css.contains(".row-meta {\n    color: var(--content-muted);"));
    // Actions carry controls, not text. Pinning the colour it would inherit
    // anyway is louder than saying nothing.
    assert!(!css.contains(".row-actions {\n    color:"));
}

#[test]
fn the_token_strip_takes_no_colour_of_its_own() {
    // makeover-layout 0.9.0. A token carries its own tone, so a colour on
    // the strip would be a rule fighting the things sitting in it, the
    // same reasoning as actions, reached for a different reason.
    let css = row_rules(&Emit::default());
    assert!(!css.contains(".row-tokens {\n    color:"));
}

#[test]
fn an_unknown_row_part_renders_plainly_rather_than_failing_to_build() {
    // What `#[non_exhaustive]` bought and what it cost. `part_class` can no
    // longer be exhaustive, so a member added upstream lands as a bare
    // class with no rule instead of stopping the build. Asserting the
    // fallback exists is what keeps it from being written as `unreachable!`
    // by someone who reads the match as closed.
    assert_eq!(part_class(RowPart::Tokens), "row-tokens");
    assert_eq!(part_class(RowPart::Meta), "row-meta");
}

#[test]
fn a_link_takes_the_action_colour_the_theme_actually_defines() {
    // `--action-primary` shipped here for months and no theme has ever
    // defined it, so every `.link` dropped its colour declaration outright
    // and fell back to inherited text. Nothing caught it because the sheet
    // is valid CSS either way; MNW's no-undefined-token lint is what found
    // it, 2026-08-14. The hover arm two lines below was always `--action-hover`,
    // which is what makes the typo legible in hindsight.
    let css = link_rules(&Emit::default());
    assert!(css.contains("color: var(--action);"));
    assert!(!css.contains("--action-primary"));
    assert!(css.contains("color: var(--action-hover);"));
}

#[test]
fn the_progress_trough_is_a_well() {
    let css = crate::meter::progress_rules(&Emit::default());
    assert!(css.contains(".progress {"));
    assert!(css.contains("box-shadow: var(--bevel-inset)"));
    assert!(css.contains(".progress > .progress-fill {"));
    assert!(css.contains("background: var(--action)"));
    // A bare `.fill` would catch things that have nothing to do with
    // progress once the sheet lands unprefixed.
    assert!(!css.contains("> .fill "));
}

#[test]
fn the_progress_trough_has_a_height_the_fill_fills() {
    // The fill is an empty block. With no block size on the trough the meter
    // drew nothing in any app that had not sized `.progress` itself.
    let css = crate::meter::progress_rules(&Emit::default());
    assert!(
        css.contains(
            ".progress {\n    block-size: var(--meter-block, 0.625rem);\n    overflow: hidden;\n}"
        ),
        "{css}"
    );
    // The width is the division the emitter no longer does, and this is the
    // rule Max's ruling turns on: arithmetic in CSS is fine so long as the
    // renderer EMITS it rather than an app hand-writing it. So the emitted text
    // is asserted whole rather than by a substring that would pass on a rule
    // that had lost its clamp or its divisor guard.
    assert!(
        css.contains(
            ".progress-fill {\n    width: calc(\n        \
             min(var(--meter-done, 0), var(--meter-total, 0))\n        \
             * 100% / max(var(--meter-total, 1), 1)\n    );\n    block-size: 100%;\n}"
        ),
        "{css}"
    );

    // No percentage anywhere in the sheet: a `--meter-fill` here would mean the
    // emitter had gone back to dividing, which is what takes a meter off the
    // residual seam.
    assert!(!css.contains("--meter-fill"), "{css}");

    // `max(..., 1)` is load-bearing and silent when it goes: dividing by zero
    // invalidates the declaration at computed-value time, the width falls to
    // `auto`, and an auto-width block is the whole trough reading as done. An
    // empty set is sayable, so this is reachable rather than defensive.
    assert!(css.contains("max(var(--meter-total, 1), 1)"), "{css}");
}

#[test]
fn a_progress_bar_can_carry_a_tone_and_defaults_to_action() {
    let css = crate::meter::progress_rules(&Emit::default());
    // Untoned is --action, not Tone::Neutral's content-muted: a bar with no
    // status is still reporting progress, and muted would read as disabled.
    assert!(css.contains(".progress > .progress-fill {\n    background: var(--action);"));
    assert!(!css.contains("progress-fill {\n    color: var(--content-muted)"));
    for tone in ["info", "success", "warning", "danger"] {
        assert!(
            css.contains(&format!(".progress > .progress-fill[data-tone=\"{tone}\"]")),
            "missing progress tone {tone}"
        );
    }
    // goingson's two live cases, which is why the tones are emitted at all.
    assert!(css.contains("[data-tone=\"success\"] {\n    background: var(--success);"));
    assert!(css.contains("[data-tone=\"danger\"] {\n    background: var(--danger);"));
}

#[test]
fn no_scrollbar_track_is_emitted() {
    // Decision 3's negative half. It was on the phase A list and came off;
    // this is what stops it drifting back in.
    let css = stylesheet(&Emit::default());
    assert!(!css.contains("scrollbar"));
    assert!(!css.contains("::-webkit"));
}

#[test]
fn an_invalid_field_is_ringed_without_being_lit() {
    let css = surface_rules(&Emit::default());
    assert!(css.contains(".field {"));
    // The ARIA attribute, not a class: one fact, read by both the visual
    // and the accessible state, so they cannot drift.
    assert!(css.contains(".field[aria-invalid=\"true\"] {"));
    assert!(!css.contains(".field.invalid"));
    // A flat ring: this edge says "wrong", and a two-tone bevel would have
    // it say "raised" at the same time.
    assert!(css.contains("0 0 0 1px var(--danger)"));
}

#[test]
fn only_the_control_that_commits_wears_the_default_ring() {
    // The committing act, drawn: a flush frame outside the bevel in the frame
    // colour, and a bold label, on the control that commits and nothing else.
    let css = surface_rules(&Emit::default());
    assert!(css.contains(".button[data-commits] {"), "{css}");
    assert!(css.contains("calc(2 * 1px) var(--border-strong)"), "{css}");
    assert!(css.contains("font-weight: bold"), "{css}");
    // Pressed keeps the ring and inverts only the bevel.
    assert!(css.contains(".button[data-commits]:active {"), "{css}");
    // The plain button carries no ring at all.
    let plain = css
        .split(".button {")
        .nth(1)
        .and_then(|rest| rest.split('}').next())
        .unwrap_or_default();
    assert!(!plain.contains("--border-strong"), "{plain}");
}

#[test]
fn an_invalid_field_keeps_the_well_underneath_it() {
    // box-shadow is not additive. A lone ring replaces the bevel and drops
    // the well out from under the field, which is what this emitted before
    // 0.5.0 and is the whole reason the rule composes.
    let css = surface_rules(&Emit::default());
    let invalid = css
        .lines()
        .skip_while(|l| !l.starts_with(".field[aria-invalid"))
        .take_while(|l| !l.starts_with('}'))
        .collect::<Vec<_>>()
        .join("\n");
    assert!(
        invalid.contains("var(--bevel-inset)"),
        "the well was dropped: {invalid}"
    );
    assert!(invalid.contains("var(--danger)"));
}

#[test]
fn a_file_fields_own_button_is_drawn_as_a_button() {
    // Without it the platform's control sat inside a themed well. Raised at
    // rest, pressed on press, and no focus ring of its own: the input holds the
    // focus and the field's ring draws it.
    let css = surface_rules(&Emit::default());
    let chooser = css
        .split(".field::file-selector-button {")
        .nth(1)
        .and_then(|rest| rest.split('}').next())
        .unwrap_or_default();
    assert!(chooser.contains("var(--bevel-raised)"), "{css}");
    assert!(
        css.contains(".field::file-selector-button:hover {"),
        "{css}"
    );
    assert!(
        css.contains(".field::file-selector-button:active {"),
        "{css}"
    );
    assert!(
        !css.contains(".field::file-selector-button:focus-visible"),
        "{css}"
    );
}

#[test]
fn button_and_card_come_out_identical_by_construction() {
    // The duplication phase A deletes. They are the same composition, so
    // the only honest way to emit both is from one call.
    let opts = Emit::default();
    let css = surface_rules(&opts);
    assert_eq!(
        depth_declarations(Depth::Raised),
        depth_declarations(Depth::Raised)
    );
    assert!(css.contains(".button {"));
    assert!(css.contains(".card {"));
    let pressable = pressable_card("card");
    assert_eq!(
        interactive_rules("button", Depth::Raised, &Emit::default()).replace("button", &pressable),
        interactive_rules(&pressable, Depth::Raised, &Emit::default())
    );
}

#[test]
fn a_prefix_reaches_the_component_classes_too() {
    let opts = Emit {
        class_prefix: "mo-",
        ..Emit::default()
    };
    let css = stylesheet(&opts);
    for name in [
        "mo-button",
        "mo-card",
        "mo-field",
        "mo-badge",
        "mo-chip",
        "mo-tab",
        "mo-row-primary",
        "mo-progress",
        "mo-progress-fill",
    ] {
        assert!(css.contains(&format!(".{name}")), "unprefixed: {name}");
    }
    // The bare names must be gone entirely, or a prefixed build still
    // collides with the app's own stylesheet.
    assert!(!css.contains(".button {"));
    assert!(!css.contains(".card {"));
    assert!(!css.contains(".badge {"));
}

#[test]
fn the_class_a_renderer_puts_on_an_option_is_the_one_the_rules_key_off() {
    // `option_class` is the contract a screen renderer writes markup
    // against, and the rules below are the other half of it. They come off
    // one mapping now, so this asserts the mapping is the one that reaches
    // the stylesheet rather than that two lists still agree.
    let css = stylesheet(&Emit::default());
    for selector in [Selector::Tabs, Selector::Segmented, Selector::Toggle] {
        let name = option_class(selector);
        assert!(css.contains(&format!(".{name} {{")), "{name}: {css}");
        assert!(css.contains(&format!(".{name}.chosen {{")), "{name}: {css}");
    }
    assert_eq!(option_class(Selector::Tabs), "tab");
}

#[test]
fn the_caret_brings_its_own_gap_and_is_the_glyph_the_description_names() {
    let css = stylesheet(&Emit::default());

    // The space is inside the glyph, which is what the other two renderers
    // write. Emitted bare, every consumer has to add it back, and the
    // obvious way to add it, `content` in an app stylesheet, which is
    // unlayered and so outranks this sheet, deletes the caret instead.
    assert!(css.contains("content: \" \\25B2\";"), "{css}");
    assert!(css.contains("content: \" \\25BC\";"), "{css}");
    assert!(!css.contains("content: \"\\2"), "{css}");

    // The arrows this renderer used to draw alone are gone. Composition
    // rather than agreement: the glyph comes from `Sort::glyph`, so a
    // fourth spelling cannot appear here without appearing everywhere.
    assert!(!css.contains("2191") && !css.contains("2193"), "{css}");
    assert!(css.contains(&css_escape(Sort::Ascending.glyph())), "{css}");

    // Three states, three tones. An idle sortable heading draws its caret
    // now rather than reserving a hidden box for it, so there is no
    // visibility to order and no reflow left to guard against; what
    // separates the states is the colour, and the sorted arms come after
    // the idle one because the specificity is the same.
    let idle = css
        .find(".table-heading[data-sortable] > .cell-in::after")
        .expect("the idle caret is emitted");
    let sorted = css
        .find(".table-heading[aria-sort=\"ascending\"] > .cell-in::after")
        .expect("the ascending caret is emitted");
    assert!(idle < sorted, "{css}");
    assert!(
        css[idle..sorted].contains("color: var(--content-secondary);"),
        "{css}"
    );
    assert!(css[sorted..].contains("color: var(--content);"), "{css}");
    // No caret hides; the one `visibility: hidden` in the sheet is a column
    // under its floor, and it is not a heading's pseudo-element.
    assert!(!css[idle..].contains("::after {\n    visibility"), "{css}");
}

#[test]
fn a_destructive_button_has_somewhere_for_its_tone_to_land() {
    let css = component_rules(&Emit::default());

    for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
        assert!(
            css.contains(&format!(".button[data-tone=\"{}\"]", tone.token())),
            "{css}"
        );
    }
    // A tint and never the ink, wiki `table-model`. This asserted the exact
    // opposite until 0.86.0, on a reading of "a red surface is the app's
    // decision" that was written against a saturated fill and got applied to
    // the 12-percent tint as well. The tone as ink measured 3.36:1 for danger
    // and 1.84:1 for success.
    assert!(css.contains("background: var(--danger-surface);"), "{css}");
    assert!(
        !css.contains(".button[data-tone=\"danger\"] {\n    color:")
            && !css.contains(".button[data-tone=\"danger\"] {\n        color:"),
        "the tone is painting the label: {css}"
    );
    // And it still answers a pointer. The plain `:hover` is equally specific
    // and sits earlier, so the tinted rule would otherwise swallow it.
    for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
        assert!(
            css.contains(&format!(".button[data-tone=\"{0}\"]:hover", tone.token()))
                && css.contains(&format!(
                    "var(--{}-surface-hover, var(--hover-surface))",
                    tone.token()
                )),
            "{css}"
        );
    }
}

#[test]
fn the_table_model_is_scoped_to_the_table_but_the_caret_is_not() {
    // The model is what a cell takes by being in a table. The sort caret and
    // the sortable cursor are what a heading takes by being sortable, wherever
    // it is. Scoping the one and not the other is what separates them.
    let css = component_rules(&Emit::default());

    assert!(
        css.contains(".table .table-heading,\n.table .cell {\n    display: flex;"),
        "{css}"
    );
    assert!(
        !css.contains("\n.table-heading,\n.cell {"),
        "the table model is unscoped: {css}"
    );

    let states = state_rules(&Emit::default());
    assert!(
        states.contains(".table-heading[aria-sort"),
        "the caret got scoped along with the model: {states}"
    );
}

#[test]
fn a_figure_value_is_the_thing_itself_and_a_badge_is_quiet() {
    // Both used to read `Tone::Neutral.token()`, which answered
    // `content-muted`, so the headline number sat at the colour of its own
    // caption. Neutral answers `content` now; each site states its own
    // claim rather than borrowing one from the status axis.
    let css = component_rules(&Emit::default());

    assert!(
        css.contains(
            ".figure > .figure-value {\n    color: var(--content);\n    font-weight: bold;"
        ),
        "{css}"
    );
    assert!(
        css.contains(".figure > .figure-caption {\n    color: var(--content-muted);"),
        "{css}"
    );
    // A badge is a chip in the theme's ink now, wiki `table-model`: what makes
    // it quiet is the chip, not pale text.
    assert!(
        !css.contains(".badge {\n    color: var(--content-muted);"),
        "{css}"
    );
}

#[test]
fn a_described_list_is_not_a_bulleted_list() {
    let css = component_rules(&Emit::default());
    assert!(css.contains(".list {\n    list-style: none;"), "{css}");
}

#[test]
fn a_table_lays_itself_out_without_being_told_its_columns() {
    // A described table's columns are known at render time, so anything the
    // stylesheet has to be told about them would have to travel with the
    // markup. Flex rows need nothing per table: each column carries its own
    // floor and worth as classes the sheet already has rules for.
    let css = component_rules(&Emit::default());

    assert!(
        css.contains(".table .table-head,\n.table .table-row {\n    display: flex;"),
        "{css}"
    );
    assert!(css.contains("container-type: inline-size;"), "{css}");
    assert!(!css.contains("display: table"), "{css}");
    // Asked of the table's own rules rather than the whole sheet since 0.87.0,
    // when the definition list arrived and is legitimately a grid. The claim
    // here was never "this sheet has no grid in it", it is that a flex table
    // needs no track list, because each column carries its own floor.
    //
    // A table holding code is the one grid, and its single track is the rows'
    // shared width, not a column: every row as wide as the widest line.
    for rule in css.split("}\n") {
        if rule.contains(".table") && !rule.contains(":has(.kind-code)") {
            assert!(!rule.contains("grid-template-columns"), "{rule}");
        }
    }
}

#[test]
fn a_column_under_its_floor_shows_whole_or_blank_at_both_densities() {
    // The container condition cannot read `--gap-group`, so the edges are
    // written in: the pointer gap bare, and the wider touch gap under the touch
    // condition. A rung missing from either would let a column show a
    // fragment at that density.
    let css = component_rules(&Emit::default());
    let touch = css
        .find(&format!("@media {}", Density::Touch.media_condition()))
        .expect("a touch block");
    let (pointer, touched) = css.split_at(touch);
    // A floor of 8ch is 4.5rem, and a column hides once it has lost one gap
    // of it: 0.625rem at pointer density, 0.75rem at touch.
    assert!(
        pointer.contains("@container (inline-size < 5.125rem)"),
        "{pointer}"
    );
    assert!(
        touched.contains("@container (inline-size < 5.25rem)"),
        "{touched}"
    );
    // The basis and the condition are the same unit, or a column hides at one
    // width while being sized at another.
    assert!(
        css.contains(".table .min-8 {\n    flex-basis: var(--table-stacked, calc(4.5rem + 2 * var(--gap-group)))"),
        "{css}"
    );
    assert!(!css.contains("ch +"), "a font-relative floor: {css}");
    assert!(
        css.contains(
            ".table :is(.cell-drops-first, .cell-drops-next).min-8 > .cell-in {\n        visibility: hidden;\n        max-block-size: 0;\n        overflow: hidden;"
        ),
        "{css}"
    );
    // Blank takes no height, since hidden text still wraps one word a line in a
    // column narrowed toward nothing; and it says so without `display`, which
    // an app's own `.cell-in` layout would outrank.
    assert!(!css.contains(".cell-in {\n        display"), "{css}");
    // An essential column is never hidden, only narrowed.
    assert!(!css.contains(".cell-keeps.min-"), "{css}");
    // And an essential column that fills truncates on one line under its floor,
    // at both densities, rather than breaking at every letter as a word too
    // long for it may.
    // Matched without its indentation, which the touch block nests one level
    // deeper under its media condition.
    for block in [pointer, touched] {
        let rule = block
            .split_once(".table .cell-keeps.cell-fill.min-16 > .cell-in {")
            .unwrap_or_else(|| panic!("no truncation rung: {block}"))
            .1;
        let rule = &rule[..rule.find('}').expect("the rule closes")];
        assert!(rule.contains("white-space: nowrap;"), "{rule}");
        assert!(rule.contains("overflow-wrap: normal;"), "{rule}");
    }
}

#[test]
fn a_control_in_a_cell_is_not_painted_as_text() {
    // The point of makeover-layout 0.14.0's CellPart, and the table-side
    // twin of `the_three_text_parts_take_their_intents_and_actions_inherits`
    // above. One `.cell` and one content colour meant a button in a cell
    // inherited it.
    let css = table_rules(&Emit::default());

    assert!(
        css.contains(".cell-value {\n    color: var(--content);"),
        "{css}"
    );
    assert!(!css.contains(".cell-actions {\n    color:"), "{css}");
    assert!(!css.contains(".cell-tokens {\n    color:"), "{css}");

    // A link is its row's title. Left unruled it drew in the browser's blue,
    // because nothing it sits in carries a colour for it to inherit.
    assert!(
        css.contains(".cell-link {\n    color: var(--content);\n    text-decoration: none;\n}"),
        "{css}"
    );

    // The colour is on the part that is text, never on the container. On
    // `.cell` it would cascade into the three parts that are not text,
    // which is the bug written as one rule.
    assert!(!css.contains(".cell {\n    color:"), "{css}");
}

#[test]
fn a_part_after_another_in_a_cell_keeps_a_gap_from_it() {
    // Two text parts in one cell met edge to edge and read as one word
    // ("StemsMatched 3 of 5"). The gap a token or action kept from the part
    // before it now holds for every part after the first, so a value after a
    // value or a link after a value reads apart. The sizer is exempt: it is a
    // block of its own above the run.
    let css = component_rules(&Emit::default());
    assert!(
        css.contains(
            ".cell-in > :not(.cell-sizer) + * {\n    margin-inline-start: var(--gap-bound);\n}"
        ),
        "{css}"
    );
}

#[test]
fn an_unknown_cell_part_renders_plainly_rather_than_failing_to_build() {
    // `part_class`'s obligation, taken on for the table side too. CellPart
    // is `#[non_exhaustive]`, so a member added upstream must land as a
    // bare class rather than as a build that stops.
    assert_eq!(cell_part_class(CellPart::Value), "cell-value");
    assert_eq!(cell_part_class(CellPart::Actions), "cell-actions");
}

#[test]
fn a_table_draws_the_ruled_model_from_tokens() {
    // wiki `table-model`: specimen C with D's header strip. Every colour is a
    // makeover token and every size a geometry one, so the renderer owns the
    // look and no app sheet has to restate it.
    let css = component_rules(&Emit::default());
    for rule in [
        "border: 1px solid var(--row-rule);",
        "background: var(--surface-raised);",
        "height: var(--row-block);",
        "color: var(--content-secondary);",
        "background: var(--surface-sunken);",
        "border-bottom: 1px solid var(--bevel-dark);",
        "border-top: 1px solid var(--row-rule);",
        "background: var(--row-hover);",
    ] {
        assert!(css.contains(rule), "missing `{rule}`: {css}");
    }
}

#[test]
fn a_column_kind_carries_its_look_and_prose_needs_no_class() {
    use crate::list::{KIND_CLASSES, kind_class};
    use makeover_layout::ColumnKind;

    let opts = Emit::default();
    assert_eq!(kind_class(ColumnKind::Date), Some("kind-date"));
    assert_eq!(kind_class(ColumnKind::Text), None);

    let css = component_rules(&opts);
    for name in KIND_CLASSES {
        assert!(
            css.contains(&format!(".{name} > .cell-in {{")) || css.contains(&format!(".{name} {{")),
            "no rule for {name}: {css}"
        );
    }
    // A heading takes the alignment; only a cell takes the face and figures.
    // Both go on the wrapper, so the column itself keeps the table's `ch`.
    assert!(css.contains(
        ".table .kind-number > .cell-in {\n    white-space: nowrap;\n    text-align: var(--table-stacked, end) var(--table-grid, start);"
    ));
    assert!(
        css.contains(
            ".table .cell.kind-identifier > .cell-in {\n    font-family: var(--font-mono);"
        )
    );
    assert!(!css.contains(".table .kind-code {"), "{css}");
    // A table holding code keeps its frame, drops the record treatment and
    // scrolls rather than clipping a line.
    assert!(
        css.contains(".table:has(.kind-code) .table-row {\n    min-height: auto;"),
        "{css}"
    );
    // Only a code table scrolls: a prose table stacks before it overflows.
    assert!(
        css.contains(".table:has(.kind-code) {\n    overflow-x: auto;"),
        "the code table does not scroll: {css}"
    );
    assert!(css.contains(".table {\n"), "{css}");
}

#[test]
fn a_column_drops_by_its_priority_and_never_by_its_position() {
    let css = component_rules(&Emit::default());

    // Priority is a shrink factor, weakest giving way first by three orders of
    // magnitude, and no breakpoint decides it.
    assert!(
        css.contains(".table .cell-drops-first {\n    flex-shrink: 1000000;"),
        "{css}"
    );
    assert!(
        css.contains(".table .cell-drops-next {\n    flex-shrink: 1000;"),
        "{css}"
    );
    for size in [SizeClass::Compact, SizeClass::Medium] {
        let query = format!("@media {}", size.media_condition());
        assert!(
            !css.contains(&format!("{query} {{\n    .table .cell-drops")),
            "a column still drops at a viewport width: {css}"
        );
    }

    // A shrink factor has to outrank the cell's own `flex`, which is scoped
    // under the table at (0,2,0). Bare, at (0,1,0), it would lose everywhere;
    // scoped the same way, it comes later and wins.
    assert!(
        css.find(".table .table-heading,\n.table .cell {") < css.find(".table .cell-drops-first"),
        "a drop must come after the cell rule it overrides: {css}"
    );
    for line in css.lines() {
        let selector = line.trim().trim_end_matches([',', '{']).trim();
        assert!(
            !selector.starts_with(".cell-drops-"),
            "an unscoped drop loses to .table .cell: {line}"
        );
    }

    // An essential column holds its floor, whatever it holds. Until 0.94.0 this
    // was keyed on a four-kind whitelist, so an essential text, identifier or
    // code column had a floor computed and then ignored: nothing set its shrink
    // to zero and the blanking condition reaches only droppable columns, so the
    // browser took the entire shortfall from it.
    assert!(
        css.contains(".table .cell-keeps {\n    flex-shrink: 0;"),
        "{css}"
    );
    // And the whitelist is gone rather than merely widened: a kind must not
    // decide whether a floor binds.
    assert!(
        !css.contains(".table .cell-keeps:is(.kind-"),
        "a kind still gates the floor: {css}"
    );

    // And nothing is addressed by counting. `nth-child` over columns is the
    // bug the priority vocabulary exists to end, and the one count the sheet
    // had, the row stripe, went with `row-stripe` in makeover 5.
    //
    // Tables only. A chart counts its bars to thin their labels, which addresses
    // no column and drops nothing: every bar is still drawn.
    let counted: Vec<&str> = css
        .lines()
        .filter(|l| l.contains("nth-child") && !l.contains(".chart-"))
        .collect();
    assert!(counted.is_empty(), "a table rule counts: {counted:?}");
}

/// A table clips at its own frame, and only a code table scrolls.
///
/// A prose table that runs out of room stacks into records, so it never needs a
/// scroller, and a scroller would hold its head: a sticky head sticks to the
/// nearest scroll container, and a table that is one never scrolls vertically.
/// `clip` keeps the page from scrolling sideways without making the table a
/// scroller. A code table cannot narrow a line, so it scrolls inside its frame.
/// The rows carry `max-content` so the header strip and the hairlines span the
/// scrolled width instead of stopping at the fold.
#[test]
fn a_table_that_cannot_fit_scrolls_inside_its_own_frame() {
    let css = component_rules(&Emit::default());

    let frame = css
        .split_once(".table {")
        .expect("the table frame rule")
        .1
        .split_once('}')
        .expect("the table frame rule closes")
        .0;
    assert!(
        frame.contains("overflow-x: clip;"),
        "a prose table is a scroll container, which holds its head: {frame}"
    );
    assert!(
        css.contains(".table:has(.kind-code) {\n    overflow-x: auto;\n}"),
        "a code table does not scroll: {css}"
    );

    assert!(
        css.contains(".table .table-head,\n.table .table-row {\n    display: flex;\n    min-inline-size: var(--table-stacked, max-content) var(--table-grid, 0);"),
        "{css}"
    );

    // On the table and not on an ancestor: a scroller further out would take
    // the whole page sideways, which is the thing every width rule here exists
    // to prevent.
    for line in css.lines() {
        let trimmed = line.trim();
        assert!(
            !trimmed.starts_with("body {") && !trimmed.starts_with("html {"),
            "a page-level rule sits in the component sheet: {line}"
        );
    }
}

#[test]
fn a_kept_column_holding_a_sizer_is_as_wide_as_its_copies() {
    let css = component_rules(&Emit::default());

    // Keyed on the sizer, so a table written by hand without one keeps its
    // floor, and never on a droppable column, which has to stay a container to
    // blank.
    assert!(
        css.contains(
            ".table .cell-keeps:has(> .cell-in > .cell-sizer) {\n    flex-basis: auto;\n    container-type: normal;"
        ),
        "{css}"
    );
    assert!(!css.contains("drops-first:has"), "{css}");
    assert!(!css.contains("drops-next:has"), "{css}");

    // The copies take no room and no ink, and they are set in the rows' type
    // even inside a heading.
    let body = css
        .split(".table .cell-sizer {")
        .nth(1)
        .and_then(|rest| rest.split('}').next())
        .expect("a sizer rule");
    for rule in [
        "block-size: 0;",
        "visibility: hidden;",
        "white-space: nowrap;",
        "font-size: var(--text-note);",
        "font-weight: normal;",
        "letter-spacing: normal;",
        "text-transform: none;",
    ] {
        assert!(body.contains(rule), "{rule}: {body}");
    }
    assert!(
        css.contains("background: var(--surface-raised);\n    font-size: var(--text-note);"),
        "the table and its copies share one size: {css}"
    );
}

#[test]
fn a_track_places_by_custom_property_and_never_by_a_size() {
    let css = track_rules(&Emit::default());

    // Placement arrives from the caller, computed once by Track::fraction.
    // If either of these becomes a literal, three renderers have started
    // disagreeing about where 09:30 is.
    assert!(css.contains("top: var(--track-at"), "{css}");
    assert!(css.contains("height: var(--track-for"), "{css}");

    // Overlap lanes default so an entry naming neither is full width.
    assert!(css.contains("--track-lane, 0"), "{css}");
    assert!(css.contains("--track-lanes, 1"), "{css}");

    // The refusal that matters. A slot height here would be this crate
    // deciding how tall a quarter of an hour is, which is the thing
    // makeover-geometry owns and the reason `.track` gets no height at all.
    assert!(!css.contains("height: var(--track-slot"), "{css}");
    for size in ["px", "rem", "em", "vh"] {
        let bare = css
            .lines()
            .filter(|l| !l.contains("var(--"))
            .any(|l| l.contains(size));
        assert!(!bare, "track_rules named a {size} outside a var(): {css}");
    }
}

#[test]
fn a_relaxed_part_clamps_and_a_tight_one_says_nothing() {
    let css = stylesheet(&Emit::default());
    assert!(css.contains(".row-relaxed {"));
}

/// The done condition: a row carrying a level indents in a browser with no
/// app-authored CSS.
///
/// quasi-webview emits `row-nested` with `--row-depth` on every described
/// hierarchy. Without a rule reading it, a described outline is a flat list
/// with chevrons in it.
#[test]
fn a_nested_row_indents_by_its_level_and_an_app_can_say_what_a_level_is_worth() {
    let css = stylesheet(&Emit::default());

    assert!(css.contains(".row-nested {"), "{css}");
    assert!(
        css.contains("padding-inline-start: calc(var(--row-depth, 0) * var(--row-indent, 1.5ch));"),
        "{css}"
    );
    // The magnitude is a custom property with a fallback, which is
    // `--awaiting-gap`'s shape: what a level IS stays the description's and
    // what it is WORTH is this renderer's, overridable by an app. Padding
    // rather than margin, so the indent is inside the box a selection
    // shades.
    assert!(
        !css.contains("margin-inline-start: calc(var(--row-depth"),
        "{css}"
    );

    // The branch and its chevron, emitted and unstyled for the same reason.
    assert!(css.contains(".row-branch {"), "{css}");
    assert!(css.contains(".row-disclose {"), "{css}");

    for name in ["row-nested", "row-branch", "row-disclose"] {
        assert!(
            crate::vocabulary::names(&Emit::default()).contains(name),
            "{name} is declared"
        );
    }
    assert!(css.contains("-webkit-line-clamp: 2;"));
    // The count is `Flow`'s, not this crate's. If the tier ever means three
    // lines, this fails here rather than in an app.
    assert!(css.contains(&format!("line-clamp: {};", Flow::Relaxed.lines())));
    // Tight gets no rule at all: one line is what a run already does, and a
    // class per part saying so is a declaration that changes nothing.
    assert!(!css.contains("row-tight"));
    assert_eq!(crate::list::flow_class(Flow::Relaxed), Some("row-relaxed"));
    assert_eq!(crate::list::flow_class(Flow::Tight), None);
    // Emitted, therefore checkable: an app's dead-vocabulary seal and the
    // overlap check both read `vocabulary::names`, so a class the renderer
    // can write and that list does not carry is invisible to both.
    assert!(crate::vocabulary::names(&Emit::default()).contains("row-relaxed"));
}

#[test]
fn the_two_kinds_of_wait_stop_rendering_identically() {
    // The state `d43ea1c5` fixes: the emitter had been writing
    // `data-awaiting` for months and nothing styled either value, so a
    // measured wait and an unmeasured one drew the same nothing.
    let css = stylesheet(&Emit::default());
    assert!(css.contains("[data-awaiting]::after"), "{css}");
    assert!(
        css.contains("[data-awaiting][aria-busy=\"true\"]::after"),
        "the mark is drawn only while something is actually waiting"
    );
    assert!(
        css.contains("[data-awaiting=\"determinate\"][aria-busy=\"true\"]::after"),
        "the measured half is its own drawing"
    );
}

#[test]
fn the_blink_takes_its_cadence_and_never_names_one() {
    // Three renderers draw this mark. A number written here would be a
    // second heartbeat for one wait.
    let css = stylesheet(&Emit::default());
    assert!(
        css.contains("calc(var(--cadence-activity) * 2)"),
        "a half-period doubled, not a literal"
    );
    assert!(!css.contains("500ms"), "{css}");
}

#[test]
fn a_bar_nobody_is_counting_is_empty_rather_than_full() {
    // Rule 1. The share defaults to zero, so a determinate control with no
    // binder watching bytes draws a trough. A default of 1 would be the
    // confidently-wrong drawing the rule exists to forbid.
    let css = stylesheet(&Emit::default());
    assert!(css.contains("var(--awaiting-share, 0)"), "{css}");
}

#[test]
fn motion_off_leaves_the_mark_lit_because_the_keyframes_do_the_dimming() {
    // `makeover_timing::reduced_motion_css` sets `--cadence-activity: 0ms`,
    // and a zero-length animation leaves the element in its base style
    // rather than at its last keyframe. So the base has to be the lit one.
    // The inverted spelling would blank the mark for a reader who asked for
    // less motion, which answers a request nobody made.
    let css = stylesheet(&Emit::default());
    let busy = css
        .split("[data-awaiting][aria-busy=\"true\"]::after {")
        .nth(1)
        .expect("the busy rule");
    let busy = busy.split('}').next().expect("its body");
    assert!(
        busy.contains("background: var(--action);"),
        "the base state is lit: {busy}"
    );
}

#[test]
fn the_whole_sheet_still_names_every_colour() {
    // The crate's founding property, asserted over the component layer and
    // not only the primitives.
    let css = stylesheet(&Emit::default());
    assert!(!css.contains('#'));
    assert!(!css.contains("rgb"));
    for line in css.lines() {
        // Declarations only: a selector or an at-rule can carry a colon of
        // its own (`:root`, `:hover`, `@media (hover: hover)`) and declares
        // nothing. Keyed on the trailing semicolon rather than on leading
        // indentation, which only ever worked as a proxy for nesting depth
        // and stopped when the sheet gained a cascade layer around it.
        let trimmed = line.trim();
        if !trimmed.ends_with(';') {
            continue;
        }
        let Some((_, value)) = trimmed.split_once(": ") else {
            continue;
        };
        if value.contains("var(--") {
            continue;
        }
        // Everything left has to be a keyword, a number or a
        // caller-supplied length, never a colour.
        //
        // The length arm is what the comment above always claimed and the
        // list never covered: `border_width` arrives from `Emit` and lands
        // bare in the focus ring's offset, where the bevel had only ever
        // used it inside an `inset` shadow.
        let opts = Emit::default();
        assert!(
            value.contains("inset")
                || value.contains(opts.border_width)
                || value.contains(opts.focus_width)
                || value.contains(opts.target_min)
                // 0.12.0's two: a sortable header is a control and says so
                // with the pointer, and the caret is this renderer's own
                // expression of `aria-sort`. Neither is a colour, which is
                // what this test is actually about, and neither is a size,
                // which is the other thing this crate must not name. The
                // leading space inside the glyph is the same thing the other
                // two renderers write into theirs, so it is part of the
                // caret rather than spacing this crate decided on.
                || value
                    .trim_start_matches('"')
                    .trim_start()
                    .starts_with("\\2")
                || matches!(
                    value.trim_end_matches(';'),
                    "0" | "1"
                        // The wait's mark and bar, 0.60.0. An empty
                        // `content` is what brings a pseudo-element into
                        // existence with nothing in it, and `step-end`
                        // is an easing: the blink is two states, not a
                        // slide between them. Neither is a colour, and
                        // neither is a magnitude.
                        | "\"\""
                        // `field-sizing`'s growth mode: a multiline field
                        // tracks its value. A keyword, not a colour or a
                        // magnitude.
                        | "content"
                        // Where the mark sits on the line it joins.
                        // Alignment is structure, the same way `display`
                        // is, and `baseline` is the initial value said out
                        // loud so a host stylesheet cannot leave it
                        // wherever an earlier rule put it.
                        | "baseline"
                        // A thinned chart's kept label starts at its own
                        // bar and runs on over the blank ones after it.
                        | "flex-start"
                        | "inline-block"
                        | "none"
                        | "auto"
                        | "not-allowed"
                        | "pointer"
                        // The caret's reserved box. Visibility is presence,
                        // not magnitude and not colour.
                        | "hidden"
                        | "visible"
                        // A measured tab strip's overflow: cut off across
                        // so the script can count what does not fit.
                        | "clip"
                        // The link's two signals. `underline` is a line and
                        // `inherit` defers to whatever the app set, so
                        // neither names a colour or a magnitude.
                        | "underline"
                        | "inherit"
                        // The table frame. `display` is structure and not a
                        // size; `nowrap` is what makes a content column
                        // content. The two widths are the awkward pair and
                        // they are still not sizes: `100%` is "all of
                        // whatever you were given" and `1%` is the CSS
                        // table idiom for "shrink to fit", which is a
                        // behaviour spelled as a number because CSS has no
                        // keyword for it. Neither names a magnitude, which
                        // is the thing this crate leaves to
                        // makeover-geometry.
                        // The flex table, 0.81.0. A column's grow and shrink
                        // are proportions rather than lengths: `1000000` and
                        // `1000` are how much more an optional or secondary
                        // column gives up than an essential one, and say
                        // nothing about how wide anything is. `inline-size`
                        // is what a cell asks of itself, which is structure.
                        // The floors are `ch`, and never reach this arm
                        // without a `var(--gap-group)` beside them.
                        | "1 1 auto"
                        | "1 0 auto"
                        | "1000000"
                        | "1000"
                        | "inline-size"
                        // A short table, 0.98.1: the table names itself as
                        // the container its rows ask, and a space toggle is
                        // a custom property set to nothing. Neither is a
                        // colour or a magnitude.
                        | "table-frame / inline-size"
                        | ""
                        | "initial"
                        // A stacked record's line break, 0.106.1: an order
                        // is a place among a row's cells, not a magnitude.
                        | "-1"
                        // A code table's one track: every row as wide as the
                        // widest line or the frame. `100%`'s argument and
                        // `max-content`'s, together.
                        | "minmax(100%, max-content)"
                        // A tick's two tracks: the box as wide as it draws,
                        // and the rest for its words. `1fr`'s argument above.
                        | "auto 1fr"
                        // The table model's frame and header, 0.78.0: how the
                        // header's weight and case read. Typeface keywords,
                        // none of them a magnitude.
                        // A column's kind and the chip: how a cell's text
                        // breaks, how its figures and edge align, and the
                        // chip's box. Keywords, none of them a magnitude.
                        // The definition list, 0.87.0. `grid` is structure
                        // the same way `flex` and `inline-flex` are. The
                        // tracks are the one that wants arguing: `max-content`
                        // is not a magnitude, it is "as wide as the widest
                        // thing in this column", which is the whole member:
                        // only the set knows it, and a number here would be
                        // this crate guessing how long a label is. `1fr` is
                        // the remainder, which is `100%`'s argument again.
                        | "grid"
                        | "max-content 1fr"
                        // A unit's group, 0.94.2: the control's track hugs
                        // the control, the unit starts right after it, and
                        // the other parts span both tracks. Track arithmetic, not a
                        // size: nothing here says how wide anything is.
                        | "auto minmax(0, 1fr)"
                        | "1 / -1"
                        | "anywhere"
                        | "tabular-nums"
                        | "end"
                        | "pre"
                        | "inline-flex"
                        | "normal"
                        | "start"
                        | "middle"
                        | "bottom"
                        | "bold"
                        | "uppercase"
                        | "nowrap"
                        | "100%"
                        | "1%"
                        // The time axis, 0.42.0. `position` is the one
                        // property whose whole job is where a thing sits,
                        // which is exactly what this crate spent its life
                        // refusing to say, so it is worth being exact
                        // about why these two are not that refusal
                        // breaking.
                        //
                        // Neither names a magnitude. `relative` says the
                        // track is what its entries resolve against, and
                        // `absolute` says an entry is placed rather than
                        // flowed. *Where* each entry lands is
                        // `--track-at` and `--track-for`, custom
                        // properties the caller sets from
                        // `Track::fraction`, and they are skipped by the
                        // `var(--` arm above like every other value this
                        // crate refuses to decide.
                        //
                        // The rule that would break the refusal is a slot
                        // height, and there is none: the track's height is
                        // the app's, so the percentages have something to
                        // resolve against and this crate still never says
                        // how tall a day is.
                        | "relative"
                        | "absolute"
                        // A run's five, 0.49.0. `flex`, `wrap` and
                        // `center` are structure and alignment, the same
                        // reading `table` gets: which way members are laid
                        // out and how they line up, never how much of
                        // anything.
                        //
                        // The two intrinsic keywords are the interesting
                        // pair and they are the opposite of a size. A
                        // magnitude is a number somebody chose;
                        // `min-content` and `max-content` are the browser
                        // being asked what the members themselves come to,
                        // which is the derived minimum the room ruling
                        // requires and the reason no breakpoint appears
                        // anywhere in these rules. `1 1 max-content` is
                        // grow, shrink and that basis, so its two digits
                        // are ratios rather than lengths.
                        | "flex"
                        | "wrap"
                        | "center"
                        // A facet value's line, 0.98.7: label at the start,
                        // count at the end. Distribution, not distance.
                        | "space-between"
                        | "min-content"
                        | "1 1 max-content"
                        // A run member that absorbs what is left, 0.74.0.
                        // Grow, shrink and a zero basis: the zero is what
                        // makes several fills divide the room equally
                        // rather than dividing the leftovers in proportion
                        // to their contents. Three ratios and no length.
                        | "1 1 0"
                        // A chart's four, 0.75.0. Every one is structure or
                        // alignment, and the reading is `table`'s and
                        // `flex`'s: which way the bars are laid out and how
                        // they line up, never how much of anything. The
                        // chart's own lengths, its height, its gap, a
                        // bar's floor, the readout's padding, are all
                        // custom properties with defaults, so they leave by
                        // the `var(--` arm above.
                        //
                        // `attr(data-tooltip)` is `content: ""`'s case with
                        // something in it: the pseudo-element echoes an
                        // attribute the markup already carries, which names
                        // no colour and no size.
                        // The readout's box asks the browser what its own
                        // text comes to, which is `min-content`'s reading
                        // exactly: a derived width and not one anybody chose.
                        | "max-content"
                        | "flex-end"
                        | "column"
                        | "ellipsis"
                        | "attr(data-tooltip)"
                        // A menu run's overflow control, 0.64.0.
                        // `column` and `stretch` are the same reading
                        // `flex` and `center` get one line up: which way
                        // the shed members stack inside the panel and how
                        // they line up across it. Neither is a magnitude.
                        //
                        // `100%` is already above and reused here as the
                        // panel's `inset-block-start`, which is "the whole
                        // of the control it hangs from" rather than a
                        // distance anybody picked.
                        | "stretch"
                        // A picture's three, 0.36.0. `block` is structure
                        // for the reason `table` is: an inline image sits
                        // on the baseline and carries a descender's worth
                        // of space under it, which is a fact about
                        // replaced elements rather than a size this crate
                        // chose. `cover` and `contain` are `Fit`'s two
                        // named members reaching CSS unchanged, which is
                        // an intent arriving rather than a value being
                        // picked.
                        | "block"
                        | "cover"
                        | "contain"
                        // A relaxed part's three, and the third is the
                        // awkward one. `-webkit-box` and `vertical` are
                        // structure: they say the part is a box of lines
                        // stacked downward, which is the only way CSS lets
                        // anyone ask for a clamp at all.
                        //
                        // `2` is a count of lines, not a length. The
                        // distinction this crate holds is between naming a
                        // magnitude, a padding, a height, a font size,
                        // all of which belong to makeover-geometry, and
                        // naming how many of something there are. A line's
                        // height is still the app's, so two lines is
                        // whatever two of the app's lines come to, and
                        // nothing here decides how tall that is. It is also
                        // not a value picked here: it is `Flow::Relaxed`'s
                        // own answer arriving unchanged, the same way
                        // `cover` and `contain` are `Fit`'s.
                        | "-webkit-box"
                        | "vertical"
                        | "2"
                ),
            "unrecognised literal value: {line}"
        );
    }
}

#[test]
fn flat_emits_nothing_at_all() {
    assert_eq!(depth_class(Depth::Flat, &Emit::default()), None);
    assert!(!depth_rules(&Emit::default()).contains("flat"));
}

#[test]
fn a_prefix_namespaces_every_class() {
    let opts = Emit {
        class_prefix: "mo-",
        ..Emit::default()
    };
    let css = depth_rules(&opts);
    assert!(css.contains(".mo-raised {"));
    assert!(css.contains(".mo-well {"));
    assert!(!css.contains(".raised {"));
}

#[test]
fn the_border_width_is_the_callers() {
    let opts = Emit {
        border_width: "2px",
        ..Emit::default()
    };
    assert!(bevel_shadow(Bevel::Raised, &opts).contains("inset 2px 2px 0"));
}

#[test]
fn edges_agree_with_the_description() {
    // Not a tautology: it is the guard that a CSS-shaped convenience never
    // quietly reverses which side is lit.
    let (tl, br) = Bevel::Raised.edges();
    assert_eq!(tl.token(), Edge::Light.token());
    assert_eq!(br.token(), Edge::Dark.token());
}

#[test]
fn a_fill_column_breaks_a_word_too_long_for_it_rather_than_clipping_it() {
    // MNW's Media table at 360px gave the file-name column 90px, and
    // `covers/hydrophone-rig.png` drew as `hydroph...`: the cell wrapped at the
    // hyphen, then clipped the segment that still did not fit. A fill column
    // holds prose, so it breaks that segment instead.
    let opts = Emit::default();
    let css = component_rules(&opts);
    assert!(
        css.contains(".table .cell-fill > .cell-in {\n    overflow-wrap: anywhere;\n}"),
        "{css}"
    );
    // A content or fixed column keeps its value on one line, as before: the
    // break is not a rule for every cell.
    assert!(
        css.contains(".table .cell-content > .cell-in,\n.table .cell-fixed > .cell-in {\n    white-space: nowrap;\n}"),
        "{css}"
    );
}

#[test]
fn a_fill_column_does_not_hold_the_whole_slack() {
    // A content or fixed column grew nowhere, so a value longer than its kind
    // floor (a date, a grouped money figure) ended in an ellipsis while the
    // fill column held spare room. Fill is bounded at the reading measure and
    // content and fixed grow, so the value takes the room.
    let css = component_rules(&Emit::default());
    assert!(
        css.contains(
            ".table .cell-fill {\n    flex-grow: 1;\n    max-inline-size: var(--measure-reading, 42rem);\n}"
        ),
        "{css}"
    );
    assert!(
        css.contains(".table .cell-content,\n.table .cell-fixed {\n    flex-grow: 1;\n}"),
        "{css}"
    );
}

#[test]
fn a_badge_whose_label_outruns_its_column_ends_in_an_ellipsis() {
    // A badge is a chip with a nowrap label; given less room than its label
    // needs it clipped hard with no ellipsis. The label ends in one now.
    let css = component_rules(&Emit::default());
    assert!(
        css.contains(
            ".badge {\n    display: inline-block;\n    min-width: 0;\n    max-inline-size: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n"
        ),
        "{css}"
    );
}

#[test]
fn leading_fills_and_committing_outlines_so_a_control_can_wear_both() {
    // The leading act beside the committing one. Two questions, two marks, and the
    // marks have to be separable or a control that answers both cannot say so.
    // The ring is a frame outside the bevel; the lead is a ground inside it.
    let css = surface_rules(&Emit::default());

    assert!(
        css.contains(".button[data-leading]:not([data-tone]) {"),
        "{css}"
    );
    assert!(
        css.contains("background: var(--action);"),
        "the lead does not take the accent as a ground: {css}"
    );
    // Never a hand-picked ink: the theme derives one that is readable on
    // whatever the accent turned out to be.
    assert!(
        css.contains("color: var(--content-on-action);"),
        "the label is not the derived readable ink: {css}"
    );

    // The commit ring is untouched, which is what keeps the two composable.
    assert!(css.contains(".button[data-commits] {"), "{css}");

    // A filled control that cannot be pressed is the loudest thing on the
    // screen and does nothing, so disabled drops the fill.
    assert!(
        css.contains(
            ".button[data-leading]:not([data-tone]):is(:disabled, [aria-disabled=\"true\"]) {"
        ),
        "{css}"
    );

    // And a toned control takes no fill at all: what pressing it means
    // outranks how badly the screen wants it pressed, which is the rule every
    // renderer in the suite keeps. goingson's compose drew the fill's near
    // white ink over the Success tone's pale ground until this guard existed,
    // and a render is what caught it, no test here was going to.
    for rule in css.split(".button[data-leading]").skip(1) {
        assert!(
            rule.starts_with(":not([data-tone])"),
            "a leading rule that a tone cannot escape: {rule}"
        );
    }
}

#[test]
fn a_disabled_commit_act_is_not_the_default() {
    // goingson's bulk bars: Complete and Delete stand disabled until a row is
    // ticked, and ringed they were the strongest controls on an idle page.
    let css = surface_rules(&Emit::default());
    let rule = css
        .split("\n\n")
        .flat_map(|block| block.split("}\n"))
        .find(|rule| rule.contains("[data-commits]:is(:disabled"))
        .expect("the disabled commit rule");
    assert!(
        !rule.contains("calc(2 *"),
        "a disabled commit keeps its ring: {rule}"
    );
    assert!(rule.contains("font-weight: inherit"), "{rule}");
}

#[test]
fn a_unit_shares_its_controls_line() {
    // goingson's estimate drew "min" under the box it measures: the control
    // fills its group, so the span after it wrapped. A group carrying a unit
    // is two columns, and only the control and the unit sit in them.
    let css = stylesheet(&Emit::default());
    assert!(css.contains(".form-group:has(> .form-unit) {"), "{css}");
    assert!(
        css.contains("grid-template-columns: auto minmax(0, 1fr);"),
        "{css}"
    );
    assert!(
        css.contains(".form-group:has(> .form-unit) > :not(.form-unit, input, select, textarea) {"),
        "{css}"
    );
    assert!(css.contains("grid-column: 1 / -1;"), "{css}");
}

#[test]
fn the_vars_script_reads_the_attribute_the_emitters_write() {
    let declared = format!("const ATTR = \"{}\";", crate::VARS_ATTR);
    assert!(crate::VARS_JS.contains(&declared), "{}", crate::VARS_JS);
    // And reads it through that one constant, never a second spelling.
    assert!(crate::VARS_JS.contains("getAttribute(ATTR)"));
    assert!(crate::VARS_JS.contains("attributeFilter: [ATTR]"));
}

#[test]
fn the_vars_script_keeps_density_under_the_names_the_crates_declare() {
    let js = crate::VARS_JS;
    for (name, value) in [
        ("DENSITY_KEY", crate::DENSITY_STORE_KEY),
        ("DENSITY_CHOICE", crate::DENSITY_CHOICE_ATTR),
        ("DENSITY", makeover_geometry::DENSITY_ATTRIBUTE),
    ] {
        let declared = format!("const {name} = \"{value}\";");
        assert!(js.contains(&declared), "{declared} missing");
    }
    let densities = [
        makeover_geometry::Density::Pointer,
        makeover_geometry::Density::Touch,
    ]
    .map(|d| format!("\"{}\"", d.attribute_value()))
    .join(", ");
    assert!(
        js.contains(&format!("const DENSITIES = [{densities}];")),
        "{js}"
    );
}

#[test]
fn a_density_picker_offers_every_choice_and_marks_none() {
    let mut out = String::new();
    crate::density_options_into(&mut out);
    assert_eq!(
        out.matches("<option").count(),
        makeover_layout::DENSITY_CHOICES.len()
    );
    assert!(
        !out.contains("selected"),
        "the server cannot know this device's choice"
    );
    assert!(out.contains("<option value=\"pointer\">"), "{out}");
}

#[test]
fn the_placed_forms_write_the_same_bytes_and_say_where() {
    use makeover_layout::{Facet, FacetValue, Selecting};
    let opts = Emit::new();

    let values = [FacetValue::new("a", "Drums"), FacetValue::new("b", "Keys")];
    let facet = Facet::new("Tag", Selecting::Subtree, &values);
    let (mut out, mut placed) = (String::new(), Vec::new());
    crate::facet::facet_html_placed(&facet, &opts, &mut out, &mut placed);
    assert_eq!(out, crate::facet::facet_html(&facet, &opts));
    assert_eq!(placed.len(), 2);
    for range in &placed {
        assert!(out[range.clone()].starts_with("<li ") && out[range.clone()].ends_with("</li>"));
    }
    assert!(out[placed[1].clone()].contains("Keys"));
}

#[test]
fn the_copy_a_renderer_writes_comes_from_emit() {
    use makeover_layout::{Facet, FacetValue, Selecting};
    let opts = Emit::new().exclude_label("Ohne");

    let values = [FacetValue::new("d", "Drums")];
    let facet = Facet::new("Tag", Selecting::Subtree, &values);
    let html = crate::facet::facet_html(&facet, &opts);
    assert!(html.contains(r#"aria-label="Ohne Drums""#), "{html}");
}

#[test]
fn a_banner_reads_at_the_measure_and_carries_its_tone_as_ground_and_edge() {
    let css = stylesheet(&Emit::default());
    let rule = |selector: &str| {
        css.split(&format!("{selector} {{"))
            .nth(1)
            .and_then(|rest| rest.split('}').next())
            .unwrap_or_else(|| panic!("no rule for {selector}"))
            .to_string()
    };

    let base = rule(".banner");
    assert!(base.contains("text-align: start"), "{base}");
    assert!(
        base.contains("padding-inline-end: max(var(--gap-section), 100% - var(--measure-reading"),
        "the words stop at the measure while the ground keeps its width: {base}"
    );
    assert!(!base.contains("max-inline-size"), "{base}");

    for tone in ["info", "success", "warning", "danger"] {
        let toned = rule(&format!(".banner[data-tone=\"{tone}\"]"));
        assert!(toned.contains(&format!("var(--{tone}-surface)")), "{toned}");
        assert!(
            toned.contains(&format!("border-inline-start-color: var(--{tone})")),
            "{toned}"
        );
        assert!(
            !toned.contains("\n    color:"),
            "ink stays the theme's: {toned}"
        );
    }
}

#[test]
fn a_toned_sentence_draws_in_its_tone() {
    // A sentence was the one member that took a tone and drew none of it:
    // `<p class="text" data-tone="danger">` rendered with nothing to tell it
    // from any other line. It takes an edge, as a figure does.
    let css = stylesheet(&Emit::default());
    for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
        let selector = format!(".text[data-tone=\"{}\"] {{", tone.token());
        let at = css
            .find(&selector)
            .unwrap_or_else(|| panic!("{selector} missing: {css}"));
        let body = &css[at..at + css[at..].find('}').expect("closes")];
        assert!(
            body.contains(&format!("solid var(--{});", tone.token())),
            "{body}"
        );
        // The edge carries the tone; the words keep the content ink.
        assert!(!body.contains("color:"), "{body}");
    }
    assert!(!css.contains(".text[data-tone=\"neutral\"]"), "{css}");
}

#[test]
fn a_waiting_stand_in_is_not_drawn_as_an_empty_one() {
    // Both write a sentence; only the ground says whether anything is coming.
    let css = stylesheet(&Emit::default());
    let at = css
        .find(".placeholder[data-state=\"pending\"] {")
        .unwrap_or_else(|| panic!("no pending rule: {css}"));
    let body = &css[at..at + css[at..].find('}').expect("closes")];
    assert!(
        body.contains("background: var(--surface-sunken);"),
        "{body}"
    );
    assert!(!css.contains(".placeholder[data-state=\"empty\"]"), "{css}");
}

/// A short table: every rung of the ladder is answered by the sheet, the table
/// becoming the container and its rows reading the toggle under the width.
#[test]
fn a_table_is_short_below_its_rung() {
    let opts = Emit::default();
    let (low, high, step) = list::SHORT_RUNGS;
    assert_eq!(low % step, 0);
    let rung: u16 = 20;
    assert!((low..=high).contains(&rung));
    let essentials = format!("short-{rung}");

    // And the sheet answers that rung: the table becomes the container, and
    // its rows read the toggle under the width. Compared without whitespace,
    // since the sheet is indented inside its layer.
    let flat: String = stylesheet(&opts).split_whitespace().collect();
    let want = format!(".table.{essentials}{{container:table-frame/inline-size;}}");
    assert!(flat.contains(&want), "{want}");
    let want = format!(
        "@containertable-frame(inline-size<{rung}rem){{.table.{essentials}>*{{--table-short:;--table-roomy:initial;}}}}"
    );
    assert!(flat.contains(&want), "{want}");
    assert!(
        flat.contains(".table>*{--table-roomy:;"),
        "every table starts roomy"
    );
}

/// A stacking table: under its rung the rows flip to records, which also puts a
/// table carrying a `short-N` rung back to roomy, so a fold never hides a value
/// a record would show.
#[test]
fn a_table_stacks_below_its_rung_and_unfolds_to_do_it() {
    let opts = Emit::default();
    let (low, high, _) = list::STACKS_RUNGS;
    let rung: u16 = 24;
    assert!((low..=high).contains(&rung));
    let css = stylesheet(&opts);
    let flat: String = css.split_whitespace().collect();
    let want = format!(
        "@containertable-frame(inline-size<{rung}rem){{.table.stacks-{rung}>*{{--table-stacked:;--table-grid:initial;--table-short:initial;--table-roomy:;--table-optional-closed:initial;--table-secondary-closed:initial;}}}}"
    );
    assert!(flat.contains(&want), "{want}");
    assert!(
        flat.contains(".table>*{--table-roomy:;--table-grid:;}"),
        "every table starts a grid"
    );
    // After every short rung, so the tie on a table carrying both goes to
    // the stack.
    let last_short = css.rfind("short-").expect("a short rung");
    let first_stack = css.find("stacks-").expect("a stack rung");
    assert!(first_stack > last_short);
    // A labelled cell draws its heading only while stacked.
    assert!(
        flat.contains("content:var(--table-stacked,none)var(--table-grid,attr(data-heading));"),
        "the label is the stacked half's"
    );
    // Every floor is a whole line stacked, and its own basis otherwise.
    assert!(
        flat.contains(".table.min-16{flex-basis:var(--table-stacked,calc(9rem+2*var(--gap-group)))var(--table-grid,100%);}"),
        "{}",
        &flat[flat.find(".table.min-16{").unwrap_or(0)..][..120]
    );
}

/// A tier drops whole: under a `drop-optional-N` rung a table's optional
/// columns close outright, and under `drop-secondary-N` its secondary ones,
/// rather than blanking inside a cell that keeps its width.
#[test]
fn a_tier_of_columns_closes_whole_below_its_rung() {
    let flat: String = stylesheet(&Emit::default()).split_whitespace().collect();
    for (tier, class) in [
        ("optional", "cell-drops-first"),
        ("secondary", "cell-drops-next"),
    ] {
        let want = format!(".table.{class}{{max-inline-size:var(--table-{tier}-closed,none);}}");
        assert!(flat.contains(&want), "{want}");
        let want = format!(
            "@containertable-frame(inline-size<30rem){{.table.drop-{tier}-30>*{{--table-{tier}-closed:0;}}}}"
        );
        assert!(flat.contains(&want), "{want}");
    }
    // Before the stack, which opens them again.
    let css = stylesheet(&Emit::default());
    assert!(css.rfind("drop-secondary-").expect("a rung") < css.find("stacks-").expect("a stack"));
}

/// Every native tick draws in the content ink, and it is set once where it
/// inherits rather than per control: an app's own row-select box, which no
/// emitter here writes, is the case a per-class rule would miss.
#[test]
fn native_controls_draw_in_the_content_ink() {
    let css = stylesheet(&Emit::default());
    let root = css.find(":root {").expect("the sheet has a :root block");
    let end = root + css[root..].find('}').expect("the :root block closes");
    assert!(
        css[root..end].contains("accent-color: var(--content);"),
        "{}",
        &css[root..end]
    );
    assert_eq!(
        css.matches("accent-color:").count(),
        1,
        "set once, inherited"
    );
}

/// The native tick draws in `--content`, the primary action in `--action`.
/// Both come from a base intent every theme makeover ships, light and dark
/// alike, so neither var on `:root` ever falls back to the user agent's blue.
#[cfg(feature = "build")]
#[test]
fn every_shipped_theme_defines_the_ink_and_accent() {
    use makeover::{ThemeId, Variant, intent_css_vars, parse_theme_str, resolve};
    let mut variants = std::collections::HashSet::new();
    for (id, source) in makeover::embedded_themes() {
        let theme = parse_theme_str(&ThemeId::new(id).unwrap(), source, false).unwrap();
        variants.insert(theme.meta.variant);
        let css = intent_css_vars(&resolve(&theme));
        for var in ["--content", "--action"] {
            let value = css
                .lines()
                .find_map(|line| line.trim().strip_prefix(&format!("{var}:")))
                .unwrap_or_else(|| panic!("{id} defines no {var}"));
            assert!(
                !value.trim().trim_end_matches(';').is_empty(),
                "{id}: {value}"
            );
        }
    }
    for variant in [Variant::Light, Variant::Dark] {
        assert!(variants.contains(&variant), "no {variant:?} theme shipped");
    }
}

/// A stand-in's sentence wraps at the reading measure, the token a screen's
/// `Measure::Reading` already answers to, with that token's own fallback.
#[test]
fn a_placeholder_sentence_wraps_at_the_reading_measure() {
    let css = state_rules(&Emit::default());
    assert!(
        css.contains(
            ".placeholder > .placeholder-text {\n    max-inline-size: var(--measure-reading, 42rem);"
        ),
        "{css}"
    );
}

/// The edge widths a caller gets by default are geometry's two rungs, so the
/// renderer and the token scale cannot drift to two different hairlines.
#[test]
fn the_default_edges_are_geometrys_strokes() {
    use makeover_geometry::Stroke;
    let opts = Emit::default();
    assert_eq!(opts.border_width, Stroke::Hairline.css());
    assert_eq!(opts.focus_width, Stroke::Mark.css());
}

#[test]
fn no_rule_draws_words_in_a_status_colour() {
    // The ruling on toned text: a status colour is a fill, an edge or a glyph,
    // never the colour of words, because the tone colours are fills and
    // measure under 4.5:1 as ink on the house themes (goingson's success is
    // 1.84:1 on its raised surface). `color:` here is the text property alone;
    // `background-color` and `border-color` are what a tone is for.
    let css = stylesheet(&Emit::default());
    for tone in [Tone::Info, Tone::Success, Tone::Warning, Tone::Danger] {
        for prop in css.split(';').map(str::trim) {
            let Some(value) = prop
                .rsplit('{')
                .next()
                .and_then(|p| p.trim().strip_prefix("color:"))
            else {
                continue;
            };
            assert!(
                !value.contains(&format!("var(--{})", tone.token())),
                "a rule draws words in {}: {prop}",
                tone.token()
            );
        }
    }
}

/// A long table keeps its head in view: sticky to the page's scroller, under
/// whatever header the host sticks above it, and painted over the rows, which
/// are size containers and so layers of their own. Stacked, the head is the
/// clipped screen-reader strip and does not stick.
#[test]
fn a_long_tables_head_sticks_while_its_rows_scroll() {
    let css = component_rules(&Emit::default());
    let head = css
        .split_once(".table .table-head {\n    position:")
        .expect("the head's position rule")
        .1
        .split_once('}')
        .expect("the head rule closes")
        .0;
    assert!(
        head.starts_with(" var(--table-stacked, sticky) var(--table-grid, absolute);"),
        "{head}"
    );
    assert!(
        head.contains("inset-block-start: var(--table-head-offset, 0);"),
        "{head}"
    );
    assert!(head.contains("z-index: 1;"), "{head}");
    // And nothing on a prose table makes it the scroller the head would stick to.
    for rule in css.split("}\n") {
        if rule.trim_start().starts_with(".table {")
            || rule.contains(".table.") && !rule.contains("@container")
        {
            assert!(!rule.contains("overflow-x: auto"), "{rule}");
            assert!(!rule.contains("overflow: auto"), "{rule}");
        }
    }
}

/// A code column is as wide as its longest line, so a code table scrolls rather
/// than ending a line in an ellipsis: uncapped by the reading measure, and
/// outranking the floor rung that sets a fill column's basis.
#[test]
fn a_code_column_takes_its_longest_line_whatever_its_width() {
    let css = component_rules(&Emit::default());
    let rule = ".table:has(.kind-code) .table-row > .cell.kind-code,\n\
                .table:has(.kind-code) .table-head > .table-heading.kind-code {\n    \
                flex: 1 0 auto;\n    max-inline-size: none;";
    assert!(css.contains(rule), "{css}");
    // The other columns keep their basis, so every line starts at one place.
    assert!(
        css.contains(".table:has(.kind-code) .table-row > .cell:not(.kind-code),\n\
                      .table:has(.kind-code) .table-head > .table-heading:not(.kind-code) {\n    flex-grow: 0;"),
        "{css}"
    );
    // (0,5,0) against the rung's (0,4,0), so order does not decide it.
    assert!(
        css.contains(".table .table-row > .cell-fill.min-16 {"),
        "{css}"
    );
}