diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml')
| -rw-r--r-- | layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml new file mode 100644 index 000000000..59d13a645 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml @@ -0,0 +1,85 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-block; + font-size: 10px; + line-height: 10px; + vertical-align: top; + } + + .flexbox > div { float: left } + .flex-start, .flex-end, .center, .baseline, .stretch, + .auto, .unspecified, .initial, .inherit { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + position: relative; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="top: 172px">end</div> + <div class="flex-end big" style="top: 82px">a b c d e f</div> + <div class="center" style="top: 86px">center</div> + <div class="center big" style="top: 41px">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div> + <div class="baseline" + style="display: inline-block">base</div + ><div class="baseline big" + style="display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 182px">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html> |