percent-height-child.html (1044B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- This test verifies that we honor percent heights on content inside of 7 a <button> element (resolving the percent against the <button>). 8 (In this testcase, the button has no focus-border/padding.) --> 9 <html> 10 <head> 11 <style> 12 button { 13 width: 80px; 14 border: 0; 15 padding: 0; 16 17 font: 10px sans-serif; 18 vertical-align: top; 19 20 color: black; 21 background: gray; 22 -moz-appearance: none; 23 } 24 25 div.p80 { 26 height: 80%; 27 background: pink; 28 } 29 30 div.p100 { 31 height: 100%; 32 background: yellow; 33 } 34 </style> 35 </head> 36 <body> 37 <!--Button has explicit height for us to resolve against: --> 38 <button style="height: 100px"> 39 <div class="p80">abc</div> 40 </button> 41 42 <button style="height: 100px"> 43 <div class="p100">abc</div> 44 </button> 45 46 <!--Button is using intrinsic height: --> 47 <button> 48 <div class="p80">abc</div> 49 </button> 50 51 <button> 52 <div class="p100">abc</div> 53 </button> 54 55 </body> 56 </html>