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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tests/html/element_dimensions_test.dart

Issue 19520019: Reverting 25196, 25195, 25192. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 7 years, 5 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 | Annotate | Revision Log
« no previous file with comments | « sdk/lib/html/dartium/html_dartium.dart ('k') | tests/html/html.status » ('j') | tools/dom/src/Rectangle.dart » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
2 // for details. All rights reserved. Use of this source code is governed by a
3 // BSD-style license that can be found in the LICENSE file
4
5 library element_dimensions_test;
6 import 'package:unittest/unittest.dart';
7 import 'package:unittest/html_config.dart';
8 import 'dart:html';
9
10 main() {
11 useHtmlConfiguration();
12
13 var isElement = predicate((x) => x is Element, 'is an Element');
14 var isCanvasElement =
15 predicate((x) => x is CanvasElement, 'is a CanvasElement');
16 var isDivElement = predicate((x) => x is DivElement, 'is a isDivElement');
17
18 var div = new DivElement();
19 div.id = 'test';
20 document.body.nodes.add(div);
21
22 void initDiv() {
23 var style = div.style;
24 style..padding = '4px'
25 ..border = '0px solid #fff'
26 ..margin = '6px'
27 ..height = '10px'
28 ..width = '11px'
29 ..boxSizing = 'content-box'
30 ..overflow = 'visible';
31 }
32
33 div.nodes.addAll([
34 new DivElement(),
35 new CanvasElement(),
36 new DivElement(),
37 new Text('Hello'),
38 new DivElement(),
39 new Text('World'),
40 new CanvasElement()]);
41
42 group('dimensions', () {
43 setUp(initDiv);
44
45 test('contentEdge.height', () {
46 var all1 = queryAll('#test');
47
48 expect(all1.contentEdge.height, 10);
49 expect(all1[0].getComputedStyle().getPropertyValue('height'), '10px');
50
51 all1.contentEdge.height = new Dimension.px(600);
52 all1.contentEdge.height = 600;
53 expect(all1.contentEdge.height, 600);
54 expect(all1[0].getComputedStyle().getPropertyValue('height'), '600px');
55 all1[0].style.visibility = 'hidden';
56 expect(all1.contentEdge.height, 600);
57 all1[0].style.visibility = 'visible';
58
59 // If user passes in a negative number, set height to 0.
60 all1.contentEdge.height = new Dimension.px(-1);
61 expect(all1.contentEdge.height, 0);
62
63 // Adding padding or border shouldn't affect the height for
64 // non-box-sizing.
65 div.style.padding = '20pc';
66 expect(all1.contentEdge.height, 0);
67 div.style.border = '2px solid #fff';
68 expect(all1.contentEdge.height, 0);
69 });
70
71 test('contentEdge.height with border-box', () {
72 var all1 = queryAll('#test');
73 div.style.boxSizing = 'border-box';
74 expect(all1.contentEdge.height, 2);
75 div.style.padding = '20pc';
76 expect(all1.contentEdge.height, 0);
77 div.style.border = '2px solid #fff';
78 expect(all1.contentEdge.height, 0);
79 });
80
81 test('contentEdge.width', () {
82 var all1 = queryAll('#test');
83 expect(all1.contentEdge.width, 11);
84 expect(all1[0].getComputedStyle().getPropertyValue('width'), '11px');
85
86 all1.contentEdge.width = new Dimension.px(600);
87 expect(all1.contentEdge.width, 600);
88 expect(all1[0].getComputedStyle().getPropertyValue('width'), '600px');
89 all1[0].style.visibility = 'hidden';
90 expect(all1.contentEdge.width, 600);
91 all1[0].style.visibility = 'visible';
92
93 // If user passes in a negative number, set width to 0.
94 all1.contentEdge.width = new Dimension.px(-1);
95 expect(all1.contentEdge.width, 0);
96
97 // Adding padding or border shouldn't affect the width.
98 div.style.padding = '20pc';
99 expect(all1.contentEdge.width, 0);
100 div.style.border = '2px solid #fff';
101 expect(all1.contentEdge.width, 0);
102 });
103
104 test('contentEdge.width with border-box', () {
105 var all1 = queryAll('#test');
106 div.style.boxSizing = 'border-box';
107 expect(all1.contentEdge.width, 3);
108 div.style.padding = '20pc';
109 expect(all1.contentEdge.width, 0);
110 div.style.border = '2px solid #fff';
111 expect(all1.contentEdge.width, 0);
112
113 });
114
115 test('paddingEdge.height', () {
116 var all1 = queryAll('#test');
117 expect(all1.paddingEdge.height, 18);
118 all1[0].style.visibility = 'hidden';
119 expect(all1.paddingEdge.height, 18);
120 all1[0].style.visibility = 'visible';
121
122 // Adding border shouldn't affect the paddingEdge.height.
123 div.style.border = '2px solid #fff';
124 expect(all1.paddingEdge.height, 18);
125 // Adding padding should affect the paddingEdge.height.
126 div.style.padding = '20pc';
127 expect(all1.paddingEdge.height, 650);
128 });
129
130 test('paddingEdge.height with border-box', () {
131 var all1 = queryAll('#test');
132 div.style.boxSizing = 'border-box';
133 expect(all1.paddingEdge.height, 10);
134 div.style.padding = '20pc';
135 expect(all1.paddingEdge.height, 640);
136 div.style.border = '2px solid #fff';
137 expect(all1.paddingEdge.height, 640);
138 });
139
140 test('paddingEdge.width', () {
141 var all1 = queryAll('#test');
142 expect(all1.paddingEdge.width, 19);
143 all1[0].style.visibility = 'hidden';
144 expect(all1.paddingEdge.width, 19);
145 all1[0].style.visibility = 'visible';
146
147 // Adding border shouldn't affect the width.
148 div.style.border = '2px solid #fff';
149 expect(all1.paddingEdge.width, 19);
150
151 // Adding padding should affect the paddingEdge.width.
152 div.style.padding = '20pc';
153 expect(all1.paddingEdge.width, 651);
154 });
155
156 test('paddingEdge.width with border-box', () {
157 var all1 = queryAll('#test');
158 div.style.boxSizing = 'border-box';
159 expect(all1.paddingEdge.width, 11);
160 div.style.padding = '20pc';
161 expect(all1.paddingEdge.width, 640);
162 div.style.border = '2px solid #fff';
163 expect(all1.paddingEdge.width, 640);
164 });
165
166 test('borderEdge.height and marginEdge.height', () {
167 var all1 = queryAll('#test');
168 expect(div.borderEdge.height, 18);
169 expect(div.marginEdge.height, 30);
170 expect(all1.borderEdge.height, 18);
171 expect(all1.marginEdge.height, 30);
172 all1[0].style.visibility = 'hidden';
173 expect(all1.borderEdge.height, 18);
174 all1[0].style.visibility = 'visible';
175
176 // Adding border should affect the borderEdge.height.
177 div.style.border = '2px solid #fff';
178 expect(all1.borderEdge.height, 22);
179 // Adding padding should affect the borderEdge.height.
180 div.style.padding = '20pc';
181 expect(all1.borderEdge.height, 654);
182 expect(all1.marginEdge.height, 666);
183 });
184
185
186 test('borderEdge.height and marginEdge.height with border-box', () {
187 var all1 = queryAll('#test');
188 div.style.boxSizing = 'border-box';
189 expect(all1.borderEdge.height, 10);
190 expect(all1.marginEdge.height, 22);
191 div.style.padding = '20pc';
192 expect(all1.borderEdge.height, 640);
193 expect(all1.marginEdge.height, 652);
194 div.style.border = '2px solid #fff';
195 expect(all1.borderEdge.height, 644);
196 expect(all1.marginEdge.height, 656);
197 });
198
199 test('borderEdge.width and marginEdge.width', () {
200 var all1 = queryAll('#test');
201 expect(all1.borderEdge.width, 19);
202 expect(all1.marginEdge.width, 31);
203
204 // Adding border should affect the width.
205 div.style.border = '2px solid #fff';
206 expect(all1.borderEdge.width, 23);
207
208 // Adding padding should affect the borderEdge.width.
209 div.style.padding = '20pc';
210 expect(all1.borderEdge.width, 655);
211 expect(all1.marginEdge.width, 667);
212 });
213
214 test('borderEdge.width and marginEdge.width with border-box', () {
215 var all1 = queryAll('#test');
216 div.style.boxSizing = 'border-box';
217 expect(all1.borderEdge.width, 11);
218 expect(all1.marginEdge.width, 23);
219 div.style.padding = '20pc';
220 expect(all1.borderEdge.width, 640);
221 expect(all1.marginEdge.width, 652);
222 div.style.border = '2px solid #fff';
223 expect(all1.borderEdge.width, 644);
224 expect(all1.marginEdge.width, 656);
225 });
226
227 test('left and top', () {
228 div.style.border = '1px solid #fff';
229 div.style.margin = '6px 7px';
230 div.style.padding = '4px 5px';
231 var all1 = queryAll('#test');
232
233 expect(all1.borderEdge.left, all1[0].getBoundingClientRect().left);
234 expect(all1.borderEdge.top, all1[0].getBoundingClientRect().top);
235
236 expect(all1.contentEdge.left,
237 all1[0].getBoundingClientRect().left + 1 + 5);
238 expect(all1.contentEdge.top, all1[0].getBoundingClientRect().top + 1 + 4);
239
240 expect(all1.marginEdge.left, all1[0].getBoundingClientRect().left - 7);
241 expect(all1.marginEdge.top, all1[0].getBoundingClientRect().top - 6);
242
243 expect(all1.paddingEdge.left, all1[0].getBoundingClientRect().left + 1);
244 expect(all1.paddingEdge.top, all1[0].getBoundingClientRect().top + 1);
245 });
246
247 test('setHeight ElementList', () {
248 div.style.border = '1px solid #fff';
249 div.style.margin = '6px 7px';
250 div.style.padding = '4px 5px';
251 var all1 = queryAll('div');
252 all1.contentEdge.height = new Dimension.px(200);
253 all1.contentEdge.height = 200;
254 for (Element elem in all1) {
255 expect(elem.contentEdge.height, 200);
256 }
257 all1.contentEdge.height = new Dimension.px(10);
258 for (Element elem in all1) {
259 expect(elem.contentEdge.height, 10);
260 }
261 });
262 });
263 }
OLDNEW
« no previous file with comments | « sdk/lib/html/dartium/html_dartium.dart ('k') | tests/html/html.status » ('j') | tools/dom/src/Rectangle.dart » ('J')

Powered by Google App Engine
This is Rietveld 408576698