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

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