trmnl_preview 0.29.0 → 0.30.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 323b81319ed9997a0d49fb77fbe563b30464e7b92ba533388f8d619b68d2426e
-  data.tar.gz: 4ebe10b57d8815de4efb146c3ad4fa2376f8723160f4ae83748162620d38b716
+  metadata.gz: 20431d997e72a0c534f9945c0c8e23cf97dcfff3be5119cbbf2d7973b2c3af73
+  data.tar.gz: 4a96842d311255ad1cd618e36dab4ef4eaa0504c58efe394a609ee5ddc043dba
 SHA512:
-  metadata.gz: 99afef29e4890046747621ad575e45b7d51fb93c676921f32efb35c585f84fbfe160839b3d1f77b3cce319699fe187c302f0e498bda27de56a1982a9bfdc81e1
-  data.tar.gz: 3190bf99270ccf553479edbb4f3bf97027216f0d147156a8c2ec57301ce533ed100bf0d9e4dd99cb876af740bee4ba0007ef433d6ad8670fb349b11f52c841fb
+  metadata.gz: 6dcab087ef567886345b3ef14e90931af73c236680afb0555667357f277fd650eaed3c473fa7bb514196ca701cccbd3a68ee6f19e302e0be3d37a23bb5abcdb1
+  data.tar.gz: '070453995dac9d20fb77914c1a2adcfde9d01f2ccb34899f00b94cf238278b15a3afae3abfe33da9aae17dbacad5f842e34bd080c169ef256c58d144c449b9b5'

data/CHANGELOG.md

@@ -1,6 +1,12 @@
 
 # Changelog
 
+## 0.30.0
+
+- `trmnlp test` quits a Firefox that stopped answering before it starts a new one. The old geckodriver kept running until something killed it.
+- `trmnlp test`'s dark mode check also fails a view where an image, SVG or canvas that shows something in light mode shows nothing in dark mode, such as a checkbox icon drawn in a fixed black, and names it. Before, a view lost to dark mode only when most of its content went, so one lost icon passed.
+- `trmnlp test`'s check for text drawn over other text reads the pixels Firefox draws for each text, in place of glyph outlines estimated from font measurements. It now also fails a glyph that only touches the line next to it, such as the bottom of a quote's last line touching the name under it, which the estimates placed a few pixels off. Text that sits close without touching still passes.
+
 ## 0.29.0
 
 - `trmnlp test` fails a screen that draws text over other text, or content text under the title bar, and names both texts, such as a name printed across the last line of a quote. Only glyphs that share inked pixels count, so a unit tucked against a number passes.

data/db/data/framework_versions.yml

@@ -1,6 +1,6 @@
 # Mirrored from the TRMNL design-system source.
 # Refresh with `rake framework:sync` — do not edit manually.
-latest: 3.4.0
+latest: 3.4.2
 versions:
 - number: 0.0.1
   released_at: '2024-06-22'
@@ -94,3 +94,7 @@ versions:
   released_at: '2026-09-18'
 - number: 3.4.0
   released_at: '2026-09-28'
+- number: 3.4.1
+  released_at: '2026-10-14'
+- number: 3.4.2
+  released_at: '2026-10-14'

data/lib/trmnlp/browser_pool.rb

@@ -23,11 +23,7 @@ module TRMNLP
         return if @shutdown
 
         @shutdown = true
-        @drivers.each do |driver|
-          driver.quit
-        rescue StandardError
-          nil
-        end
+        @drivers.each { quit(it) }
         @drivers.clear
       end
     end
@@ -72,9 +68,15 @@ module TRMNLP
 
     def recycle(driver)
       @mutex.synchronize do
-        @drivers.delete(driver)
+        quit(@drivers.delete(driver))
         @driver_factory.call.tap { |d| @drivers << d }
       end
     end
+
+    def quit(driver)
+      driver&.quit
+    rescue StandardError
+      nil
+    end
   end
 end

data/lib/trmnlp/testing/overlapping_text.js

@@ -10,19 +10,8 @@ const visiblePart = (rect, el) => {
   }
   return part;
 };
-const textMeasuringContext = document.createElement('canvas').getContext('2d');
-// A text range's box is as tall as its line, so the font's own box sits in the middle of it.
-const baselineOf = (rect, metrics) => rect.top + metrics.fontBoundingBoxAscent +
-  (rect.height - metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2;
-const inkOf = (rect, text, style, oneLine) => {
-  textMeasuringContext.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
-  const metrics = textMeasuringContext.measureText(text);
-  const baseline = baselineOf(rect, metrics);
-  const left = oneLine ? rect.left - metrics.actualBoundingBoxLeft : rect.left;
-  const right = oneLine ? rect.left + metrics.actualBoundingBoxRight : rect.right;
-  return { left, right, top: baseline - metrics.actualBoundingBoxAscent,
-           bottom: baseline + metrics.actualBoundingBoxDescent };
-};
+// A glyph can reach past its line box, above it or below it, by up to about half its font size.
+const widen = (rect, by) => ({ left: rect.left - by, top: rect.top - by, right: rect.right + by, bottom: rect.bottom + by });
 const texts = [];
 const range = document.createRange();
 const walker = document.createTreeWalker(document.querySelector('.view') || document.body, NodeFilter.SHOW_TEXT);
@@ -30,67 +19,41 @@ for (let node = walker.nextNode(); node; node = walker.nextNode()) {
   const owner = node.parentElement;
   if (!node.data.trim() || owner instanceof SVGElement || owner.closest('script, style, svg') || !shown(owner)) continue;
   range.selectNodeContents(node);
-  const style = getComputedStyle(owner);
-  const lines = [...range.getClientRects()];
-  lines.map((rect) => visiblePart(inkOf(rect, node.data.trim(), style, lines.length === 1), owner))
-    .filter((rect) => area(rect) > 4)
-    .forEach((rect) => texts.push({ node, owner, rect, text: node.data.trim().slice(0, 40) }));
+  const fontSize = parseFloat(getComputedStyle(owner).fontSize) || 16;
+  [...range.getClientRects()].map((line) => ({ line: visiblePart(line, owner), rect: visiblePart(widen(line, fontSize / 2), owner) }))
+    .filter(({ line }) => area(line) > 4)
+    .forEach(({ line, rect }) => texts.push({ owner, line, rect, text: node.data.trim().slice(0, 40) }));
 }
-const SHARED_INK_PIXELS = 4;
-const glyphCache = new Map();
-const glyphsOf = (node) => {
-  if (glyphCache.has(node)) return glyphCache.get(node);
-  const style = getComputedStyle(node.parentElement);
-  const font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
-  const glyphs = [];
-  for (let start = 0; start < node.data.length;) {
-    const end = start + String.fromCodePoint(node.data.codePointAt(start)).length;
-    const glyph = node.data.slice(start, end);
-    if (glyph.trim()) {
-      range.setStart(node, start);
-      range.setEnd(node, end);
-      [...range.getClientRects()].forEach((rect) => {
-        textMeasuringContext.font = font;
-        const metrics = textMeasuringContext.measureText(glyph);
-        const box = visiblePart(inkOf(rect, glyph, style, false), node.parentElement);
-        if (area(box) > 1) glyphs.push({ glyph, font, box, x: rect.left, baseline: baselineOf(rect, metrics) });
-      });
-    }
-    start = end;
-  }
-  glyphCache.set(node, glyphs);
-  return glyphs;
-};
-// Draws each glyph where the page put it and counts the pixels both inked, so a glyph tucked into the
-// empty corner of another glyph's box does not count.
-const inkPixels = (glyph, region) => {
-  const canvas = document.createElement('canvas');
-  canvas.width = Math.ceil(region.right - region.left);
-  canvas.height = Math.ceil(region.bottom - region.top);
-  const context = canvas.getContext('2d');
-  context.font = glyph.font;
-  context.fillText(glyph.glyph, glyph.x - region.left, glyph.baseline - region.top);
-  const alpha = context.getImageData(0, 0, canvas.width, canvas.height).data;
-  const inked = new Set();
-  for (let i = 3; i < alpha.length; i += 4) if (alpha[i] > 127) inked.add(i);
-  return inked;
-};
-const inkOverlaps = (one, other) => {
-  const shared = intersect(one.box, other.box);
-  if (area(shared) < 1) return false;
-  const otherInk = inkPixels(other, shared);
-  return [...inkPixels(one, shared)].filter((pixel) => otherInk.has(pixel)).length >= SHARED_INK_PIXELS;
-};
-const inkTouches = (a, b) => glyphsOf(a.node).some((glyph) => glyphsOf(b.node).some((other) => inkOverlaps(glyph, other)));
 const related = (a, b) => a === b || a.contains(b) || b.contains(a);
-const found = [];
+const pairs = [];
+const neighbors = new Map(texts.map((t) => [t.owner, new Set()]));
 texts.forEach((a, i) => texts.slice(i + 1).forEach((b) => {
-  if (!related(a.owner, b.owner) && covers(a.rect, b.rect, 0) && inkTouches(a, b)) found.push(`"${a.text}" and "${b.text}"`);
+  if (a.owner === b.owner || !covers(a.rect, b.rect, 0)) return;
+  neighbors.get(a.owner).add(b.owner);
+  neighbors.get(b.owner).add(a.owner);
+  if (!related(a.owner, b.owner)) pairs.push([a, b]);
 }));
+// Texts whose widened boxes do not meet share a group, and each group one screenshot.
+const groups = new Map();
+pairs.flat().map((t) => t.owner).forEach((owner) => {
+  if (groups.has(owner)) return;
+  const taken = new Set([...neighbors.get(owner)].map((other) => groups.get(other)));
+  let group = 0;
+  while (taken.has(group)) group += 1;
+  groups.set(owner, group);
+});
+groups.forEach((group, owner) => owner.setAttribute('data-trmnlp-text', group));
+const candidates = pairs.map(([a, b]) => {
+  const region = intersect(a.rect, b.rect);
+  return { texts: [groups.get(a.owner), groups.get(b.owner)], names: `"${a.text}" and "${b.text}"`,
+           region: { left: region.left, top: region.top, width: region.right - region.left,
+                     height: region.bottom - region.top } };
+});
+const underTitleBar = [];
 const titleBar = document.querySelector('.view .title_bar');
 if (titleBar) {
   const bar = titleBar.getBoundingClientRect();
-  texts.filter((t) => !titleBar.contains(t.owner) && covers(t.rect, bar, 1 / 3))
-    .forEach((t) => found.push(`"${t.text}" and the title bar`));
+  texts.filter((t) => !titleBar.contains(t.owner) && covers(t.line, bar, 1 / 3))
+    .forEach((t) => underTitleBar.push(`"${t.text}" and the title bar`));
 }
-return [...new Set(found)];
+return { candidates, under_title_bar: [...new Set(underTitleBar)] };

data/lib/trmnlp/testing/publishable_recipe.rb

@@ -21,6 +21,9 @@ module TRMNLP
     # Share of a layout's ink its dark mode render must keep. Of 17 recipes measured on 10-13, those that draw
     # well in dark mode kept 85% or more; those whose text turned black on black kept 0% to 15%.
     DARK_MODE_MIN_INK_KEPT = 0.5
+    DARK_MODE_MIN_LIGHT_IMAGE_INK_PIXELS = 16
+    # Share of an image's ink its dark mode render must keep: lost icons kept 0%, the lowest one shown 17% (10-14).
+    DARK_MODE_MIN_IMAGE_INK_KEPT = 0.05
 
     # Each select field's keyname and the values its options save, from the plugin's settings.yml.
     def self.select_field_values
@@ -61,7 +64,8 @@ RSpec.shared_examples 'a publishable recipe' do |screens: TRMNLP::Testing::PUBLI
   TRMNLP::Testing::PUBLISHABLE_RECIPE_VIEWS.each do |view|
     it "keeps the #{view} view's content in dark mode" do
       light = trmnl.render(view:, **dark_mode_screen, **recipe_inputs)
-      expect(trmnl.render(view:, **dark_mode_screen, **recipe_inputs, dark_mode: true)).to keep_the_content_of(light)
+      expect(trmnl.render(view:, **dark_mode_screen, **recipe_inputs, dark_mode: true))
+        .to keep_the_content_of(light).and keep_each_image_of(light)
     end
   end
 

data/lib/trmnlp/testing/rspec.rb

@@ -103,6 +103,28 @@ RSpec::Matchers.define :keep_the_content_of do |light|
   end
 end
 
+# Each image, SVG and canvas that stands out in light mode must still show in dark mode.
+RSpec::Matchers.define :keep_each_image_of do |light|
+  def ink(screen, box) = TRMNLP::Testing::InkCount.new(screen.png_path, area: box).pixels
+
+  def lost_images(light, dark)
+    light.drawn_images.zip(dark.drawn_images).filter_map do |(name, light_box), (dark_name, dark_box)|
+      next unless name == dark_name
+
+      light_ink = ink(light, light_box)
+      lost = light_ink >= TRMNLP::Testing::DARK_MODE_MIN_LIGHT_IMAGE_INK_PIXELS &&
+             ink(dark, dark_box) < light_ink * TRMNLP::Testing::DARK_MODE_MIN_IMAGE_INK_KEPT
+      "#{name} at #{light_box.left.round},#{light_box.top.round}" if lost
+    end
+  end
+
+  match { |dark| (@lost = lost_images(light, dark)).empty? }
+  failure_message do |dark|
+    "expected #{dark.inspect} in dark mode to keep each image, but #{@lost.join(', ')} shows nothing in dark " \
+      'mode: it is drawn in a fixed black (#000, black). Use currentColor, or image--adaptive on an <img>.'
+  end
+end
+
 RSpec::Matchers.define :have_no_text_clamped_with_room_to_spare do
   match { |screen| screen.clamped_with_room.empty? }
   failure_message do |screen|

data/lib/trmnlp/testing/screen.rb

@@ -5,6 +5,7 @@ require 'delegate'
 require 'nokogiri'
 
 require_relative 'qr_scanner'
+require_relative 'text_ink'
 
 module TRMNLP
   module Testing
@@ -111,10 +112,27 @@ module TRMNLP
         }).map((el) => `"${el.innerText.trim()}" (all of "${el.getAttribute('data-clamp-original').trim()}" fits)`);
       JS
 
-      # Pairs of text whose ink is drawn over each other, and text drawn under the title bar. Each line's ink is cut
-      # to what its clipping parents show; two count when their glyphs share inked pixels.
+      # Pairs of text near enough to touch, and text drawn under the title bar. TextInk decides which pairs touch.
       OVERLAPPING_TEXT_SCRIPT = File.read(File.join(__dir__, 'overlapping_text.js')).freeze
 
+      # Each drawn image, SVG and canvas in the view but the Framework's adaptive icon, its box cut to the screen.
+      DRAWN_IMAGES_SCRIPT = <<~JS
+        const screen = document.documentElement.getBoundingClientRect();
+        const describe = (el) => el.tagName.toLowerCase() + (el.id ? '#' + el.id : '') +
+          (el.classList.length ? '.' + [...el.classList].join('.') : '');
+        return [...document.querySelectorAll('.view img, .view svg, .view canvas')]
+          .filter((el) => !el.parentElement.closest('svg') && !el.matches('img.image--adaptive[data-adaptive]') &&
+            el.checkVisibility({ opacityProperty: true }))
+          .map((el) => {
+            const box = el.getBoundingClientRect();
+            const left = Math.max(box.left, 0);
+            const top = Math.max(box.top, 0);
+            const right = Math.min(box.right, screen.right);
+            const bottom = Math.min(box.bottom, screen.bottom);
+            return { name: describe(el), left, top, right, bottom, width: right - left, height: bottom - top };
+          }).filter((image) => image.width >= 1 && image.height >= 1);
+      JS
+
       HIDDEN_MARK = 'data-trmnlp-hidden'
       # The DOM with every element Firefox does not draw marked, so Capybara's visible text is what is on screen.
       DRAWN_DOM_SCRIPT = <<~JS.freeze
@@ -154,8 +172,20 @@ module TRMNLP
 
       def overflowing(except: nil) = @browser.on(self) { it.execute_script(OVERFLOW_SCRIPT, except) }
 
+      def drawn_images
+        @browser.on(self) { it.execute_script(DRAWN_IMAGES_SCRIPT) }.map do |image|
+          [image['name'], Box.new(**image.slice(*Box.members.map(&:to_s)).transform_keys(&:to_sym))]
+        end
+      end
+
       def clamped_with_room = @browser.on(self) { it.execute_script(CLAMPED_WITH_ROOM_SCRIPT) }
-      def overlapping_text = @browser.on(self) { it.execute_script(OVERLAPPING_TEXT_SCRIPT) }
+
+      def overlapping_text
+        @browser.on(self) do |driver|
+          found = driver.execute_script(OVERLAPPING_TEXT_SCRIPT)
+          TextInk.new(driver).overlapping(found['candidates']) + found['under_title_bar']
+        end
+      end
 
       # Script errors, unhandled rejections, console.error lines and files that failed to load.
       def problems = evaluate('window.__trmnlpProblems || []')

data/lib/trmnlp/testing/text_ink.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+require 'mini_magick'
+require 'tempfile'
+
+module TRMNLP
+  module Testing
+    # Which candidate pairs of text share inked pixels, as Firefox draws them.
+    class TextInk
+      MIN_SHARED_INK_PIXELS = 4
+      TEXT_GROUP_ATTRIBUTE = 'data-trmnlp-text'
+      INK_ATTRIBUTE = 'data-trmnlp-ink'
+      HIDE_TEXT_STYLE = <<~CSS.freeze
+        .view, .view * { color: transparent !important; -webkit-text-fill-color: transparent !important;
+                         -webkit-text-stroke-width: 0 !important; text-shadow: none !important; }
+        .view [#{INK_ATTRIBUTE}="black"] { color: #000 !important; -webkit-text-fill-color: #000 !important; }
+        .view [#{INK_ATTRIBUTE}="white"] { color: #fff !important; -webkit-text-fill-color: #fff !important; }
+      CSS
+
+      def initialize(driver)
+        @driver = driver
+        @masks = {}
+      end
+
+      # candidates: { 'texts' => [group, group], 'names' => String, 'region' => { left, top, width, height } }.
+      def overlapping(candidates)
+        return [] if candidates.empty?
+
+        hide_text
+        candidates.select { shared_pixels(it) >= MIN_SHARED_INK_PIXELS }.map { it['names'] }.uniq
+      ensure
+        show_text
+      end
+
+      private
+
+      def shared_pixels(candidate)
+        one, other = candidate['texts'].map { mask(it) }
+        one.shared_with(other, candidate['region'])
+      end
+
+      # One byte per pixel of the screen, above zero where the text inks.
+      Mask = Data.define(:width, :height, :pixels) do
+        def shared_with(other, region)
+          left, top = region.values_at('left', 'top').map { it.floor.clamp(0..) }
+          right = (region['left'] + region['width']).ceil.clamp(..width)
+          bottom = (region['top'] + region['height']).ceil.clamp(..height)
+          (top...bottom).sum { |row| (left...right).count { inked?(it, row) && other.inked?(it, row) } }
+        end
+
+        def inked?(column, row) = pixels.getbyte((row * width) + column).positive?
+      end
+
+      # Where the group inks more than half a pixel: the difference of a black and a white screenshot.
+      def mask(group)
+        @masks[group] ||= begin
+          black, white = %w[black white].map { screenshot_with(group, it) }
+          Tempfile.create(['text-ink', '.pgm']) do |pgm|
+            MiniMagick.convert do |convert|
+              convert << black.path << white.path << '-alpha' << 'off' << '-compose' << 'difference' << '-composite'
+              convert << '-separate' << '-evaluate-sequence' << 'max' << '-threshold' << '50%' << '-depth' << '8'
+              convert << pgm.path
+            end
+            parse_pgm(File.binread(pgm.path))
+          end
+        ensure
+          [black, white].compact.each(&:close!)
+        end
+      end
+
+      # A binary PGM: "P5", width, height and the largest value, then one byte per pixel.
+      def parse_pgm(data)
+        header = data.match(/\AP5\s+(\d+)\s+(\d+)\s+\d+\s/)
+        Mask.new(width: header[1].to_i, height: header[2].to_i, pixels: data.byteslice(header.end(0)..))
+      end
+
+      def screenshot_with(group, color)
+        run_on_group_elements(group, "el.setAttribute('#{INK_ATTRIBUTE}', '#{color}')")
+        Tempfile.new(['text-ink', '.png']).tap { @driver.save_screenshot(it.path) }
+      ensure
+        run_on_group_elements(group, "el.removeAttribute('#{INK_ATTRIBUTE}')")
+      end
+
+      def run_on_group_elements(group, statement)
+        selector = "[#{TEXT_GROUP_ATTRIBUTE}=\"#{group}\"]"
+        @driver.execute_script("document.querySelectorAll('#{selector}').forEach((el) => #{statement})")
+      end
+
+      def hide_text
+        @driver.execute_script(<<~JS, HIDE_TEXT_STYLE)
+          const style = document.createElement('style');
+          style.id = 'trmnlp-text-ink';
+          style.textContent = arguments[0];
+          document.head.appendChild(style);
+        JS
+      end
+
+      def show_text
+        @driver.execute_script("document.getElementById('trmnlp-text-ink')?.remove(); " \
+                               "document.querySelectorAll('[#{TEXT_GROUP_ATTRIBUTE}]')" \
+                               ".forEach((el) => el.removeAttribute('#{TEXT_GROUP_ATTRIBUTE}'))")
+      end
+    end
+  end
+end

data/lib/trmnlp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLP
-  VERSION = '0.29.0'
+  VERSION = '0.30.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.29.0
+  version: 0.30.0
 platform: ruby
 authors:
 - Rockwell Schrock
@@ -496,6 +496,7 @@ files:
 - lib/trmnlp/testing/run.rb
 - lib/trmnlp/testing/screen.rb
 - lib/trmnlp/testing/snapshot.rb
+- lib/trmnlp/testing/text_ink.rb
 - lib/trmnlp/transform_backend/http.rb
 - lib/trmnlp/transform_backend/subprocess.rb
 - lib/trmnlp/transform_backend/which.rb