layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-3.html

Wed, 31 Dec 2014 07:16:47 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 07:16:47 +0100
branch
TOR_BUG_9701
changeset 3
141e0f1194b1
permissions
-rw-r--r--

Revert simplistic fix pending revisit of Mozilla integration attempt.

     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 "justify-content" on a vertical
     7      flex container that has "overflow:hidden".  We use a large flex item,
     8      large enough that it overflows the container, to be sure that
     9      "overflow: hidden" is actually applying. -->
    10 <html>
    11 <head>
    12   <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'justify-content: space-around'</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-vert-3-ref.html">
    16   <style>
    17     .flexContainer {
    18       background: purple;
    19       display: flex;
    20       flex-direction: column;
    21       justify-content: space-around;
    22       width: 70px;
    23       height: 70px;
    24       margin-bottom: 5px;
    25     }
    26     .bigItem {
    27       background: blue;
    28       width: 200px;
    29       height: 20px;
    30     }
    31     .smallItem {
    32       background: teal;
    33       width: 20px;
    34       height: 20px;
    35     }
    36     .hidden { overflow: hidden }
    37   </style>
    38 </head>
    39 <body>
    40   <div class="flexContainer"><!-- (overflow un-set) -->
    41     <div class="bigItem"></div>
    42     <div class="smallItem"></div>
    43   </div>
    44   <div class="flexContainer hidden">
    45     <div class="bigItem"></div>
    46     <div class="smallItem"></div>
    47   </div>
    48 </body>
    49 </html>

mercurial