layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-1-ref.html

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

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

     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   <style>
    11     .flexContainer {
    12       background: purple;
    13       width: 70px;
    14       height: 70px;
    15       float: left;
    16       margin-right: 5px;
    17     }
    18     .bigItem {
    19       background: blue;
    20       display: inline-block;
    21       height: 200px;
    22       width: 75%;
    23       float: left;
    24     }
    25     .smallItem {
    26       background: teal;
    27       width: 25%;
    28       /* In the testcase, we'll stretch to container's height,
    29          minus our 10px margin-bottom. */
    30       height: calc(100% - 10px);
    31       float: left;
    32     }
    33     .scroll { overflow: scroll }
    34     .auto   { overflow: auto   }
    35     .hidden { overflow: hidden }
    36   </style>
    37 </head>
    38 <body>
    39   <div class="flexContainer"><!-- (overflow un-set) -->
    40     <div class="bigItem"></div>
    41     <div class="smallItem"></div>
    42   </div>
    43   <div class="flexContainer hidden">
    44     <div class="bigItem"></div>
    45     <div class="smallItem"></div>
    46   </div>
    47   <div class="flexContainer scroll">
    48     <div class="bigItem"></div>
    49     <div class="smallItem"></div>
    50   </div>
    51   <div class="flexContainer auto">
    52     <div class="bigItem"></div>
    53     <div class="smallItem"></div>
    54   </div>
    55 </body>
    56 </html>

mercurial