layout/reftests/flexbox/pagination/flexbox-empty-2d.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 an empty fixed-height flex container, with
     5      margin/border/padding that are larger than the available height,
     6      and with the flex container having "flex-direction: column-reverse".
     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: 2px;
    18     }
    19     .flexContainer {
    20       display: flex;
    21       flex-direction: column-reverse;
    22       background: teal;
    23       /* border-width is 0 by default; some sub-testcases will increase it. */
    24       border: 0 dashed black;
    25     }
    26     </style>
    27   </head>
    28   <body>
    29     <!-- MARGIN LARGER THAN AVAILABLE HEIGHT -->
    30     <!-- =================================== -->
    31     <!-- margin-top is the available height: -->
    32     <div class="multicol">
    33       <div class="flexContainer" style="height: 8px;
    34                                         margin-top: 10px"></div>
    35     </div>
    37     <!-- margin-top is larger than available height: -->
    38     <div class="multicol">
    39       <div class="flexContainer" style="height: 8px;
    40                                         margin-top: 11px"></div>
    41     </div>
    43     <!-- margin-bottom is exactly the available height: -->
    44     <div class="multicol">
    45       <div class="flexContainer" style="height: 8px;
    46                                         margin-bottom: 10px"></div>
    47     </div>
    49     <!-- margin-bottom is larger than available height: -->
    50     <div class="multicol">
    51       <div class="flexContainer" style="height: 8px;
    52                                         margin-bottom: 11px"></div>
    53     </div>
    55     <!-- BORDER LARGER THAN AVAILABLE HEIGHT -->
    56     <!-- =================================== -->
    57     <!-- border-top-width is the available height: -->
    58     <div class="multicol">
    59       <div class="flexContainer" style="height: 8px;
    60                                         border-top-width: 10px"></div>
    61     </div>
    63     <!-- border-top-width is larger than available height: -->
    64     <div class="multicol">
    65       <div class="flexContainer" style="height: 8px;
    66                                         border-top-width: 11px"></div>
    67     </div>
    69     <!-- border-bottom-width is exactly the available height: -->
    70     <div class="multicol">
    71       <div class="flexContainer" style="height: 8px;
    72                                         border-bottom-width: 10px"></div>
    73     </div>
    75     <!-- border-bottom-width is larger than available height: -->
    76     <div class="multicol">
    77       <div class="flexContainer" style="height: 8px;
    78                                         border-bottom-width: 11px"></div>
    79     </div>
    81     <!-- PADDING LARGER THAN AVAILABLE HEIGHT -->
    82     <!-- ==================================== -->
    83     <!-- padding-top is the available height: -->
    84     <div class="multicol">
    85       <div class="flexContainer" style="height: 8px;
    86                                         padding-top: 10px"></div>
    87     </div>
    89     <!-- padding-top is larger than available height: -->
    90     <div class="multicol">
    91       <div class="flexContainer" style="height: 8px;
    92                                         padding-top: 11px"></div>
    93     </div>
    95     <!-- padding-bottom is exactly the available height: -->
    96     <div class="multicol">
    97       <div class="flexContainer" style="height: 8px;
    98                                         padding-bottom: 10px"></div>
    99     </div>
   101     <!-- padding-bottom is larger than available height: -->
   102     <div class="multicol">
   103       <div class="flexContainer" style="height: 8px;
   104                                         padding-bottom: 11px"></div>
   105     </div>
   107     <!-- BORDER+PADDING LARGER THAN AVAILABLE HEIGHT -->
   108     <!-- =========================================== -->
   109     <!-- border+padding-top is the available height: -->
   110     <div class="multicol">
   111       <div class="flexContainer" style="height: 8px;
   112                                         border-top: 5px;
   113                                         padding-top: 5px"></div>
   114     </div>
   116     <!-- padding-top is larger than available height: -->
   117     <div class="multicol">
   118       <div class="flexContainer" style="height: 8px;
   119                                         border-top: 6px;
   120                                         padding-top: 6px"></div>
   121     </div>
   123     <!-- padding-bottom is exactly the available height: -->
   124     <div class="multicol">
   125       <div class="flexContainer" style="height: 8px;
   126                                         border-bottom: 5px;
   127                                         padding-bottom: 5px"></div>
   128     </div>
   130     <!-- padding-bottom is larger than available height: -->
   131     <div class="multicol">
   132       <div class="flexContainer" style="height: 8px;
   133                                         border-bottom: 6px;
   134                                         padding-bottom: 6px"></div>
   135     </div>
   137   </body>
   138 </html>

mercurial