Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(170)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/block/min-max-height-percent-height-child.html

Issue 888743002: Force unitless data-expected attributes (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fix percentage-height-when-height-specified-by-top-bottom.html Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « LayoutTests/css3/flexbox/flexitem.html ('k') | LayoutTests/fast/box-sizing/css-table-collapse.html » ('j') | LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style id="stylesheet"> 4 <style id="stylesheet">
5 .container { 5 .container {
6 width: 50px; 6 width: 50px;
7 height: 50px; 7 height: 50px;
8 } 8 }
9 .bottom-margin { 9 .bottom-margin {
10 margin-bottom: 50px; 10 margin-bottom: 50px;
(...skipping 17 matching lines...) Expand all
28 checkLayout(".parent"); 28 checkLayout(".parent");
29 } 29 }
30 </script> 30 </script>
31 </head> 31 </head>
32 <body> 32 <body>
33 <h1><a href="https://bugs.webkit.org/show_bug.cgi?id=26559">Bug 26559</a >: When a block's height is determined by min-height/max-height, children with p ercentage heights are sized incorrectly</h1> 33 <h1><a href="https://bugs.webkit.org/show_bug.cgi?id=26559">Bug 26559</a >: When a block's height is determined by min-height/max-height, children with p ercentage heights are sized incorrectly</h1>
34 <h1>Tests to make sure a child with percentage height is computed proper ly when the parent has a max or min height set.</h1> 34 <h1>Tests to make sure a child with percentage height is computed proper ly when the parent has a max or min height set.</h1>
35 <h2>Each of the following tests should display a green rectangle with a 1 pixel red border on all sides.</h2> 35 <h2>Each of the following tests should display a green rectangle with a 1 pixel red border on all sides.</h2>
36 <h3>Parent with fixed height and min set</h2> 36 <h3>Parent with fixed height and min set</h2>
37 <div id="simple-min" class="parent" style="width: 50px; height: 50px; mi n-height: 75px"> 37 <div id="simple-min" class="parent" style="width: 50px; height: 50px; mi n-height: 75px">
38 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50px" data-expected-height="75px"></div> 38 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50" data-expected-height="75"></div>
39 </div> 39 </div>
40 <h3>Parent with fixed height and max set</h2> 40 <h3>Parent with fixed height and max set</h2>
41 <div id="simple-max" class="parent" style="max-height: 25px; width: 50px ; height: 50px"> 41 <div id="simple-max" class="parent" style="max-height: 25px; width: 50px ; height: 50px">
42 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50px" data-expected-height="25px"></div> 42 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50" data-expected-height="25"></div>
43 </div> 43 </div>
44 <h3>Parent with fixed height and min greater than max</h2> 44 <h3>Parent with fixed height and min greater than max</h2>
45 <div id="min-greater-max" class="parent" style="width: 50px; height: 50p x; min-height: 75px; max-height: 25px"> 45 <div id="min-greater-max" class="parent" style="width: 50px; height: 50p x; min-height: 75px; max-height: 25px">
46 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50px" data-expected-height="75px"></div> 46 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50" data-expected-height="75"></div>
47 </div> 47 </div>
48 <h3>Vertical parent with fixed width and max set</h2> 48 <h3>Vertical parent with fixed width and max set</h2>
49 <div id="vertical-max" class="parent" style="width: 50px; max-width: 25p x; height: 50px"> 49 <div id="vertical-max" class="parent" style="width: 50px; max-width: 25p x; height: 50px">
50 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="25px" data-expected-height="50px"></div> 50 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="25" data-expected-height="50"></div>
51 </div> 51 </div>
52 <h3>Vertical parent with fixed width and min set</h2> 52 <h3>Vertical parent with fixed width and min set</h2>
53 <div id="vertical-min" class="parent" style="width: 50px; min-width: 75p x; height: 50px"> 53 <div id="vertical-min" class="parent" style="width: 50px; min-width: 75p x; height: 50px">
54 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="75px" data-expected-height="50px"></div> 54 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="75" data-expected-height="50"></div>
55 </div> 55 </div>
56 <h3>Parent with percent height and a max set</h3> 56 <h3>Parent with percent height and a max set</h3>
57 <div class="container bottom-margin"> 57 <div class="container bottom-margin">
58 <div id="parent-percent-max" class="parent" style="max-height: 25px; width: 50px; height: 100%"> 58 <div id="parent-percent-max" class="parent" style="max-height: 25px; width: 50px; height: 100%">
59 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="50px" data-expected-height="25px"></div> 59 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="50" data-expected-height="25"></div>
60 </div> 60 </div>
61 </div> 61 </div>
62 <h3>Parent with percent height and a min set</h3> 62 <h3>Parent with percent height and a min set</h3>
63 <div class="container bottom-margin"> 63 <div class="container bottom-margin">
64 <div id="parent-percent-min" class="parent" style="width: 50px; heig ht: 100%; min-height: 75px"> 64 <div id="parent-percent-min" class="parent" style="width: 50px; heig ht: 100%; min-height: 75px">
65 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="50px" data-expected-height="75px"></div> 65 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="50" data-expected-height="75"></div>
66 </div> 66 </div>
67 </div> 67 </div>
68 <h3>Parent with fixed height and percentage max</h3> 68 <h3>Parent with fixed height and percentage max</h3>
69 <div class="container"> 69 <div class="container">
70 <div id="percent-max" class="parent" style="max-height: 50%; width: 50px; height: 50px"> 70 <div id="percent-max" class="parent" style="max-height: 50%; width: 50px; height: 50px">
71 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="50px" data-expected-height="25px"></div> 71 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="50" data-expected-height="25"></div>
72 </div> 72 </div>
73 </div> 73 </div>
74 <h3>Parent with fixed height and percentage min</h3> 74 <h3>Parent with fixed height and percentage min</h3>
75 <div class="container bottom-margin"> 75 <div class="container bottom-margin">
76 <div id="percent-min" class="parent" style="width: 50px; height: 50p x; min-height: 150%"> 76 <div id="percent-min" class="parent" style="width: 50px; height: 50p x; min-height: 150%">
77 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="50px" data-expected-height="75px"></div> 77 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="50" data-expected-height="75"></div>
78 </div> 78 </div>
79 </div> 79 </div>
80 <h3>Parent with auto height and a max set. This test will not have the b order all around, it will only be on the top portion.</h3> 80 <h3>Parent with auto height and a max set. This test will not have the b order all around, it will only be on the top portion.</h3>
81 <div id="auto-max" class="parent ahem bottom-margin" style="max-height: 25px; width: 50px"> 81 <div id="auto-max" class="parent ahem bottom-margin" style="max-height: 25px; width: 50px">
82 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50px" data-expected-height="0px"></div> 82 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50" data-expected-height="0"></div>
83 XXXXX 83 XXXXX
84 XXXXX 84 XXXXX
85 XXXXX 85 XXXXX
86 XXXXX 86 XXXXX
87 XXXXX 87 XXXXX
88 XXXXX 88 XXXXX
89 XXXXX 89 XXXXX
90 XXXXX 90 XXXXX
91 </div> 91 </div>
92 <h3>Parent with auto height and a min set</h3> 92 <h3>Parent with auto height and a min set</h3>
93 <div id="auto-min" class="parent ahem" style="width: 50px; min-height: 7 5px"> 93 <div id="auto-min" class="parent ahem" style="width: 50px; min-height: 7 5px">
94 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50px" data-expected-height="0px"></div> 94 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50" data-expected-height="0"></div>
95 XXXXX 95 XXXXX
96 XXXXX 96 XXXXX
97 XXXXX 97 XXXXX
98 XXXXX 98 XXXXX
99 XXXXX 99 XXXXX
100 XXXXX 100 XXXXX
101 XXXXX 101 XXXXX
102 XXXXX 102 XXXXX
103 </div> 103 </div>
104 <h2>The following two tests will have a 6 pixel red border.</h2> 104 <h2>The following two tests will have a 6 pixel red border.</h2>
105 <h3>Parent with fixed height and padding and max set</h2> 105 <h3>Parent with fixed height and padding and max set</h2>
106 <div id="parent-padding-max" class="parent" style="max-height: 25px; wid th: 50px; padding: 5px; height: 50px"> 106 <div id="parent-padding-max" class="parent" style="max-height: 25px; wid th: 50px; padding: 5px; height: 50px">
107 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50px" data-expected-height="25px"></div> 107 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50" data-expected-height="25"></div>
108 </div> 108 </div>
109 <h3>Parent with fixed height and padding and min set</h2> 109 <h3>Parent with fixed height and padding and min set</h2>
110 <div id="parent-padding-min" class="parent" style="width: 50px; padding: 5px; height: 50px; min-height: 75px"> 110 <div id="parent-padding-min" class="parent" style="width: 50px; padding: 5px; height: 50px; min-height: 75px">
111 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50px" data-expected-height="75px"></div> 111 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="50" data-expected-height="75"></div>
112 </div> 112 </div>
113 <h3>Fixed height parent with scroll bar</h3> 113 <h3>Fixed height parent with scroll bar</h3>
114 <div id="overflow" class="parent ahem" style="overflow: scroll; min-heig ht: 75px; width: 50px; height: 50px"> 114 <div id="overflow" class="parent ahem" style="overflow: scroll; min-heig ht: 75px; width: 50px; height: 50px">
115 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="35px" data-expected-height="60px"></div> 115 <div class="child" style="width: 100%; height: 100%" data-expected-w idth="35" data-expected-height="60"></div>
116 XXXXXXXXXX 116 XXXXXXXXXX
117 XXXXXXXXXX 117 XXXXXXXXXX
118 XXXXXXXXXX 118 XXXXXXXXXX
119 XXXXXXXXXX 119 XXXXXXXXXX
120 XXXXXXXXXX 120 XXXXXXXXXX
121 XXXXXXXXXX 121 XXXXXXXXXX
122 </div> 122 </div>
123 <h3>Parent with percent height and scroll bar</h3> 123 <h3>Parent with percent height and scroll bar</h3>
124 <div class="container bottom-margin"> 124 <div class="container bottom-margin">
125 <div id="overflow-percent" class="parent ahem" style="overflow: scro ll; min-height: 75px; width: 50px; height: 100%"> 125 <div id="overflow-percent" class="parent ahem" style="overflow: scro ll; min-height: 75px; width: 50px; height: 100%">
126 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="35px" data-expected-height="60px"></div> 126 <div class="child" style="width: 100%; height: 100%" data-expect ed-width="35" data-expected-height="60"></div>
127 XXXXXXXXXX 127 XXXXXXXXXX
128 XXXXXXXXXX 128 XXXXXXXXXX
129 XXXXXXXXXX 129 XXXXXXXXXX
130 XXXXXXXXXX 130 XXXXXXXXXX
131 XXXXXXXXXX 131 XXXXXXXXXX
132 XXXXXXXXXX 132 XXXXXXXXXX
133 </div> 133 </div>
134 </div> 134 </div>
135 </body> 135 </body>
136 </html> 136 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/flexitem.html ('k') | LayoutTests/fast/box-sizing/css-table-collapse.html » ('j') | LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698