//go:build browser

package slidestest

import (
	"math"
	"strings"
	"testing"

	"github.com/chromedp/chromedp"
)

// TestSlideStylesSurviveTheProductionCSP: Slides in Chromium behind the
// production serving stack (newRig: rastrillo's security headers and
// Slides' CSP). A slide's theme reaches the slide, the canvas slide
// places its heading where the deck put it, and the viewer's own
// <style> lays out the pager.
//
// Every one of those is inline: the theme is custom properties on the
// slide's style attribute, the box is left/top/width/height on the
// block's, and the pager is a <style> element in viewer.html. Under
// rastrillo fb806a2's default style-src the browser refuses them all —
// the attribute stays in the DOM but declares nothing, the canvas
// heading falls back into the slide's corner, the pager stacks. Checked
// here by what the page looks like, because the rig does not fail on a
// CSP report by itself.
func TestSlideStylesSurviveTheProductionCSP(t *testing.T) {
	rig, mailer := newRig(t)
	browserSignIn(t, rig, mailer)
	var deck string
	rig.Run(chromedp.Evaluate(`(document.querySelector('a[href^="/d/"]')?.getAttribute('href') ?? '')`, &deck))
	if deck == "" {
		t.Fatal("the deck list links no deck")
	}

	var flow struct {
		Attr, Applied, Display string
	}
	rig.Run(
		chromedp.Navigate(rig.Origin+deck+"?slide=1"),
		chromedp.WaitVisible(`[slides-slide]`, chromedp.ByQuery),
		chromedp.Evaluate(`(() => {
			const s = document.querySelector('[slides-slide]');
			return {
				Attr: s.getAttribute('style') ?? '',
				Applied: s.style.getPropertyValue('--slides-font-heading'),
				Display: getComputedStyle(document.querySelector('[slides-pager]')).display,
			};
		})()`, &flow),
	)
	if !strings.Contains(flow.Attr, "--slides-font-heading:") {
		t.Fatalf("the slide carries no theme on its style attribute: %q", flow.Attr)
	}
	if flow.Applied == "" {
		t.Error("the slide's theme declares nothing: its style attribute was refused")
	}
	if flow.Display != "flex" {
		t.Errorf("the pager is display %q, want flex: the viewer's <style> was refused", flow.Display)
	}

	// The canvas slide: its heading's box is percentages of the slide on
	// the heading's own style attribute.
	var box struct {
		Attr                                 string
		Left, Top, SlideLeft, SlideTop, W, H float64
		WantLeft, WantTop                    float64
	}
	rig.Run(
		chromedp.Navigate(rig.Origin+deck+"?slide=8"),
		chromedp.WaitVisible(`[slides-slide][data-layout="canvas"] [data-block="heading"]`, chromedp.ByQuery),
		chromedp.Evaluate(`(() => {
			const slide = document.querySelector('[slides-slide]');
			const heading = slide.querySelector('[data-block="heading"]');
			const s = slide.getBoundingClientRect(), h = heading.getBoundingClientRect();
			const attr = heading.getAttribute('style') ?? '';
			const pct = (k) => parseFloat((attr.match(new RegExp('(?:^|;)' + k + ':([0-9.]+)%')) ?? [])[1]);
			return {Attr: attr, Left: h.left, Top: h.top, SlideLeft: s.left, SlideTop: s.top, W: s.width, H: s.height, WantLeft: pct('left'), WantTop: pct('top')};
		})()`, &box),
	)
	if math.IsNaN(box.WantLeft) || math.IsNaN(box.WantTop) || box.WantTop == 0 {
		t.Fatalf("the canvas heading carries no box on its style attribute: %q", box.Attr)
	}
	wantLeft := box.SlideLeft + box.WantLeft/100*box.W
	wantTop := box.SlideTop + box.WantTop/100*box.H
	if math.Abs(box.Left-wantLeft) > 2 || math.Abs(box.Top-wantTop) > 2 {
		t.Errorf("the canvas heading is at (%.1f, %.1f), want (%.1f, %.1f) from %q: its style attribute was refused", box.Left, box.Top, wantLeft, wantTop, box.Attr)
	}
}