OLD | NEW |
| (Empty) |
1 <root style="width: 300px"> | |
2 <parent style='background-color: lightblue;'> | |
3 <child style='background-color: pink;'> | |
4 <grandchild style='background-color: red; width: 25px; height: 25px;'></gr
andchild> | |
5 </child> | |
6 <child2 style='background-color: salmon; height: 25px;' /> | |
7 </parent> | |
8 </root> | |
9 | |
10 <intrinsic-container> | |
11 <intrinsic> | |
12 <intrinsic-child style="width: 10px; height: 10px; background-color: lightbl
ue;" /> | |
13 </intrinsic> | |
14 </intrinsic-container> | |
15 | |
16 <script> | |
17 import "../resources/third_party/unittest/unittest.dart"; | |
18 import "../resources/unit.dart"; | |
19 | |
20 import 'dart:async'; | |
21 import 'dart:sky'; | |
22 | |
23 void main() { | |
24 initUnit(); | |
25 | |
26 test("should have the right sizes after layout", () { | |
27 Completer completer = new Completer(); | |
28 | |
29 var first = true; | |
30 | |
31 var parent = document.querySelector('parent'); | |
32 var firstChild = parent.firstElementChild; | |
33 var secondChild = parent.lastElementChild; | |
34 var grandChild = document.querySelector('grandchild'); | |
35 | |
36 parent.setLayoutManager(() { | |
37 if (first) { | |
38 parent.width = 200.0; | |
39 } else { | |
40 parent.width = 150.0; | |
41 } | |
42 | |
43 firstChild.width = 100.0; | |
44 firstChild.layout(); | |
45 firstChild.x = 100.0; | |
46 firstChild.y = 50.0; | |
47 firstChild.height = 50.0; | |
48 | |
49 // The second element correctly gets it's width from it's container. | |
50 // TODO(ojan): Change the layout method to take in availableWidth | |
51 // so code doesn't need to mess with setNeedsLayout dirty bits | |
52 // in the middle of layout and so the parent and child don't need | |
53 // to coordinate as much about expectations. | |
54 secondChild.setNeedsLayout(); | |
55 secondChild.layout(); | |
56 | |
57 parent.height = 100.0; | |
58 }, () {}); | |
59 | |
60 void assertNonChangingValues() { | |
61 expect(parent.offsetHeight, equals(100)); | |
62 expect(parent.offsetTop, equals(0)); | |
63 expect(parent.offsetLeft, equals(0)); | |
64 | |
65 expect(firstChild.offsetWidth, equals(100)); | |
66 expect(firstChild.offsetHeight, equals(50)); | |
67 expect(firstChild.offsetTop, equals(50)); | |
68 expect(firstChild.offsetLeft, equals(100)); | |
69 | |
70 expect(secondChild.offsetHeight, equals(25)); | |
71 expect(secondChild.offsetTop, equals(0)); | |
72 expect(secondChild.offsetLeft, equals(0)); | |
73 | |
74 expect(grandChild.offsetWidth, equals(25)); | |
75 expect(grandChild.offsetHeight, equals(25)); | |
76 expect(secondChild.offsetTop, equals(0)); | |
77 expect(secondChild.offsetLeft, equals(0)); | |
78 }; | |
79 | |
80 window.requestAnimationFrame((_) { | |
81 expect(parent.offsetWidth, equals(200)); | |
82 expect(secondChild.offsetWidth, equals(200)); | |
83 assertNonChangingValues(); | |
84 | |
85 first = false; | |
86 parent.setNeedsLayout(); | |
87 | |
88 window.requestAnimationFrame((_) { | |
89 expect(parent.offsetWidth, equals(150)); | |
90 expect(secondChild.offsetWidth, equals(150)); | |
91 assertNonChangingValues(); | |
92 | |
93 parent.setLayoutManager(() { | |
94 parent.width = 250.0; | |
95 }, () {}); | |
96 | |
97 window.requestAnimationFrame((_) { | |
98 expect(parent.offsetWidth, equals(250)); | |
99 assertNonChangingValues(); | |
100 | |
101 parent.setLayoutManager(null, null); | |
102 | |
103 window.requestAnimationFrame((_) { | |
104 expect(parent.offsetWidth, equals(300)); | |
105 expect(parent.offsetHeight, equals(50)); | |
106 expect(parent.offsetTop, equals(0)); | |
107 expect(parent.offsetLeft, equals(0)); | |
108 | |
109 expect(firstChild.offsetWidth, equals(300)); | |
110 expect(firstChild.offsetHeight, equals(25)); | |
111 expect(firstChild.offsetTop, equals(0)); | |
112 expect(firstChild.offsetLeft, equals(0)); | |
113 | |
114 expect(secondChild.offsetWidth, equals(300)); | |
115 expect(secondChild.offsetHeight, equals(25)); | |
116 expect(secondChild.offsetTop, equals(25)); | |
117 expect(secondChild.offsetLeft, equals(0)); | |
118 | |
119 expect(grandChild.offsetWidth, equals(25)); | |
120 expect(grandChild.offsetHeight, equals(25)); | |
121 expect(grandChild.offsetTop, equals(0)); | |
122 expect(grandChild.offsetLeft, equals(0)); | |
123 | |
124 completer.complete(); | |
125 }); | |
126 }); | |
127 }); | |
128 }); | |
129 | |
130 return completer.future; | |
131 }); | |
132 | |
133 test("intrinsic sizes should apply", () { | |
134 Completer completer = new Completer(); | |
135 | |
136 var intrinsic = document.querySelector('intrinsic'); | |
137 var intrinsicChild = document.querySelector('intrinsic-child'); | |
138 | |
139 intrinsic.setLayoutManager(() { | |
140 intrinsicChild.layout(); | |
141 }, () { | |
142 intrinsic.minContentWidth = intrinsicChild.minContentWidth + 5; | |
143 intrinsic.maxContentWidth = intrinsicChild.maxContentWidth + 7; | |
144 }); | |
145 | |
146 window.requestAnimationFrame((_) { | |
147 var container = document.querySelector('intrinsic-container'); | |
148 container.style['width'] = '-webkit-min-content'; | |
149 expect(container.offsetWidth, equals(15)); | |
150 container.style['width'] = '-webkit-max-content'; | |
151 expect(container.offsetWidth, equals(17)); | |
152 completer.complete(); | |
153 }); | |
154 | |
155 return completer.future; | |
156 }); | |
157 } | |
158 </script> | |
OLD | NEW |