diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000-ref.html')
-rw-r--r-- | testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000-ref.html | 261 |
1 files changed, 261 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000-ref.html b/testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000-ref.html new file mode 100644 index 0000000000..8ca5407e4c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/blocks/align-content-block-overflow-000-ref.html @@ -0,0 +1,261 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: align-content on small block container with floats</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + +<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: 1.8em; margin: 0.5em 2em; overflow: hidden; + /* show bounds of test box without interfering with margin-collapsing */ + background: black; padding-right: 2px; } + /* ensure float is contained */ + .float { float: right; background: orange; height: 2em } + /* ensure margin is contained */ + .in-flow { margin-top: 1em; 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: 3em 0; } + + /* readability */ + .test > * { color: #8888; } + .label { color: black; font-weight: bold; } +</style> + +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">LAST BASELINE</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">FLEX-START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">FLEX-END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">UNSAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float" style="margin-top: -0.6em">FLT</div> + <div style="margin-bottom: -0.6em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">UNSAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div style="margin-bottom: -1.2em"></div> + <div class="in-flow"> + <div class="float" style="margin-top: -1em">FLT</div> + <div class="float">FLT</div> + <span class="label">UNSAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SAFE START</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SAFE CENTER</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SAFE END</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SPACE-EVENLY</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SPACE-BETWEEN</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">SPACE-AROUND</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> +<div class="wrapper"> + <div class="test"> + <div class="float">FLT</div> + <div></div> + <div class="in-flow"> + <div class="float">FLT</div> + <span class="label">NORMAL</span> + <span class="abspos">ABS</span> + <span class="relpos">REL</span> + <div class="overflow">OVERFLOW</div> + </div> + </div> +</div> + +<p> + <button onclick="document.querySelector('style[title]').textContent = 'html { font: 10px/1 sans-serif; }'">Show Text</button> |