OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style type="text/css"> | |
5 .parent | |
6 { | |
7 width:300px; | |
8 border:1px solid green; | |
9 } | |
10 | |
11 .parent .child | |
12 { | |
13 background-color:#999999; | |
14 border:1px solid yellow; | |
15 } | |
16 </style> | |
17 <script src="../js/resources/js-test-pre.js"></script> | |
18 </head> | |
19 <body> | |
20 <div id="container" class="parent"> | |
21 <div id="maxGreatThanMinWidthAutoLayout" class="child" style="display:table;
min-width:100px; max-width:200px; width:100%;"> | |
22 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
| |
23 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
iam, | |
24 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. | |
25 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum do
lore eu | |
26 fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, su
nt in culpa | |
27 qui officia deserunt mollit anim id est laborum. | |
28 </div> | |
29 <div id="minGreatThanMaxWidthAutoLayout" class="child" style="display:table;
min-width:200px; max-width:100px; width:100%;"> | |
30 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
| |
31 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
iam, | |
32 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. | |
33 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum do
lore eu | |
34 fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, su
nt in culpa | |
35 qui officia deserunt mollit anim id est laborum. | |
36 </div> | |
37 <div id="onlyMaxWidthAutoLayout" class="child" style="display:table; max-wid
th:200px; width:100%;"> | |
38 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
| |
39 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
iam, | |
40 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. | |
41 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum do
lore eu | |
42 fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, su
nt in culpa | |
43 qui officia deserunt mollit anim id est laborum. | |
44 </div> | |
45 <div id="maxWidthZeroAutoLayout" class="child" style="display:table; max-wid
th:0; width:100%;"> | |
46 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
| |
47 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
iam, | |
48 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. | |
49 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum do
lore eu | |
50 fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, su
nt in culpa | |
51 qui officia deserunt mollit anim id est laborum. | |
52 </div> | |
53 <div id="maxGreatThanMinWidthFixedLayout" class="child" style="display:t
able; table-layout:fixed; min-width:100px; max-width:200px; width:100%;"> | |
54 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
| |
55 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
iam, | |
56 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. | |
57 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum do
lore eu | |
58 fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, su
nt in culpa | |
59 qui officia deserunt mollit anim id est laborum. | |
60 </div> | |
61 <div id="minGreatThanMaxWidthFixedLayout" class="child" style="display:table
; table-layout:fixed; min-width:200px; max-width:100px; width:100%;"> | |
62 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
| |
63 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
iam, | |
64 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. | |
65 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum do
lore eu | |
66 fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, su
nt in culpa | |
67 qui officia deserunt mollit anim id est laborum. | |
68 </div> | |
69 <div id="onlyMaxWidthFixedLayout" class="child" style="display:table; table-
layout:fixed; max-width:200px; width:100%;"> | |
70 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
| |
71 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
iam, | |
72 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. | |
73 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum do
lore eu | |
74 fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, su
nt in culpa | |
75 qui officia deserunt mollit anim id est laborum. | |
76 </div> | |
77 <div id="maxWidthZeroFixedLayout" class="child" style="display:table; table-
layout:fixed; max-width:0; width:100%;"> | |
78 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
| |
79 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
iam, | |
80 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. | |
81 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum do
lore eu | |
82 fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, su
nt in culpa | |
83 qui officia deserunt mollit anim id est laborum. | |
84 </div> | |
85 </div> | |
86 <script> | |
87 description('Test case for bug <a href="http://webkit.org/b/98455">http://webkit
.org/b/98455</a>. The testcase checks \ | |
88 if the max-width property overrides the computed width of a html container with
display:table.<br> \ | |
89 A html container with display:table should not exceed the max-width even if its
calculated \ | |
90 width is greater than the max-width value.<br>However when min-width property is
set and its value is greated than \ | |
91 the max-width value, the width of the container must be equal to the min-width v
alue.'); | |
92 debug('Note:The width of the css tables inclusive of its border width.<br>'); | |
93 maxGreatThanMinWidthAutoLayout = document.getElementById("maxGreatThanMinWidthAu
toLayout"); | |
94 shouldBe("maxGreatThanMinWidthAutoLayout.getBoundingClientRect().width","202"); | |
95 minGreatThanMaxWidthAutoLayout = document.getElementById("minGreatThanMaxWidthAu
toLayout"); | |
96 shouldBe("minGreatThanMaxWidthAutoLayout.getBoundingClientRect().width","202"); | |
97 onlyMaxWidthAutoLayout = document.getElementById("onlyMaxWidthAutoLayout"); | |
98 shouldBe("onlyMaxWidthAutoLayout.getBoundingClientRect().width","202"); | |
99 maxWidthZeroAutoLayout = document.getElementById("maxWidthZeroAutoLayout"); | |
100 shouldBe("maxWidthZeroAutoLayout.getBoundingClientRect().width","0"); | |
101 maxGreatThanMinWidthFixedLayout = document.getElementById("maxGreatThanMinWidthF
ixedLayout"); | |
102 shouldBe("maxGreatThanMinWidthFixedLayout.getBoundingClientRect().width","202"); | |
103 minGreatThanMaxWidthFixedLayout = document.getElementById("minGreatThanMaxWidthF
ixedLayout"); | |
104 shouldBe("minGreatThanMaxWidthFixedLayout.getBoundingClientRect().width","202"); | |
105 onlyMaxWidthFixedLayout = document.getElementById("onlyMaxWidthFixedLayout"); | |
106 shouldBe("onlyMaxWidthFixedLayout.getBoundingClientRect().width","202"); | |
107 maxWidthZeroFixedLayout = document.getElementById("maxWidthZeroFixedLayout"); | |
108 shouldBe("maxWidthZeroFixedLayout.getBoundingClientRect().width","0"); | |
109 | |
110 document.body.removeChild(document.getElementById('container')); | |
111 </script> | |
112 <script src="../js/resources/js-test-post.js"></script> | |
113 <body> | |
114 </html> | |
OLD | NEW |