webkit-box-abspos-children-1-ref.html (1430B)
1 <!DOCTYPE html> 2 <!-- NOTE: This reference case uses the same markup as the testcase, except: 3 (1) This reference case uses modern flexbox CSS instead of -webkit-box. 4 (2) In the 2nd and 4th containers here (where the testcase makes the 5 *2nd* flex item abspos), this reference case simply uses no absolute 6 positioning at all, to produce the correct expected rendering 7 (with the 2nd flex item being positioned after the 1st, rather than 8 being superimposed on top of it). 9 --> 10 <html> 11 <head> 12 <title>Reference: simple positioning of abspos children in -webkit-box</title> 13 <style> 14 .container { 15 border: 1px solid black; 16 width: 200px; 17 } 18 .box { display: flex } 19 .inline-box { display: inline-flex } 20 .abs { position: absolute } 21 .a { border: 3px solid purple } 22 .b { border: 3px solid orange } 23 </style> 24 </head> 25 <body> 26 <!-- Test abspos child in -webkit-box: --> 27 <div class="container box"> 28 <div class="a abs">aa</div> 29 <div class="b">bbbb</div> 30 </div> 31 <div class="container box"> 32 <div class="a">aa</div> 33 <div class="b">bbbb</div> 34 </div> 35 36 <!-- Test abspos child in -webkit-inline-box: --> 37 <div class="container inline-box"> 38 <div class="a abs">aa</div> 39 <div class="b">bbbb</div> 40 </div> 41 <div class="container inline-box"> 42 <div class="a">aa</div> 43 <div class="b">bbbb</div> 44 </div> 45 46 </body> 47 </html>