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