summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-align/blocks/align-content-block-003.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-align/blocks/align-content-block-003.html')
-rw-r--r--testing/web-platform/tests/css/css-align/blocks/align-content-block-003.html233
1 files changed, 233 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-003.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-003.html
new file mode 100644
index 0000000000..2f3fea9be3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-003.html
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<title>CSS Box Alignment: align-content on small block container</title>
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<style title="Needed for automation; delete to review/debug">
+ @import "/fonts/ahem.css";
+ html { font: 10px/1 Ahem; max-width: 800px; }
+ .label { display: none; }
+</style>
+
+<style>
+ html, body { margin: 0; padding: 0; }
+
+ .test { height: 0.5em; margin: 0.5em 2em;
+ /* show bounds of test box without interfering with margin-collapsing */
+ background: black; padding-right: 2px;
+ /* ensure bullet follows first line */
+ display: list-item; }
+ /* ensure margin is contained */
+ .in-flow { margin: 1em 0 0.5em; background: orange }
+ /* ensure relpos is ignored */
+ .relpos { position: relative; top: -1.5em; }
+ /* ensure abspos static position follows alignment */
+ .wrapper { position: relative; }
+ .abspos { position: absolute; right: 0; margin-top: -1.5em; }
+ /* ensure overflow is not counted */
+ .overflow { height: 0; }
+
+ /* cram into 800x600 */
+ html { max-height: 600px; columns: 3 }
+ .wrapper { break-inside: avoid; border: solid 2px gray; padding: 2em 0; }
+
+ /* readability */
+ .test > * { color: #8888; }
+ .label { color: black; font-weight: bold; }
+</style>
+
+<body onload="checkLayout('.test');">
+<div class="wrapper">
+ <div class="test" style="align-content: start" title="start">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">START</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: center" title="center">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">CENTER</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: end" title="end">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">END</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: baseline" title="baseline">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">BASELINE</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: last baseline" title="last baseline">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">LAST BASELINE</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: flex-start" title="flex-start">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">FLEX-START</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: flex-end" title="flex-end">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">FLEX-END</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: unsafe start" title="unsafe start">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">UNSAFE START</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: unsafe center" title="unsafe center">
+ <div class="in-flow" data-offset-y="25"></div>
+ <div class="in-flow">
+ <span class="label">UNSAFE CENTER</span>
+ <span class="abspos" data-offset-y="10">ABS</span>
+ <span class="relpos" data-offset-y="10">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: unsafe end" title="unsafe end">
+ <div class="in-flow" data-offset-y="15"></div>
+ <div class="in-flow">
+ <span class="label">UNSAFE END</span>
+ <span class="abspos" data-offset-y="0">ABS</span>
+ <span class="relpos" data-offset-y="0">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: safe start" title="safe start">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">SAFE START</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: safe center" title="safe center">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">SAFE CENTER</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: safe end" title="safe end">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">SAFE END</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: space-evenly" title="space-evently">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">SPACE-EVENLY</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: space-between" title="space-between">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">SPACE-BETWEEN</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: space-around" title="space-around">
+ <div class="in-flow" data-offset-y="35"></div>
+ <div class="in-flow">
+ <span class="label">SPACE-AROUND</span>
+ <span class="abspos" data-offset-y="20">ABS</span>
+ <span class="relpos" data-offset-y="20">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+<div class="wrapper">
+ <div class="test" style="align-content: normal" title="normal">
+ <div class="in-flow" data-offset-y="30"></div>
+ <div class="in-flow">
+ <span class="label">NORMAL</span>
+ <span class="abspos" data-offset-y="15">ABS</span>
+ <span class="relpos" data-offset-y="15">REL</span>
+ <div class="overflow">OVERFLOW</div>
+ </div>
+ </div>
+</div>
+
+<p>
+ <button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
+</body>
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-19 20:40:14 +0000