The Tor Browser: layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-1-table.xhtml@b8a032363ba2

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

     1 <?xml version="1.0" encoding="UTF-8"?>

     2 <!--

     3      Any copyright is dedicated to the Public Domain.

     4      http://creativecommons.org/publicdomain/zero/1.0/

     5 -->

     6 <!-- Testcase for align-items / align-self behavior, with all the possible

     7      values included on different items within a flex container. -->

     8 <html xmlns="http://www.w3.org/1999/xhtml">

     9   <head>

    10     <title>CSS Test: Testing the various 'align-self' property values on flex items that are tables</title>

    11     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>

    12     <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-items-property"/>

    13     <link rel="match" href="flexbox-align-self-horiz-1-ref.xhtml"/>

    14     <style>

    15       .flexbox {

    16         border: 1px dashed blue;

    17         height: 200px;

    18         display: inline-flex;

    19         font-size: 10px;

    20         line-height: 10px;

    22         /* Any children whose align-self is 'auto' (or unspecified, or

    23            initial) will end up taking this value from us: */

    24         align-items: center;

    26         /* Any children whose align-self is 'inherit' will end up

    27            inheriting this value from us: */

    28         align-self: flex-end;

    29       }

    31       .flexbox > * {

    32         display: table;

    33         width: 40px;

    34       }

    36       .big {

    37         height: 100px;

    38         font-size: 20px;

    39         line-height: 20px;

    40       }

    42       /* Classes for each of the various align-self values */

    43       .flex-start {

    44         background: lime;

    45         align-self: flex-start;

    46       }

    47       .flex-end {

    48         background: orange;

    49         align-self: flex-end;

    50       }

    51       .center {

    52         background: lightblue;

    53         align-self: center;

    54       }

    55       .baseline {

    56         background: teal;

    57         align-self: baseline;

    58       }

    59       .stretch {

    60         background: pink;

    61         align-self: stretch;

    62         display: block; /* XXXdholbert Hackaround for bug 799725 */

    63       }

    64       .auto {

    65         background: yellow;

    66         align-self: auto;

    67       }

    68       .unspecified {

    69         background: lightgreen;

    70       }

    71       .initial {

    72         background: aqua;

    73         align-self: initial;

    74       }

    75       .inherit {

    76         background: violet;

    77         align-self: inherit;

    78       }

    79    </style>

    80   </head>

    81   <body>

    82     <div class="flexbox">

    83       <div class="flex-start">start</div>

    84       <div class="flex-start big">a b c d e f</div>

    85       <div class="flex-end">end</div>

    86       <div class="flex-end big">a b c d e f</div>

    87       <div class="center">center</div>

    88       <div class="center big">a b c d e f</div>

    89       <div class="baseline">base</div>

    90       <div class="baseline big">abc</div>

    91       <div class="stretch">stretch</div>

    92       <div class="stretch big">a b c d e f</div>

    93       <div class="auto">auto</div>

    94       <div class="unspecified">unspec</div>

    95       <div class="initial">initial</div>

    96       <div class="inherit">inherit</div>

    97     </div>

    98   </body>

    99 </html>

The Tor Browser / file revision