webkit-box-horizontal-reverse-variants.html (1667B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://crbug.com/1034461"> 3 <link rel="match" href="webkit-box-horizontal-reverse-variants-ref.html"> 4 <style> 5 .webkitbox { 6 width: 300px; 7 display: -webkit-box; 8 -webkit-box-direction: reverse; 9 border-style: solid; 10 border-width: 1px 2px 1px 4px; 11 } 12 13 .redbox { 14 background: red; 15 width: 100px; 16 } 17 18 .greenbox { 19 background: green; 20 width: 100px; 21 } 22 23 </style> 24 <p>Exercises -webkit-box with various box-pack settings when direction is 25 reverse. In all cases the order of letters in the boxes should be 26 alphabetized left to right. 27 <p>Start. Boxes should be aligned to right side. 28 <div class="webkitbox" style="-webkit-box-pack: end"> 29 <div class="redbox">B</div> 30 <div class="greenbox">A</div> 31 </div> 32 33 <p>Centered. Boxes should be centered. 34 <div class="webkitbox" style="-webkit-box-pack: center"> 35 <div class="redbox">B</div> 36 <div class="greenbox">A</div> 37 </div> 38 39 <p>End. Boxes should be aligned to left side. 40 <div class="webkitbox"> 41 <div class="redbox">B</div> 42 <div class="greenbox">A</div> 43 </div> 44 45 <p>Start, content too big. 46 <div class="webkitbox"> 47 <div class="redbox">D</div> 48 <div class="greenbox">C</div> 49 <div class="redbox">B</div> 50 <div class="greenbox">A</div> 51 </div> 52 53 <p>Center, content too big. 54 <div class="webkitbox" style="-webkit-box-pack: center"> 55 <div class="redbox">D</div> 56 <div class="greenbox">C</div> 57 <div class="redbox">B</div> 58 <div class="greenbox">A</div> 59 </div> 60 61 <p>End, content too big. 62 <div class="webkitbox" style="-webkit-box-pack: end"> 63 <div class="redbox">D</div> 64 <div class="greenbox">C</div> 65 <div class="redbox">B</div> 66 <div class="greenbox">A</div> 67 </div>