bar-pseudo-element-vertical-rtl-ref.html (3065B)
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; 21 left: calc(100% + 128px + 32px ); 22 height: calc(100% - 32px); 23 width: calc(100% + 128px - 1em); } 24 </style> 25 <body dir='rtl'> 26 <div class="progress-element vertical"> 27 <div class="progress-bar"> 28 </div> 29 </div> 30 <div class="progress-element vertical"> 31 <div class="progress-bar"> 32 </div> 33 </div> 34 <div class="progress-element vertical"> 35 <div class="progress-bar"> 36 </div> 37 </div> 38 <div class="progress-element vertical"> 39 <div class="progress-bar"> 40 </div> 41 </div> 42 <div class="progress-element vertical"> 43 <div class="progress-bar"> 44 </div> 45 </div> 46 <div class="progress-element vertical"> 47 <div class="progress-bar"> 48 </div> 49 </div> 50 <div class="progress-element vertical"> 51 <div class="progress-bar"> 52 </div> 53 </div> 54 <div class="progress-element vertical"> 55 <div class="progress-bar"> 56 </div> 57 </div> 58 <div class="progress-element vertical"> 59 <div class="progress-bar"> 60 </div> 61 </div> 62 <div class="progress-element vertical"> 63 <div class="progress-bar"> 64 </div> 65 </div> 66 <div class="progress-element vertical"> 67 <div class="progress-bar"> 68 </div> 69 </div> 70 <div class="progress-element vertical"> 71 <div class="progress-bar"> 72 </div> 73 </div> 74 <div class="progress-element vertical"> 75 <div class="progress-bar"> 76 </div> 77 </div> 78 <div class="progress-element vertical"> 79 <div class="progress-bar"> 80 </div> 81 </div> 82 <div class="progress-element vertical"> 83 <div class="progress-bar"> 84 </div> 85 </div> 86 <br><div class="progress-element vertical"> 87 <div class="progress-bar"> 88 </div> 89 </div> 90 </body> 91 </html>