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

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     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