dsh-structured 0.9.4 → 0.9.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +130 -108
- package/README.md +274 -273
- package/assets/screenshots/01-title-card.png +0 -0
- package/assets/screenshots/06-status-table.png +0 -0
- package/assets/screenshots/07-code-block.png +0 -0
- package/assets/screenshots/08-narrow.png +0 -0
- package/assets/screenshots/09-theme-light.png +0 -0
- package/assets/screenshots/10-theme-dark.png +0 -0
- package/docs/0.9-FINAL-RELEASE.md +22 -0
- package/docs/1.0-BASELINE.md +38 -0
- package/docs/1.0-GATE.md +39 -0
- package/docs/1.0-PERSONA-SPEC.md +59 -0
- package/lib/client.js +95 -68
- package/lib/index.js +518 -517
- package/package.json +102 -99
- package/scripts/theme-contrast.mjs +2 -2
- package/scripts/theme-hue-distance.mjs +55 -0
- package/src/client.js +93 -66
- package/src/index.js +516 -515
- package/test/client-cards.test.mjs +145 -140
- package/test/client-incremental.test.mjs +105 -0
- package/test/client-visual.test.mjs +299 -290
- package/test/fixtures/first-glance.html +80 -0
- package/test/fixtures/persona-gate/no-persona.md +8 -0
- package/test/fixtures/persona-gate/persona-append.md +9 -0
- package/test/fixtures/persona-gate/style-override.md +8 -0
- package/test/fixtures/style-probe.mjs +74 -0
- package/test/structured.test.mjs +590 -582
- package/test/style-browser.test.mjs +71 -0
- package/test/theme.test.mjs +8 -9
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
const task = await taskSpace("dsh-structured 0.9.6 computed style")
|
|
2
|
+
const page = task.page("p1")
|
|
3
|
+
const fixture = new URL("./first-glance.html", import.meta.url).href
|
|
4
|
+
await page.goto(fixture)
|
|
5
|
+
await page.waitForLoadState("load")
|
|
6
|
+
await page.waitForTimeout(400)
|
|
7
|
+
const style = await page.evaluate(() => {
|
|
8
|
+
const q = (s) => document.querySelector(s)
|
|
9
|
+
const cs = (el, pseudo) => getComputedStyle(el, pseudo)
|
|
10
|
+
const statement = q('blockquote[data-dsh-structured-card-type="statement"]')
|
|
11
|
+
const next = q('blockquote[data-dsh-structured-card-type="next"]')
|
|
12
|
+
const table = q('table')
|
|
13
|
+
const th = table.querySelector('thead th')
|
|
14
|
+
const td = table.querySelector('tbody tr:nth-child(1) td:nth-child(3)')
|
|
15
|
+
const lead = q('p[data-dsh-structured-lead="table"]')
|
|
16
|
+
const title = statement.querySelector('strong')
|
|
17
|
+
const nextTitle = next.querySelector('strong')
|
|
18
|
+
const nextLi = next.querySelector('li')
|
|
19
|
+
return {
|
|
20
|
+
titleSize: cs(title).fontSize,
|
|
21
|
+
titleWeight: cs(title).fontWeight,
|
|
22
|
+
bodySize: cs(statement.querySelector('p')).fontSize,
|
|
23
|
+
bodyLine: cs(statement.querySelector('p')).lineHeight,
|
|
24
|
+
dividerHeight: cs(title, '::after').height,
|
|
25
|
+
dividerBackground: cs(title, '::after').backgroundColor,
|
|
26
|
+
headerSize: cs(th).fontSize,
|
|
27
|
+
headerWeight: cs(th).fontWeight,
|
|
28
|
+
headerHeight: cs(th).height,
|
|
29
|
+
bodyCellSize: cs(td).fontSize,
|
|
30
|
+
statusPillSize: cs(table.querySelector('tbody td')).fontSize,
|
|
31
|
+
leadSize: cs(lead).fontSize,
|
|
32
|
+
leadStrongSize: cs(lead.querySelector('strong')).fontSize,
|
|
33
|
+
leadStrongWeight: cs(lead.querySelector('strong')).fontWeight,
|
|
34
|
+
leadBorderTop: cs(lead).borderTopWidth,
|
|
35
|
+
leadBorderRight: cs(lead).borderRightWidth,
|
|
36
|
+
leadBorderBottom: cs(lead).borderBottomWidth,
|
|
37
|
+
leadBorderLeft: cs(lead).borderLeftWidth,
|
|
38
|
+
nextTitleSize: cs(nextTitle).fontSize,
|
|
39
|
+
nextTitleWeight: cs(nextTitle).fontWeight,
|
|
40
|
+
nextStepSize: cs(nextLi).fontSize,
|
|
41
|
+
nextBackground: cs(next).backgroundColor,
|
|
42
|
+
nextBorderTop: cs(next).borderTopWidth,
|
|
43
|
+
nextBorderRight: cs(next).borderRightWidth,
|
|
44
|
+
nextBorderBottom: cs(next).borderBottomWidth,
|
|
45
|
+
nextBorderLeft: cs(next).borderLeftWidth,
|
|
46
|
+
triangleColor: cs(next, '::before').borderLeftColor,
|
|
47
|
+
triangleLeftWidth: cs(next, '::before').borderLeftWidth,
|
|
48
|
+
triangleTopWidth: cs(next, '::before').borderTopWidth,
|
|
49
|
+
triangleBottomWidth: cs(next, '::before').borderBottomWidth,
|
|
50
|
+
labelLeft: nextTitle.getBoundingClientRect().left,
|
|
51
|
+
liLeft: nextLi.getBoundingClientRect().left,
|
|
52
|
+
cardIconBefore: cs(statement, '::before').content,
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
const darkTriangleColor = await page.evaluate(() => {
|
|
56
|
+
document.body.setAttribute("data-ds-dark-theme", "")
|
|
57
|
+
return getComputedStyle(document.querySelector('blockquote[data-dsh-structured-card-type="next"]'), "::before").borderLeftColor
|
|
58
|
+
})
|
|
59
|
+
await page.cdp("Emulation.setDeviceMetricsOverride", { width: 800, height: 900, deviceScaleFactor: 1, mobile: false })
|
|
60
|
+
await page.waitForTimeout(200)
|
|
61
|
+
const narrow = await page.evaluate(() => ({
|
|
62
|
+
innerWidth: window.innerWidth,
|
|
63
|
+
docScrollWidth: document.documentElement.scrollWidth,
|
|
64
|
+
bodyScrollWidth: document.body.scrollWidth,
|
|
65
|
+
overflow: document.documentElement.scrollWidth > window.innerWidth,
|
|
66
|
+
}))
|
|
67
|
+
const result = { style: { ...style, darkTriangleColor }, narrow }
|
|
68
|
+
const fs = await import("node:fs/promises")
|
|
69
|
+
const { fileURLToPath } = await import("node:url")
|
|
70
|
+
const output = fileURLToPath(new URL("../../artifacts/audit-0.9.6/style-result.json", import.meta.url))
|
|
71
|
+
await fs.mkdir(new URL("../../artifacts/audit-0.9.6/", import.meta.url), { recursive: true })
|
|
72
|
+
await fs.writeFile(output, JSON.stringify(result))
|
|
73
|
+
console.log("STYLE_JSON:" + JSON.stringify(result))
|
|
74
|
+
await task.finish({ keep: [] })
|