Function runSweep

pages/accuracy.ts:192–277

()

}

function runSweep(): { total: number, mismatches: Mismatch[], rows: AccuracyRow[] } {
  const container = document.createElement('div')
  container.style.cssText = 'position:absolute;top:-9999px;left:-9999px;visibility:hidden'
  document.body.appendChild(container)

  const mismatches: Mismatch[] = []
  const rows: AccuracyRow[] = []
  let total = 0

  for (const fontFamily of FONTS) {
    for (const fontSize of SIZES) {
      const font = `${fontSize}px ${fontFamily}`
      const lineHeight = Math.round(fontSize * 1.2)
      clearCache()

      for (const maxWidth of WIDTHS) {
        const divs: HTMLDivElement[] = []
        const prepared: PreparedTextWithSegments[] = []

        for (const { text } of TEXTS) {
          const div = document.createElement('div')
          div.style.font = font
          div.style.lineHeight = `${lineHeight}px`
          div.style.width = `${maxWidth}px`
          div.style.wordWrap = 'break-word'
          div.style.overflowWrap = 'break-word'
          div.textContent = text
          container.appendChild(div)
          divs.push(div)
          prepared.push(prepareWithSegments(text, font))
        }

        for (let i = 0; i < TEXTS.length; i++) {
          const { label, text } = TEXTS[i]!
          const actual = divs[i]!.getBoundingClientRect().height
          const predicted = layout(prepared[i]!, maxWidth, lineHeight).height
          rows.push({
            label,
            font: fontFamily,
            fontSize,
            lineHeight,
            width: maxWidth,
            actual,
            predicted,
            diff: predicted - actual,
          })
          total++
          if (Math.abs(actual - predicted) >= 1) {
            const browserLines = getBrowserLines(prepared[i]!, divs[i]!)
            const ourLayout = layoutWithLines(prepared[i]!, maxWidth, lineHeight)

            const lineDetails: string[] = []
            const maxLines = Math.max(browserLines.length, ourLayout.lines.length)
            for (let li = 0; li < maxLines; li++) {
              const ours = (ourLayout.lines[li]?.text ?? '').trimEnd()
              const theirs = (browserLines[li] ?? '').trimEnd()
              if (ours !== theirs) {
                lineDetails.push(`L${li+1} ours="${ours.slice(0,40)}" browser="${theirs.slice(0,40)}"`)