The Tor Browser: layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-1-ref.html@7540298fafa1

     1 <!DOCTYPE html>

     2 <!--

     3      Any copyright is dedicated to the Public Domain.

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

     5 -->

     6 <html>

     7 <head>

     8   <title>CSS Reftest Reference</title>

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

    10   <meta charset="utf-8">

    11   <style>

    12     .flexContainer {

    13       height: 60px;

    14       width: 60px;

    15       font: 10px sans-serif;

    16       background: yellow;

    17       float: left;

    18       border: 1px solid black;

    19     }

    20     .flexContainer > * {

    21       border: 1px dotted gray;

    22       width: 28px;

    23       height: 28px;

    24       float: left;

    25     }

    27     /* The single-line flex containers' flex items are shrunk in main axis: */

    28     .singleLineHoriz > * {

    29       width: 13px;

    30     }

    31     .singleLineVert  > * {

    32       height: 13px;

    33       float: none;

    34     }

    35   </style>

    36 </head>

    37 <body>

    38   <!-- single-line (flex-wrap unspecified): -->

    39   <div class="flexContainer singleLineHoriz"><!-- flex-flow: row -->

    40     <div>1</div><div>2</div><div>3</div><div>4</div>

    41   </div>

    42   <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse -->

    43     <div>4</div><div>3</div><div>2</div><div>1</div>

    44   </div>

    45   <div class="flexContainer singleLineVert"><!-- flex-flow: column -->

    46     <div>1</div><div>2</div><div>3</div><div>4</div>

    47   </div>

    48   <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse -->

    49     <div>4</div><div>3</div><div>2</div><div>1</div>

    50   </div>

    52   <div style="clear:both"></div>

    54   <!-- now using "wrap", after flex-direction: -->

    55   <div class="flexContainer"><!-- flex-flow: row wrap -->

    56     <div>1</div><div>2</div><div>3</div><div>4</div>

    57   </div>

    58   <div class="flexContainer"><!-- flex-flow: row-reverse wrap -->

    59     <div>2</div><div>1</div><div>4</div><div>3</div>

    60   </div>

    61   <div class="flexContainer"><!-- flex-flow: column wrap -->

    62     <div>1</div><div>3</div><div>2</div><div>4</div>

    63   </div>

    64   <div class="flexContainer"><!-- flex-flow: column-reverse wrap -->

    65     <div>2</div><div>4</div><div>1</div><div>3</div>

    66   </div>

    68   <div style="clear:both"></div>

    70   <!-- now using "wrap", before flex-direction: -->

    71   <div class="flexContainer"><!-- flex-flow: wrap row -->

    72     <div>1</div><div>2</div><div>3</div><div>4</div>

    73   </div>

    74   <div class="flexContainer"><!-- flex-flow: wrap row-reverse -->

    75     <div>2</div><div>1</div><div>4</div><div>3</div>

    76   </div>

    77   <div class="flexContainer"><!-- flex-flow: wrap column -->

    78     <div>1</div><div>3</div><div>2</div><div>4</div>

    79   </div>

    80   <div class="flexContainer"><!-- flex-flow: wrap column-reverse -->

    81     <div>2</div><div>4</div><div>1</div><div>3</div>

    82   </div>

    84   <div style="clear:both"></div>

    86   <!-- now using "wrap-reverse", after flex-direction: -->

    87   <div class="flexContainer"><!-- flex-flow: row wrap-reverse -->

    88     <div>3</div><div>4</div><div>1</div><div>2</div>

    89   </div>

    90   <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse -->

    91     <div>4</div><div>3</div><div>2</div><div>1</div>

    92   </div>

    93   <div class="flexContainer"><!-- flex-flow: column wrap-reverse -->

    94     <div>3</div><div>1</div><div>4</div><div>2</div>

    95   </div>

    96   <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse -->

    97     <div>4</div><div>2</div><div>3</div><div>1</div>

    98   </div>

   100   <div style="clear:both"></div>

   102   <!-- now using "wrap-reverse", before flex-direction: -->

   103   <div class="flexContainer"><!-- flex-flow: wrap-reverse row -->

   104     <div>3</div><div>4</div><div>1</div><div>2</div>

   105   </div>

   106   <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse -->

   107     <div>4</div><div>3</div><div>2</div><div>1</div>

   108   </div>

   109   <div class="flexContainer"> <!-- flex-flow: wrap-reverse column -->

   110     <div>3</div><div>1</div><div>4</div><div>2</div>

   111   </div>

   112   <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse -->

   113     <div>4</div><div>2</div><div>3</div><div>1</div>

   114   </div>

   116   <div style="clear:both"></div>

   118   <!-- now just specifying flex-wrap (no flex-direction) -->

   119   <div class="flexContainer"><!-- flex-flow: wrap -->

   120     <div>1</div><div>2</div><div>3</div><div>4</div>

   121   </div>

   122   <div class="flexContainer"><!-- flex-flow: wrap-reverse -->

   123     <div>3</div><div>4</div><div>1</div><div>2</div>

   124   </div>

   126 </body>

   127 </html>

The Tor Browser / file revision