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#"
+
+
+
+ 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;
}