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

Thu, 15 Jan 2015 21:13:52 +0100

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

Remove forgotten relic of ABI crash risk averse overloaded method change.

     1 <!DOCTYPE html>
     2 <!--
     3      Any copyright is dedicated to the Public Domain.
     4      http://creativecommons.org/publicdomain/zero/1.0/
     5 -->
     6 <!-- This testcase checks that we honor "align-items" on a horizontal
     7      flex container that has "overflow: hidden".  We use a huge border on
     8      one of the flex items, large enough that it overflows the container,
     9      to be sure that "overflow: hidden" is actually applying. -->
    10 <html>
    11 <head>
    12   <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-items: center'</title>
    13   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
    14   <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-containers">
    15   <link rel="match" href="flexbox-overflow-horiz-2-ref.html">
    16   <style>
    17     .flexContainer {
    18       background: purple;
    19       display: flex;
    20       align-items: center;
    21       width: 70px;
    22       height: 70px;
    23       float: left;
    24       margin-right: 5px;
    25     }
    26     .bigItem {
    27       background: blue;
    28       height: 10px;
    29       /* Tall border (taller than our container): */
    30       border: solid coral;
    31       border-width: 50px 2px;
    32       flex: 3;
    33     }
    34     .smallItem {
    35       background: teal;
    36       height: 20px;
    37       flex: 1;
    38     }
    39     .hidden { overflow: hidden }
    40   </style>
    41 </head>
    42 <body>
    43   <div class="flexContainer"><!-- (overflow un-set) -->
    44     <div class="bigItem"></div>
    45     <div class="smallItem"></div>
    46   </div>
    47   <div class="flexContainer hidden">
    48     <div class="bigItem"></div>
    49     <div class="smallItem"></div>
    50   </div>
    51 </body>
    52 </html>

mercurial