layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html

changeset 0
6474c204b198
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/layout/reftests/flexbox/pagination/flexbox-unbreakable-child-1b-wrap.html	Wed Dec 31 06:09:35 2014 +0100
     1.3 @@ -0,0 +1,68 @@
     1.4 +<!DOCTYPE html>
     1.5 +<!-- Any copyright is dedicated to the Public Domain.
     1.6 +     http://creativecommons.org/publicdomain/zero/1.0/ -->
     1.7 +<!-- Testcase for how we fragment a flex container with a single unbreakable
     1.8 +     child, with the flex container having "flex-direction: row-reverse" and
     1.9 +     "flex-wrap: wrap".
    1.10 +-->
    1.11 +<html>
    1.12 +  <head>
    1.13 +    <style>
    1.14 +    .multicol {
    1.15 +      height: 10px;
    1.16 +      width: 100px;
    1.17 +      -moz-column-width: 20px;
    1.18 +      -moz-column-fill: auto;
    1.19 +      border: 2px solid orange;
    1.20 +      margin-bottom: 15px; /* (just for spacing between testcases) */
    1.21 +    }
    1.22 +    .flexContainer {
    1.23 +      display: flex;
    1.24 +      flex-direction: row-reverse;
    1.25 +      flex-wrap: wrap;
    1.26 +      background: teal;
    1.27 +      border: 1px dashed black;
    1.28 +    }
    1.29 +    .item {
    1.30 +      width: 100%;
    1.31 +      height: 20px;
    1.32 +    }
    1.33 +    </style>
    1.34 +  </head>
    1.35 +  <body>
    1.36 +    <!-- auto-height container: -->
    1.37 +    <div class="multicol">
    1.38 +      <div class="flexContainer">
    1.39 +        <img src="" class="item">
    1.40 +      </div>
    1.41 +    </div>
    1.42 +
    1.43 +    <!-- fixed-height container, smaller than available height: -->
    1.44 +    <div class="multicol">
    1.45 +      <div class="flexContainer" style="height: 8px">
    1.46 +        <img src="" class="item">
    1.47 +      </div>
    1.48 +    </div>
    1.49 +
    1.50 +    <!-- fixed-height container, between available height and child height: -->
    1.51 +    <div class="multicol">
    1.52 +      <div class="flexContainer" style="height: 15px">
    1.53 +        <img src="" class="item">
    1.54 +      </div>
    1.55 +    </div>
    1.56 +
    1.57 +    <!-- fixed-height container, same as child height: -->
    1.58 +    <div class="multicol">
    1.59 +      <div class="flexContainer" style="height: 20px">
    1.60 +        <img src="" class="item">
    1.61 +      </div>
    1.62 +    </div>
    1.63 +
    1.64 +    <!-- fixed-height container, larger than child height: -->
    1.65 +    <div class="multicol">
    1.66 +      <div class="flexContainer" style="height: 24px">
    1.67 +        <img src="" class="item">
    1.68 +      </div>
    1.69 +    </div>
    1.70 +  </body>
    1.71 +</html>

mercurial