layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3   <link rel='stylesheet' href='resource://reftest/progress.css'>
   4   <style>
   5     .progress-element { margin: 10px; }
   6     body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
   7                                               height: calc(100% - 8px); }
   8     body > div:nth-child(2) > .progress-bar { }
   9     body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
  10                                               height: calc(100% - 8px); }
  11     body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: calc(100% - 10px); }
  12     body > div:nth-child(5) > .progress-bar { }
  13     body > div:nth-child(6) > .progress-bar { height: calc(100% - 10px); }
  14     body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
  15     body > div:nth-child(8) > .progress-bar { }
  16     body > div:nth-child(9) > .progress-bar { }
  17     body > div:nth-child(10) > .progress-bar { }
  18     body > div:nth-child(11) > .progress-bar { }
  19     /* 12 - 15 should have 100% width, no need to specify. */
  20     body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px; left: 64px;
  21                                                  height: calc(100% - 32px);
  22                                                  width: calc(100% + 128px - 1em); }
  23   </style>
  24   <body>
  25     <div class="progress-element vertical">
  26       <div class="progress-bar">
  27       </div>
  28     </div>
  29     <div class="progress-element vertical">
  30       <div class="progress-bar">
  31       </div>
  32     </div>
  33     <div class="progress-element vertical">
  34       <div class="progress-bar">
  35       </div>
  36     </div>
  37     <div class="progress-element vertical">
  38       <div class="progress-bar">
  39       </div>
  40     </div>
  41     <div class="progress-element vertical">
  42       <div class="progress-bar">
  43       </div>
  44     </div>
  45     <div class="progress-element vertical">
  46       <div class="progress-bar">
  47       </div>
  48     </div>
  49     <div class="progress-element vertical">
  50       <div class="progress-bar">
  51       </div>
  52     </div>
  53     <div class="progress-element vertical">
  54       <div class="progress-bar">
  55       </div>
  56     </div>
  57     <div class="progress-element vertical">
  58       <div class="progress-bar">
  59       </div>
  60     </div>
  61     <div class="progress-element vertical">
  62       <div class="progress-bar">
  63       </div>
  64     </div>
  65     <div class="progress-element vertical">
  66       <div class="progress-bar">
  67       </div>
  68     </div>
  69     <div class="progress-element vertical">
  70       <div class="progress-bar">
  71       </div>
  72     </div>
  73     <div class="progress-element vertical">
  74       <div class="progress-bar">
  75       </div>
  76     </div>
  77     <div class="progress-element vertical">
  78       <div class="progress-bar">
  79       </div>
  80     </div>
  81     <div class="progress-element vertical">
  82       <div class="progress-bar">
  83       </div>
  84     </div>
  85     <br><div class="progress-element vertical">
  86       <div class="progress-bar">
  87       </div>
  88     </div>
  89   </body>
  90 </html>