Fix table with rows but no column

We weren't generating any fragment for the rows, which meant that JS APIs like clientWidth would be 0, and also outlines weren't painted. This aligns Servo with Blink and WebKit. Gecko is broken, it distributes twice the table height among the rows.
web-platform-tests · Mar 25, 2024 · 9831e7a · 9831e7a
1 parent af41a11
commit 9831e7a
Showing 1 changed file with 62 additions and 0 deletions.
diff --git a/css/css-tables/tentative/table-rows-with-zero-columns.html b/css/css-tables/tentative/table-rows-with-zero-columns.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: size of table rows when the table has no columns</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10132">
+<meta name="assert" content="If a table has rows but no columns, the rows are as wide as the inner width of the table.">
+
+<style>
+#tests table {
+  box-sizing: border-box;
+  width: 60px;
+  height: 60px;
+}
+</style>
+
+<div id="log"></div>
+
+<main id="tests">
+  <table cellspacing="0">
+    <tr data-expected-width="60" data-expected-height="60"></tr>
+  </table>
+
+  <table cellspacing="0">
+    <tr data-expected-width="60" data-expected-height="30"></tr>
+    <tr data-expected-width="60" data-expected-height="30"></tr>
+  </table>
+
+  <table cellspacing="10">
+    <tr data-expected-width="60" data-expected-height="40"></tr>
+  </table>
+
+  <table cellspacing="10">
+    <tr data-expected-width="60" data-expected-height="15"></tr>
+    <tr data-expected-width="60" data-expected-height="15"></tr>
+  </table>
+
+  <table cellspacing="0" border="5">
+    <tr data-expected-width="50" data-expected-height="50"></tr>
+  </table>
+
+  <table cellspacing="0" border="5">
+    <tr data-expected-width="50" data-expected-height="25"></tr>
+    <tr data-expected-width="50" data-expected-height="25"></tr>
+  </table>
+
+  <table cellspacing="10" border="5">
+    <tr data-expected-width="50" data-expected-height="30"></tr>
+  </table>
+
+  <table cellspacing="10" border="5">
+    <tr data-expected-width="50" data-expected-height="10"></tr>
+    <tr data-expected-width="50" data-expected-height="10"></tr>
+  </table>
+</main>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+checkLayout("tr");
+</script>