bar-pseudo-element-vertical-ref.html (2983B)
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>