flexbox-paint-ordering-002-ref.xhtml (5285B)
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 flex items containing overlapping content. 7 This reference uses inline-block in place of inline-flex, with floated 8 children in place of flex items, and with hardcoded DOM-reordering in 9 place of "order" reordering. --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <title>CSS Reftest Reference</title> 13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 14 <style> 15 body { 16 line-height: 0; 17 } 18 19 .flexbox { 20 display: inline-block; 21 width: 20px; 22 height: 10px; 23 border: 2px solid gray; 24 margin-bottom: 10px; 25 margin-right: 10px; 26 } 27 .a { 28 width: 10px; 29 height: 10px; 30 background: lightblue; 31 float: left; /* to stack horizontally, like a flex item */ 32 } 33 .b { 34 width: 10px; 35 height: 10px; 36 background: pink; 37 float: left; /* to stack horizontally, like a flex item */ 38 } 39 .aKid { 40 margin-left: 3px; 41 margin-top: 3px; 42 width: 10px; 43 height: 10px; 44 background: steelblue; 45 border: 1px solid blue; 46 } 47 .bKid { 48 margin-left: 3px; 49 margin-top: 6px; 50 width: 10px; 51 height: 10px; 52 background: violet; 53 border: 1px solid purple; 54 } 55 56 /* Need to set 'position' for z-index to take effect. */ 57 .zn2 { z-index: -2; position: relative; } 58 .zn1 { z-index: -1; position: relative; } 59 .z0 { z-index: 0; position: relative; } 60 .z1 { z-index: 1; position: relative; } 61 62 </style> 63 </head> 64 <body> 65 <!-- order not set: --> 66 <div class="flexbox"> 67 <div class="a"><div class="aKid"/></div> 68 <div class="b"><div class="bKid"/></div> 69 </div> 70 71 <br/> 72 73 <!-- order set, but it matches content order, so it shouldn't matter: --> 74 <div class="flexbox"> 75 <div class="a"><div class="aKid"/></div> 76 <div class="b"><div class="bKid"/></div> 77 </div 78 ><div class="flexbox"> 79 <div class="a"><div class="aKid"/></div> 80 <div class="b"><div class="bKid"/></div> 81 </div 82 ><div class="flexbox"> 83 <div class="a"><div class="aKid"/></div> 84 <div class="b"><div class="bKid"/></div> 85 </div 86 ><div class="flexbox"> 87 <div class="a"><div class="aKid"/></div> 88 <div class="b"><div class="bKid"/></div> 89 </div 90 ><div class="flexbox"> 91 <div class="a"><div class="aKid"/></div> 92 <div class="b"><div class="bKid"/></div> 93 </div 94 ><div class="flexbox"> 95 <div class="a"><div class="aKid"/></div> 96 <div class="b"><div class="bKid"/></div> 97 </div> 98 99 <br/> 100 101 <!-- order set to reverse of content-order: --> 102 <div class="flexbox"> 103 <div class="b"><div class="bKid"/></div> 104 <div class="a"><div class="aKid"/></div> 105 </div 106 ><div class="flexbox"> 107 <div class="b"><div class="bKid"/></div> 108 <div class="a"><div class="aKid"/></div> 109 </div 110 ><div class="flexbox"> 111 <div class="b"><div class="bKid"/></div> 112 <div class="a"><div class="aKid"/></div> 113 </div 114 ><div class="flexbox"> 115 <div class="b"><div class="bKid"/></div> 116 <div class="a"><div class="aKid"/></div> 117 </div> 118 119 <br/> 120 121 <!-- order set to reverse of content-order, AND with z-index set on 122 one or both items, but not such that it changes the paint order --> 123 <div class="flexbox"> 124 <div class="b"><div class="bKid"/></div> 125 <div class="a"><div class="aKid"/></div> 126 </div 127 ><div class="flexbox"> 128 <div class="b"><div class="bKid"/></div> 129 <div class="a"><div class="aKid"/></div> 130 </div 131 ><div class="flexbox"> 132 <div class="b"><div class="bKid"/></div> 133 <div class="a"><div class="aKid"/></div> 134 </div 135 ><div class="flexbox"> 136 <div class="b"><div class="bKid"/></div> 137 <div class="a"><div class="aKid"/></div> 138 </div> 139 140 <br/> 141 142 <!-- order set to reverse of content-order, AND with z-index set on 143 one or both items, in such a way that it affects paint order --> 144 <div class="flexbox"> 145 <!-- 'a' is behind the container's border --> 146 <div class="b"><div class="bKid"/></div> 147 <div class="a zn1"><div class="aKid"/></div> 148 </div 149 ><div class="flexbox"> 150 <!-- 'a' and 'b' are both behind the container's border --> 151 <div class="b zn1"><div class="bKid"/></div> 152 <div class="a zn1"><div class="aKid"/></div> 153 </div 154 ><div class="flexbox"> 155 <!-- 'a' and 'b' are both behind the container's border, 156 and 'a' is behind 'b' despite coming after it in the 'order' 157 ordering--> 158 <div class="b zn1"><div class="bKid"/></div> 159 <div class="a zn2"><div class="aKid"/></div> 160 </div 161 ><div class="flexbox"> 162 <!-- 'a' and 'b' are both in front of the container's border, 163 and 'a' is behind 'b' despite coming after it in the 'order' 164 ordering--> 165 <div class="b z1"><div class="bKid"/></div> 166 <div class="a z0"><div class="aKid"/></div> 167 </div> 168 169 </body> 170 </html>