| 1 | package layout |
| 2 | |
| 3 | import ( |
| 4 | "os" |
| 5 | "path/filepath" |
| 6 | "regexp" |
| 7 | "slices" |
| 8 | "strings" |
| 9 | "testing" |
| 10 | ) |
| 11 | |
| 12 | // regions_test.go is the structural guard the slice 3 plan asks for: |
| 13 | // the region table is a reading of internal/slides/static/slides.css, |
| 14 | // so the stylesheet is parsed here and the two are held to the same |
| 15 | // set of region names per template. |
| 16 | // |
| 17 | // Names, not pixels. A grid's `auto` row is as tall as what is in it |
| 18 | // and this table has to name a number before anything is measured, so |
| 19 | // there is no coordinate here the stylesheet could be checked against. |
| 20 | // What CAN drift silently is a template gaining or losing a region — |
| 21 | // somebody adds an `aside` to `title` in CSS and the engine keeps |
| 22 | // putting it where the body goes, on screen and never in print. That |
| 23 | // is what this catches. |
| 24 | |
| 25 | func stylesheet(t *testing.T) string { |
| 26 | t.Helper() |
| 27 | b, err := os.ReadFile(filepath.Join("..", "static", "slides.css")) |
| 28 | if err != nil { |
| 29 | t.Fatalf("read slides.css: %v", err) |
| 30 | } |
| 31 | return string(b) |
| 32 | } |
| 33 | |
| 34 | // areasFor reads every region name a template places, two ways: the |
| 35 | // areas named in its `grid-template-areas`, and any region given an |
| 36 | // explicit `grid-area` in a rule scoped to that template (which is how |
| 37 | // image-full puts its heading over the picture). |
| 38 | func areasFor(t *testing.T, css, template string) []string { |
| 39 | t.Helper() |
| 40 | var out []string |
| 41 | add := func(name string) { |
| 42 | if name != "" && name != "." && !slices.Contains(out, name) { |
| 43 | out = append(out, name) |
| 44 | } |
| 45 | } |
| 46 | |
| 47 | sel := regexp.QuoteMeta(`[slides-slide][data-template="` + template + `"]`) |
| 48 | // The template's own rule, and its `grid-template-areas`. The grid |
| 49 | // is on the frame inside the section rather than on the section |
| 50 | // (slides.css says why), so the selector may carry that child step |
| 51 | // — and may not, for a declaration that is still the section's. |
| 52 | frame := `(?:\s*>\s*` + regexp.QuoteMeta(`[slides-frame]`) + `)?` |
| 53 | own := regexp.MustCompile(sel + frame + `\s*\{([^}]*)\}`) |
| 54 | for _, m := range own.FindAllStringSubmatch(css, -1) { |
| 55 | areas := regexp.MustCompile(`grid-template-areas:\s*([^;]*);`).FindStringSubmatch(m[1]) |
| 56 | if areas == nil { |
| 57 | continue |
| 58 | } |
| 59 | for _, row := range regexp.MustCompile(`"([^"]*)"`).FindAllStringSubmatch(areas[1], -1) { |
| 60 | for _, name := range strings.Fields(row[1]) { |
| 61 | add(name) |
| 62 | } |
| 63 | } |
| 64 | } |
| 65 | // A region placed into an area by a rule of its own. |
| 66 | scoped := regexp.MustCompile(sel + `\s*\[data-region="([a-z-]+)"\]\s*\{([^}]*)\}`) |
| 67 | for _, m := range scoped.FindAllStringSubmatch(css, -1) { |
| 68 | if strings.Contains(m[2], "grid-area:") { |
| 69 | add(m[1]) |
| 70 | } |
| 71 | } |
| 72 | return out |
| 73 | } |
| 74 | |
| 75 | func TestEveryTemplateInTheStylesheetIsInTheTable(t *testing.T) { |
| 76 | css := stylesheet(t) |
| 77 | for _, tmpl := range Templates() { |
| 78 | if !strings.Contains(css, `[data-template="`+tmpl+`"]`) { |
| 79 | t.Errorf("slides.css has no rules for the %q template", tmpl) |
| 80 | } |
| 81 | if _, ok := regions[tmpl]; !ok { |
| 82 | t.Errorf("regions has no entry for the %q template", tmpl) |
| 83 | } |
| 84 | } |
| 85 | for tmpl := range regions { |
| 86 | if !slices.Contains(Templates(), tmpl) { |
| 87 | t.Errorf("regions has an entry for %q, which is not a template", tmpl) |
| 88 | } |
| 89 | } |
| 90 | } |
| 91 | |
| 92 | // The set of region names per template, both ways round. |
| 93 | func TestRegionNamesMatchTheStylesheetGrid(t *testing.T) { |
| 94 | css := stylesheet(t) |
| 95 | for _, tmpl := range Templates() { |
| 96 | want := areasFor(t, css, tmpl) |
| 97 | if len(want) == 0 { |
| 98 | t.Errorf("no grid areas found for %q in slides.css", tmpl) |
| 99 | continue |
| 100 | } |
| 101 | got := regions[tmpl] |
| 102 | for _, name := range want { |
| 103 | if _, ok := got[name]; !ok { |
| 104 | t.Errorf("slides.css puts a %q region on a %s slide; the table has no box for it", |
| 105 | name, tmpl) |
| 106 | } |
| 107 | } |
| 108 | for name := range got { |
| 109 | if !slices.Contains(want, name) { |
| 110 | t.Errorf("the table gives a %s slide a %q region; slides.css places no such area", |
| 111 | tmpl, name) |
| 112 | } |
| 113 | } |
| 114 | } |
| 115 | } |
| 116 | |
| 117 | // Every area name a template uses is also a region name the renderer |
| 118 | // writes: `[slides-region][data-region="X"] { grid-area: X }` is the |
| 119 | // identity mapping, and this table leans on that. |
| 120 | func TestAreaNamesAreRegionNames(t *testing.T) { |
| 121 | css := stylesheet(t) |
| 122 | for _, name := range regionOrder { |
| 123 | rule := regexp.MustCompile(regexp.QuoteMeta(`[slides-region][data-region="`+name+`"]`) + |
| 124 | `\s*\{\s*grid-area:\s*` + name + `;`) |
| 125 | if !rule.MatchString(css) { |
| 126 | t.Errorf("slides.css does not map the %q region to the %q area", name, name) |
| 127 | } |
| 128 | } |
| 129 | } |
| 130 | |
| 131 | // Every box lands inside the frame and is the right way up. A region |
| 132 | // with a negative width is a table entry somebody typed wrong, and it |
| 133 | // would show up as a slide with nothing on it rather than as an error. |
| 134 | func TestEveryRegionBoxIsInsideTheFrame(t *testing.T) { |
| 135 | for tmpl, byName := range regions { |
| 136 | for name, r := range byName { |
| 137 | switch { |
| 138 | case r.W <= 0 || r.H <= 0: |
| 139 | t.Errorf("%s/%s is %vx%v", tmpl, name, r.W, r.H) |
| 140 | case r.X < 0 || r.Y < 0: |
| 141 | t.Errorf("%s/%s starts at %v,%v", tmpl, name, r.X, r.Y) |
| 142 | case r.Right() > FrameW+0.001 || r.Bottom() > FrameH+0.001: |
| 143 | t.Errorf("%s/%s ends at %v,%v, outside the frame", tmpl, name, r.Right(), r.Bottom()) |
| 144 | } |
| 145 | } |
| 146 | } |
| 147 | } |
| 148 | |
| 149 | // The numbers the whole package is built on, spelled out once so a |
| 150 | // change to the stylesheet's scale fails here first. |
| 151 | // |
| 152 | // The wanted values are Chromium's, read off a real slide at 1920 (the |
| 153 | // browser drive's probe, slice 3 task 2): a padded template's h1 is |
| 154 | // 110.88px and a canvas slide's is 126.72, because a container query |
| 155 | // unit is a percent of the container's CONTENT box and the section's |
| 156 | // padding is 120 each side. |
| 157 | func TestTheScaleIsTheStylesheetAt1920(t *testing.T) { |
| 158 | for _, c := range []struct { |
| 159 | name string |
| 160 | got float64 |
| 161 | want float64 |
| 162 | }{ |
| 163 | {"1cqw with the section's padding", padded.cqw, 16.8}, |
| 164 | {"1cqw without it", full.cqw, 19.2}, |
| 165 | {"--slides-t-1 padded", padded.t1(), 110.88}, |
| 166 | {"--slides-t-1 full", full.t1(), 126.72}, |
| 167 | {"--slides-t-2 padded", padded.t2(), 84}, |
| 168 | {"--slides-t-3 padded", padded.t3(), 67.2}, |
| 169 | {"--slides-body-l padded", padded.bodyL(), 57.12}, |
| 170 | {"--slides-body-m padded", padded.bodyM(), 47.04}, |
| 171 | {"--slides-body-s padded", padded.bodyS(), 36.96}, |
| 172 | {"--slides-code padded", padded.code(), 38.64}, |
| 173 | {"--slides-gap padded", padded.gap(), 43.68}, |
| 174 | {"--slides-rule padded", padded.rule(), 8.4}, |
| 175 | {"--slides-pad", pad, 120}, |
| 176 | // The frame's own gap and column-gap. They are the same |
| 177 | // declarations a descendant reads, because the frame IS a |
| 178 | // descendant of the query container — which is the whole |
| 179 | // point of it existing. |
| 180 | {"the gap between regions", sectionGap, 43.68}, |
| 181 | {"two-column's column-gap", sectionColGap, 69.888}, |
| 182 | } { |
| 183 | if diff := c.got - c.want; diff > 1e-9 || diff < -1e-9 { |
| 184 | t.Errorf("%s is %v, want %v", c.name, c.got, c.want) |
| 185 | } |
| 186 | } |
| 187 | } |
| 188 | |
| 189 | // image-full and canvas drop the section's padding, so they are drawn |
| 190 | // at the bigger scale; every other template keeps it. |
| 191 | func TestTheScaleFollowsTheSectionsPadding(t *testing.T) { |
| 192 | for _, c := range []struct { |
| 193 | layout, template string |
| 194 | want scale |
| 195 | }{ |
| 196 | {"flow", "title", padded}, |
| 197 | {"flow", "blank", padded}, |
| 198 | {"flow", "image-full", full}, |
| 199 | {"canvas", "blank", full}, |
| 200 | {"canvas", "image-full", full}, |
| 201 | } { |
| 202 | if got := scaleFor(c.layout, c.template); got != c.want { |
| 203 | t.Errorf("a %s %s slide is drawn at %v cqw, want %v", c.layout, c.template, got.cqw, c.want.cqw) |
| 204 | } |
| 205 | } |
| 206 | } |
| 207 | |
| 208 | // A region name no template places falls back to where the body goes, |
| 209 | // which is what the stylesheet's auto placement does with it. |
| 210 | func TestAnUnplacedRegionFallsBackToTheBody(t *testing.T) { |
| 211 | got := regionFor("title", "aside") |
| 212 | want := regions["title"]["body"] |
| 213 | if got != want { |
| 214 | t.Errorf("an aside on a title slide is %+v, want the body's %+v", got, want) |
| 215 | } |
| 216 | if regionFor("a template from a later build", "body") != regions["blank"]["body"] { |
| 217 | t.Error("an unknown template does not fall back to blank") |
| 218 | } |
| 219 | } |
| 220 | |
amadan