diff --git a/moli-renderer-v8/src/script_vm/tests/dom_xhr/computed_style.rs b/moli-renderer-v8/src/script_vm/tests/dom_xhr/computed_style.rs index 75a086c5ce..a99e5978a5 100644 --- a/moli-renderer-v8/src/script_vm/tests/dom_xhr/computed_style.rs +++ b/moli-renderer-v8/src/script_vm/tests/dom_xhr/computed_style.rs @@ -54,6 +54,56 @@ fn rendered_text_elements_use_chromium_user_agent_defaults() { assert_eq!(result, "block|block|block"); } +#[test] +fn flow_content_uses_chromium_user_agent_typography_defaults() { + let mut vm = new_parsed_test_vm( + "https://flow-content-user-agent-defaults.test/", + r#" + +

Title

+
+

Heading 1

+

Heading 2

+

Strong link1

+
+"#, + ); + + let result = vm + .eval( + r#" +(() => { + const style = id => getComputedStyle(document.getElementById(id)); + const title = style('title'); + const h1 = style('h1'); + const h2 = style('h2'); + const paragraph = style('paragraph'); + const strong = style('strong'); + const link = style('link'); + const sup = style('sup'); + return [ + title.fontSize, title.fontWeight, title.marginBlockStart, title.marginBlockEnd, + h1.fontSize, h1.fontWeight, h1.marginBlockStart, h1.marginBlockEnd, + h2.fontSize, h2.fontWeight, h2.marginBlockStart, h2.marginBlockEnd, + paragraph.marginBlockStart, paragraph.marginBlockEnd, + strong.fontWeight, + link.textDecorationLine, link.cursor, + sup.fontSize + ].join('|'); +})() +"#, + ) + .expect("flow-content user-agent typography should evaluate"); + + assert_eq!( + result, + "24px|700|19.92px|19.92px|32px|700|21.44px|21.44px|24px|700|19.92px|19.92px|16px|16px|700|underline|pointer|13.3281px" + ); +} + #[test] fn center_uses_legacy_centering_user_agent_default() { let mut vm = new_parsed_test_vm( diff --git a/moli-renderer-v8/src/style_engine/ua/html.css b/moli-renderer-v8/src/style_engine/ua/html.css index d73e49966a..f0c55c9bd9 100644 --- a/moli-renderer-v8/src/style_engine/ua/html.css +++ b/moli-renderer-v8/src/style_engine/ua/html.css @@ -1,7 +1,7 @@ /* * Moli HTML user-agent stylesheet. * - * Form-control rules are a semantic port of Chromium + * Core flow/typography and form-control rules are a semantic port of Chromium * third_party/blink/renderer/core/html/resources/html.css at * a03603fe9af6230a12f1b2fb2c18a7d003a0d937. The cascade shape, standard * properties, system colors, light-dark() values and observable control @@ -9,7 +9,8 @@ * * Blink-only values have explicit Moli owners: * - * - 0__qem maps to CSS zero. + * - Blink's __qem lengths map to equivalent em lengths; 0__qem maps to CSS + * zero. * - -webkit-small-control maps to the deterministic Linux headless control * font used by the Chromium build against which this port is tested. * - -internal-align-content-block is implemented by the HTML-to-layout form @@ -45,8 +46,32 @@ input, textarea, select, button { display: inline-block; } -pre { +pre, xmp, plaintext, listing { + font-family: monospace; white-space: pre; + margin-block: 1em; + margin-inline: 0; +} + +p { + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; +} + +blockquote { + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 40px; + margin-inline-end: 40px; +} + +figure { + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 40px; + margin-inline-end: 40px; } table { @@ -90,6 +115,97 @@ details > summary:first-of-type { display: list-item; } +ul, menu, dir { + list-style-type: disc; + margin-block-start: 1em; + margin-block-end: 1em; + padding-inline-start: 40px; +} + +ol { + list-style-type: decimal; + margin-block-start: 1em; + margin-block-end: 1em; + padding-inline-start: 40px; +} + +:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) { + margin-block-start: 0; + margin-block-end: 0; +} + +:is(dir, menu, ol, ul) :is(dir, menu, ul) { + list-style-type: circle; +} + +:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) { + list-style-type: square; +} + +dd { + margin-inline-start: 40px; +} + +dl { + margin-block-start: 1em; + margin-block-end: 1em; +} + +/* Core heading defaults from Chromium's HTML user-agent stylesheet. */ + +h1 { + font-size: 2em; + margin-block-start: 0.67em; + margin-block-end: 0.67em; + margin-inline-start: 0; + margin-inline-end: 0; + font-weight: bold; +} + +h2 { + font-size: 1.5em; + margin-block-start: 0.83em; + margin-block-end: 0.83em; + margin-inline-start: 0; + margin-inline-end: 0; + font-weight: bold; +} + +h3 { + font-size: 1.17em; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; + font-weight: bold; +} + +h4 { + margin-block-start: 1.33em; + margin-block-end: 1.33em; + margin-inline-start: 0; + margin-inline-end: 0; + font-weight: bold; +} + +h5 { + font-size: 0.83em; + margin-block-start: 1.67em; + margin-block-end: 1.67em; + margin-inline-start: 0; + margin-inline-end: 0; + font-weight: bold; +} + +h6 { + font-size: 0.67em; + margin-block-start: 2.33em; + margin-block-end: 2.33em; + margin-inline-start: 0; + margin-inline-end: 0; + font-weight: bold; +} + base, basefont, datalist, head, link, meta, noembed, noframes, param, rp, script, style, template, title, source { display: none; @@ -380,10 +496,58 @@ u, ins { text-decoration: underline; } +abbr[title], acronym[title] { + text-decoration: dotted underline; +} + +strong, b { + font-weight: bolder; +} + +i, cite, em, var, address, dfn { + font-style: italic; +} + +tt, code, kbd, samp { + font-family: monospace; +} + +mark { + background-color: Mark; + color: MarkText; +} + +big { + font-size: larger; +} + +small { + font-size: smaller; +} + s, strike, del { text-decoration: line-through; } +sub { + vertical-align: sub; + font-size: smaller; +} + +sup { + vertical-align: super; + font-size: smaller; +} + +nobr { + white-space: nowrap; +} + +a:any-link { + text-decoration: underline; + cursor: pointer; +} + body { margin: 8px; }