percent-width-child.html (1020B)
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 widths 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 border: 0; 14 padding: 0; 15 16 font: 10px sans-serif; 17 vertical-align: top; 18 19 color: black; 20 background: gray; 21 -moz-appearance: none; 22 } 23 24 div.p80 { 25 width: 80%; 26 background: pink; 27 } 28 29 div.p100 { 30 width: 100%; 31 background: yellow; 32 } 33 </style> 34 </head> 35 <body> 36 <!--Button has explicit width for us to resolve against: --> 37 <button style="width: 100px"> 38 <div class="p80">abc</div> 39 </button> 40 41 <button style="width: 100px"> 42 <div class="p100">abc</div> 43 </button> 44 45 <!--Button is using intrinsic width: --> 46 <button> 47 <div class="p80">abc</div> 48 </button> 49 50 <button> 51 <div class="p100">abc</div> 52 </button> 53 54 </body> 55 </html>