layout/reftests/box-properties/box-sizing-4.html@141e0f1194b1
layout/reftests/box-properties/box-sizing-4.html
Wed, 31 Dec 2014 07:16:47 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 07:16:47 +0100
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
- permissions
- -rw-r--r--
Revert simplistic fix pending revisit of Mozilla integration attempt.
1 <!DOCTYPE html>
2 <html lang="en-US">
3 <head>
4 <title>test of box-sizing</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <meta http-equiv="Content-Style-Type" content="text/css">
7 <style type="text/css">
9 body { font-size: 10px; line-height: 1; }
10 table { border-spacing: 0; margin: 0 100px; }
11 td { border: 1px solid; padding: 1px solid; }
13 td > div { width: 100px; height: 350px;
14 direction: rtl; position: relative; }
16 td#bscontent > div > div { box-sizing: content-box; }
17 td#bspadding > div > div { box-sizing: padding-box; }
18 td#bsborder > div > div { box-sizing: border-box; }
20 td > div > div {
21 margin-left: 1px;
22 border-left: 2px solid;
23 padding-left: 4px;
24 padding-right: 8px;
25 border-right: 16px solid;
26 margin-right: 32px;
28 background: yellow;
29 margin-bottom: 10px;
30 position: absolute;
31 height: 40px;
32 right: 0;
33 }
35 td > div > div { top: 0px; }
36 td > div > div + div { top: 50px; }
37 td > div > div + div + div { top: 100px; }
38 td > div > div + div + div + div { top: 150px; }
39 td > div > div + div + div + div + div { top: 200px; }
40 td > div > div + div + div + div + div + div { top: 250px; }
41 td > div > div + div + div + div + div + div + div { top: 300px; }
43 </style>
44 </head>
45 <body>
47 <table><tr>
49 <td id="bscontent"><div>
51 <!-- box-sizing: content-box -->
52 <div style="width: auto">A B</div>
53 <div style="width: -moz-max-content">A B</div>
54 <div style="width: -moz-min-content">A B</div>
55 <div style="width: -moz-fit-content">A B</div>
56 <div style="width: -moz-available">A B</div>
57 <div style="width: 50px">A B</div>
58 <div style="width: 60%">A B</div>
60 </div></td>
62 <td id="bspadding"><div>
63 <!-- box-sizing: padding-box -->
64 <div style="width: auto">A B</div>
65 <div style="width: -moz-max-content">A B</div>
66 <div style="width: -moz-min-content">A B</div>
67 <div style="width: -moz-fit-content">A B</div>
68 <div style="width: -moz-available">A B</div>
69 <div style="width: 50px">A B</div>
70 <div style="width: 60%">A B</div>
72 </div></td>
74 <td id="bsborder"><div>
75 <!-- box-sizing: border-box -->
76 <div style="width: auto">A B</div>
77 <div style="width: -moz-max-content">A B</div>
78 <div style="width: -moz-min-content">A B</div>
79 <div style="width: -moz-fit-content">A B</div>
80 <div style="width: -moz-available">A B</div>
81 <div style="width: 50px">A B</div>
82 <div style="width: 60%">A B</div>
84 </div></td>
86 </tr></table>
88 </body>
89 </html>
