WP test container created

src/demo/demo.js

@@ -107,9 +107,38 @@ function trackViewport () {
   update()
 }
 
+// -- Parchment ladder --------------------------------------------------------
+//
+// Heights the live site ships a bitmap for, then two it does not.
+
+const IMG = '/wp-content/includes/images/menu'
+const LADDER = [
+  { h: 309, src: `${IMG}/papyrus_submenu_309.png` },
+  { h: 351, src: `${IMG}/papyrus_submenu_351_cnd.png` },
+  { h: 366, src: `${IMG}/papyrus_submenu_366_cnd.png` },
+  { h: 402, src: `${IMG}/papyrus_submenu_402_cnd.png` },
+  { h: 450, src: `${IMG}/papyrus_submenu_450_cnd.png` },
+  { h: 180, src: null },
+  { h: 620, src: null },
+]
+
+function renderLadder () {
+  document.querySelector('#ladder').innerHTML = LADDER.map(({ h, src }) => `
+    <div class="parchment-row">
+      <div class="parchment-row__key">${h}px</div>
+      <p class="parchment-row__caption">original bitmap</p>
+      ${src
+        ? `<img src="${src}" alt="the original ${h}px bitmap" style="height:${h}px">`
+        : `<div class="parchment-row__none" style="height:${h}px">no bitmap exists for this height</div>`}
+      <p class="parchment-row__caption">.parchment, from the one 9-slice tile</p>
+      <div class="parchment" style="height:${h}px; box-sizing:border-box"></div>
+    </div>`).join('')
+}
+
 // -- Wire up -----------------------------------------------------------------
 
 renderSwatches()
+renderLadder()
 trackViewport()
 
 // `?script=bg` opens straight onto a given script, so a particular cut can be