Build Your Own Browser

case 'Data':
  if (ch === '<') { flushText(); go('TagOpen', ch) }
  else { if (!text) textStart = pos; text += ch }
  break
case 'TagOpen':
  if (ch === '!') go('MarkupDeclarationOpen', ch)
  else if (ch === '/') go('EndTagOpen', ch)
  else if (/[a-zA-Z]/.test(ch)) { tag = { name: ch.toLowerCase(), attrs: [], ... }; go('TagName', ch) }
  else { text += '<' + ch; go('Data', ch) }   // "<" followed by a non-letter was text after all
  break

const emitTag = (ch) => {
  tokens.push(tag.end ? { type: 'EndTag', name } : { type: 'StartTag', name, attrs, selfClosing })
  // the one place the tokenizer depends on the tag it just emitted
  if (!tag.end && RAW_TEXT_ELEMENTS.has(tag.name)) { rawTag = tag.name; go('RawText', ch) }
  else go('Data', ch)
}
// ...
case 'RawTextEndTagName': {
  // only the matching end tag ends raw text; "</div>" inside <script> is script text
  const maybe = input.slice(pos, pos + rawTag.length).toLowerCase()
  if (maybe === rawTag && /[>\s]/.test(input[pos + rawTag.length] ?? '')) { ...emit Character(rawBuf), EndTag(rawTag)... }
  else { rawBuf += '</' + ch; go('RawText', ch) }
}

let note = ''
if (CLOSES_P.has(name) && stack.some(e => e.tagName === 'p')) {
  popUntil('p')
  note = ' (open <p> closed first: block cannot nest in p)'
}
if (name === 'li' && current().tagName === 'li') { stack.pop(); note = ' (previous <li> closed first)' }
const el = insertElement(name, t.attrs)          // appends under current(), pushes
if (VOID_ELEMENTS.has(name) || t.selfClosing) { stack.pop(); note += ' (void: popped immediately)' }
record(t, `<${name}> inserted under <${parentName}>${note}`)

if (current()?.tagName === name) { stack.pop(); record(t, `</${name}> matches current node: popped`) }
else if (popUntil(name)) record(t, `</${name}> did not match: popped until <${name}> closed (misnested)`)
else record(t, `</${name}> with nothing to close: ignored`)

// Right to left: the rightmost compound must match the element itself; then
// walk the ancestors for each combinator. Most selectors fail here and the walk never happens.
export function matchesSelector(el, sel) {
  const parts = sel.parts
  let idx = parts.length - 1
  if (!matchesCompound(el, parts[idx].compound)) return false
  let node = el
  while (idx > 0) {
    const comb = parts[idx].combinator
    idx--
    const target = parts[idx].compound
    if (comb === '>') { node = node.parentElement; if (!node || !matchesCompound(node, target)) return false }
    else { node = node.parentElement; while (node && !matchesCompound(node, target)) node = node.parentElement; if (!node) return false }
  }
  return true
}

// cascade sort: ascending by (origin+importance, specificity, order); the last one wins
const rank = (d) => {
  const originRank = d.important ? (d.source === 'ua' ? 5 : 4) : d.source === 'inline' ? 3 : d.source === 'author' ? 2 : 1
  return [originRank, d.specificity, d.order]
}
for (const prop of KNOWN) {
  const list = (byProp.get(prop) ?? []).sort(compareRank)
  const winner = list[list.length - 1]
  if (winner && winner.value !== 'inherit') cs.set(prop, { value: winner.value, from: 'declared', winner, candidates: list })
  else if ((INHERITED.has(prop) || winner?.value === 'inherit') && parentStyle?.has(prop)) cs.set(prop, { value: parentStyle.get(prop).value, from: 'inherited', candidates: list })
  else cs.set(prop, { value: INITIAL[prop], from: 'initial', candidates: list })
}
// computed values: font-size first (em on font-size refers to the parent), then lengths relative to it
const fs = toPx(cs.get('font-size').value, parentFs, parentFs)
for (const [prop, res] of cs) if (/^(margin|padding|border-.*-width|width|height)/.test(prop) && res.value !== 'auto' && !/%$/.test(res.value)) res.value = `${toPx(res.value, fs)}px`

// width: auto fills the containing block minus the horizontal edges (CSS 2.1 §10.3.3)
if (wv === 'auto') width = cb.width - horiz - box.margin.left - box.margin.right
else {
  width = px(wv, cb.width)
  const free = cb.width - width - horiz
  if (ml === 'auto' && mr === 'auto') box.margin.left = box.margin.right = free / 2   // centred
  else if (ml === 'auto') box.margin.left = free - box.margin.right
  else box.margin.right = free - box.margin.left                                     // over-constrained: margin-right gives
}
// vertical margin collapsing with the previous sibling: the larger wins
let collapsedTop = box.margin.top
if (prevMarginBottom !== null) collapsedTop = Math.max(box.margin.top, prevMarginBottom) - prevMarginBottom
box.content = { x: cb.x + box.margin.left + box.border.left + box.padding.left, y: cb.y + collapsedTop + box.border.top + box.padding.top, width, height: 0 }

const words = raw.trim().split(/\s+/)
if (leading && cursorX > 0) cursorX += space        // collapsed whitespace: a leading space only matters mid-line
words.forEach((w, idx) => {
  const text = idx > 0 ? ' ' + w : w
  let tw = ctx.measure(text, font)                 // canvas measureText: the shaper we borrow
  if (cursorX + tw > width && line.items.length) {   // does not fit, and the line is not empty
    flush()                                        // close the line box, start the next
    tw = ctx.measure(w, font)
  }
  line.items.push({ box, x: cursorX, width: tw, text, font, fontSize: fs, color, baseline: fs * 0.8 })
  cursorX += tw
  line.height = Math.max(line.height, lh)
})
if (trailing) cursorX += space

// CSS 2.1 appendix E, abbreviated: for each block, its background and border,
// then its block children in order, then its inline content.
const paintBlock = (box) => {
  const bb = borderBox(box)
  if (bg !== 'transparent') commands.push({ op: 'rect', rect: bb, color: bg, box, why: 'background' })
  if (hasBorder) commands.push({ op: 'border', rect: bb, widths, colors, box })
  if (box.lines) {
    for (const b of inlineBoxesIn(box)) for (const f of b.fragments) commands.push({ op: 'rect', rect: f, color: bgOf(b), box: b })
    for (const ln of box.lines) for (const it of ln.items) commands.push({ op: 'text', x: box.content.x + it.x, y: ln.y + it.baseline + (ln.height - it.fontSize) / 2, text: it.text, font: it.font, color: it.color, box: it.box })
  } else for (const c of box.children) paintBlock(c)
}

step(): boolean {
  for (const t of dueTimers()) this.tasks.push({ label: t.label, run: t.run })   // 1. promote
  const hadTask = this.tasks.length > 0
  if (hadTask) {                                                                 // 2. one task
    const t = this.tasks.shift()!
    this.emit('task', t.label); t.run(); this.time += 2
    this.drainMicrotasks()                                                       // 3. all microtasks
  }
  const frameDue = this.time % this.frameInterval < 2 || !hadTask
  if (frameDue) {                                                                // 4. rendering opportunity
    for (const r of this.takeRafs()) { this.emit('raf', r.label); r.run(this.time); this.drainMicrotasks() }
    if (this._dirty) { this.hooks.render(this.dirtyReasons.join(', ')); this._dirty = false }
    if (!hadTask) this.time += this.frameInterval
  }
  return this.tasks.length + this.microtasks.length + this.rafs.length + this.timers.length > 0 || this._dirty
}

// the script sees only these; every mutation marks the loop dirty with a reason
const fn = new Function('document', 'console', 'setTimeout', 'clearTimeout', 'queueMicrotask', 'requestAnimationFrame', 'Promise', src)
fn(sandbox.document, sandbox.console, sandbox.setTimeout, ..., sandbox.Promise)

class ScriptElement {
  set textContent(v) { this.el.textContent = v; this.loop.markDirty(`textContent on <${this.el.tagName}>`) }
  get offsetHeight() {
    // a layout read: forces a synchronous layout if the loop is dirty. the host reports it on the timeline.
    return this.loop.dirty ? forcedLayoutHook(this.loop, this.el) : lastKnownHeight(this.el)
  }
}