diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/alignment/references')
6 files changed, 690 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html new file mode 100644 index 0000000000..6a02ae4796 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html @@ -0,0 +1,205 @@ +<!DOCTYPE html> +<html> +<style> +body { + margin: 0; +} +.inline-flexbox { + display: inline-flex; + background-color: lightgrey; + margin-top: 5px; +} +.flexbox { + display: flex; + background-color: grey; + margin-top: 10px; +} +.empty { + border-style: solid; + border-width: 5px 0px 10px; + padding: 2px 0px 4px; + margin: 10px 0px 20px; +} +.column { + flex-flow: column; +} +.column-reverse { + flex-flow: column-reverse; +} +</style> + +<body style="position: relative"> + +<!-- If any of the flex items on the flex container's first line participate +in baseline alignment, the flex container's main-axis baseline is the baseline +of those flex items. --> +<div> +before text +<div class="inline-flexbox" style="height: 50px;"> + <div style="align-self: flex-end">below</div> + <div style="align-self: baseline; margin-top: 15px">baseline</div> + <div style="align-self: flex-start">above</div> +</div> +after text +</div> + +<!-- This grid has a baseline item, it's orthogonal but it still participates +in baseline alignment. --> +<div> +before text +<div class="inline-flexbox" style="height: 40px"> + <div style="align-self: flex-end">below</div> + <div style="align-self: baseline; margin-top: 20px"></div> + <div style="align-self: flex-start">above</div> +</div> +after text +</div> + +<div> +before text +<div class="inline-flexbox"> + <h2>h2 baseline</h2> + <div>above</div> +</div> +after text +</div> + +<div> +before text +<div class="inline-flexbox"> + <div>baseline</div> + <h2>h2 below</h2> +</div> +after text +</div> + +<!-- If the first flex item has an orthogonal baseline, use the synthesized +baseline (bottom of the content box of the first item). --> +<div> +should align with the middle +<div class="inline-flexbox" style="width: 40px; height: 40px"> + <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div> +</div> +of the grey box +</div> + +<!-- If there are no flexitems, align to the bottom of the margin box. --> +<div> +should align below the bottom +<div class="empty inline-flexbox" style="width: 30px; height: 30px"> +</div> +of the black line +</div> + +<!-- If the griditem has not a natural baseline, align to the bottom of the box. --> +<div> +should align with the bottom +<div class="inline-flexbox" style="width: 40px; height: 40px;"> + <div style="width: 20px; height: 20px; border: 5px solid; background: red; "></div> +</div> +of the red box +</div> + +<!-- cross-axis (column) test cases. --> +<div> +before text +<div class="inline-flexbox column"> + <div>baseline</div> + <div>below</div> +</div> +after text +</div> + +<!-- If the first flex item has an orthogonal baseline, use the synthesized +baseline (bottom of the content box of the first item). --> +<div> +should align with the middle +<div class="inline-flexbox column" style="width: 40px; height: 40px;"> + <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div> + <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div> +</div> +of the grey box +</div> + +<!-- More tests on the right side of the page. --> +<div style="position: absolute; top: 0; left: 400px; width: 360px"> + +<!-- Ignore absolutely positioned flex items. --> +<div> +before text +<div class="inline-flexbox"> + <div style="position: absolute">absolute</div> + <div style="margin-top: 30px">baseline</div> +</div> +after text +</div> + +<!-- We don't participate in baseline alignment if there's an auto margin. --> +<div> +before text +<div class="inline-flexbox" style="height: 40px;"> + <div>baseline</div> + <div style="align-self: baseline; margin-top: auto">below</div> +</div> +after text +</div> + +<div> +before text +<div style="display: inline-block"> +<div class="inline-flexbox" style="height: 40px;"> + <div>above</div> + <div style="align-self: baseline; margin-top: 10px">baseline</div> + <div>above</div> +</div> +after +</div> +text +</div> + +<!-- The spec is a little unclear what should happen here. For now, align to +the last line box. --> +<div> +before text +<div style="display: inline-block"> +<div class="flexbox" style="height: 30px;"> + baseline +</div> +</div> +after text +</div> + +<table style="background-color: lightgrey; margin-top: 5px"> +<tr style="height: 50px"> + <td style="vertical-align: bottom">bottom</td> + <td style="vertical-align: baseline">baseline</td> + <td style="vertical-align: top">top</td> + <td style="vertical-align: baseline"><div class="flexbox"> + <h2>h2 baseline</h2> + <div>above</div> + </div></td> +</table> + +<!-- If a box contributing a baseline has a scrollbar, the box must be treated +as being in its initial scroll position when computing the baseline. --> +<div> +before text +<div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; width: 150px"> + <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;"> + The baseline is based on<br> + the non-scrolled position;<br> + this won't line up. + </div> +</div> +after text +</div> + +</div> + +<script> +document.getElementById("flexitem-with-scrollbar").scrollTop = 999; +document.getElementById("flexbox-with-scrollbar").style.width = "auto"; +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html new file mode 100644 index 0000000000..43634e58c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<style> +.flexbox { + display: flex; +} +.inline-flexbox { + display: inline-flex; +} +.flex-one { + flex: 1; +} +.inline-block { display: inline-block; } +.flexbox, .inline-flexbox { background-color: lightgrey; } +.border { border: 11px solid pink; } +.padding { padding: 13px; } +.margin { margin: 8px 0; } +.flexbox > div { + min-width: 0; + min-height: 0; +} +</style> +<div> +before text +<div class="border" style="display: inline-block; background-color: lightgrey"> +<div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;"> + baseline +</div> +</div> +after text +</div> + +<div> +Should align +<div class="inline-block border"> + <div class="flexbox padding" style="width: 50px; height: 50px; background-color: pink"> + <div class="flex-one" style="background-color: lightgrey"></div> + </div> +</div> +with the +<div class="inline-block margin"> + <div class="flexbox border" style="width: 50px; height: 50px; background-color: pink"> + <div class="flex-one" style="background-color: lightgrey"></div> + </div> +</div> +bottom of +<div class="inline-block padding" style="padding-left: 0; padding-right: 0"> + <div class="flexbox margin border" style="width: 50px; height: 50px; background-color: pink"> + <div class="flex-one" style="background-color: lightgrey;"></div> + </div> +</div> +the grey box. +</div> + +<div> +Should align with the +<div class="inline-block"> + <div class="flexbox" style="background-color: white"> + <div class="flex-one border padding margin" style="background-color: lightgrey;"></div> + </div> +</div> +bottom of the pink box. +</div> + +<div> +Should align 8px +<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div> +below the bottom +<div class="inline-flexbox margin border padding"></div> +of the pink box. +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html new file mode 100644 index 0000000000..446c42f1a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<style> +.flexbox { + display: flex; +} +.inline-flexbox { + display: inline-flex; +} +.flex-one { + flex: 1; +} +.inline-block { display: inline-block; } +.flexbox, .inline-flexbox { background-color: lightgrey; } +.border { border: 11px solid pink; } +.padding { padding: 13px; } +.margin { margin: 8px 0; } +.flexbox > div { + min-width: 0; + min-height: 0; +} +</style> + +<div> +Should align with the bottom +<div class="inline-block border margin padding" style="background-color: pink"> + <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink"> + <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div> + </div> +</div> +of the horizontal scrollbar. +</div> + +<div> +Should align 10px below the +<div class="inline-block" style="background-color: pink"> + <div class="flexbox" style="width: 100px; height: 100px; background-color: pink"> + <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div> + </div> +</div> +horizontal scrollbar, if one is visible. +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html new file mode 100644 index 0000000000..7f8bb12cd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<title> + Reference for Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items +</title> + +<style> + @import "/fonts/ahem.css"; + .grid { + border: solid silver; + margin: 1em 2px; + font: 20px/1 Ahem; + + display: inline-block; + vertical-align: top; + } + .grid > div { + border: black 10px; + border-style: solid none; + color: orange; + } + div + div { + font-size: 2em; + } + div + div + div { + font-size: 50%; + } + + .ref { + position: relative; + width: 80px; + height: 96px; + } + .ref > div { + position: absolute; + } + .ref1 { top: 16px; } + .ref2 { left: 20px; } + .ref3 { top: 24px; + left: 60px; } + .ref4 { right: 0px; + top: 0px; + bottom: 0px; + width: 10px; } + + .ref.content > div:not(.stripe) { + border-color: transparent; + } + .stripe { + width: 80px; + height: 76px; + } +</style> + +<p>Test passes if each pair of boxes is identical.</p> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<br> + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> + + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html new file mode 100644 index 0000000000..e8932cba9f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions Reference File +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + border: solid silver; + margin: 1em 0.25em; + display: inline-grid; + grid-template-columns: repeat(3, auto); + font: 20px/1 Ahem; + height: 5em; + } + .grid > div { + border: 1em aqua; + border-style: solid none; + } + .index { + padding: 1em 0; + } + .percent, .orthogonal { + height: 1em; + } + + .self > div { + align-self: start; + } + .content > div { + align-content: start; + } + .self.ref > div { + align-self: start; + } + .content.ref > div { + align-content: start; + } +</style> + +<p>Test passes if the upper set of boxes is identical to the lower set. + +<div class="grid self"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid self"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> + +<div class="grid content"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid content"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> + +<br> + +<div class="grid self ref"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid self ref"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> + +<div class="grid content ref"> + <div class="index"> + X + </div> + <div class="percent"> + X + </div> +</div> + +<div class="grid content ref"> + <div class="index"> + X + </div> + <div class="orthogonal"> + X + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html new file mode 100644 index 0000000000..d4db58e090 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<title> + Reference for Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items +</title> + +<style> + @import "/fonts/ahem.css"; + .grid { + border: solid silver; + margin: 1em 2px; + font: 20px/1 Ahem; + + display: inline-block; + vertical-align: top; + } + .grid > div { + border: black 10px; + border-style: none solid; + color: orange; + writing-mode: vertical-rl; + } + div + div { + font-size: 2em; + } + div + div + div { + font-size: 50%; + } + + .ref { + position: relative; + width: 96px; + height: 80px; + } + .ref > div { + position: absolute; + } + .ref1 { right: 16px; } + .ref2 { top: 20px; + right: 0px; } + .ref3 { right: 24px; + top: 60px; } + .ref4 { bottom: 0px; + right: 0px; + left: 0px; + height: 10px; } + + .ref.content > div:not(.stripe) { + border-color: transparent; + } + .stripe { + width: 76px; + height: 80px; + } +</style> + +<p>Test passes if each pair of boxes is identical.</p> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<div class="grid self ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> +</div> + +<br> + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> + +<div class="grid content ref"> + <div class="ref1"> + p<br> + p<br> + p + </div> + <div class="ref2"> + p + </div> + <div class="ref3"> + p + </div> + <div class="ref4"> + + </div> + <div class="stripe"> + </div> +</div> |