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

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-5.html	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,51 @@
     1.4 +<!DOCTYPE html>
     1.5 +<!--
     1.6 +     Any copyright is dedicated to the Public Domain.
     1.7 +     http://creativecommons.org/publicdomain/zero/1.0/
     1.8 +-->
     1.9 +<!-- This testcase checks that we honor "align-content" on a vertical
    1.10 +     flex container that has "overflow:hidden".  We use a large flex item,
    1.11 +     large enough that it overflows the container in the main axis, to be
    1.12 +     sure that "overflow: hidden" is actually applying. -->
    1.13 +<html>
    1.14 +<head>
    1.15 +  <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-content: space-around'</title>
    1.16 +  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
    1.17 +  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#align-content-property">
    1.18 +  <link rel="match" href="flexbox-overflow-vert-5-ref.html">
    1.19 +  <style>
    1.20 +    .flexContainer {
    1.21 +      background: purple;
    1.22 +      display: flex;
    1.23 +      flex-direction: column;
    1.24 +      flex-wrap: wrap;
    1.25 +      align-content: space-around;
    1.26 +      width: 70px;
    1.27 +      height: 70px;
    1.28 +      margin-bottom: 5px;
    1.29 +    }
    1.30 +    .bigItem {
    1.31 +      background: blue;
    1.32 +      flex: none; /* prevent shrinking (so we can intentionally overflow) */
    1.33 +      width: 20px;
    1.34 +      height: 72px;
    1.35 +    }
    1.36 +    .smallItem {
    1.37 +      background: teal;
    1.38 +      width: 20px;
    1.39 +      height: 20px;
    1.40 +    }
    1.41 +    .hidden { overflow: hidden }
    1.42 +  </style>
    1.43 +</head>
    1.44 +<body>
    1.45 +  <div class="flexContainer"><!-- (overflow un-set) -->
    1.46 +    <div class="bigItem"></div>
    1.47 +    <div class="smallItem"></div>
    1.48 +  </div>
    1.49 +  <div class="flexContainer hidden">
    1.50 +    <div class="bigItem"></div>
    1.51 +    <div class="smallItem"></div>
    1.52 +  </div>
    1.53 +</body>
    1.54 +</html>

mercurial