test: gate table track geometry

crates/obscura-render/src/style.rs

@@ -2859,6 +2859,33 @@ mod tests {
         assert!(invalid.internal_flex_container);
     }
 
+    #[test]
+    fn table_ua_geometry_and_border_collapse_parse() {
+        let table = compute_style("table", None);
+        assert_eq!(table.box_sizing, crate::BoxSizing::BorderBox);
+        assert_eq!(table.border_spacing, Some((2.0, 2.0)));
+        assert_eq!(table.border_collapse, Some(false));
+
+        let cell = compute_style("td", None);
+        assert_eq!(
+            cell.padding,
+            Edges {
+                top: 1.0,
+                right: 1.0,
+                bottom: 1.0,
+                left: 1.0,
+            }
+        );
+        assert_eq!(cell.vertical_align, None);
+
+        let collapsed = compute_style(
+            "table",
+            Some("border-spacing:8px; border-collapse:collapse"),
+        );
+        assert_eq!(collapsed.border_spacing, Some((8.0, 8.0)));
+        assert_eq!(collapsed.border_collapse, Some(true));
+    }
+
     #[test]
     fn item_self_alignment_parses_and_resets() {
         let aligned = compute_style(

render-repros/checks.json

@@ -209,6 +209,21 @@
   "tables": [
     {"name": "content-box fixed cell column", "color": "#ffcc99", "width": 208}
   ],
+  "table-track-geometry": [
+    {"name": "separate spacing reserves the outer table edges", "color": "#ffcc99", "x": 2, "y": 2, "width": 208, "height": 23},
+    {"name": "auto column receives max-content width", "color": "#74c0fc", "x": 212, "y": 2, "width": 54, "height": 23},
+    {"name": "percentage column resolves against track space", "color": "#69db7c", "x": 2, "y": 52, "width": 197, "height": 20},
+    {"name": "auto column absorbs definite-table surplus", "color": "#f783ac", "x": 201, "y": 52, "width": 197, "height": 20},
+    {"name": "cellpadding zero overrides the UA cell padding", "color": "#9775fa", "x": 0, "y": 100, "width": 40, "height": 18},
+    {"name": "cellpadding keeps adjacent tracks contiguous", "color": "#ffa94d", "x": 40, "y": 100, "width": 50, "height": 18},
+    {"name": "author cell padding wins over cellpadding", "color": "#22b8cf", "x": 0, "y": 140, "width": 46, "height": 24},
+    {"name": "collapsed table suppresses declared spacing", "color": "#e64980", "x": 0, "y": 190, "width": 40, "height": 20},
+    {"name": "collapsed tracks share an edge", "color": "#15aabf", "x": 40, "y": 190, "width": 50, "height": 20},
+    {"name": "row-group default vertically centers cell content", "color": "#5f3dc4", "x": 0, "y": 260, "width": 20, "height": 20},
+    {"name": "row vertical-align inherits into its cells", "color": "#f08c00", "x": 100, "y": 280, "width": 20, "height": 20},
+    {"name": "cell vertical-align overrides the row default", "color": "#2b8a3e", "x": 200, "y": 240, "width": 20, "height": 20},
+    {"name": "UA cell padding is one pixel on every edge", "color": "#1971c2", "x": 2, "y": 332, "width": 12, "height": 12}
+  ],
   "text-align-flex-items": [
     {"name": "text alignment does not shrink a flex item", "color": "#087f5b", "x": 20, "y": 20, "width": 360, "height": 80},
     {"name": "inherited text alignment centers inline content", "color": "#c2255c", "x": 150, "y": 100, "width": 100, "height": 20}

render-repros/table-track-geometry.html

@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>table track geometry</title>
+  <style>
+    html, body { margin: 0; }
+    body { font-family: sans-serif; font-size: 13px; }
+    table { position: absolute; }
+    #auto { left: 0; top: 0; border-spacing: 2px; }
+    #auto td { padding: 4px; }
+    #auto .fixed { width: 200px; background: #ffcc99; }
+    #auto .automatic { background: #74c0fc; }
+
+    #percent { left: 0; top: 50px; width: 400px; border-spacing: 2px; }
+    #percent td { height: 20px; padding: 0; }
+    #percent .half { width: 50%; background: #69db7c; }
+    #percent .rest { background: #f783ac; }
+
+    #zero-padding { left: 0; top: 100px; }
+    #zero-padding .first { background: #9775fa; }
+    #zero-padding .second { background: #ffa94d; }
+    .forty { width: 40px; height: 18px; }
+    .fifty { width: 50px; height: 18px; }
+
+    #author-padding { left: 0; top: 140px; }
+    #author-padding td { padding: 3px; background: #22b8cf; }
+
+    #collapsed {
+      left: 0;
+      top: 190px;
+      border-spacing: 8px;
+      border-collapse: collapse;
+    }
+    #collapsed td { padding: 0; }
+    #collapsed .first { background: #e64980; }
+    #collapsed .second { background: #15aabf; }
+    .twenty { height: 20px; }
+
+    .alignment { top: 240px; border-spacing: 0; }
+    .alignment td { width: 80px; height: 60px; padding: 0; }
+    .alignment .marker { width: 20px; height: 20px; }
+    #middle { left: 0; }
+    #middle .marker { background: #5f3dc4; }
+    #bottom { left: 100px; }
+    #bottom tr { vertical-align: bottom; }
+    #bottom .marker { background: #f08c00; }
+    #top { left: 200px; }
+    #top td { vertical-align: top; }
+    #top .marker { background: #2b8a3e; }
+
+    #ua-default { left: 0; top: 330px; }
+    #ua-default td { background: #1971c2; }
+    #ua-default div { width: 10px; height: 10px; }
+  </style>
+</head>
+<body>
+  <table id="auto">
+    <tr><td class="fixed">fixed 200</td><td class="automatic">auto col</td></tr>
+    <tr><td>second row same col</td><td>x</td></tr>
+  </table>
+
+  <table id="percent">
+    <tr><td class="half"></td><td class="rest"></td></tr>
+  </table>
+
+  <table id="zero-padding" cellpadding="0" cellspacing="0">
+    <tr>
+      <td class="first"><div class="forty"></div></td>
+      <td class="second"><div class="fifty"></div></td>
+    </tr>
+  </table>
+
+  <table id="author-padding" cellpadding="8" cellspacing="0">
+    <tr><td><div class="forty"></div></td></tr>
+  </table>
+
+  <table id="collapsed">
+    <tr>
+      <td class="first"><div class="forty twenty"></div></td>
+      <td class="second"><div class="fifty twenty"></div></td>
+    </tr>
+  </table>
+
+  <table id="middle" class="alignment" cellspacing="0" cellpadding="0">
+    <tr><td><div class="marker"></div></td></tr>
+  </table>
+  <table id="bottom" class="alignment" cellspacing="0" cellpadding="0">
+    <tr><td><div class="marker"></div></td></tr>
+  </table>
+  <table id="top" class="alignment" cellspacing="0" cellpadding="0">
+    <tr><td><div class="marker"></div></td></tr>
+  </table>
+
+  <table id="ua-default">
+    <tr><td><div></div></td></tr>
+  </table>
+</body>
+</html>