4a56cc212c92b4e365e27d3a2fd10656305d5249
[WebKit-https.git] / LayoutTests / fast / table / css-table-max-width.html
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 veniam, 
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 dolore eu 
26         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt 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 veniam, 
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 dolore eu 
34         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
35         qui officia deserunt mollit anim id est laborum.
36     </div>
37     <div id="onlyMaxWidthAutoLayout" class="child" style="display:table; max-width: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 veniam, 
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 dolore eu 
42         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
43         qui officia deserunt mollit anim id est laborum.
44     </div>
45     <div id="maxWidthZeroAutoLayout" class="child" style="display:table; max-width: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 veniam, 
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 dolore eu 
50         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa 
51         qui officia deserunt mollit anim id est laborum.
52     </div>
53         <div id="maxGreatThanMinWidthFixedLayout" class="child" style="display:table; 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 veniam, 
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 dolore eu 
58         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt 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 veniam, 
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 dolore eu 
66         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt 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 veniam, 
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 dolore eu 
74         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt 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 veniam, 
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 dolore eu 
82         fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt 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 value.');
92 debug('Note:The width of the css tables inclusive of its border width.<br>');
93 maxGreatThanMinWidthAutoLayout = document.getElementById("maxGreatThanMinWidthAutoLayout");
94 shouldBe("maxGreatThanMinWidthAutoLayout.getBoundingClientRect().width","202");
95 minGreatThanMaxWidthAutoLayout = document.getElementById("minGreatThanMaxWidthAutoLayout");
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("maxGreatThanMinWidthFixedLayout");
102 shouldBe("maxGreatThanMinWidthFixedLayout.getBoundingClientRect().width","202");
103 minGreatThanMaxWidthFixedLayout = document.getElementById("minGreatThanMaxWidthFixedLayout");
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>