indeterminate-style-height-ref.html (1471B)
1 <!DOCTYPE html> 2 <html> 3 <link rel='stylesheet' href='resource://reftest/progress.css'> 4 <style> 5 div.progress-element { 6 height: 12em; 7 width: 2em; 8 } 9 div.progress-bar { 10 height: 100%; 11 } 12 body > div:nth-child(1) > .progress-bar { position: relative; 13 top: calc(12em - 20px); height: 20px; } 14 body > div:nth-child(2) > .progress-bar { position: relative; 15 top: calc(12em - 0px); height: 0px; } 16 body > div:nth-child(3) > .progress-bar { position: relative; 17 top: calc(12em - 50%); height: 50%; } 18 body > div:nth-child(4) > .progress-bar { position: relative; 19 top: calc(12em - 1em); height: 1em; } 20 body > div:nth-child(5) > .progress-bar { position: relative; 21 top: calc(12em - 100%); height: 100%; } 22 </style> 23 <body> 24 <div class="progress-element"> 25 <div class="progress-bar"> 26 </div> 27 </div> 28 <div class="progress-element"> 29 <div class="progress-bar"> 30 </div> 31 </div> 32 <div class="progress-element"> 33 <div class="progress-bar"> 34 </div> 35 </div> 36 <div class="progress-element"> 37 <div class="progress-bar"> 38 </div> 39 </div> 40 <div class="progress-element"> 41 <div class="progress-bar"> 42 </div> 43 </div> 44 </body> 45 </html>