1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-3-ref.html Wed Dec 31 06:09:35 2014 +0100 1.3 @@ -0,0 +1,71 @@ 1.4 +<!DOCTYPE html> 1.5 +<!-- 1.6 + Any copyright is dedicated to the Public Domain. 1.7 + http://creativecommons.org/publicdomain/zero/1.0/ 1.8 +--> 1.9 +<html> 1.10 +<head> 1.11 + <title>CSS Reftest Reference</title> 1.12 + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 1.13 + <style> 1.14 + .flexContainer { 1.15 + background: orange; 1.16 + width: 70px; 1.17 + height: 20px; 1.18 + padding: 2px; 1.19 + margin-bottom: 2px; 1.20 + } 1.21 + .item1 { 1.22 + display: inline-block; 1.23 + background: lightblue; 1.24 + width: 30px; 1.25 + height: 16px; 1.26 + padding: 2px; 1.27 + margin-right: 2px; 1.28 + vertical-align: top; 1.29 + } 1.30 + .item2 { 1.31 + display: inline-block; 1.32 + background: yellow; 1.33 + width: 30px; 1.34 + height: 16px; 1.35 + padding: 2px; 1.36 + vertical-align: top; 1.37 + } 1.38 + .grandchildA { 1.39 + background: purple; 1.40 + width: 80px; 1.41 + height: 6px; 1.42 + position: relative; 1.43 + z-index: 10; 1.44 + } 1.45 + .grandchildB { 1.46 + background: teal; 1.47 + width: 80px; 1.48 + height: 6px; 1.49 + position: relative; 1.50 + z-index: 20; 1.51 + } 1.52 + .grandchildC { 1.53 + background: lime; 1.54 + width: 20px; 1.55 + height: 16px; 1.56 + position: relative; 1.57 + /* This z-index should interleave this content 1.58 + between grandchildA and grandchildB: */ 1.59 + z-index: 15; 1.60 + } 1.61 + </style> 1.62 +</head> 1.63 +<body> 1.64 + <div class="flexContainer" 1.65 + ><div class="item1" 1.66 + ><div class="grandchildA"></div 1.67 + ><div class="grandchildB"></div 1.68 + ></div 1.69 + ><div class="item2" 1.70 + ><div class="grandchildC"></div 1.71 + ></div 1.72 + ></div> 1.73 +</body> 1.74 +</html>