From 62d550e22d915e6fd440bb42be5445df51b06893 Mon Sep 17 00:00:00 2001 From: Moonchild Date: Tue, 15 Dec 2020 10:30:06 +0000 Subject: 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 931b32eb8..ab51f67c5 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 000000000..8069b87eb --- /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 000000000..e598475fd --- /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 000000000..f21b5f0c6 --- /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
+
-- cgit v1.2.3