flexbox-paint-ordering-001-ref.xhtml (2034B)
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 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <title>CSS Reftest Reference</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 10 <style> 11 .container { 12 width: 40px; 13 height: 14px; 14 border: 2px solid green; 15 margin-bottom: 2px; 16 } 17 .a { 18 width: 16px; 19 height: 10px; 20 background: blue; 21 min-width: 0; 22 border: 2px solid lightblue; 23 } 24 .b { 25 width: 16px; 26 height: 10px; 27 background: purple; 28 min-width: 0; 29 border: 2px solid slateblue; 30 } 31 .aKid { 32 margin-left: 10px; 33 margin-top: 2px; 34 width: 16px; 35 height: 6px; 36 background: yellow; 37 border: 1px solid black; 38 } 39 .a, .b { float: left; } 40 </style> 41 </head> 42 <body> 43 <!-- Just 6 copies of the same container, since they all should look the 44 same (except for the final "position: fixed" one, which needs to be 45 explicitly marked as "position: fixed" or else it paints differently 46 on Android.) --> 47 <div class="container"> 48 <div class="a"><div class="aKid"/></div> 49 <div class="b"></div> 50 </div> 51 52 <div class="container"> 53 <div class="a"><div class="aKid"/></div> 54 <div class="b"></div> 55 </div> 56 57 <div class="container"> 58 <div class="a"><div class="aKid"/></div> 59 <div class="b"></div> 60 </div> 61 62 <div class="container"> 63 <div class="a"><div class="aKid"/></div> 64 <div class="b"></div> 65 </div> 66 67 <div class="container"> 68 <div class="a"><div class="aKid"/></div> 69 <div class="b"></div> 70 </div> 71 72 <div class="container" style="position: fixed"> 73 <div class="a"><div class="aKid"/></div> 74 <div class="b"></div> 75 </div> 76 77 </body> 78 </html>