diff options
| author | Moonchild <moonchild@palemoon.org> | 2020-12-15 10:30:06 +0000 |
|---|---|---|
| committer | Moonchild <moonchild@palemoon.org> | 2020-12-15 10:30:06 +0000 |
| commit | ac4c22f096c2c8aa2c595ff2f17cfca46ec2b0cc (patch) | |
| tree | 887359f34da0b0849bbce3d32f0b800c122fa669 /testing | |
| parent | 3c0236666eec63e7534b2200e4a8ab424a4d544c (diff) | |
| download | uxp-ac4c22f096c2c8aa2c595ff2f17cfca46ec2b0cc.tar.gz | |
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 (limited to 'testing')
3 files changed, 287 insertions, 0 deletions
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 @@ +<!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 0000000000..f21b5f0c65 --- /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> |