summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/css-flexbox/flex-container-max-content-001.html
parentInitial commit. (diff)
downloadthunderbird-upstream.tar.xz
thunderbird-upstream.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
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.html420
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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-10 07:17:53 +0000