| OLD | NEW |
| 1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file |
| 2 // for details. All rights reserved. Use of this source code is governed by a | 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. | 3 // BSD-style license that can be found in the LICENSE file. |
| 4 | 4 |
| 5 library ShadowDOMTest; | 5 library ShadowDOMTest; |
| 6 | 6 |
| 7 import 'dart:html'; | 7 import 'dart:html'; |
| 8 | 8 |
| 9 // Test that children of a shadow host get distributed properly to the | 9 // Test that children of a shadow host get distributed properly to the |
| 10 // insertion points of a shadow subtree. Output should be three boxes, | 10 // insertion points of a shadow subtree. Output should be three boxes, |
| 11 // ordered blue, red, green down the page. | 11 // ordered blue, red, green down the page. |
| 12 main() { | 12 main() { |
| 13 var div = new DivElement(); | 13 var div = new DivElement(); |
| 14 document.body.children.add(div); | 14 document.body.children.add(div); |
| 15 | 15 |
| 16 // build some DOM elements | 16 // build some DOM elements |
| 17 var bluebox = _colorBox('blue', 40, 20); | 17 var bluebox = _colorBox('blue', 40, 20); |
| 18 bluebox.classes.add('foo'); | 18 bluebox.classes.add('foo'); |
| 19 var redbox = _colorBox('red', 30, 30); | 19 var redbox = _colorBox('red', 30, 30); |
| 20 var greenbox = _colorBox('green', 60, 10); | 20 var greenbox = _colorBox('green', 60, 10); |
| 21 | 21 |
| 22 // assemble DOM | 22 // assemble DOM |
| 23 var sRoot = div.webkitCreateShadowRoot(); | 23 var sRoot = div.createShadowRoot(); |
| 24 sRoot.nodes.add(new Element.html('<content select=".foo"></content>')); | 24 sRoot.nodes.add(new Element.html('<content select=".foo"></content>')); |
| 25 sRoot.nodes.add(redbox); | 25 sRoot.nodes.add(redbox); |
| 26 sRoot.nodes.add(new Element.tag('content')); | 26 sRoot.nodes.add(new Element.tag('content')); |
| 27 | 27 |
| 28 div.nodes.add(bluebox); | 28 div.nodes.add(bluebox); |
| 29 div.nodes.add(greenbox); | 29 div.nodes.add(greenbox); |
| 30 } | 30 } |
| 31 | 31 |
| 32 DivElement _colorBox(String color, int width, int height) { | 32 DivElement _colorBox(String color, int width, int height) { |
| 33 var style = ('background-color:$color; ' | 33 var style = ('background-color:$color; ' |
| 34 'width:${width}px; height:${height}px;'); | 34 'width:${width}px; height:${height}px;'); |
| 35 return new Element.html('<div style="$style"></div>'); | 35 return new Element.html('<div style="$style"></div>'); |
| 36 } | 36 } |
| OLD | NEW |