testing/web-platform/tests/compat/webkit-box-horizontal-rtl-variants.html

   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. Boxes should start at left edge and extend
  45    outside border.
  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. Boxes should start at left edge and extend
  54    outside border.
  55 <div class="webkitbox" style="-webkit-box-pack: center">
  56   <div class="redbox">D</div>
  57   <div class="greenbox">C</div>
  58   <div class="redbox">B</div>
  59   <div class="greenbox">A</div>
  60 </div>
  61
  62 <p>End, content too big. Boxes should start at left edge and extend
  63    outside border.
  64 <div class="webkitbox" style="-webkit-box-pack: end">
  65   <div class="redbox">D</div>
  66   <div class="greenbox">C</div>
  67   <div class="redbox">B</div>
  68   <div class="greenbox">A</div>
  69 </div>