From 873a58c4d5c27988de8b114294182a1be52c2b9f Mon Sep 17 00:00:00 2001 From: Moonchild Date: Tue, 15 Dec 2020 10:30:06 +0000 Subject: [PATCH] Issue #1696 - Propagate flex sizes to the table wrapper This avoids overlapping of table styled elements inside flexboxes as used on some websites. Resolves #1696 --- layout/style/res/ua.css | 3 + .../table-item-flex-percentage-width.html.ini | 3 + .../table-item-flex-percentage-width-ref.html | 140 +++++++++++++++++ .../table-item-flex-percentage-width.html | 144 ++++++++++++++++++ 4 files changed, 290 insertions(+) create mode 100644 testing/web-platform/meta/css/css-flexbox/table-item-flex-percentage-width.html.ini create mode 100644 testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width-ref.html create mode 100644 testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width.html diff --git a/layout/style/res/ua.css b/layout/style/res/ua.css index 504f5dc570..a8425d472a 100644 --- a/layout/style/res/ua.css +++ b/layout/style/res/ua.css @@ -46,6 +46,9 @@ backface-visibility: inherit; clip: inherit; /* When the table wrapper is a Flex/Grid item we need these: */ + flex-grow: inherit; + flex-shrink: inherit; + flex-basis: inherit; align-self: inherit; justify-self: inherit; grid-column-start: inherit; diff --git a/testing/web-platform/meta/css/css-flexbox/table-item-flex-percentage-width.html.ini b/testing/web-platform/meta/css/css-flexbox/table-item-flex-percentage-width.html.ini new file mode 100644 index 0000000000..8069b87eb5 --- /dev/null +++ b/testing/web-platform/meta/css/css-flexbox/table-item-flex-percentage-width.html.ini @@ -0,0 +1,3 @@ +[table-item-flex-percentage-width.html] + expected: FAIL + bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1674268 diff --git a/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width-ref.html b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width-ref.html new file mode 100644 index 0000000000..e598475fdd --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width-ref.html @@ -0,0 +1,140 @@ + +Reference: display:table flex items with flex-shrink/flex-grow/flex-basis + + + + +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
diff --git a/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width.html b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width.html new file mode 100644 index 0000000000..f21b5f0c65 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width.html @@ -0,0 +1,144 @@ + +Flexbox Test: display:table flex items with flex-shrink/flex-grow/flex-basis + + + + + + + + +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+
+ +
+
1
+
2
+
3
+