layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-3.html
author Daniel Holbert <dholbert@cs.stanford.edu>
Thu, 06 Jun 2013 20:37:18 -0700
changeset 145816 98b4083befbbf8a05ad783a8a0eab69e36531cf8
parent 145815 8e82f9384070dcd9f26135723e6155110e2b0cb1
child 145817 dd81ecba7afdf66837f2a6e0fe8667fa498a529f
permissions -rw-r--r--
Bug 880137 part 3: Give w3c-css flexbox reftests the necessary boilerplate headers with author info, reference, and placeholder test-title and "help" nodes (populated in next patch). rs=dbaron

<!DOCTYPE html>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- This testcase checks that flex items are painted as pseudo-stacking
     contexts, instead of full stacking contexts. In other words, content
     inside of one flex item should be able to iterleave between pieces of
     content in another flex item, if we set appropriately interleaving
     "z-index" values. -->
<html>
<head>
  <title>CSS Test: {TODO: INSERT TITLE}</title>
  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
  <link rel="help" href="http://dev.w3.org/csswg/css-flexbox/">
  <link rel="match" href="flexbox-items-as-stacking-contexts-3-ref.html">
  <style>
    .flexContainer {
      background: orange;
      display: flex;
      justify-content: space-between;
      width: 70px;
      height: 20px;
      padding: 2px;
      margin-bottom: 2px;
    }
    .item1 {
      background: lightblue;
      width: 30px;
      padding: 2px;
    }
    .item2 {
      background: yellow;
      width: 30px;
      padding: 2px;
    }
    .grandchildA {
      background: purple;
      width: 80px;
      height: 6px;
      position: relative;
      z-index: 10;
    }
    .grandchildB {
      background: teal;
      width: 80px;
      height: 6px;
      position: relative;
      z-index: 20;
    }
    .grandchildC {
      background: lime;
      width: 20px;
      height: 16px;
      position: relative;
      /* This z-index should interleave this content
         between grandchildA and grandchildB: */
      z-index: 15;
    }
  </style>
</head>
<body>
  <!-- This flex container's first flex item has content that overflows
       and overlap the second flex item.  The z-index values are set such
       that this content should interleave; grandchildC should
       paint on top of grandchildA, but underneath grandchildB. -->
  <div class="flexContainer"
    ><div class="item1"
      ><div class="grandchildA"></div
      ><div class="grandchildB"></div
    ></div
    ><div class="item2"
      ><div class="grandchildC"></div
    ></div
  ></div>
</body>
</html>