diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width-ref.html')
-rw-r--r-- | testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width-ref.html | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width-ref.html b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-width-ref.html new file mode 100644 index 0000000000..ee2cc9af5a --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/table-item-flex-percentage-min-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=1674268"> +<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; + min-width: 100%; + } + .test2 > * { + flex-shrink: 0; + min-width: 50%; + } + .test3 > * { + flex-shrink: 0.5; + min-width: 50%; + } + .test4 > * { + flex-grow: 0.1; + min-width: 50%; + } + .test5 > * { + flex-shrink: 0.2; + flex-grow: 0.5; + min-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> |