| 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 |