Chromium Code Reviews Chromium Code Reviews
Issue 12225039:
Support for observable models, fixes #259 (Closed)
Base URL: https://github.com/dart-lang/web-ui.git@master| OLD | NEW |
|---|---|
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | 3 Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file |
| 4 for details. All rights reserved. Use of this source code is governed by a | 4 for details. All rights reserved. Use of this source code is governed by a |
| 5 BSD-style license that can be found in the LICENSE file. | 5 BSD-style license that can be found in the LICENSE file. |
| 6 --> | 6 --> |
| 7 <html lang="en"> | 7 <html lang="en"> |
| 8 <head> | 8 <head> |
| 9 <meta charset="utf-8"> | 9 <meta charset="utf-8"> |
| 10 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 10 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 11 <title>data_style_binding_test</title> | |
| 12 <script type='application/javascript' src="testing.js"></script> | 11 <script type='application/javascript' src="testing.js"></script> |
| 13 <style> | 12 <style> |
| 14 .uno { width: 400px } | 13 .uno { width: 400px } |
| 15 .dos { color: blue } | 14 .dos { color: blue } |
| 16 .tres { height: 50px } | 15 .tres { height: 50px } |
| 17 .cuatro { background-color: green } | 16 .cuatro { background-color: green } |
| 18 .cinco { font-family: monospace } | 17 .cinco { font-family: monospace } |
| 19 </style> | 18 </style> |
| 20 </head> | 19 </head> |
| 21 <body> | 20 <body> |
| 22 <!-- test that you can set several class attributes with lists and strings with | 21 <!-- test that you can set several class attributes with lists and strings with |
| 23 spaces. --> | 22 spaces. --> |
| 24 <div id="test1" class="{{one}} {{two}} {{three}}"> | 23 <div id="test1" class="{{one}} {{two}} {{three}}"> |
| 25 this div will have blue (0000ff) font color and 50px height. | 24 this div will have blue (0000ff) font color and 50px height. |
| 26 </div> | 25 </div> |
| 27 <div id="test2" class="{{asList}}"> | 26 <div id="test2" class="{{asList}}"> |
| 28 this div will have blue 400px width and 50px height. | 27 this div will have blue 400px width and 50px height. |
| 29 </div> | 28 </div> |
| 30 <div id="test3" class="{{asString}}"> | 29 <div id="test3" class="{{asString}}"> |
| 31 this div will have green (008000) bgcolor and monospace font. | 30 this div will have green (008000) bgcolor and monospace font. |
| 32 </div> | 31 </div> |
| 33 <script type="application/dart"> | 32 <script type="application/dart"> |
| 33 @observable | |
|
Siggi Cherem (dart-lang)
2013/02/13 19:28:54
yay! I was waiting for a test like this one =)
Jennifer Messerly
2013/02/14 00:38:09
Done.
| |
| 34 library main; | |
| 34 import 'dart:html'; | 35 import 'dart:html'; |
| 35 import 'package:web_ui/web_ui.dart'; | 36 import 'package:web_ui/web_ui.dart'; |
| 36 import 'package:unittest/unittest.dart'; | 37 import 'package:unittest/unittest.dart'; |
| 37 | 38 |
| 38 var one = 'uno'; | 39 var one = 'uno'; |
| 39 var two = 'dos'; | 40 var two = 'dos'; |
| 40 var three = 'tres'; | 41 var three = 'tres'; |
| 41 var asString = 'uno dos tres'; | 42 var asString = 'uno dos tres'; |
| 42 var asList = ['uno', 'dos', 'tres']; | 43 var asList = new ObservableList.from(['uno', 'dos', 'tres']); |
| 43 main() { | 44 main() { |
| 44 window.setTimeout(() { | 45 window.setTimeout(() { |
| 45 expect(query('#test1').classes, unorderedEquals(asList)); | 46 expect(query('#test1').classes, unorderedEquals(asList)); |
| 46 expect(query('#test2').classes, unorderedEquals(asList)); | 47 expect(query('#test2').classes, unorderedEquals(asList)); |
| 47 expect(query('#test3').classes, unorderedEquals(asList)); | 48 expect(query('#test3').classes, unorderedEquals(asList)); |
| 48 one = null; | 49 one = null; |
| 49 asList[1] = null; | 50 asList[1] = null; |
| 50 asString = 'cuatro cinco'; | 51 asString = 'cuatro cinco'; |
| 51 dispatch(); | 52 deliverChangesSync(); |
|
Siggi Cherem (dart-lang)
2013/02/13 19:28:54
remove?
Jennifer Messerly
2013/02/14 00:38:09
Done.
| |
| 52 window.setTimeout(() { | 53 window.setTimeout(() { |
| 53 expect(query('#test1').classes, unorderedEquals(['dos', 'tres'])); | 54 expect(query('#test1').classes, unorderedEquals(['dos', 'tres'])); |
| 54 expect(query('#test2').classes, unorderedEquals(['uno', 'tres'])); | 55 expect(query('#test2').classes, unorderedEquals(['uno', 'tres'])); |
| 55 expect(query('#test3').classes, unorderedEquals(['cuatro', 'cinco'])); | 56 expect(query('#test3').classes, unorderedEquals(['cuatro', 'cinco'])); |
| 56 window.setTimeout(() => window.postMessage('done', '*'), 0); | 57 window.setImmediate(() => window.postMessage('done', '*')); |
| 57 }, 0); | 58 }, 0); |
| 58 }, 0); | 59 }, 0); |
| 59 } | 60 } |
| 60 </script> | 61 </script> |
| 61 </body> | 62 </body> |
| 62 </html> | 63 </html> |
| OLD | NEW |
