Update tests

css/style.css

@@ -3,34 +3,26 @@
   --primary: #006b58;
   --primary-container: #1abc9c;
   --on-primary: #ffffff;
-  /* --on-primary-container: #004538; */
   --on-primary-container: #e5fff7;
   --secondary: #4e6073;
   --on-secondary: #ffffff;
-  --on-secondary-container: #526478;
   --background: #f7f9fb;
-  --surface: #f7f9fb;
   --surface-container-lowest: #ffffff;
   --surface-container-low: #f2f4f6;
   --surface-container: #eceef0;
   --surface-container-high: #e6e8ea;
-  --surface-container-highest: #e0e3e5;
   --on-surface: #191c1e;
   --on-surface-variant: #3c4a45;
   --on-background: #191c1e;
   --text-muted: #64748b;
   --border-subtle: #e2e8f0;
-  --outline: #6c7a75;
   --outline-variant: #bbcac3;
-  /* --editor-bg: #1e1e1e; */
   --editor-bg: #ffffff;
   --error: #ba1a1a;
 
   /* Radii */
-  --radius: 0.125rem;
   --radius-lg: 0.25rem;
   --radius-xl: 0.5rem;
-  --radius-full: 0.75rem;
 
   /* Fonts */
   --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
@@ -353,12 +345,6 @@ code {
   float: left;
 }
 
-.column-center {
-  min-width: 120px;
-  text-align: center;
-  color: var(--text-muted);
-}
-
 .column-right {
   float: right;
   margin-left: auto;
@@ -801,20 +787,16 @@ input[type="file"]::file-selector-button {
   --on-primary-container: #e5fff7;
   --secondary: #b5c8df;
   --on-secondary: #17293b;
-  --on-secondary-container: #cfe2f9;
   --background: #0f1416;
-  --surface: #0f1416;
   --surface-container-lowest: #171d1f;
   --surface-container-low: #1a2124;
   --surface-container: #22282b;
   --surface-container-high: #2a3033;
-  --surface-container-highest: #343a3d;
   --on-surface: #e0e3e5;
   --on-surface-variant: #c3d0c9;
   --on-background: #e0e3e5;
   --text-muted: #8a9a94;
   --border-subtle: #2d3133;
-  --outline: #8a938f;
   --outline-variant: #414a47;
   --editor-bg: #0b0e0f;
 }

js/script.js

@@ -860,7 +860,6 @@ function handleImageSelection(evt) {
         fn.className = 'file-info file-name';
         fn.innerHTML = `${file.name} (file resolution: ${img.width} x ${img.height})`;
 
-
         fn.appendChild(rb);
 
         fileInputColumnEntryRemoveButton.onclick = removeButtonOnClick;

tests/golden/kitchen_sink.txt

@@ -1,7 +1,7 @@
 // 'test_pattern', 32x24px
-80000000804020100804020100000000
-00000000ff7fffff904fb04bb5ffaaff
-0001000208010e010e030d0e8b4f2f1f
-0c0c0303fcfcf3f31cac5323dc7cd3f3
-000000aa009a611ee15eabfdb7ffffff
-cccc3333cccc3333cccc3333cccc3333
+0x80, 0x00, 0x00, 0x00, 0x80, 0x40, 0x20, 0x10, 0x08, 0x04, 0x02, 0x01, 0x00, 0x00, 0x00, 0x00, 
+0x00, 0x00, 0x00, 0x00, 0xff, 0x7f, 0xff, 0xff, 0x90, 0x4f, 0xb0, 0x4b, 0xb5, 0xff, 0xaa, 0xff, 
+0x00, 0x01, 0x00, 0x02, 0x08, 0x01, 0x0e, 0x01, 0x0e, 0x03, 0x0d, 0x0e, 0x8b, 0x4f, 0x2f, 0x1f, 
+0x0c, 0x0c, 0x03, 0x03, 0xfc, 0xfc, 0xf3, 0xf3, 0x1c, 0xac, 0x53, 0x23, 0xdc, 0x7c, 0xd3, 0xf3, 
+0x00, 0x00, 0x00, 0xaa, 0x00, 0x9a, 0x61, 0x1e, 0xe1, 0x5e, 0xab, 0xfd, 0xb7, 0xff, 0xff, 0xff, 
+0xcc, 0xcc, 0x33, 0x33, 0xcc, 0xcc, 0x33, 0x33, 0xcc, 0xcc, 0x33, 0x33, 0xcc, 0xcc, 0x33, 0x33

tests/golden/remove_zeroes_commas.txt

@@ -1,2 +1,7 @@
 // 'test_pattern', 32x24px
-333300ff333300ffcccc00ffcccc00ff333300ff333300ffcccc00ffcccc00ff333300ff333300ffcccc00ffcccc00ff0f0f7fff0f0fbfff0f0fdfff0f0fefff0f0ff7ff0f0ffbff0f0ffdff0f0ffeff0f0fff7f0f0fffbf0f0fffdf0f0fffee
+333300ff333300ffcccc00ffcccc00ff
+333300ff333300ffcccc00ffcccc00ff
+333300ff333300ffcccc00ffcccc00ff
+0f0f7fff0f0fbfff0f0fdfff0f0fefff
+0f0ff7ff0f0ffbff0f0ffdff0f0ffeff
+0f0fff7f0f0fffbf0f0fffdf0f0fffee

tests/test_conversions.py

@@ -43,7 +43,15 @@ BASE_SETTINGS = {
     "flipHorizontally": False,
     "flipVertically": False,
     "bitswap": False,
-    "removeZeroesCommas": False,
+    "prefix": "0x",
+    "separator": ", ",
+}
+
+OUTPUT_FORMAT_IDS = {
+    "plain": "outputFormatPlain",
+    "arduino": "outputFormatArduino",
+    "arduino_single": "outputFormatArduinoSingle",
+    "adafruit_gfx": "outputFormatAdafruitGfx",
 }
 
 # (scenario name, overrides on top of BASE_SETTINGS, optional canvas resize)
@@ -69,7 +77,7 @@ SCENARIOS = [
     ("dithering_threshold_low", {"ditheringThreshold": 64}, None),
     ("dithering_threshold_high", {"ditheringThreshold": 200}, None),
     ("bitswap", {"bitswap": True}, None),
-    ("remove_zeroes_commas", {"removeZeroesCommas": True}, None),
+    ("remove_zeroes_commas", {"prefix": "", "separator": ""}, None),
     # scale=1 (original) on a canvas larger than the image so the
     # background actually shows through in the margins.
     ("background_white_larger_canvas", {"backgroundColor": "white"}, (48, 40)),
@@ -116,7 +124,10 @@ def reset_canvas_size(page, width, height):
 
 def apply_settings(page, settings):
     page.select_option("#drawMode", settings["drawMode"])
-    page.select_option("#outputFormat", settings["outputFormat"])
+    # Selecting an output format resets prefix/separator to their defaults
+    # (updateOutputFormat() in script.js), so this must run before those two
+    # fields are filled in below.
+    page.check(f"#{OUTPUT_FORMAT_IDS[settings['outputFormat']]}")
     page.check(f"#backgroundColor{settings['backgroundColor'].capitalize()}")
     set_checkbox(page, "#invertColors", settings["invertColors"])
     page.select_option("#ditheringMode", str(settings["ditheringMode"]))
@@ -128,8 +139,8 @@ def apply_settings(page, settings):
     set_checkbox(page, "#flipHorizontally", settings["flipHorizontally"])
     set_checkbox(page, "#flipVertically", settings["flipVertically"])
     set_checkbox(page, "#bitswap", settings["bitswap"])
-    if settings["outputFormat"] == "plain":
-        set_checkbox(page, "#removeZeroesCommas", settings["removeZeroesCommas"])
+    page.fill("#prefix", settings["prefix"])
+    page.fill("#separator", settings["separator"])
 
 
 def set_checkbox(page, selector, checked):
@@ -154,14 +165,14 @@ def run_scenario(page, name, overrides, resize):
 def roundtrip_eligible(settings):
     """Only plain-format, non-bitswapped 1-bit output is re-importable via the
     "Paste byte array" box: other draw modes aren't supported by the parser,
-    and bitswap/removeZeroesCommas mangle the byte stream so it can't be read
-    back (bitswap reorders bits with no importer to undo it; removeZeroesCommas
-    drops the separators the parser splits on)."""
+    bitswap mangles the byte stream with no importer to undo it, and the
+    parser splits bytes on commas, so a separator without one (e.g. the
+    empty string used to strip formatting) can't be read back."""
     return (
         settings["drawMode"] in ("horizontal1bit", "vertical1bit")
         and settings["outputFormat"] == "plain"
         and not settings["bitswap"]
-        and not settings["removeZeroesCommas"]
+        and "," in settings["separator"]
     )
 
 
@@ -173,7 +184,7 @@ def run_roundtrip(page, output, draw_mode, width, height):
     page.goto(INDEX_HTML.as_uri())
     # window.onload defaults outputFormat to "arduino"; force it back to plain
     # to match the format the scenario was exported in.
-    page.select_option("#outputFormat", "plain")
+    page.check(f"#{OUTPUT_FORMAT_IDS['plain']}")
     page.fill("#byte-input", output)
     page.fill("#text-input-width", str(width))
     page.fill("#text-input-height", str(height))