layout/reftests/flexbox/flexbox-position-absolute-2-ref.xhtml

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 <?xml version="1.0" encoding="UTF-8"?>
     2 <!--
     3      Any copyright is dedicated to the Public Domain.
     4      http://creativecommons.org/publicdomain/zero/1.0/
     5 -->
     6 <!-- Reference case for absolutely positioned children of a flex container. -->
     7 <html xmlns="http://www.w3.org/1999/xhtml">
     8   <head>
     9     <style>
    10       div.containingBlock {
    11         top: 15px;
    12         left: 20px;
    13         height: 400px;
    14         position: absolute;
    15         border: 2px dashed purple;
    16       }
    17       .abspos {
    18         position: absolute;
    19         border: 2px dotted black;
    20       }
    21       div.flexbox {
    22         width: 200px;
    23         height: 100px;
    24       }
    25       div.a {
    26         width: 100%;
    27         height: 100px;
    28         background: lightgreen;
    29         display: inline-block;
    30       }
    31       div.b {
    32         width: 100%;
    33         height: 100px;
    34         background: yellow;
    35         display: inline-block;
    36       }
    37       div.inflex {
    38         width: 20px;
    39         height: 100px;
    40         background: gray;
    41         display: inline-block;
    42       }
    43       div.noFlexFn {
    44         width: 15px;
    45         height: 15px;
    46         background: teal;
    47         display: inline-block;
    48       }
    49     </style>
    50   </head>
    51   <body>
    52     <div class="containingBlock">
    53       <!-- First child abspos: -->
    54       <div class="flexbox"
    55            ><div class="a abspos" style="width: 30px"/><div class="b"/></div>
    56       <!-- Second child abspos: -->
    57       <div class="flexbox"
    58            ><div class="a"/><div class="b abspos" style="width: 20px"/></div>
    59       <!-- Middle child abspos: -->
    60       <div class="flexbox"
    61            ><div class="a" style="width: 80px"
    62           /><div class="inflex abspos"
    63           /><div class="b" style="width: 120px"/></div>
    64       <!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
    65       <div class="flexbox"
    66            ><div class="inflex" style="margin-left: 12px"
    67           /><div class="inflex" style="margin-left: 24px"
    68           /><div class="inflex" style="margin-left: 24px"
    69           /><div class="noFlexFn abspos" style="margin-left: 24px"
    70           /><div class="inflex" style="margin-left: 48px"/></div>
    71     </div>
    72   </body>
    73 </html>

mercurial