The Tor Browser / file comparison
comparison: layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-2-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-2-ref.xhtml
- branch
- TOR_BUG_9701
- changeset 13
- 44a2da4a2ab2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:a1f90d5f0e72 |
|---|---|
| 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> |
