feat(ie-css): add user-agent stylesheet with WHATWG defaults #70

User-agent stylesheet (data/ua.css) based on WHATWG rendering spec:
- Display: block for structural elements, none for head/meta/style/
  script, inline for span/a/em/strong/code etc.
- Body: 8px margin
- Headings h1-h6: font sizes (32px-11px), font-weight 700, margins
- Paragraphs: 16px vertical margins
- Lists: 40px padding-left, 16px vertical margins
- Blockquote/figure: 40px horizontal margins
- Links: blue color, underline
- Bold/italic: font-weight 700, font-style italic
- Code: monospace font-family
- Table cells: 1px padding
- Fieldset: 2px border, padding
- HR: 1px solid gray border

ua_stylesheet() loads via include_str! and parses once.
5 tests: div/span/head display, h1>p font-size, parses without panic.
72 total ie-css tests.

Author: thomasnemer

crates/ie-css/data/ua.css

@@ -0,0 +1,206 @@
+/* User-Agent Stylesheet — based on WHATWG rendering spec */
+
+/* Block-level elements */
+html, body, div, section, article, aside, nav, main,
+header, footer, hgroup, address,
+h1, h2, h3, h4, h5, h6,
+p, pre, blockquote, figure, figcaption,
+ul, ol, li, dl, dt, dd,
+form, fieldset, legend, details, summary, dialog,
+table, caption, thead, tbody, tfoot, tr,
+hr, menu, dir, center, listing, search {
+    display: block;
+}
+
+/* Hidden elements */
+head, link, meta, style, script, title, base,
+noscript, template, datalist {
+    display: none;
+}
+
+/* Inline elements (default, but explicit) */
+span, a, em, strong, b, i, u, s, small, big,
+code, kbd, samp, var, tt,
+abbr, cite, dfn, mark, q, sub, sup,
+br, wbr, img, input, select, textarea, button,
+label, output, progress, meter {
+    display: inline;
+}
+
+/* Body defaults */
+body {
+    margin-top: 8px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    margin-left: 8px;
+}
+
+/* Headings */
+h1 {
+    font-size: 32px;
+    font-weight: 700;
+    margin-top: 21px;
+    margin-bottom: 21px;
+}
+
+h2 {
+    font-size: 24px;
+    font-weight: 700;
+    margin-top: 19px;
+    margin-bottom: 19px;
+}
+
+h3 {
+    font-size: 19px;
+    font-weight: 700;
+    margin-top: 18px;
+    margin-bottom: 18px;
+}
+
+h4 {
+    font-size: 16px;
+    font-weight: 700;
+    margin-top: 21px;
+    margin-bottom: 21px;
+}
+
+h5 {
+    font-size: 13px;
+    font-weight: 700;
+    margin-top: 22px;
+    margin-bottom: 22px;
+}
+
+h6 {
+    font-size: 11px;
+    font-weight: 700;
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
+
+/* Paragraphs */
+p {
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+/* Preformatted */
+pre {
+    font-family: monospace;
+    white-space: pre;
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+/* Blockquote */
+blockquote {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    margin-left: 40px;
+    margin-right: 40px;
+}
+
+/* Lists */
+ul, ol {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    padding-left: 40px;
+}
+
+li {
+    display: list-item;
+}
+
+dl {
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+dd {
+    margin-left: 40px;
+}
+
+/* Horizontal rule */
+hr {
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: gray;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+/* Links */
+a {
+    color: blue;
+    text-decoration: underline;
+}
+
+/* Bold / italic */
+b, strong {
+    font-weight: 700;
+}
+
+i, em {
+    font-style: italic;
+}
+
+/* Code */
+code, kbd, samp, tt {
+    font-family: monospace;
+}
+
+/* Small */
+small {
+    font-size: 13px;
+}
+
+/* Table defaults */
+table {
+    border-top-width: 0px;
+    border-right-width: 0px;
+    border-bottom-width: 0px;
+    border-left-width: 0px;
+}
+
+td, th {
+    display: table-cell;
+    padding-top: 1px;
+    padding-right: 1px;
+    padding-bottom: 1px;
+    padding-left: 1px;
+}
+
+th {
+    font-weight: 700;
+    text-align: center;
+}
+
+/* Fieldset */
+fieldset {
+    margin-left: 2px;
+    margin-right: 2px;
+    padding-top: 6px;
+    padding-right: 12px;
+    padding-bottom: 12px;
+    padding-left: 12px;
+    border-top-width: 2px;
+    border-right-width: 2px;
+    border-bottom-width: 2px;
+    border-left-width: 2px;
+    border-top-style: solid;
+    border-right-style: solid;
+    border-bottom-style: solid;
+    border-left-style: solid;
+    border-top-color: gray;
+    border-right-color: gray;
+    border-bottom-color: gray;
+    border-left-color: gray;
+}
+
+/* Figure */
+figure {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    margin-left: 40px;
+    margin-right: 40px;
+}

crates/ie-css/src/lib.rs

@@ -19,3 +19,78 @@ pub use selector::{
 pub use style::ComputedStyle;
 pub use tokenizer::{CssToken, CssTokenizer};
 pub use values::{CssColor, CssValue, LengthUnit, PropertyId};
+
+/// The built-in user-agent stylesheet (WHATWG default rendering).
+pub fn ua_stylesheet() -> Stylesheet {
+    parse_stylesheet(include_str!("../data/ua.css"))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use cascade::Origin;
+
+    fn ua_value_for(tag: &str, prop: PropertyId) -> Option<CssValue> {
+        let ua = ua_stylesheet();
+        let mut doc = ie_dom::Document::new();
+        let html = doc.create_element("html");
+        let _ = doc.append_child(doc.root, html);
+        let body = doc.create_element("body");
+        let _ = doc.append_child(html, body);
+        let el = doc.create_element(tag);
+        let _ = doc.append_child(body, el);
+        let styles = cascade(&[(ua, Origin::UserAgent)], el, &doc);
+        styles.get(&prop).cloned()
+    }
+
+    #[test]
+    fn ua_div_display_block() {
+        let val = ua_value_for("div", PropertyId::Display);
+        assert_eq!(val, Some(CssValue::Keyword("block".into())));
+    }
+
+    #[test]
+    fn ua_span_display_inline() {
+        let val = ua_value_for("span", PropertyId::Display);
+        assert_eq!(val, Some(CssValue::Keyword("inline".into())));
+    }
+
+    #[test]
+    fn ua_head_display_none() {
+        // head is child of html, not body
+        let ua = ua_stylesheet();
+        let mut doc = ie_dom::Document::new();
+        let html = doc.create_element("html");
+        let _ = doc.append_child(doc.root, html);
+        let head = doc.create_element("head");
+        let _ = doc.append_child(html, head);
+        let styles = cascade(&[(ua, Origin::UserAgent)], head, &doc);
+        assert_eq!(styles.get(&PropertyId::Display), Some(&CssValue::None));
+    }
+
+    #[test]
+    fn ua_h1_larger_than_p() {
+        let h1_size = ua_value_for("h1", PropertyId::FontSize);
+        let p_size = ua_value_for("p", PropertyId::FontSize);
+        // h1 should have an explicit font-size, p should not (or smaller)
+        match h1_size {
+            Some(CssValue::Length(h1_px, _)) => {
+                let p_px = match p_size {
+                    Some(CssValue::Length(px, _)) => px,
+                    _ => 16.0, // default
+                };
+                assert!(
+                    h1_px > p_px,
+                    "h1 ({h1_px}px) should be larger than p ({p_px}px)"
+                );
+            }
+            other => panic!("expected h1 font-size as Length, got {other:?}"),
+        }
+    }
+
+    #[test]
+    fn ua_stylesheet_parses_without_panic() {
+        let ua = ua_stylesheet();
+        assert!(!ua.rules.is_empty(), "UA stylesheet should have rules");
+    }
+}