layout/reftests/forms/progress/transformations-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3   <link rel='stylesheet' href='resource://reftest/progress.css'>
   4   <style>
   5     body > div:nth-child(1) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
   6     body > div:nth-child(2) { transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
   7     body > div:nth-child(3) { transform: rotate(30deg); }
   8     body > div:nth-child(4) { transform: scale(2, 4); }
   9     body > div:nth-child(5) { transform: scale(0.1, 0.4); }
  10     body > div:nth-child(6) { transform: scale(1, 0.4); }
  11     body > div:nth-child(7) { transform: scale(0.1, 1); }
  12     body > div:nth-child(8) { transform: skew(30deg, -10deg); }
  13     body > div:nth-child(9) { transform: skew(-30deg, 10deg); }
  14     body > div:nth-child(10) { transform: translate(10px, 30px); }
  15     body > div:nth-child(11) { transform: translate(30px, 10px); }
  16     body > div:nth-child(12) { transform: translate(-10px, 30px); }
  17     body > div:nth-child(13) { transform: translate(30px, -10px); }
  18     body > div:nth-child(14) { transform: scale(0, 0); }
  19   </style>
  20   <body>
  21     <div class="progress-element">
  22       <div class="progress-bar">
  23       </div>
  24     </div>
  25     <div class="progress-element">
  26       <div class="progress-bar">
  27       </div>
  28     </div>
  29     <div class="progress-element">
  30       <div class="progress-bar">
  31       </div>
  32     </div>
  33     <div class="progress-element">
  34       <div class="progress-bar">
  35       </div>
  36     </div>
  37     <div class="progress-element">
  38       <div class="progress-bar">
  39       </div>
  40     </div>
  41     <div class="progress-element">
  42       <div class="progress-bar">
  43       </div>
  44     </div>
  45     <div class="progress-element">
  46       <div class="progress-bar">
  47       </div>
  48     </div>
  49     <div class="progress-element">
  50       <div class="progress-bar">
  51       </div>
  52     </div>
  53     <div class="progress-element">
  54       <div class="progress-bar">
  55       </div>
  56     </div>
  57     <div class="progress-element">
  58       <div class="progress-bar">
  59       </div>
  60     </div>
  61     <div class="progress-element">
  62       <div class="progress-bar">
  63       </div>
  64     </div>
  65     <div class="progress-element">
  66       <div class="progress-bar">
  67       </div>
  68     </div>
  69     <div class="progress-element">
  70       <div class="progress-bar">
  71       </div>
  72     </div>
  73     <div class="progress-element">
  74       <div class="progress-bar">
  75       </div>
  76     </div>
  77   </body>
  78 </html>