Part 2 - Use 64-bit coord type when resolving the main size for flex items.
The idea of this patch is to use 64-bit coord type when resolving the
main size for flex items to avoid integer overflow when individual flex
items have huge hypothetical main sizes, which can happen with
percent-width table-layout:fixed descendants. We have to avoid integer
overflow to shrink flex items properly in that scenario.
Delete the "Note:" in `AddLastItemToMainSizeTotals()` since we remove
`AddChecked()` in favor of regular 64-bit addition for
`mTotalOuterHypotheticalMainSize`.
The wpt testcase is adapted from bug 1469649 comment 12.
Differential Revision: https://phabricator.services.mozilla.com/D123268
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1469649
gecko-commit: f0b07571b559937fe98300d7da187b2043ac9e91
gecko-reviewers: dholbert
diff --git a/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item-ref.html b/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item-ref.html
new file mode 100644
index 0000000..8e3e616
--- /dev/null
+++ b/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Reference: Test flex items containing table-layout:fixed with percentage width</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+
+ <style>
+ .container {
+ display: flex;
+ width: 300px;
+ margin-bottom: 5px;
+ border: 1px solid black;
+ background: red;
+ }
+ .tbl {
+ width: 100%;
+ height: 30px;
+ border: 1px solid blue;
+ box-sizing: border-box;
+ background: lightgray;
+ }
+ </style>
+
+ <div class="container">
+ <div class="tbl"></div>
+ </div>
+
+ <div class="container">
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ </div>
+
+ <div class="container">
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ </div>
+
+ <div class="container">
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ </div>
+
+ <div class="container">
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ </div>
+
+ <div class="container">
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ <div class="tbl"></div>
+ </div>
+</html>
diff --git a/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html b/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html
new file mode 100644
index 0000000..507e0e9
--- /dev/null
+++ b/css/css-flexbox/fixed-table-layout-with-percentage-width-in-flex-item.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexbox Test: Test flex items containing table-layout:fixed with percentage width</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1469649">
+ <link rel="match" href="fixed-table-layout-with-percentage-width-in-flex-item-ref.html">
+ <meta name="assert" content="This test verifies that each flex item with a table descendant should have the the same definite post-flexing main size.">
+
+ <style>
+ .container {
+ display: flex;
+ width: 300px;
+ margin-bottom: 5px;
+ border: 1px solid black;
+ background: red;
+ }
+ .tbl {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ height: 30px;
+ border: 1px solid blue;
+ box-sizing: border-box;
+ background: lightgray;
+ }
+ </style>
+
+ <div class="container">
+ <div><div class="tbl"></div></div>
+ </div>
+
+ <div class="container">
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ </div>
+
+ <div class="container">
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ </div>
+
+ <div class="container">
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ </div>
+
+ <div class="container">
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ </div>
+
+ <div class="container">
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ <div><div class="tbl"></div></div>
+ </div>
+</html>
