layout/reftests/forms/button/percent-width-child-2.html@4ab42b5ab56c
layout/reftests/forms/button/percent-width-child-2.html
Wed, 31 Dec 2014 07:53:36 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 07:53:36 +0100
- branch
- TOR_BUG_3246
- changeset 5
- 4ab42b5ab56c
- permissions
- -rw-r--r--
Correct small whitespace inconsistency, lost while renaming variables.
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 some focus-border/padding, which
9 occupies part of the button's content-box and which we'll have to
10 subtract out from the button's size before using it to resolve
11 percentages sizes.) -->
12 <html>
13 <head>
14 <style>
15 button {
16 border: 0;
17 padding: 0;
19 font: 10px sans-serif;
20 vertical-align: top;
22 color: black;
23 background: gray;
24 -moz-appearance: none;
25 }
26 button::-moz-focus-inner {
27 padding: 0 6px 0 2px;
28 border: 1px dotted transparent;
29 }
31 div.p80 {
32 width: 80%;
33 background: pink;
34 }
36 div.p100 {
37 width: 100%;
38 background: yellow;
39 }
40 </style>
41 </head>
42 <body>
43 <!--Button has explicit width for us to resolve against: -->
44 <button style="width: 110px">
45 <div class="p80">abc</div>
46 </button>
48 <button style="width: 110px">
49 <div class="p100">abc</div>
50 </button>
52 <!--Button is using intrinsic width: -->
53 <button>
54 <div class="p80">abc</div>
55 </button>
57 <button>
58 <div class="p100">abc</div>
59 </button>
61 </body>
62 </html>
