diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html | |
parent | Initial commit. (diff) | |
download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html')
-rw-r--r-- | testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html | 420 |
1 files changed, 420 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html b/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html new file mode 100644 index 0000000000..94a68b5753 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html @@ -0,0 +1,420 @@ +<!DOCTYPE html> +<title>Flex Container Max-Content Main Sizing: Flex Item Max-Content Contributions</title> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-main-item"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="match" href="flex-container-max-content-001-ref.html"> + +<style> +@import "/fonts/ahem.css"; /* optional */ + +body { + /* Fit it in 800x600 pixels */ + display: grid; + grid-template-columns: repeat(auto-fill, 66px 66px 66px); + grid-auto-rows: 50px; + font: 10px/1 Ahem, monospace; +} + +/* impose min-content constraint, block formatting context */ +.wrap > * { + width: max-content; + height: max-content; + /* floating inside a large box for UAs that don't understand min-content */ + float: left; +} +.wrap { + width: 100px; height: 100px; + counter-increment: test; +} + +.row, .col { + display: flex; + background: blue; +} +.row { flex-flow: row; } +.col { flex-flow: column; } + +.item { + /* ensure _outer_ size is measured */ + margin: 5px; + padding: 3px; + border: 2px solid aqua; + color: orange; +} + + +/* help people debugging */ +.wrap:hover::before { + content: counter(test, decimal-leading-zero); + position: absolute; + font: initial; +} +</style> + +<!-- + + { row | col } x { flexible | no-grow | no-shrink } x { no | small | large } pref size x { harmonious | disjoint larger | disjoint smaller } flex basis } + +--> + +<!-- 01 row x flexible x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: auto">X X</div> + </div> +</div> + +<!-- 02 row x flexible x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: auto; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 03 row x flexible x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: auto; width: 4ch">X X</div> + </div> +</div> + + +<!-- 04 row x flexible x none x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 6ch">X X</div> + </div> +</div> + +<!-- 05 row x flexible x small x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 6ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 06 row x flexible x large x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 6ch; width: 4ch">X X</div> + </div> +</div> + + + +<!-- 07 row x no-grow x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 auto">X X</div> + </div> +</div> + +<!-- 08 row x no-grow x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 auto; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 09 row x no-grow x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 auto; width: 4ch">X X</div> + </div> +</div> + + +<!-- 10 row x no-grow x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 6ch">X X</div> + </div> +</div> + +<!-- 11 row x no-grow x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 6ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 12 row x no-grow x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 6ch; width: 4ch">X X</div> + </div> +</div> + + +<!-- 13 row x no-grow x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 0.2ch">X X</div> + </div> +</div> + +<!-- 14 row x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 0.2ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 15 row x no-grow x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 0 1 0.2ch; width: 4ch">X X</div> + </div> +</div> + + + +<!-- 16 row x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 auto">X X</div> + <!-- see also https://www.w3.org/TR/css-flexbox-1/#algo-main-item case C --> + </div> +</div> + +<!-- 17 row x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 auto; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 18 row x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 auto; width: 4ch">X X</div> + </div> +</div> + + +<!-- 19 row x no-shrink x none x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 4.5ch">X X</div> + </div> +</div> + +<!-- 20 row x no-shrink x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 4.5ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 21 row x no-shrink x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 4.5ch; width: 4ch">X X</div> + </div> +</div> + + +<!-- 22 row x no-shrink x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch">X X</div> + </div> +</div> + +<!-- 23 row x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch; width: 0.4ch">X X</div> + </div> +</div> + +<!-- 24 row x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="flex: 1 0 0.2ch; width: 4ch">X X</div> + </div> +</div> + + +<!-- ###################################################################### --> + + +<!-- 01 col x flexible x none x harmonious --> +<div class="wrap" style="counter-reset: test; grid-column: 1"> <!-- new section --> + <div class="col"> + <div class="item" style="flex: auto">X</div> + </div> +</div> + +<!-- 02 col x flexible x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: auto; height: 0.4em">X</div> + </div> +</div> + +<!-- 03 col x flexible x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: auto; height: 1.5em">X</div> + </div> +</div> + + +<!-- 04 col x flexible x none x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 2em">X</div> + </div> +</div> + +<!-- 05 col x flexible x small x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 06 col x flexible x large x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 2em; height: 1.5em">X</div> + </div> +</div> + + + +<!-- 07 col x no-grow x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 auto">X</div> + </div> +</div> + +<!-- 08 col x no-grow x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 auto; height: 0.4em">X</div> + </div> +</div> + +<!-- 09 col x no-grow x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 auto; height: 1.5em">X</div> + </div> +</div> + + +<!-- 10 col x no-grow x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 2em">X</div> + </div> +</div> + +<!-- 11 col x no-grow x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 12 col x no-grow x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 2em; height: 1.5em">X</div> + </div> +</div> + + +<!-- 13 col x no-grow x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 0.2em">X</div> + </div> +</div> + +<!-- 14 col x no-grow x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 0.2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 15 col x no-grow x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 0 1 0.2em; height: 1.5em">X</div> + </div> +</div> + + + + + +<!-- 16 col x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 auto">X</div> + </div> +</div> + +<!-- 17 col x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 auto; height: 0.4em">X</div> + </div> +</div> + +<!-- 18 col x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 auto; height: 1.5em">X</div> + </div> +</div> + + +<!-- 19 col x no-shrink x none x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em">X</div> + </div> +</div> + +<!-- 20 col x no-shrink x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 21 col x no-shrink x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> + </div> +</div> + + +<!-- 22 col x no-shrink x none x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em">X</div> + </div> +</div> + +<!-- 23 col x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 0.4em">X</div> + </div> +</div> + +<!-- 24 col x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="flex: 1 0 0.2em; height: 1.5em">X</div> + </div> +</div> |