webkit-box-direction-2.html (2198B)
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 and some margin/border/padding on flex items 12 </title> 13 <style> 14 .box { 15 display: -webkit-box; 16 border: 1px solid black; 17 margin: 5px 20px; 18 float: left; /* For testing in "rows" */ 19 font: 10px serif; 20 } 21 .box > *:nth-child(1) { 22 background: turquoise; 23 margin: 2px 4px 6px 8px; 24 border: 1px solid blue; 25 padding: 4px 3px 2px 1px; 26 } 27 .box > *:nth-child(2) { 28 background: salmon; 29 margin: 9px 3px 7px 5px; 30 border: 2px solid purple; 31 padding: 6px 7px 8px 9px; 32 } 33 34 .rtl { direction: rtl; } 35 36 .horizNormal { 37 -webkit-box-orient: horizontal; 38 -webkit-box-direction: normal; 39 } 40 .horizReverse { 41 -webkit-box-orient: horizontal; 42 -webkit-box-direction: reverse; 43 } 44 .vertNormal { 45 -webkit-box-orient: vertical; 46 -webkit-box-direction: normal; 47 } 48 .vertReverse { 49 -webkit-box-orient: vertical; 50 -webkit-box-direction: reverse; 51 } 52 br { clear: both; } 53 </style> 54 </head> 55 <body> 56 <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' --> 57 <div class="box horizNormal"> 58 <div>a</div><div>b</div> 59 </div> 60 <div class="box horizReverse"> 61 <div>a</div><div>b</div> 62 </div> 63 64 <br> 65 66 <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' --> 67 <div class="box horizNormal rtl"> 68 <div>a</div><div>b</div> 69 </div> 70 <div class="box horizReverse rtl"> 71 <div>a</div><div>b</div> 72 </div> 73 74 <br> 75 76 <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' --> 77 <div class="box vertNormal"> 78 <div>a</div><div>b</div> 79 </div> 80 <div class="box vertReverse"> 81 <div>a</div><div>b</div> 82 </div> 83 84 <br> 85 86 <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' --> 87 <div class="box vertNormal rtl"> 88 <div>a</div><div>b</div> 89 </div> 90 <div class="box vertReverse rtl"> 91 <div>a</div><div>b</div> 92 </div> 93 </body> 94 </html>