`
// markup-spelling: old-spelling end
func depthDoc(t *testing.T) map[string]string {
t.Helper()
return map[string]string{"/": sizingDoc("depth", depthBody)}
}
// still freezes the page (C14): no transition, no animation, and the
// light held straight above if light.js is on the page. Every drive
// that reads a state snapshot calls it first, because a hover read in
// the first 250ms of a 0.25s transition is a number the test did not
// choose. The injected sheet is test-only; nothing shipped carries an
// !important. It also enables the inspector for forceState (inspect).
func still(t *testing.T, ctx context.Context) {
t.Helper()
inspect(t, ctx)
mustRun(t, ctx, chromedp.Evaluate(`(() => { const s = document.createElement("style"); s.textContent = "*, *::before, *::after { transition: none !important; animation: none !important; }"; document.head.append(s); document.dispatchEvent(new CustomEvent("rst:light", {detail: {x: 0, y: -1, hold: true}})); return true; })()`, nil))
}
// inspect enables the DOM and CSS domains once for the page, which
// forceState needs: enabling them again per call cleared every
// pseudo-state forced so far, so a drive that pinned hover on two
// buttons read the first one at rest. On its own, for a drive that
// forces a state and then watches a transition run (a row's lift
// easing away under an open menu), which still() would freeze.
func inspect(t *testing.T, ctx context.Context) {
t.Helper()
mustRun(t, ctx, chromedp.ActionFunc(func(c context.Context) error {
if err := dom.Enable().Do(c); err != nil {
return err
}
if err := css.Enable().Do(c); err != nil {
return err
}
// One DOM.getDocument per page: every call invalidates the node
// ids handed out before it, and a forced pseudo-state is keyed
// by node id, so a second call dropped the first button's hover.
root, err := dom.GetDocument().Do(c)
if err != nil {
return err
}
forcedRoot = root.NodeID
return nil
}))
}
// forcedRoot is the page's document node, set by inspect() for forceState.
var forcedRoot cdp.NodeID
// forceState pins pseudo-classes on one element through the inspector
// (what DevTools' :hov panel uses). The list REPLACES the element's
// forced set, so a drive that wants hover and focus together passes
// both in one call; states on other elements stay pinned. still() or
// inspect() must have run on the page first.
func forceState(t *testing.T, ctx context.Context, selector string, states ...string) {
t.Helper()
if states == nil {
states = []string{}
}
if forcedRoot == cdp.EmptyNodeID {
t.Fatal("forceState before still() or inspect(): the document node is not known")
}
mustRun(t, ctx, chromedp.ActionFunc(func(c context.Context) error {
id, err := dom.QuerySelector(forcedRoot, selector).Do(c)
if err != nil {
return err
}
if id == cdp.EmptyNodeID {
return fmt.Errorf("forceState: no element matches %q", selector)
}
return css.ForcePseudoState(id, states).Do(c)
}))
}
// computed reads one computed property of one element, with any
// color(srgb …) or oklch(…) in it rewritten as rgb()/rgba(): a derived
// day token serialises as one of those, and every literal in the depth
// drives is an eight-bit triple (canonColours, colourhelp_test.go).
func computed(t *testing.T, ctx context.Context, selector, prop string) string {
t.Helper()
var out string
mustRun(t, ctx, chromedp.Evaluate(`getComputedStyle(document.querySelector(`+jsStr(selector)+`)).getPropertyValue(`+jsStr(prop)+`)`, &out))
return canonColours(strings.TrimSpace(out))
}
func jsStr(s string) string {
b, _ := json.Marshal(s)
return string(b)
}
func rect(t *testing.T, ctx context.Context, selector string) (x, y, w, h float64) {
t.Helper()
var r struct{ X, Y, W, H float64 }
at(t, ctx, `(() => { const r = document.querySelector(`+jsStr(selector)+`).getBoundingClientRect(); return JSON.stringify({X: r.left, Y: r.top, W: r.width, H: r.height}); })()`, &r)
return r.X, r.Y, r.W, r.H
}
func open(t *testing.T, ctx context.Context, rig *harness.Rig, path string, reduce bool) {
t.Helper()
if reduce {
mustRun(t, ctx, emulation.SetEmulatedMedia().WithFeatures([]*emulation.MediaFeature{{Name: "prefers-reduced-motion", Value: "reduce"}}))
}
mustRun(t, ctx, chromedp.EmulateViewport(1280, 900), chromedp.Navigate(rig.Origin+path), chromedp.WaitVisible("#field", chromedp.ByQuery))
}
// pressFallbackRig serves the depth fixture with tokens.css altered by
// edit, over the sizing mux's copy.
func pressFallbackRig(t *testing.T, edit func(string) string, opts ...harness.Option) *harness.Rig {
t.Helper()
tokens := []byte(edit(string(fiesta.TokensCSS())))
return harness.New(t, func(string) http.Handler {
mux := sizingMux(t, depthDoc(t))
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
if r.URL.Path == "/tokens.css" {
w.Header().Set("Content-Type", "text/css")
w.Write(tokens)
return
}
mux.ServeHTTP(w, r)
})
}, opts...)
}
// ── Running and reading (ui/rowmenu_browser_test.go, ui/rows_browser_test.go, ui/select_browser_test.go) ──
// mustRun is chromedp.Run that fails the test on a browser error: a
// swallowed error would leave the leg reading a page that never got
// where the leg thinks it is, and passing on it.
func mustRun(t *testing.T, ctx context.Context, actions ...chromedp.Action) {
t.Helper()
if err := chromedp.Run(ctx, actions...); err != nil {
t.Fatal(err)
}
}
// at evaluates a JS expression returning JSON into v.
func at(t *testing.T, ctx context.Context, js string, v any, opts ...chromedp.EvaluateOption) {
t.Helper()
var raw string
if err := chromedp.Run(ctx, chromedp.Evaluate(js, &raw, opts...)); err != nil {
t.Fatalf("evaluating: %v\n%s", err, js)
}
if err := json.Unmarshal([]byte(raw), v); err != nil {
t.Fatalf("decoding %q: %v", raw, err)
}
}
// point is a place on screen and what elementFromPoint finds there.
type point struct {
X, Y float64
Hit string
}
// probe returns the point at (x, y) in the box of sel, where fx/fy are
// fractions of the width and height and dx/dy pixel offsets from that.
//
// It reads the page as it will be painted, two frames either side of
// its scroll. A script may answer the last action, or this scroll, in
// its next animation frame: select.js places an opened list and
// scrolls its active row into view there. Read at once, the target
// moves whenever that frame falls between the reading and the click,
// which a loaded machine makes likely: a probe of Option 7 in a just
// opened combobox clicked Option 3. The frames before the scroll let
// queued work land so it cannot undo the scroll; the frames after let
// the page answer the scroll itself.
func probe(t *testing.T, ctx context.Context, sel string, fx, fy, dx, dy float64) point {
t.Helper()
return probeScripted(t, ctx, true, sel, fx, fy, dx, dy)
}
// probeScripted is probe for a leg that may run with script execution
// disabled. There no frame callback ever runs, so a wait for one never
// ends (the evaluation fails with "Promise was collected"); nor can a
// script have queued work for a frame, so there is nothing to wait for.
func probeScripted(t *testing.T, ctx context.Context, scripts bool, sel string, fx, fy, dx, dy float64) point {
t.Helper()
var p point
at(t, ctx, fmt.Sprintf(`(async () => { const frames = () => %v ? new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))) : null;
await frames(); const el = document.querySelector(%q); el.scrollIntoView({block: "center", inline: "center"}); await frames(); const r = el.getBoundingClientRect();
const x = r.left + r.width * %v + %v, y = r.top + r.height * %v + %v; const h = document.elementFromPoint(x, y);
return JSON.stringify({X: x, Y: y, Hit: h ? (h.id || h.tagName) : "nothing"}); })()`, scripts, sel, fx, dx, fy, dy), &p, awaitPromise)
return p
}
func awaitPromise(p *runtime.EvaluateParams) *runtime.EvaluateParams {
return p.WithAwaitPromise(true)
}
// ── Target readings and settling (ui/sizing_browser_test.go) ─────────
// targetReading is one control, measured as its activation area.
type targetReading struct {
Name, Hit string
W, H float64
Fits, Owns, Inline bool
}
func readTargets(t *testing.T, ctx context.Context, js string) []targetReading {
t.Helper()
var raw string
if err := chromedp.Run(ctx, chromedp.Evaluate(js, &raw)); err != nil {
t.Fatalf("measuring targets: %v", err)
}
var got []targetReading
if err := json.Unmarshal([]byte(raw), &got); err != nil {
t.Fatalf("reading targets (%q): %v", raw, err)
}
return got
}
// settleUntil polls a page expression until it is true or 10s pass.
func settleUntil(t *testing.T, ctx context.Context, expr string) {
t.Helper()
deadline := time.Now().Add(10 * time.Second)
for time.Now().Before(deadline) {
var yes bool
// Errors are tolerated: an evaluation that lands while a document
// is being swapped in fails, and the next one reads the new page.
if err := chromedp.Run(ctx, chromedp.Evaluate(expr, &yes)); err == nil && yes {
return
}
time.Sleep(100 * time.Millisecond)
}
t.Fatalf("never became true within 10s: %s", expr)
}
// ── Anchor positioning (internal/designsystem/galleryrig/rig.go) ─────
// WithoutAnchorPositioning replaces the page's tokens.css with a copy
// whose anchor-positioning @supports condition can never hold, which is
// what an engine without the feature gets: the menu panel positioned
// absolutely under its summary instead of fixed against it.
const WithoutAnchorPositioning = `(async () => {
const link = document.querySelector('link[href*="/tokens."][href$=".css"]');
const css = await (await fetch(link.href)).text();
const style = document.createElement("style");
style.textContent = css.replaceAll("@supports (position-area: block-end) and (position-try-fallbacks: flip-block)", "@supports (position-area: rastrillo-no-such-value)");
link.replaceWith(style);
return true;
})()`
// RequireAnchorPositioning is the control for every leg that runs with
// and without the feature: the named menu panel computes position:
// fixed when anchor positioning applies and absolute when it does not.
// A leg that asked for "without" and still got fixed would pass on the
// path it claims to have left. selector picks one panel rather than
// "the first [rst-dropdown-menu] on the page", because a page can carry
// more than one (the bar's and the rail foot's), and the first found is
// not necessarily the one the leg is driving.
func RequireAnchorPositioning(t *testing.T, ctx context.Context, where, selector string, want bool) {
t.Helper()
var pos string
if err := chromedp.Run(ctx, chromedp.Evaluate(`getComputedStyle(document.querySelector(`+jsStr(selector)+`)).position`, &pos)); err != nil {
t.Fatalf("%s: reading the menu panel's position: %v", where, err)
}
if (pos == "fixed") != want {
t.Fatalf("%s: the menu panel is position: %s; this leg needs anchor positioning %v", where, pos, want)
}
}
// ── The other spelling (ui/markup_v3_browser_test.go) ────────────────
// classSpelling translates markup the other way — rst- attributes back
// into a class list — with tokens.css's own class list as the key. That
// key is unambiguous because TestNoTwoClassesWantTheSameAttribute
// holds: no two classes want one attribute, so no attribute has two
// classes to choose between.
//
// It exists because of the flip. The partials and the styleguide hand
// this drive attribute markup now, and a fixture half in each spelling
// would compare identical halves and prove nothing about them.
func classSpelling(t *testing.T, html string) string {
t.Helper()
byAttr := map[string]string{}
byVariant := map[string]string{}
for _, class := range sortedKeys(styledClasses(t, string(fiesta.TokensCSS()))) {
name, variant, ok := attributeFor(class)
if !ok {
continue
}
if variant == "" {
byAttr[name] = class
continue
}
byVariant[name+"~="+variant] = class
}
out := openTagInFixture.ReplaceAllStringFunc(html, func(tag string) string {
// The class attribute comes out of the tag before the scan: its
// tokens follow whitespace exactly as an attribute does, and the
// seven utilities that live there must survive the round trip.
kept := ""
if m := classInMarkup.FindStringSubmatch(tag); m != nil {
kept = m[1]
}
stripped := classInMarkup.ReplaceAllString(tag, "")
var classes []string
rewritten := rstAttrInFixture.ReplaceAllStringFunc(stripped, func(m string) string {
g := rstAttrInFixture.FindStringSubmatch(m)
name, value := g[1], g[2]
if name == "rst-tone" {
return ` data-tone="` + value + `"`
}
base, known := byAttr[name]
if !known {
t.Errorf("the fixture writes [%s], which tokens.css has no class for — the round trip cannot be checked", name)
return m
}
classes = append(classes, base)
for _, variant := range strings.Fields(value) {
v, ok := byVariant[name+"~="+variant]
if !ok {
t.Errorf("the fixture writes %s=%q, which tokens.css has no class for", name, variant)
continue
}
classes = append(classes, v)
}
return ""
})
if kept != "" {
classes = append(classes, strings.Fields(kept)...)
}
if len(classes) == 0 {
return tag
}
// After the tag name, so the class lands where an author would
// have written it rather than at the end of the attribute list.
i := strings.IndexAny(rewritten, " \t\n>")
return rewritten[:i] + ` class="` + strings.Join(classes, " ") + `"` + rewritten[i:]
})
return out
}
// ── The fixture server's own test ────────────────────────────────────
// scriptTags matches the script elements sizingDoc links, for a page
// that must load without them.
var scriptTags = regexp.MustCompile(`