layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-3-ref.html

Thu, 15 Jan 2015 21:13:52 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 15 Jan 2015 21:13:52 +0100
branch
TOR_BUG_9701
changeset 12
7540298fafa1
permissions
-rw-r--r--

Remove forgotten relic of ABI crash risk averse overloaded method change.

     1 <!DOCTYPE html>
     2 <!--
     3      Any copyright is dedicated to the Public Domain.
     4      http://creativecommons.org/publicdomain/zero/1.0/
     5 -->
     6 <html>
     7 <head>
     8   <title>CSS Reftest Reference</title>
     9   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
    10   <style>
    11     .flexContainer {
    12       background: orange;
    13       width: 70px;
    14       height: 20px;
    15       padding: 2px;
    16       margin-bottom: 2px;
    17     }
    18     .item1 {
    19       display: inline-block;
    20       background: lightblue;
    21       width: 30px;
    22       height: 16px;
    23       padding: 2px;
    24       margin-right: 2px;
    25       vertical-align: top;
    26     }
    27     .item2 {
    28       display: inline-block;
    29       background: yellow;
    30       width: 30px;
    31       height: 16px;
    32       padding: 2px;
    33       vertical-align: top;
    34     }
    35     .grandchildA {
    36       background: purple;
    37       width: 80px;
    38       height: 6px;
    39       position: relative;
    40       z-index: 10;
    41     }
    42     .grandchildB {
    43       background: teal;
    44       width: 80px;
    45       height: 6px;
    46       position: relative;
    47       z-index: 20;
    48     }
    49     .grandchildC {
    50       background: lime;
    51       width: 20px;
    52       height: 16px;
    53       position: relative;
    54       /* This z-index should interleave this content
    55          between grandchildA and grandchildB: */
    56       z-index: 15;
    57     }
    58   </style>
    59 </head>
    60 <body>
    61   <div class="flexContainer"
    62     ><div class="item1"
    63       ><div class="grandchildA"></div
    64       ><div class="grandchildB"></div
    65     ></div
    66     ><div class="item2"
    67       ><div class="grandchildC"></div
    68     ></div
    69   ></div>
    70 </body>
    71 </html>

mercurial