1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-2.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,176 @@
1.4 +<?xml version="1.0" encoding="UTF-8"?>
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 +<!-- Testcase with flex items containing overlapping content, with
1.10 + "order" and "z-index" set on some of them, to test how that affects
1.11 + paint-order. -->
1.12 +<html xmlns="http://www.w3.org/1999/xhtml">
1.13 + <head>
1.14 + <title>CSS Test: Testing the paint-order of overlapping flex items with 'order' and 'z-index' set</title>
1.15 + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
1.16 + <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#painting"/>
1.17 + <link rel="match" href="flexbox-paint-ordering-2-ref.xhtml"/>
1.18 + <style>
1.19 + body {
1.20 + line-height: 0;
1.21 + }
1.22 +
1.23 + .flexbox {
1.24 + display: inline-flex;
1.25 + width: 20px;
1.26 + height: 10px;
1.27 + border: 2px solid gray;
1.28 + margin-bottom: 10px;
1.29 + margin-right: 10px;
1.30 + }
1.31 + .a {
1.32 + width: 10px;
1.33 + height: 10px;
1.34 + background: lightblue;
1.35 + min-width: 0;
1.36 + }
1.37 + .b {
1.38 + width: 10px;
1.39 + height: 10px;
1.40 + background: pink;
1.41 + min-width: 0;
1.42 + }
1.43 +
1.44 + .aKid {
1.45 + margin-left: 3px;
1.46 + margin-top: 3px;
1.47 + width: 10px;
1.48 + height: 10px;
1.49 + background: steelblue;
1.50 + border: 1px solid blue;
1.51 + }
1.52 + .bKid {
1.53 + margin-left: 3px;
1.54 + margin-top: 6px;
1.55 + width: 10px;
1.56 + height: 10px;
1.57 + background: violet;
1.58 + border: 1px solid purple;
1.59 + }
1.60 +
1.61 + .on1 { order: -1; }
1.62 + .o0 { order: 0; }
1.63 + .o1 { order: 1; }
1.64 + .o2 { order: 2; }
1.65 +
1.66 + .zn2 { z-index: -2; }
1.67 + .zn1 { z-index: -1; }
1.68 + .z0 { z-index: 0; }
1.69 + .z1 { z-index: 1; }
1.70 +
1.71 + </style>
1.72 + </head>
1.73 + <body>
1.74 + <!-- order not set: -->
1.75 + <div class="flexbox">
1.76 + <div class="a"><div class="aKid"/></div>
1.77 + <div class="b"><div class="bKid"/></div>
1.78 + </div>
1.79 +
1.80 + <br/>
1.81 +
1.82 + <!-- order set, but it matches content order, so it shouldn't matter: -->
1.83 + <div class="flexbox">
1.84 + <div class="a on1"><div class="aKid"/></div>
1.85 + <div class="b"><div class="bKid"/></div>
1.86 + </div
1.87 + ><div class="flexbox">
1.88 + <div class="a o0"><div class="aKid"/></div>
1.89 + <div class="b"><div class="bKid"/></div>
1.90 + </div
1.91 + ><div class="flexbox">
1.92 + <div class="a o0"><div class="aKid"/></div>
1.93 + <div class="b o0"><div class="bKid"/></div>
1.94 + </div
1.95 + ><div class="flexbox">
1.96 + <div class="a o2"><div class="aKid"/></div>
1.97 + <div class="b o2"><div class="bKid"/></div>
1.98 + </div
1.99 + ><div class="flexbox">
1.100 + <div class="a"><div class="aKid"/></div>
1.101 + <div class="b o0"><div class="bKid"/></div>
1.102 + </div
1.103 + ><div class="flexbox">
1.104 + <div class="a"><div class="aKid"/></div>
1.105 + <div class="b o1"><div class="bKid"/></div>
1.106 + </div>
1.107 +
1.108 + <br/>
1.109 +
1.110 + <!-- order set to reverse of content-order: -->
1.111 + <div class="flexbox">
1.112 + <div class="a o1"><div class="aKid"/></div>
1.113 + <div class="b"><div class="bKid"/></div>
1.114 + </div
1.115 + ><div class="flexbox">
1.116 + <div class="a"><div class="aKid"/></div>
1.117 + <div class="b on1"><div class="bKid"/></div>
1.118 + </div
1.119 + ><div class="flexbox">
1.120 + <div class="a o0"><div class="aKid"/></div>
1.121 + <div class="b on1"><div class="bKid"/></div>
1.122 + </div
1.123 + ><div class="flexbox">
1.124 + <div class="a o2"><div class="aKid"/></div>
1.125 + <div class="b o1"><div class="bKid"/></div>
1.126 + </div>
1.127 +
1.128 + <br/>
1.129 +
1.130 + <!-- order set to reverse of content-order, AND with z-index set on
1.131 + one or both items, but not such that it changes the paint order -->
1.132 + <div class="flexbox">
1.133 + <div class="a o1 z0"><div class="aKid"/></div>
1.134 + <div class="b"><div class="bKid"/></div>
1.135 + </div
1.136 + ><div class="flexbox">
1.137 + <div class="a o1 z1"><div class="aKid"/></div>
1.138 + <div class="b"><div class="bKid"/></div>
1.139 + </div
1.140 + ><div class="flexbox">
1.141 + <div class="a o1 z0"><div class="aKid"/></div>
1.142 + <div class="b z0"><div class="bKid"/></div>
1.143 + </div
1.144 + ><div class="flexbox">
1.145 + <div class="a o1 z1"><div class="aKid"/></div>
1.146 + <div class="b z0"><div class="bKid"/></div>
1.147 + </div>
1.148 +
1.149 + <br/>
1.150 +
1.151 + <!-- order set to reverse of content-order, AND with z-index set on
1.152 + one or both items, in such a way that it affects paint order -->
1.153 + <div class="flexbox">
1.154 + <!-- 'a' is behind the container's border -->
1.155 + <div class="a o1 zn1"><div class="aKid"/></div>
1.156 + <div class="b"><div class="bKid"/></div>
1.157 + </div
1.158 + ><div class="flexbox">
1.159 + <!-- 'a' and 'b' are both behind the container's border -->
1.160 + <div class="a o1 zn1"><div class="aKid"/></div>
1.161 + <div class="b zn1"><div class="bKid"/></div>
1.162 + </div
1.163 + ><div class="flexbox">
1.164 + <!-- 'a' and 'b' are both behind the container's border,
1.165 + and 'a' is behind 'b' despite coming after it in the 'order'
1.166 + ordering-->
1.167 + <div class="a o1 zn2"><div class="aKid"/></div>
1.168 + <div class="b zn1"><div class="bKid"/></div>
1.169 + </div
1.170 + ><div class="flexbox">
1.171 + <!-- 'a' and 'b' are both in front of the container's border,
1.172 + and 'a' is behind 'b' despite coming after it in the 'order'
1.173 + ordering-->
1.174 + <div class="a o1 z0"><div class="aKid"/></div>
1.175 + <div class="b z1"><div class="bKid"/></div>
1.176 + </div>
1.177 +
1.178 + </body>
1.179 +</html>
