OLD | NEW |
(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 } |
OLD | NEW |