diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html | 70 |
1 files changed, 70 insertions, 0 deletions
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> |