ElyMark: task boxes are drawn at text size on the first line (R2.14)

apps/ely-mark/examples/markprobe.rs

@@ -56,6 +56,17 @@ const CHECK: &str = r#"
       inline: seen(view.querySelector('.milkdown p .katex')),
       display: seen(view.querySelector('.milkdown p .katex-display')),
       tasks: view.querySelectorAll('li[data-item-type="task"]').length,
+      box: (() => {
+        const item = view.querySelector('li[data-item-type="task"]');
+        if (!item) return null;
+        const mark = getComputedStyle(item, '::before');
+        const range = document.createRange();
+        range.selectNodeContents(item.querySelector('p'));
+        const line = range.getClientRects()[0];
+        const top = item.getBoundingClientRect().top + parseFloat(mark.marginTop);
+        const size = parseFloat(getComputedStyle(item).fontSize);
+        return [parseFloat(mark.width) / size, parseFloat(mark.height) / size, top + parseFloat(mark.height) / 2 - (line.top + line.height / 2)];
+      })(),
       cells: view.querySelectorAll('.milkdown td').length,
       notes: view.querySelectorAll('[data-type="footnote_definition"]').length,
       blocks,

apps/ely-mark/web/src/main.css

@@ -116,12 +116,22 @@ a {
   list-style: none;
 }
 
+/* A text-sized box, centred on the first line. */
 .milkdown li[data-item-type='task']::before {
-  content: '☐ ';
+  content: '';
+  flex: none;
+  box-sizing: border-box;
+  width: 1em;
+  height: 1em;
+  margin-top: calc(0.25em + (1lh - 1em) / 2);
+  border: 0.09em solid var(--ely-fg-muted);
+  border-radius: 0.2em;
 }
 
 .milkdown li[data-item-type='task'][data-checked='true']::before {
-  content: '☑ ';
+  border-color: var(--ely-link);
+  background: var(--ely-link);
+  box-shadow: inset 0 0 0 0.18em var(--ely-bg);
 }
 
 .milkdown hr {

tests/scripts/mark-content.sh

@@ -62,6 +62,10 @@ for step in ("visual", "themed", "preview"):
     for key, value in [("title", "Title"), ("heading", True), ("inline", True), ("display", True), ("tasks", 2),
                        ("cells", 2), ("notes", 1), ("font", True), ("editors", 1)]:
         want(step, key, value)
+    # The task box: text-sized, centred on its line.
+    width, height, off = seen[step]["box"]
+    if abs(width - 1) > 0.01 or abs(height - 1) > 0.01 or abs(off) > 1:
+        sys.exit(f"FAIL: {step} task box is {seen[step]['box']}")
     blocks = seen[step]["blocks"]
     if [block["language"] for block in blocks] != languages:
         sys.exit(f"FAIL: {step} blocks are {blocks}")