webkit-box-horizontal-rtl-variants.html (1627B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://crbug.com/1034461"> 3 <link rel="match" href="webkit-box-horizontal-rtl-variants-ref.html"> 4 <style> 5 .webkitbox { 6 width: 300px; 7 display: -webkit-box; 8 direction: rtl; 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 rtl. In all cases 25 the order of letters in the boxes should be alphabetized left to right. 26 <p>Start. Boxes should be aligned to right side. 27 <div class="webkitbox"> 28 <div class="redbox">B</div> 29 <div class="greenbox">A</div> 30 </div> 31 32 <p>Centered. Boxes should be centered. 33 <div class="webkitbox" style="-webkit-box-pack: center"> 34 <div class="redbox">B</div> 35 <div class="greenbox">A</div> 36 </div> 37 38 <p>End. Boxes should be aligned to left side. 39 <div class="webkitbox" style="-webkit-box-pack: end"> 40 <div class="redbox">B</div> 41 <div class="greenbox">A</div> 42 </div> 43 44 <p>Start, content too big. 45 <div class="webkitbox"> 46 <div class="redbox">D</div> 47 <div class="greenbox">C</div> 48 <div class="redbox">B</div> 49 <div class="greenbox">A</div> 50 </div> 51 52 <p>Center, content too big. 53 <div class="webkitbox" style="-webkit-box-pack: center"> 54 <div class="redbox">D</div> 55 <div class="greenbox">C</div> 56 <div class="redbox">B</div> 57 <div class="greenbox">A</div> 58 </div> 59 60 <p>End, content too big. 61 <div class="webkitbox" style="-webkit-box-pack: end"> 62 <div class="redbox">D</div> 63 <div class="greenbox">C</div> 64 <div class="redbox">B</div> 65 <div class="greenbox">A</div> 66 </div>