1 files changed, 199 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children.html b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children.html
new file mode 100644
index 0000000000..1029581022
--- /dev/null
+++ b/testing/web-platform/tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-children.html
@@ -0,0 +1,199 @@
+<!doctype html>
+<!--------------------------------------------------------------------------------------->
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<link rel='stylesheet' href='../support/base.css' />
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" />
+<script>
+
+    function assertOffsetWidthEquals(a,targetValue) {
+        var desc = document.querySelector('main > hr:last-of-type + p + p') || document.querySelectorAll('main > hr + p + p')[document.querySelectorAll('main > hr + p + p').length-1];
+        var root = document.querySelector('main > div:last-of-type') || document.querySelectorAll('main > div')[document.querySelectorAll('main > div').length-1];
+        generate_tests(assert_equals, [
+            [
+                desc.textContent,
+                root.querySelector("[target="+a+"]").offsetWidth,
+                targetValue
+            ]
+        ]);
+    }
+
+    function assertOffsetHeightEquals(a,targetValue) {
+        var desc = document.querySelector('main > hr:last-of-type + p + p') || document.querySelectorAll('main > hr + p + p')[document.querySelectorAll('main > hr + p + p').length-1];
+        var root = document.querySelector('main > div:last-of-type') || document.querySelectorAll('main > div')[document.querySelectorAll('main > div').length-1];
+        generate_tests(assert_equals, [
+            [
+                desc.textContent,
+                root.querySelector("[target="+a+"]").offsetHeight,
+                targetValue
+            ]
+        ]);
+    }
+
+</script>
+
+
+<main>
+
+    <h1>Height distribution</h1>
+    <p>Check that percentages are accounted for correctly for table-cell children</p>
+
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a 100px blue square below:</p>
+    <p>Percentages resolve based on the column width</p>
+    <div>
+        <x-table style="width: 100px; height: 100px;">
+            <x-tr><x-td><div target=a style="width: 100%; height: 100px; background: blue"></div></x-td></x-tr>
+        </x-table>
+    </div>
+    <script>
+
+        assertOffsetWidthEquals('a',100);
+
+    </script>
+
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a 100px blue square below:</p>
+    <p>Percentages resolve based on the row height</p>
+    <div>
+        <x-table style="width: 100px; height: 100px;">
+            <x-tr><x-td><div target=a style="width: 100px; height: 100%; background: blue"></div></x-td></x-tr>
+        </x-table>
+    </div>
+    <script>
+
+        assertOffsetHeightEquals('a',100);
+
+    </script>
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a 100px blue square below:</p>
+    <p>Percentages resolve based on the final column width</p>
+    <div>
+        <x-table style="width: 0px; height: 100px; background: red;">
+            <x-tr><x-td style="width:0px;height:0px;"><div target=a style="width: 100%; height: 100px; background: blue"></div></x-td></x-tr>
+            <x-tr><x-td style="width:0px;height:0px;"><div target=a style="width: 100px; height: 0px"></div></x-td></x-tr>
+        </x-table>
+    </div>
+    <script>
+
+        assertOffsetWidthEquals('a',100);
+
+    </script>
+
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a 100px blue square below:</p>
+    <p>Percentages resolve based on the final row height</p>
+    <div>
+        <x-table style="width: 100px; height: 0px; background: red;">
+            <x-tr>
+                <x-td style="width: 0px; height: 0px;"><div target=a style="width: 100px; height: 100%; background: blue"></div></x-td>
+                <x-td style="width: 0px; height: 0px;"><div target=a style="width: 0px; height: 100px; background: red"></div></x-td>
+            </x-tr>
+        </x-table>
+    </div>
+    <script>
+
+        assertOffsetHeightEquals('a',100);
+
+    </script>
+
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a blue and cyan rectangles of the same width:</p>
+    <p>Unresolvable percentage widths are resolved as auto in first pass (replaced elements)</p>
+    <div>
+        <x-table style="width: 0px; height: 18px; background: red;">
+            <x-tr><x-td><input target=a style="width: 100%; height: 100%; background: blue; vertical-align: top; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"/></x-td></x-tr>
+        </x-table>
+        <input style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;" />
+    </div>
+    <script>
+
+        assertOffsetWidthEquals('a',document.querySelector('input[style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"]').offsetWidth);
+
+    </script>
+
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a blue and cyan rectangles below of the same height:</p>
+    <p>Unresolvable percentage heights are resolved as auto in first pass (replaced elements)</p>
+    <div>
+        <x-table style="width: auto; height: 0px; background: red;">
+            <x-tr><x-td><input target=a style="width: 100%; height: 100%; background: blue; vertical-align: top; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"/></x-td></x-tr>
+        </x-table>
+        <input style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;" />
+    </div>
+    <script>
+
+        assertOffsetHeightEquals('a',document.querySelector('input[style="background:cyan; appearance:none; -webkit-appearance:none; border:0;margin:0;padding:0;"]').offsetHeight);
+
+    </script>
+
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a 100px blue square below:</p>
+    <p>Unresolvable percentage widths are resolved as auto in first pass (unscrollable overflow)</p>
+    <div>
+        <x-table style="width: 0px; height: 100px; background: red;">
+            <x-tr><x-td><div target=a style="width: 100%; height: 100px; background: blue; overflow: hidden;"><div target=a style="width: 100px; height: 0px"></div></div></x-td></x-tr>
+        </x-table>
+    </div>
+    <script>
+
+        assertOffsetWidthEquals('a',100);
+
+    </script>
+
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a 100px blue square below:</p>
+    <p>Unresolvable percentage heights are resolved as auto in first pass (unscrollable overflow)</p>
+    <div>
+        <x-table style="width: 100px; height: 0px; background: red;">
+            <x-tr>
+                <x-td><div target=a style="width: 100px; height: 100%; background: blue; overflow: hidden;"><div target=a style="width: 0px; height: 100px; background: red"></div></div></x-td>
+            </x-tr>
+        </x-table>
+    </div>
+    <script>
+
+        assertOffsetHeightEquals('a',100);
+
+    </script>
+
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a 100px blue square below:</p>
+    <p>Unresolvable percentage widths are resolved as auto in first pass (scrollable overflow)</p>
+    <div>
+        <x-table style="width: 0px; height: 100px; background: red;">
+            <x-tr><x-td><div target=a style="width: 100%; height: 100px; background: blue; overflow: auto;"><div target=a style="width: 100px; height: 0px"></div></div></x-td></x-tr>
+        </x-table>
+    </div>
+    <script>
+
+        assertOffsetWidthEquals('a',100);
+
+    </script>
+
+
+    <hr/><!------------------------------------------------------------------------------------------------------------>
+    <p>There should be a 100px blue square below:</p>
+    <p>Unresolvable percentage heights are resolved as 0px in first pass (scrollable overflow)</p>
+    <div>
+        <x-table style="width: 100px; height: 100px; background: red;">
+            <x-tr><x-td><div target=a style="width: 100px; height: 100%; background: red; overflow: auto;"><div target=a style="width: 0px; height: 100px; background: red"></div></div></x-td></x-tr>
+            <x-tr><x-td><div style="width: 100px; height: 100%; background: blue; overflow: hidden;"><div target=a style="width: 0px; height: 100px; background: red"></div></div></x-td></x-tr>
+        </x-table>
+    </div>
+    <script>
+
+        assertOffsetHeightEquals('a',0);
+
+    </script>
+
+</main>