webkit-box-direction-1.html (1961B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title> 9 CSS Test: "-webkit-box-direction" property 10 in a -webkit-box with default writing-mode 11 </title> 12 <style> 13 .box { 14 display: -webkit-box; 15 border: 1px solid black; 16 margin: 5px 20px; 17 float: left; /* For testing in "rows" */ 18 font: 10px serif; 19 } 20 .box > *:nth-child(1) { 21 background: turquoise; 22 } 23 .box > *:nth-child(2) { 24 background: salmon; 25 } 26 27 .rtl { direction: rtl; } 28 29 .horizNormal { 30 -webkit-box-orient: horizontal; 31 -webkit-box-direction: normal; 32 } 33 .horizReverse { 34 -webkit-box-orient: horizontal; 35 -webkit-box-direction: reverse; 36 } 37 .vertNormal { 38 -webkit-box-orient: vertical; 39 -webkit-box-direction: normal; 40 } 41 .vertReverse { 42 -webkit-box-orient: vertical; 43 -webkit-box-direction: reverse; 44 } 45 br { clear: both; } 46 </style> 47 </head> 48 <body> 49 <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' --> 50 <div class="box horizNormal"> 51 <div>a</div><div>b</div> 52 </div> 53 <div class="box horizReverse"> 54 <div>a</div><div>b</div> 55 </div> 56 57 <br> 58 59 <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' --> 60 <div class="box horizNormal rtl"> 61 <div>a</div><div>b</div> 62 </div> 63 <div class="box horizReverse rtl"> 64 <div>a</div><div>b</div> 65 </div> 66 67 <br> 68 69 <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' --> 70 <div class="box vertNormal"> 71 <div>a</div><div>b</div> 72 </div> 73 <div class="box vertReverse"> 74 <div>a</div><div>b</div> 75 </div> 76 77 <br> 78 79 <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' --> 80 <div class="box vertNormal rtl"> 81 <div>a</div><div>b</div> 82 </div> 83 <div class="box vertReverse rtl"> 84 <div>a</div><div>b</div> 85 </div> 86 </body> 87 </html>