diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001-ref.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
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-ref.html')
-rw-r--r-- | testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001-ref.html | 402 |
1 files changed, 402 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001-ref.html b/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001-ref.html new file mode 100644 index 0000000000..d5b9ad0f1f --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001-ref.html @@ -0,0 +1,402 @@ +<!DOCTYPE html> +<title>Flex Container Min-Content Main Sizing: Flex Item Min-Content Contributions Reference</title> + +<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; +} + +.wrap { + counter-increment: test; +} + +.row, .col { + background: blue; + padding: 5px; + float: left; +} + +.item { + 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="width: 3ch">X X</div> + </div> +</div> + +<!-- 02 row x flexible x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 03 row x flexible x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="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="width: 3ch">X X</div> + </div> +</div> + +<!-- 05 row x flexible x small x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 06 row x flexible x large x disjoint --> +<div class="wrap"> + <div class="row"> + <div class="item" style="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="width: 3ch">X X</div> + </div> +</div> + +<!-- 08 row x no-grow x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="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="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="width: 3ch">X X</div> + </div> +</div> + +<!-- 11 row x no-grow x small x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 12 row x no-grow x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="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="width: 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="width: 0.2ch">X X</div> + </div> +</div> + +<!-- 15 row x no-grow x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 0.2ch">X X</div> + </div> +</div> + + + +<!-- 16 row x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 17 row x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 18 row x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="row"> + <div class="item" style="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="width: 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="width: 4.5ch">X X</div> + </div> +</div> + +<!-- 21 row x no-shrink x large x larger --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 4.5ch">X X</div> + </div> +</div> + + +<!-- 22 row x no-shrink x none x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 23 row x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="width: 3ch">X X</div> + </div> +</div> + +<!-- 24 row x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="row"> + <div class="item" style="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="height: 1em">X</div> + </div> +</div> + +<!-- 02 col x flexible x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 03 col x flexible x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="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="height: 1em">X</div> + </div> +</div> + +<!-- 05 col x flexible x small x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 06 col x flexible x large x disjoint --> +<div class="wrap"> + <div class="col"> + <div class="item" style="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="height: 1em">X</div> + </div> +</div> + +<!-- 08 col x no-grow x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="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="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="height: 1em">X</div> + </div> +</div> + +<!-- 11 col x no-grow x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="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="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="height: 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="height: 0.2em">X</div> + </div> +</div> + +<!-- 15 col x no-grow x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 0.2em">X</div> + </div> +</div> + + + +<!-- 16 col x no-shrink x none x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 17 col x no-shrink x small x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 18 col x no-shrink x large x harmonious --> +<div class="wrap"> + <div class="col"> + <div class="item" style="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="height: 1em">X</div> + </div> +</div> + +<!-- 20 col x no-shrink x small x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 21 col x no-shrink x large x larger --> +<div class="wrap"> + <div class="col"> + <div class="item" style="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="height: 1em">X</div> + </div> +</div> + +<!-- 23 col x no-shrink x smaller x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1em">X</div> + </div> +</div> + +<!-- 24 col x no-shrink x larger x smaller --> +<div class="wrap"> + <div class="col"> + <div class="item" style="height: 1.5em">X</div> + </div> +</div> |