layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003.xht

branch
TOR_BUG_9701
changeset 11
deefc01c0e14
equal deleted inserted replaced
-1:000000000000 0:8c37deb17951
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
5 <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
6 <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
7 <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
8 <meta content="image" name="flags"></meta>
9 <meta name="assert" content="All images should be sized at 75px x 75px." />
10 <!--
11 This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
12 test suite.
13 -->
14 <style type="text/css">
15 p {
16 display: inline-block;
17 background-color: white;
18 padding: 0px 0px;
19 margin: 0px 0px;
20 }
21
22 .content-box {
23 box-sizing: content-box;
24 }
25
26 #img1 {
27 min-width: 60px;
28 max-width: 125px;
29 min-height: 45px;
30 max-height: 120px;
31 }
32
33 #img2 {
34 max-width: 75px;
35 min-height: 60px;
36 }
37
38 #img3 {
39 max-width: 75px;
40 min-height: 75px;
41 }
42
43 #img4 {
44 min-width: 75px;
45 max-height: 100px;
46 }
47
48 #img5 {
49 min-width: 75px;
50 max-height: 75px;
51 }
52
53 #img6 {
54 min-width: 60px;
55 max-height: 75px;
56 }
57
58 #img7 {
59 min-width: 75px;
60 max-height: 75px;
61 }
62
63 #img8 {
64 max-width: 100px;
65 min-height: 75px;
66 }
67
68 #img9 {
69 max-width: 75px;
70 min-height: 75px;
71 }
72
73 #img10 {
74 min-width: 75px;
75 max-width: 150px;
76 max-height: 75px;
77 }
78
79 #img11 {
80 min-width: 25px;
81 max-width: 225px;
82 max-height: 75px;
83 }
84
85 #img12 {
86 max-width: 75px;
87 min-height: 75px;
88 max-height: 150px;
89 }
90
91 #img13 {
92 max-width: 75px;
93 min-height: 25px;
94 max-height: 225px;
95 }
96
97 #img14 {
98 min-width: 50px;
99 max-width: 100px;
100 min-height: 75px;
101 }
102
103 #img15 {
104 min-width: 55px;
105 max-width: 75px;
106 min-height: 75px;
107 }
108
109 #img16 {
110 min-width: 75px;
111 min-height: 50px;
112 max-height: 100px;
113 }
114
115 #img17 {
116 min-width: 75px;
117 min-height: 55px;
118 max-height: 75px;
119 }
120
121 #img18 {
122 min-width: 75px;
123 max-height: 75px;
124 }
125
126 #img19 {
127 max-width: 75px;
128 min-height: 75px;
129 }
130 </style>
131 </head>
132 <body>
133 <div>All rectangles should be the same size.</div>
134 <p><img id="img0" class="content-box" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
135 <p><img id="img1" class="content-box" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
136 <p><img id="img2" class="content-box" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
137 <p><img id="img3" class="content-box" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
138 <p><img id="img4" class="content-box" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
139 <p><img id="img5" class="content-box" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
140 <p><img id="img6" class="content-box" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
141 <p><img id="img7" class="content-box" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
142 <p><img id="img8" class="content-box" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
143 <p><img id="img9" class="content-box" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
144 <p><img id="img10" class="content-box" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
145 <p><img id="img11" class="content-box" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
146 <p><img id="img12" class="content-box" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
147 <p><img id="img13" class="content-box" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
148 <p><img id="img14" class="content-box" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
149 <p><img id="img15" class="content-box" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
150 <p><img id="img16" class="content-box" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
151 <p><img id="img17" class="content-box" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
152 <p><img id="img18" class="content-box" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
153 <p><img id="img19" class="content-box" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
154 </body>
155 </html>

mercurial