//go:build browser

package gallery

import (
	"bytes"
	"context"
	"fmt"
	"image/png"
	"net/http"
	"net/http/httptest"
	"regexp"
	"strconv"
	"strings"
	"sync"
	"testing"
	"time"

	"github.com/chromedp/cdproto/emulation"
	cdppage "github.com/chromedp/cdproto/page"
	"github.com/chromedp/chromedp"

	"amadan.net/rastrillo/fiesta"
	"amadan.net/rastrillo/fiesta/internal/gallery/galleryrig"
	"amadan.net/rastrillo/fiesta/internal/harness"
)

// Frames hidden until styled, and shown in the page's scheme: the
// arm, seek and watch half of view.js, driven with a frame document
// held at each of the moments a reader could see the wrong thing.
// Rastrillo's drives; the held document is served without frame.js,
// because frame.js copies the parent's scheme before the first paint
// and these legs are about the window a document without one opens,
// which is every document a navigation inside a frame loads from
// elsewhere.

// gate is one held response: a handler blocks on it until the leg has
// looked at the state the hold keeps open. Opened at most once. A nil
// gate holds nothing.
type gate struct {
	c    chan struct{}
	once sync.Once
}

func newGate() *gate { return &gate{c: make(chan struct{})} }

func (g *gate) open() {
	if g != nil {
		g.once.Do(func() { close(g.c) })
	}
}

func (g *gate) wait() {
	if g != nil {
		<-g.c
	}
}

// holds are the places heldFrames can hold the first frame on a page:
// start, its document before a byte of it is sent; sheet, the
// stylesheets it links; parse, the rest of its document after the
// body's first paragraph; load, an image in that rest; next and
// nextLoad, the same two for the document a navigation inside the
// frame fetches with ?next.
type holds struct{ start, sheet, parse, load, next, nextLoad *gate }

func (h *holds) release() {
	for _, g := range []*gate{h.start, h.sheet, h.parse, h.load, h.next, h.nextLoad} {
		g.open()
	}
}

const held, heldNext = mountPath + "/held.png", mountPath + "/held-next.png"

var (
	firstFrame  = regexp.MustCompile(`<iframe class="ds-view__frame"[^>]*\ssrc="([^"]+)"`)
	frameScript = regexp.MustCompile(`<script src="[^"]*/frame\.[0-9a-f]{16}\.js"></script>\n?`)
)

// heldFrames serves the gallery with the first preview frame on target
// held at h. Its document is streamed up to its body and one paragraph
// before the rest, so a parse hold has a body to look at.
func heldFrames(t *testing.T, target string, h *holds) (*harness.Rig, string) {
	t.Helper()
	files := render(t, mountPath)
	m := firstFrame.FindSubmatch(files[strings.TrimPrefix(target, mountPath+"/")])
	if m == nil {
		t.Fatalf("no preview frame on %s", target)
	}
	frameSrc := string(m[1])
	rig := harness.New(t, func(string) http.Handler {
		tree := galleryrig.Tree(t, files, mountPath+"/")
		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
			switch r.URL.Path {
			case held:
				h.load.wait()
				http.NotFound(w, r)
				return
			case heldNext:
				h.nextLoad.wait()
				http.NotFound(w, r)
				return
			}
			if r.URL.RawQuery == "held" {
				h.sheet.wait()
			}
			if r.URL.Path != frameSrc {
				tree.ServeHTTP(w, r)
				return
			}
			rec := httptest.NewRecorder()
			tree.ServeHTTP(rec, r)
			body := frameScript.ReplaceAllString(rec.Body.String(), "")
			hold, img := h.parse, held
			if r.URL.RawQuery == "next" {
				hold, img = h.next, heldNext
			} else {
				h.start.wait()
				if h.sheet != nil {
					body = strings.ReplaceAll(body, `.css">`, `.css?held">`)
				}
			}
			loc := bodyTag.FindStringIndex(body)
			if loc == nil {
				t.Errorf("the held document has no <body>")
				return
			}
			tag := `<img src="` + img + `" alt="" width="1" height="1">`
			body = body[:loc[1]] + tag + body[loc[1]:]
			cut := loc[1] + len(tag)
			w.Header().Set("Content-Type", "text/html; charset=utf-8")
			w.Write([]byte(body[:cut] + "<p>Held.</p>"))
			w.(http.Flusher).Flush()
			hold.wait()
			w.Write([]byte(body[cut:]))
		})
	})
	rig.Allow(http.MethodGet, held, http.StatusNotFound)
	rig.Allow(http.MethodGet, heldNext, http.StatusNotFound)
	return rig, frameSrc
}

// openChosen sets the gallery's scheme to chosen with the OS in os
// (system is no stored choice), then opens target without waiting for
// its load, which a held frame holds back.
func openChosen(t *testing.T, ctx context.Context, rig *harness.Rig, os, chosen, target string) {
	t.Helper()
	mustRun(t, ctx,
		emulation.SetEmulatedMedia().WithFeatures([]*emulation.MediaFeature{{Name: "prefers-color-scheme", Value: os}}),
		chromedp.EmulateViewport(1280, 900),
		chromedp.Navigate(rig.Origin+href(fiesta.ThemeNames()[0]+"/en/index.html")),
		chromedp.Evaluate(`localStorage.setItem("fiesta-scheme", "`+chosen+`"); if ("`+chosen+`" === "system") localStorage.removeItem("fiesta-scheme"); true`, nil),
		chromedp.Navigate("about:blank"),
	)
	if err := chromedp.Run(ctx, chromedp.ActionFunc(func(ctx context.Context) error {
		_, _, _, _, err := cdppage.Navigate(rig.Origin + target).Do(ctx)
		return err
	})); err != nil {
		t.Fatalf("opening the page: %v", err)
	}
}

// requireHeldPage waits for a page opened without waiting on its load
// (a held frame holds that back) to be parsed, then requires the
// widget on it.
func requireHeldPage(t *testing.T, ctx context.Context, where string) {
	t.Helper()
	until(t, ctx, where+", the page parsed", `document.readyState !== "loading" && !!document.querySelector(".ds-view__frame")`)
	requireWidget(t, ctx, where)
}

// schemeApplied is the page's own script having written the chosen
// scheme on <html>, so a reading of the page's colour is of the chosen
// one and not of the moment before the deferred script ran.
func schemeApplied(chosen string) string {
	if chosen == "system" {
		return `!document.documentElement.hasAttribute("data-theme")`
	}
	return `document.documentElement.getAttribute("data-theme") === ` + strconv.Quote(chosen)
}

func twoFrames(t *testing.T, ctx context.Context, where string) {
	t.Helper()
	mustRun(t, ctx, chromedp.Evaluate(`new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r(true))))`, nil, awaitPromise))
}

// frameReading is one look at the first frame: the background its own
// document paints, the page's, whether the frame is visible, its own
// color-scheme, the pixel the reader gets inside the frame's box, and
// how many pixels across the whole box differ from the page's
// background.
type frameReading struct {
	Frame, Page, Seen, Shown, Scheme string
	X, Y                             float64
	Box                              [4]float64
	Off                              int
}

func readFrame(t *testing.T, ctx context.Context, where string, r *frameReading) {
	t.Helper()
	var shot []byte
	at(t, ctx, `(() => {
	  const f = document.querySelector(".ds-view__frame"), b = f.getBoundingClientRect(), x = f.parentElement.getBoundingClientRect();
	  const rgb = s => s.replace(/\s+/g, "");
	  return JSON.stringify({Frame: rgb(getComputedStyle(f.contentDocument.body).backgroundColor),
	    Page: rgb(getComputedStyle(document.body).backgroundColor), Shown: getComputedStyle(f).visibility,
	    Scheme: getComputedStyle(f).colorScheme, X: b.left + b.width / 2, Y: b.top + 8,
	    Box: [x.left, x.top, x.right, Math.min(x.bottom, innerHeight)]});
	})()`, r)
	mustRun(t, ctx, chromedp.CaptureScreenshot(&shot))
	img, err := png.Decode(bytes.NewReader(shot))
	if err != nil {
		t.Fatalf("%s: decoding the screenshot: %v", where, err)
	}
	pixel := func(x, y int) string {
		cr, cg, cb, _ := img.At(x, y).RGBA()
		return fmt.Sprintf("rgb(%d,%d,%d)", cr>>8, cg>>8, cb>>8)
	}
	r.Seen = pixel(int(r.X), int(r.Y))
	// Inset past the box's border, its rounded corners and the resize
	// grip in its end corner, which are the page's own drawing.
	const inset = 6
	for y := int(r.Box[1]) + inset; y < int(r.Box[3])-inset; y++ {
		for x := int(r.Box[0]) + inset; x < int(r.Box[2])-inset; x++ {
			if y > int(r.Box[3])-20 && (x > int(r.Box[2])-20 || x < int(r.Box[0])+20) {
				continue
			}
			if pixel(x, y) != r.Page {
				r.Off++
			}
		}
	}
}

// TestAFrameNeverShowsTheOtherSchemeWhileItLoads: a frame never shows
// the reader the other scheme, and shows as soon as it can be painted.
// Held half-parsed, the reader sees the page's background (the
// control proves the frame's own document is in the other scheme);
// parsed with an image still loading, it shows, painted; loaded, it
// still shows.
func TestAFrameNeverShowsTheOtherSchemeWhileItLoads(t *testing.T) {
	for _, c := range []struct{ os, chosen string }{{"light", "dark"}, {"dark", "light"}} {
		where := "the OS in " + c.os + ", the gallery in " + c.chosen
		t.Run(c.os+"-os-"+c.chosen+"-gallery", func(t *testing.T) {
			h := &holds{parse: newGate(), load: newGate()}
			defer h.release()
			target := href(fiesta.ThemeNames()[0] + "/en/field.html")
			rig, frameSrc := heldFrames(t, target, h)
			ctx, cancel := context.WithTimeout(rig.Context(), 60*time.Second)
			defer cancel()
			openChosen(t, ctx, rig, c.os, c.chosen, target)
			requireHeldPage(t, ctx, where)
			first := `document.querySelector(".ds-view__frame")`
			until(t, ctx, where+", the frame half-parsed",
				`(() => { const d = `+first+`.contentDocument; return `+schemeApplied(c.chosen)+` && !!d && d.URL.endsWith(`+strconv.Quote(frameSrc)+`) && d.readyState === "loading" && !!d.body; })()`)
			twoFrames(t, ctx, where)
			var during frameReading
			readFrame(t, ctx, where+", while it parses", &during)
			if during.Frame == during.Page {
				t.Fatalf("%s: the half-parsed frame's document is already painted %s, the gallery's colour; the window this leg is about was never open", where, during.Frame)
			}
			if during.Seen != during.Page {
				t.Errorf("%s: while the frame parses the reader sees %s in its box, the frame's own %s scheme, on a page painted %s", where, during.Seen, c.os, during.Page)
			}

			h.parse.open()
			until(t, ctx, where+", parsed with its load held", first+`.contentDocument.readyState === "interactive"`)
			twoFrames(t, ctx, where)
			var parsed frameReading
			readFrame(t, ctx, where+", parsed", &parsed)
			if parsed.Frame != parsed.Page || parsed.Seen != parsed.Page || parsed.Shown != "visible" {
				t.Errorf("%s: once parsed, with an image still loading, the frame must show in the gallery's scheme: its document is %s, the reader sees %s (visibility %s), the page is %s", where, parsed.Frame, parsed.Seen, parsed.Shown, parsed.Page)
			}

			h.load.open()
			until(t, ctx, where+", loaded", first+`.contentDocument.readyState === "complete"`)
			twoFrames(t, ctx, where)
			var after frameReading
			readFrame(t, ctx, where+", loaded", &after)
			if after.Frame != after.Page || after.Seen != after.Page || after.Shown != "visible" {
				t.Errorf("%s: once loaded the frame must show in the gallery's scheme: its document is %s, the reader sees %s (visibility %s), the page is %s", where, after.Frame, after.Seen, after.Shown, after.Page)
			}
		})
	}
}

// TestAFrameShowsNothingUntilItsDocumentIsStyled: on System, a frame
// shows the reader nothing but the page's own background while it
// still holds about:blank and while its document is parsed and
// unstyled; with the sheets let through it shows, in the page's
// colour. The frame's color-scheme is normal, so Safari paints the
// blank frame transparent rather than white.
func TestAFrameShowsNothingUntilItsDocumentIsStyled(t *testing.T) {
	for _, os := range []string{"dark", "light"} {
		where := "the OS in " + os + ", the gallery on System"
		t.Run(os+"-os-system-gallery", func(t *testing.T) {
			h := &holds{start: newGate(), sheet: newGate()}
			defer h.release()
			target := href(fiesta.ThemeNames()[0] + "/en/field.html")
			rig, frameSrc := heldFrames(t, target, h)
			ctx, cancel := context.WithTimeout(rig.Context(), 60*time.Second)
			defer cancel()
			openChosen(t, ctx, rig, os, "system", target)
			requireHeldPage(t, ctx, where)
			first := `document.querySelector(".ds-view__frame")`
			until(t, ctx, where+", the frame still blank",
				`(() => { const f = `+first+`; return !!f && !!f.contentDocument && f.contentDocument.URL === "about:blank" && !document.documentElement.hasAttribute("data-theme"); })()`)
			twoFrames(t, ctx, where)
			var blank frameReading
			readFrame(t, ctx, where+", still about:blank", &blank)
			if blank.Shown != "hidden" || blank.Off != 0 {
				t.Errorf("%s: while the frame still holds about:blank it is %s, and %d pixels in its box are not the page's %s", where, blank.Shown, blank.Off, blank.Page)
			}
			if blank.Scheme != "normal" {
				t.Errorf("%s: the frame element's color-scheme is %q; anything that can resolve dark has Safari paint the blank frame white", where, blank.Scheme)
			}

			h.start.open()
			until(t, ctx, where+", parsed with its stylesheets held",
				`(() => { const d = `+first+`.contentDocument; return !!d && d.URL.endsWith(`+strconv.Quote(frameSrc)+`) && d.readyState !== "loading"; })()`)
			twoFrames(t, ctx, where)
			var bare frameReading
			readFrame(t, ctx, where+", parsed, unstyled", &bare)
			if bare.Frame != "rgba(0,0,0,0)" {
				t.Fatalf("%s: the parsed frame's body is already %s; its stylesheets were not held, and the window this leg is about was never open", where, bare.Frame)
			}
			if bare.Shown != "hidden" || bare.Off != 0 {
				t.Errorf("%s: parsed with its stylesheets still loading, the frame is %s, and %d pixels in its box are not the page's %s; its unstyled document would show", where, bare.Shown, bare.Off, bare.Page)
			}

			h.sheet.open()
			until(t, ctx, where+", shown", `getComputedStyle(`+first+`).visibility === "visible"`)
			twoFrames(t, ctx, where)
			var shown frameReading
			readFrame(t, ctx, where+", styled", &shown)
			if shown.Frame != shown.Page || shown.Seen != shown.Page {
				t.Errorf("%s: once styled the frame must show in the page's scheme: its document is %s, the reader sees %s, the page is %s", where, shown.Frame, shown.Seen, shown.Page)
			}
		})
	}
}

// TestAFrameNeverMovesTheReader: a frame never takes the reader's
// focus, or moves the page, on its own. The stage layout's document
// puts autofocus on its email field, which is right for the page and
// wrong inside the gallery; frame.js holds it inert until after load,
// and lets it go after, so a reader can still use it.
func TestAFrameNeverMovesTheReader(t *testing.T) {
	rig := harness.New(t, func(string) http.Handler { return treeHandler(t) })
	ctx, cancel := context.WithTimeout(rig.Context(), 60*time.Second)
	defer cancel()
	theme := fiesta.ThemeNames()[0]
	stage := `document.querySelector('.ds-view__frame[src=` + strconv.Quote(href(frameFile(theme, "en", "layout-stage", mustDefault(t, "layout-stage")))) + `]')`
	// A short window, so the field inside the stage is under the fold
	// and focusing it would have to scroll the page; the frame is still
	// within the distance a lazy frame loads at.
	openPage(t, ctx, "layout-stage at 1280x300", pageURL(rig, "en", "layout-stage.html"), 1280, 300)
	until(t, ctx, "the stage layout loaded",
		`(() => { const f = `+stage+`, d = f && f.contentDocument; return !!d && d.URL.endsWith("/default.html") && d.readyState === "complete" && f.hasAttribute("data-gallery-painted"); })()`)
	twoFrames(t, ctx, "the stage layout")
	var got struct {
		Autofocus, Inert bool
		Y, FieldTop      float64
		Active           string
	}
	mustRun(t, ctx, chromedp.Sleep(200*time.Millisecond))
	at(t, ctx, `(async () => { const f = `+stage+`, i = f.contentDocument.querySelector("[autofocus]");
	  const k = new DOMMatrix(getComputedStyle(f).transform).a || 1;
	  return JSON.stringify({Autofocus: (await (await fetch(f.src)).text()).includes(" autofocus"), Y: scrollY,
	    Inert: i ? i.inert : false, FieldTop: i ? f.getBoundingClientRect().top + i.getBoundingClientRect().top * k : -1,
	    Active: document.activeElement === document.body ? "body" : document.activeElement.outerHTML.slice(0, 120)}); })()`, &got, awaitPromise)
	if !got.Autofocus || got.FieldTop < 0 {
		t.Fatalf("the stage layout is served with no autofocus field; this leg needs a framed document that asks for focus")
	}
	if got.FieldTop < 300 {
		t.Fatalf("the autofocus field is at %.0fpx in a 300px window; focusing it would not have to scroll, so the leg proves nothing", got.FieldTop)
	}
	if got.Active != "body" || got.Y != 0 {
		t.Errorf("the stage layout's frame took the reader: focus is on %s, and the page moved to %v", got.Active, got.Y)
	}
	if got.Inert {
		t.Errorf("the stage layout's field is still inert after its frame loaded; the reader cannot use it")
	}
}

// TestAFrameHidesWhileItNavigates: a navigation inside a frame gets the
// same hiding and the same showing as the first load. Two legs, one per
// document the navigation leaves: one whose load has fired, and one
// shown at parse whose image is still held.
func TestAFrameHidesWhileItNavigates(t *testing.T) {
	const os, chosen = "light", "dark"
	for _, c := range []struct {
		name   string
		loaded bool
	}{{"from a loaded document", true}, {"from a document still loading", false}} {
		t.Run(strings.ReplaceAll(c.name, " ", "-"), func(t *testing.T) {
			h := &holds{load: newGate(), next: newGate(), nextLoad: newGate()}
			defer h.release()
			ready := `.contentDocument.readyState === "interactive"`
			if c.loaded {
				h.load.open()
				ready = `.contentDocument.readyState === "complete"`
			}
			target := href(fiesta.ThemeNames()[0] + "/en/field.html")
			rig, frameSrc := heldFrames(t, target, h)
			ctx, cancel := context.WithTimeout(rig.Context(), 60*time.Second)
			defer cancel()
			openChosen(t, ctx, rig, os, chosen, target)
			requireHeldPage(t, ctx, c.name)
			first := `document.querySelector(".ds-view__frame")`
			until(t, ctx, c.name+": the first document shown",
				schemeApplied(chosen)+` && !!`+first+`.contentDocument && `+first+`.contentDocument.URL.endsWith(`+strconv.Quote(frameSrc)+`) && `+first+ready+` && `+first+`.hasAttribute("data-gallery-painted")`)

			mustRun(t, ctx, chromedp.Evaluate(first+`.contentWindow.location.href = `+strconv.Quote(frameSrc+"?next")+`, true`, nil))
			until(t, ctx, c.name+": the next document half-parsed",
				`(() => { const d = `+first+`.contentDocument; return !!d && d.URL.endsWith("?next") && d.readyState === "loading" && !!d.body; })()`)
			twoFrames(t, ctx, c.name)
			var during frameReading
			readFrame(t, ctx, c.name+": the next document, while it parses", &during)
			if during.Frame == during.Page {
				t.Fatalf("%s: the half-parsed next document is already painted %s, the gallery's colour; the window this leg is about was never open", c.name, during.Frame)
			}
			if during.Seen != during.Page {
				t.Errorf("%s: while the frame's next document parses the reader sees %s in its box, the OS's %s scheme, on a page painted %s", c.name, during.Seen, os, during.Page)
			}

			h.next.open()
			until(t, ctx, c.name+": the next document parsed with its load held",
				first+`.contentDocument.URL.endsWith("?next") && `+first+`.contentDocument.readyState === "interactive"`)
			twoFrames(t, ctx, c.name)
			var parsed frameReading
			readFrame(t, ctx, c.name+": the next document, parsed", &parsed)
			if parsed.Frame != parsed.Page || parsed.Seen != parsed.Page || parsed.Shown != "visible" {
				t.Errorf("%s: once the next document is parsed, with an image still loading, the frame must show in the gallery's scheme: its document is %s, the reader sees %s (visibility %s), the page is %s", c.name, parsed.Frame, parsed.Seen, parsed.Shown, parsed.Page)
			}

			h.nextLoad.open()
			until(t, ctx, c.name+": the next document loaded", first+`.contentDocument.URL.endsWith("?next") && `+first+`.contentDocument.readyState === "complete"`)
			twoFrames(t, ctx, c.name)
			var after frameReading
			readFrame(t, ctx, c.name+": the next document, loaded", &after)
			if after.Frame != after.Page || after.Seen != after.Page || after.Shown != "visible" {
				t.Errorf("%s: once the next document loads the frame must show in the gallery's scheme: its document is %s, the reader sees %s (visibility %s), the page is %s", c.name, after.Frame, after.Seen, after.Shown, after.Page)
			}
		})
	}
}

// TestAFrameStopsLookingForItsNextDocument: after pagehide the gallery
// looks for the frame's next document every 16ms; the look ends when
// the frame leaves the page, and gives up after a bound, showing the
// frame unpainted. The frame is sent to a document the gallery cannot
// read (a data: URL) whose load hangs on a held image.
func TestAFrameStopsLookingForItsNextDocument(t *testing.T) {
	const os, chosen = "light", "dark"
	const count = `(() => {
	  const set = window.setTimeout;
	  window.dsLooks = 0;
	  window.setTimeout = function (fn, ms) {
	    if (ms === 16) window.dsLooks++;
	    return set.apply(this, arguments);
	  };
	})()`
	for _, c := range []struct {
		name   string
		remove bool
	}{{"a navigation that never loads", false}, {"a frame removed while it navigates", true}} {
		t.Run(strings.ReplaceAll(c.name, " ", "-"), func(t *testing.T) {
			h := &holds{nextLoad: newGate()}
			defer h.release()
			target := href(fiesta.ThemeNames()[0] + "/en/field.html")
			rig, frameSrc := heldFrames(t, target, h)
			ctx, cancel := context.WithTimeout(rig.Context(), 60*time.Second)
			defer cancel()
			mustRun(t, ctx, addInit(count))
			openChosen(t, ctx, rig, os, chosen, target)
			requireHeldPage(t, ctx, c.name)
			first := `document.querySelector(".ds-view__frame")`
			until(t, ctx, c.name+": the first document shown",
				`!!`+first+`.contentDocument && `+first+`.contentDocument.URL.endsWith(`+strconv.Quote(frameSrc)+`) && `+first+`.contentDocument.readyState === "complete" && `+first+`.hasAttribute("data-gallery-painted")`)

			elsewhere := `<!doctype html><p>Elsewhere.</p><img src="` + rig.Origin + heldNext + `" alt="" width="1" height="1">`
			mustRun(t, ctx, chromedp.Evaluate(first+`.src = "data:text/html," + encodeURIComponent(`+strconv.Quote(elsewhere)+`), true`, nil))
			until(t, ctx, c.name+": looking for the next document", `window.dsLooks > 3 && !`+first+`.hasAttribute("data-gallery-painted")`)

			if c.remove {
				mustRun(t, ctx, chromedp.Evaluate(first+`.remove(), true`, nil))
			} else {
				until(t, ctx, c.name+": the frame shown once the look gives up",
					first+`.hasAttribute("data-gallery-painted") && getComputedStyle(`+first+`).visibility === "visible"`)
			}
			var before, after int
			mustRun(t, ctx,
				chromedp.Sleep(100*time.Millisecond),
				chromedp.Evaluate(`window.dsLooks`, &before),
				chromedp.Sleep(500*time.Millisecond),
				chromedp.Evaluate(`window.dsLooks`, &after),
			)
			if after != before {
				t.Errorf("%s: the gallery still looks for the frame's next document, %d times in half a second", c.name, after-before)
			}
		})
	}
}

// switchReadJS reads, on the next animation frame (a frame later with
// later, for the OS flip), the page's scheme and background and every
// frame's scheme attribute and background, so a flip that lands in
// one frame reads the same as the settled state.
func switchReadJS(later bool) string {
	read := `new Promise(r => requestAnimationFrame(() => r(JSON.stringify({
	  Theme: document.documentElement.getAttribute("data-theme") || "",
	  Page: getComputedStyle(document.body).backgroundColor,
	  Frames: [...document.querySelectorAll(".ds-view__frame")].map(f => { const d = f.contentDocument; return d ? (d.documentElement.getAttribute("data-theme") || "") + " " + getComputedStyle(d.body).backgroundColor : "?"; })
	}))))`
	if later {
		return `new Promise(r => requestAnimationFrame(() => r(` + read + `)))`
	}
	return read
}

// TestTheGallerySwitchLandsOnTheNextFrame: a scheme chosen in the
// header lands in the frame it happens in, on the page and in every
// framed document alike: read on the very next animation frame, the
// page and the frames are already at the values they settle to.
// Through the OS flipping under System, a frame later.
func TestTheGallerySwitchLandsOnTheNextFrame(t *testing.T) {
	rig := harness.New(t, func(string) http.Handler { return treeHandler(t) })
	ctx, cancel := context.WithTimeout(rig.Context(), 120*time.Second)
	defer cancel()
	where := "field at 1280px"
	osScheme := func(scheme string) chromedp.Action {
		return emulation.SetEmulatedMedia().WithFeatures([]*emulation.MediaFeature{{Name: "prefers-color-scheme", Value: scheme}})
	}
	mustRun(t, ctx, osScheme("light"))
	openPage(t, ctx, where, pageURL(rig, "en", "field.html"), 1280, 900)
	n := painted(t, ctx, where)
	type state struct {
		Theme, Page string
		Frames      []string
	}
	read := func(leg, js string) state {
		t.Helper()
		var got state
		at(t, ctx, js, &got, awaitPromise)
		if len(got.Frames) != n {
			t.Fatalf("%s, %s: read %d frames, %d loaded", where, leg, len(got.Frames), n)
		}
		return got
	}
	choose := func(scheme string) state {
		t.Helper()
		return read("choosing "+scheme, `(() => { const menus = [...document.querySelectorAll("[rst-scheme]")], m = menus.find(m => m.checkVisibility()) || menus[0]; m.open = true; m.querySelector('input[value="`+scheme+`"] ~ button').click(); return `+switchReadJS(false)+`; })()`)
	}
	landed := func(leg string) state {
		t.Helper()
		got := read(leg, `(async () => { await Promise.all(document.getAnimations().filter(a => a.effect && a.effect.getComputedTiming().endTime !== Infinity).map(a => a.finished.catch(() => null))); return await `+switchReadJS(false)+`; })()`)
		t.Logf("%s, %s, landed: theme %q, page %s, frames %v", where, leg, got.Theme, got.Page, got.Frames[:1])
		return got
	}
	check := func(leg string, got, want state) {
		t.Helper()
		if got.Theme != want.Theme {
			t.Fatalf("%s, %s: data-theme %q, want %q", where, leg, got.Theme, want.Theme)
		}
		if got.Page != want.Page {
			t.Errorf("%s, %s: the page is %s on the next frame; settled it is %s. The flip faded instead of landing.", where, leg, got.Page, want.Page)
		}
		for i := range got.Frames {
			if got.Frames[i] != want.Frames[i] {
				t.Errorf("%s, %s: frame %d is %q on the next frame; settled it is %q. The frames did not follow the switch in the same frame.", where, leg, i, got.Frames[i], want.Frames[i])
			}
		}
	}
	choose("dark")
	dark := landed("Dark chosen")
	choose("light")
	light := landed("Light chosen")
	if dark.Page == light.Page || dark.Frames[0] == light.Frames[0] {
		t.Fatalf("%s: the page or the frames do not change with the scheme: %s / %s", where, dark.Page, dark.Frames[0])
	}
	check("Light to Dark by the switch", choose("dark"), dark)
	landed("after Dark")
	check("Dark to Light by the switch", choose("light"), light)
	landed("after Light")
	system := choose("system")
	settled := landed("System, OS light")
	check("System chosen", system, settled)
	mustRun(t, ctx, osScheme("dark"))
	flipped := read("OS dark", switchReadJS(true))
	settledDark := landed("System, OS dark")
	check("System, OS light to dark", flipped, settledDark)
	if settledDark.Page == settled.Page {
		t.Fatalf("%s: the OS flip changed nothing: the page is %s either way", where, settled.Page)
	}
	mustRun(t, ctx, osScheme("light"))
	check("System, OS dark to light", read("OS light", switchReadJS(true)), landed("System, OS light again"))
}