layout/reftests/webkit-box/webkit-box-direction-2-ref.html

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