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

Tue, 06 Jan 2015 21:39:09 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Tue, 06 Jan 2015 21:39:09 +0100
branch
TOR_BUG_9701
changeset 8
97036ab72558
permissions
-rw-r--r--

Conditionally force memory storage according to privacy.thirdparty.isolate;
This solves Tor bug #9701, complying with disk avoidance documented in
https://www.torproject.org/projects/torbrowser/design/#disk-avoidance.

     1 <!DOCTYPE html>
     2 <!-- Any copyright is dedicated to the Public Domain.
     3      http://creativecommons.org/publicdomain/zero/1.0/ -->
     4 <!-- Testcase for how we fragment a flex container with a single unbreakable
     5      child, with the flex container having "flex-direction: column-reverse"
     6      and "flex-wrap: wrap".
     7 -->
     8 <html>
     9   <head>
    10     <style>
    11     .multicol {
    12       height: 10px;
    13       width: 100px;
    14       -moz-column-width: 20px;
    15       -moz-column-fill: auto;
    16       border: 2px solid orange;
    17       margin-bottom: 15px; /* (just for spacing between testcases) */
    18     }
    19     .flexContainer {
    20       display: flex;
    21       flex-direction: column-reverse;
    22       flex-wrap: wrap;
    23       justify-content: flex-end;
    24       background: teal;
    25       border: 1px dashed black;
    26     }
    27     .item {
    28       width: 100%;
    29       height: 20px;
    30       flex: none;
    31     }
    32     </style>
    33   </head>
    34   <body>
    35     <!-- auto-height container: -->
    36     <div class="multicol">
    37       <div class="flexContainer">
    38         <img src="" class="item">
    39       </div>
    40     </div>
    42     <!-- fixed-height container, smaller than available height: -->
    43     <div class="multicol">
    44       <div class="flexContainer" style="height: 8px">
    45         <img src="" class="item">
    46       </div>
    47     </div>
    49     <!-- fixed-height container, between available height and child height: -->
    50     <div class="multicol">
    51       <div class="flexContainer" style="height: 15px">
    52         <img src="" class="item">
    53       </div>
    54     </div>
    56     <!-- fixed-height container, same as child height: -->
    57     <div class="multicol">
    58       <div class="flexContainer" style="height: 20px">
    59         <img src="" class="item">
    60       </div>
    61     </div>
    63     <!-- fixed-height container, larger than child height: -->
    64     <div class="multicol">
    65       <div class="flexContainer" style="height: 24px">
    66         <img src="" class="item">
    67       </div>
    68     </div>
    69   </body>
    70 </html>

mercurial