summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMoonchild <moonchild@palemoon.org>2020-12-15 10:30:06 +0000
committerMoonchild <moonchild@palemoon.org>2020-12-15 10:30:06 +0000
commitac4c22f096c2c8aa2c595ff2f17cfca46ec2b0cc (patch)
tree887359f34da0b0849bbce3d32f0b800c122fa669
parent3c0236666eec63e7534b2200e4a8ab424a4d544c (diff)
downloadUXP-ac4c22f096c2c8aa2c595ff2f17cfca46ec2b0cc.tar
UXP-ac4c22f096c2c8aa2c595ff2f17cfca46ec2b0cc.tar.gz
UXP-ac4c22f096c2c8aa2c595ff2f17cfca46ec2b0cc.tar.lz
UXP-ac4c22f096c2c8aa2c595ff2f17cfca46ec2b0cc.tar.xz
UXP-ac4c22f096c2c8aa2c595ff2f17cfca46ec2b0cc.zip
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
Diffstat
-rw-r--r--layout/style/res/ua.css3
-rw-r--r--testing/web-platform/meta/css/css-flexbox/table-item-flex-percentage-width.html.ini3
-rw-r--r--testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width-ref.html140
-rw-r--r--testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width.html144
4 files changed, 290 insertions, 0 deletions
diff --git a/layout/style/res/ua.css b/layout/style/res/ua.css
index 504f5dc57..a8425d472 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 @@
+<!doctype html>
+<title>Reference: display:table flex items with flex-shrink/flex-grow/flex-basis</title>
+<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+ html,body {
+ color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+ }
+
+ .container {
+ display: flex;
+ width: 180px;
+ border: 1px solid blue;
+ }
+
+ .container > * {
+ background-color: cyan;
+ display: block;
+ }
+ .test1 > * {
+ flex-shrink: 0;
+ width: 100%;
+ }
+ .test2 > * {
+ flex-shrink: 0;
+ width: 50%;
+ }
+ .test3 > * {
+ flex-shrink: 0.5;
+ width: 50%;
+ }
+ .test4 > * {
+ flex-grow: 0.1;
+ width: 50%;
+ }
+ .test5 > * {
+ flex-shrink: 0.2;
+ flex-grow: 0.5;
+ width: 10%;
+ }
+ .base > * {
+ flex-basis: 100px;
+ }
+ .large-base {
+ width: 100px;
+ }
+ .large-base > * {
+ flex-basis: 200px;
+ }
+</style>
+
+<div class="container test1">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test2">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test3">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test4">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test5">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test1 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test2 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test3 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test4 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test5 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test1 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test2 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test3 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test4 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test5 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
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 @@
+<!doctype html>
+<title>Flexbox Test: display:table flex items with flex-shrink/flex-grow/flex-basis</title>
+<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454330">
+<link rel="match" href="table-item-flex-percentage-width-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+ html,body {
+ color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+ }
+
+ .container {
+ display: flex;
+ width: 180px;
+ border: 1px solid blue;
+ }
+
+ .container > * {
+ background-color: cyan;
+ display: table;
+ }
+ .test1 > * {
+ flex-shrink: 0;
+ width: 100%;
+ }
+ .test2 > * {
+ flex-shrink: 0;
+ width: 50%;
+ }
+ .test3 > * {
+ flex-shrink: 0.5;
+ width: 50%;
+ }
+ .test4 > * {
+ flex-grow: 0.1;
+ width: 50%;
+ }
+ .test5 > * {
+ flex-shrink: 0.2;
+ flex-grow: 0.5;
+ width: 10%;
+ }
+ .base > * {
+ flex-basis: 100px;
+ }
+ .large-base {
+ width: 100px;
+ }
+ .large-base > * {
+ flex-basis: 200px;
+ }
+</style>
+
+<div class="container test1">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test2">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test3">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test4">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test5">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test1 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test2 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test3 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test4 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test5 base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test1 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test2 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test3 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test4 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
+
+<div class="container test5 large-base">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+</div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-27 22:47:42 +0000