diff options
| author | Moonchild <moonchild@palemoon.org> | 2020-12-15 15:09:30 +0000 |
|---|---|---|
| committer | Moonchild <moonchild@palemoon.org> | 2020-12-15 15:09:30 +0000 |
| commit | dabdec3b3ae9cd920e9fe75622a10ce290552941 (patch) | |
| tree | 4d462fe7a5f314369f373f6a42214bc9c0efbfcb /testing/web-platform/tests/css | |
| parent | 5165ed02285315cc0bed7977c7bac6d0a90ca43c (diff) | |
| parent | cd17592001225e2d988c3aca9bd700de3c8ce4a3 (diff) | |
| download | UXP-RC_20201215.tar UXP-RC_20201215.tar.gz UXP-RC_20201215.tar.lz UXP-RC_20201215.tar.xz UXP-RC_20201215.zip | |
Merge branch 'redwood' into releaseRC_20201215
Diffstat (limited to 'testing/web-platform/tests/css')
| -rw-r--r-- | testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width-ref.html | 140 | ||||
| -rw-r--r-- | testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-width.html | 144 |
2 files changed, 284 insertions, 0 deletions
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> |