Strong html

tests/html/element_test.dart

 // Copyright (c) 2011, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 library ElementTest;
+
 import 'package:unittest/unittest.dart';
 import 'package:unittest/html_individual_config.dart';
 import 'dart:async';
 import 'dart:html';
 import 'dart:svg' as svg;
 import 'utils.dart';
 
 expectLargeRect(Rectangle rect) {
   expect(rect.top, 0);
   expect(rect.left, 0);
@@ skipping 24 matching lines @@
   var isElementList =
       predicate((x) => x is List<Element>, 'is a List<Element>');
   var isElementIterable =
       predicate((x) => x is Iterable<Element>, 'is an Iterable<Element>');
   var isHeadingElement =
       predicate((x) => x is HeadingElement, 'is a HeadingElement');
 
   Element makeElement() => new Element.tag('div');
 
   Element makeElementWithChildren() =>
-    new Element.html("<div><br/><img/><input/></div>");
+      new Element.html("<div><br/><img/><input/></div>");
 
   group('position', () {
     test('computedStyle', () {
       final element = document.body;
       var style = element.getComputedStyle();
       expect(style.getPropertyValue('left'), 'auto');
     });
 
     test('client position synchronous', () {
       final container = new Element.tag("div");
@@ skipping 19 matching lines @@
       expect(element.documentOffset.y, 8);
       container.remove();
     });
   });
 
   group('constructors', () {
     test('error', () {
       expect(() => new Element.html('<br/><br/>'), throwsStateError);
     });
 
-    test('.html has no parent', () =>
-        expect(new Element.html('<br/>').parent, isNull));
+    test('.html has no parent',
+        () => expect(new Element.html('<br/>').parent, isNull));
 
     test('.html table', () {
       // http://developers.whatwg.org/tabular-data.html#tabular-data
       var node = new Element.html('''
 <table>
  <caption>Characteristics with positive and negative sides</caption>
  <thead>
   <tr>
    <th id="n"> Negative
    <th> Characteristic
@@ skipping 17 matching lines @@
       expect(node.tHead.rows[0].cells.length, 3);
       expect(node.tBodies.length, 1);
       expect(node.tBodies[0].rows.length, 2);
       expect(node.tBodies[0].rows[1].cells.map((c) => c.innerHtml),
           [' Failing\n   ', ' Grade\n   ', ' Passing\n']);
     });
 
     test('.html caption', () {
       var table = new TableElement();
       var node = table.createFragment('<caption><p>Table 1.').nodes.single;
-      expect(node, predicate((x) => x is TableCaptionElement,
-          'is a TableCaptionElement'));
+      expect(
+          node,
+          predicate(
+              (x) => x is TableCaptionElement, 'is a TableCaptionElement'));
       expect(node.tagName, 'CAPTION');
       expect(node.parent, isNull);
       expect(node.innerHtml, '<p>Table 1.</p>');
     });
 
     test('.html colgroup', () {
       var table = new TableElement();
       var node =
           table.createFragment('<colgroup> <col> <col> <col>').nodes.single;
-      expect(node, predicate((x) => x is TableColElement,
-          'is a TableColElement'));
+      expect(
+          node, predicate((x) => x is TableColElement, 'is a TableColElement'));
       expect(node.tagName, 'COLGROUP');
       expect(node.parent, isNull);
       expect(node.innerHtml, ' <col> <col> <col>');
     });
 
     test('.html tbody', () {
       var innerHtml = '<tr><td headers="n r1">Sad</td><td>Happy</td></tr>';
       var table = new TableElement();
       var node = table.createFragment('<tbody>$innerHtml').nodes.single;
-      expect(node, predicate((x) => x is TableSectionElement,
-          'is a TableSectionElement'));
+      expect(
+          node,
+          predicate(
+              (x) => x is TableSectionElement, 'is a TableSectionElement'));
       expect(node.tagName, 'TBODY');
       expect(node.parent, isNull);
       expect(node.rows.length, 1);
       expect(node.rows[0].cells.length, 2);
       expect(node.innerHtml, innerHtml);
     });
 
     test('.html thead', () {
       var innerHtml = '<tr><th id="n">Negative</th><th>Positive</th></tr>';
       var table = new TableElement();
       var node = table.createFragment('<thead>$innerHtml').nodes.single;
-      expect(node, predicate((x) => x is TableSectionElement,
-          'is a TableSectionElement'));
+      expect(
+          node,
+          predicate(
+              (x) => x is TableSectionElement, 'is a TableSectionElement'));
       expect(node.tagName, 'THEAD');
       expect(node.parent, isNull);
       expect(node.rows.length, 1);
       expect(node.rows[0].cells.length, 2);
       expect(node.innerHtml, innerHtml);
     });
 
     test('.html tfoot', () {
       var innerHtml = '<tr><th>percentage</th><td>34.3%</td></tr>';
       var table = new TableElement();
       var node = table.createFragment('<tfoot>$innerHtml').nodes.single;
-      expect(node, predicate((x) => x is TableSectionElement,
-          'is a TableSectionElement'));
+      expect(
+          node,
+          predicate(
+              (x) => x is TableSectionElement, 'is a TableSectionElement'));
       expect(node.tagName, 'TFOOT');
       expect(node.parent, isNull);
       expect(node.rows.length, 1);
       expect(node.rows[0].cells.length, 2);
       expect(node.innerHtml, innerHtml);
     });
 
     test('.html tr', () {
       var table = new TableElement();
       document.body.append(table);
       var tBody = table.createTBody();
       var node = tBody.createFragment('<tr><td>foo<td>bar').nodes.single;
-      expect(node, predicate((x) => x is TableRowElement,
-          'is a TableRowElement'));
+      expect(
+          node, predicate((x) => x is TableRowElement, 'is a TableRowElement'));
       expect(node.tagName, 'TR');
       expect(node.parent, isNull);
       expect(node.cells.map((c) => c.innerHtml), ['foo', 'bar']);
     });
 
     test('.html td', () {
       var table = new TableElement();
       document.body.append(table);
       var tBody = table.createTBody();
       var tRow = tBody.addRow();
       var node = tRow.createFragment('<td>foobar').nodes.single;
-      expect(node, predicate((x) => x is TableCellElement,
-          'is a TableCellElement'));
+      expect(node,
+          predicate((x) => x is TableCellElement, 'is a TableCellElement'));
       expect(node.tagName, 'TD');
       expect(node.parent, isNull);
       expect(node.innerHtml, 'foobar');
     });
 
     test('.html th', () {
       var table = new TableElement();
       document.body.append(table);
       var tBody = table.createTBody();
       var tRow = tBody.addRow();
       var node = tRow.createFragment('<th>foobar').nodes.single;
-      expect(node, predicate((x) => x is TableCellElement,
-          'is a TableCellElement'));
+      expect(node,
+          predicate((x) => x is TableCellElement, 'is a TableCellElement'));
       expect(node.tagName, 'TH');
       expect(node.parent, isNull);
       expect(node.innerHtml, 'foobar');
     });
 
     test('.html can fire events', () {
       var e = new Element.html('<button>aha</button>');
       var gotEvent = false;
       e.onClick.listen((_) {
         gotEvent = true;
       });
       e.click();
       expect(gotEvent, isTrue, reason: 'click should have raised click event');
     });
   });
 
   group('eventListening', () {
     test('streams', () {
-      final target = new Element.tag('div');
+      final target = new TextAreaElement();
 
-      void testEvent(Stream stream, String type) {
+      void testEvent(Stream stream, String type, [createEvent(String type)]) {
         var firedOnEvent = false;
         stream.listen((e) {
           firedOnEvent = true;
         });
         expect(firedOnEvent, isFalse);
-        var event = new Event(type);
+        var event = createEvent != null ? createEvent(type) : new Event(type);
         target.dispatchEvent(event);
 
         expect(firedOnEvent, isTrue);
       }
 
       testEvent(target.onAbort, 'abort');
       testEvent(target.onBeforeCopy, 'beforecopy');
       testEvent(target.onBeforeCut, 'beforecut');
       testEvent(target.onBeforePaste, 'beforepaste');
       testEvent(target.onBlur, 'blur');
       testEvent(target.onChange, 'change');
-      testEvent(target.onContextMenu, 'contextmenu');
+      testEvent(
+          target.onContextMenu, 'contextmenu', (type) => new MouseEvent(type));
+      // We cannot test dispatching a true ClipboardEvent as the DOM does not
+      // provide a way to create a fake ClipboardEvent.
       testEvent(target.onCopy, 'copy');
       testEvent(target.onCut, 'cut');
-      testEvent(target.onDoubleClick, 'dblclick');
-      testEvent(target.onDrag, 'drag');
-      testEvent(target.onDragEnd, 'dragend');
-      testEvent(target.onDragEnter, 'dragenter');
-      testEvent(target.onDragLeave, 'dragleave');
-      testEvent(target.onDragOver, 'dragover');
-      testEvent(target.onDragStart, 'dragstart');
-      testEvent(target.onDrop, 'drop');
+      testEvent(target.onPaste, 'paste');
+
+      testEvent(
+          target.onDoubleClick, 'dblclick', (type) => new MouseEvent(type));
+      testEvent(target.onDrag, 'drag', (type) => new MouseEvent(type));
+      testEvent(target.onDragEnd, 'dragend', (type) => new MouseEvent(type));
+      testEvent(
+          target.onDragEnter, 'dragenter', (type) => new MouseEvent(type));
+      testEvent(
+          target.onDragLeave, 'dragleave', (type) => new MouseEvent(type));
+      testEvent(target.onDragOver, 'dragover', (type) => new MouseEvent(type));
+      testEvent(
+          target.onDragStart, 'dragstart', (type) => new MouseEvent(type));
+      testEvent(target.onDrop, 'drop', (type) => new MouseEvent(type));
       testEvent(target.onError, 'error');
       testEvent(target.onFocus, 'focus');
       testEvent(target.onFullscreenChange, 'webkitfullscreenchange');
       testEvent(target.onInput, 'input');
       testEvent(target.onInvalid, 'invalid');
-      testEvent(target.onKeyDown, 'keydown');
-      testEvent(target.onKeyPress, 'keypress');
-      testEvent(target.onKeyUp, 'keyup');
+      testEvent(target.onKeyDown, 'keydown', (type) => new KeyboardEvent(type));
+      testEvent(
+          target.onKeyPress, 'keypress', (type) => new KeyboardEvent(type));
+      testEvent(target.onKeyUp, 'keyup', (type) => new KeyboardEvent(type));
       testEvent(target.onLoad, 'load');
-      testEvent(target.onMouseDown, 'mousedown');
-      testEvent(target.onMouseMove, 'mousemove');
-      testEvent(target.onMouseOut, 'mouseout');
-      testEvent(target.onMouseOver, 'mouseover');
-      testEvent(target.onMouseUp, 'mouseup');
-      testEvent(target.onPaste, 'paste');
+      testEvent(
+          target.onMouseDown, 'mousedown', (type) => new MouseEvent(type));
+      testEvent(
+          target.onMouseMove, 'mousemove', (type) => new MouseEvent(type));
+      testEvent(target.onMouseOut, 'mouseout', (type) => new MouseEvent(type));
+      testEvent(
+          target.onMouseOver, 'mouseover', (type) => new MouseEvent(type));
+      testEvent(target.onMouseUp, 'mouseup', (type) => new MouseEvent(type));
       testEvent(target.onReset, 'reset');
       testEvent(target.onScroll, 'scroll');
       testEvent(target.onSearch, 'search');
       testEvent(target.onSelect, 'select');
       testEvent(target.onSelectStart, 'selectstart');
       testEvent(target.onSubmit, 'submit');
+      // We would prefer to create new touch events for this test via
+      // new TouchEvent(null, null, null, type)
+      // but that fails on desktop browsers as touch is not enabled.
       testEvent(target.onTouchCancel, 'touchcancel');
       testEvent(target.onTouchEnd, 'touchend');
       testEvent(target.onTouchLeave, 'touchleave');
       testEvent(target.onTouchMove, 'touchmove');
       testEvent(target.onTouchStart, 'touchstart');
     });
   });
 
   group('click', () {
     test('clickEvent', () {
@@ skipping 13 matching lines @@
       });
       e2.click();
       expect(firedEvent2, false);
       e2.classes.add('foo');
       e2.click();
       expect(firedEvent2, true);
     });
   });
 
   group('attributes', () {
-      test('manipulation', () {
-        final element = new Element.html(
-            '''<div class="foo" style="overflow: hidden" data-foo="bar"
+    test('manipulation', () {
+      final element = new Element.html(
+          '''<div class="foo" style="overflow: hidden" data-foo="bar"
                    data-foo2="bar2" dir="rtl">
-               </div>''', treeSanitizer: new NullTreeSanitizer());
-        final attributes = element.attributes;
-        expect(attributes['class'], 'foo');
-        expect(attributes['style'], startsWith('overflow: hidden'));
-        expect(attributes['data-foo'], 'bar');
-        expect(attributes['data-foo2'], 'bar2');
-        expect(attributes.length, 5);
-        expect(element.dataset.length, 2);
-        element.dataset['foo'] = 'baz';
-        expect(element.dataset['foo'], 'baz');
-        expect(attributes['data-foo'], 'baz');
-        attributes['data-foo2'] = 'baz2';
-        expect(attributes['data-foo2'], 'baz2');
-        expect(element.dataset['foo2'], 'baz2');
-        expect(attributes['dir'], 'rtl');
+               </div>''',
+          treeSanitizer: new NullTreeSanitizer());
+      final attributes = element.attributes;
+      expect(attributes['class'], 'foo');
+      expect(attributes['style'], startsWith('overflow: hidden'));
+      expect(attributes['data-foo'], 'bar');
+      expect(attributes['data-foo2'], 'bar2');
+      expect(attributes.length, 5);
+      expect(element.dataset.length, 2);
+      element.dataset['foo'] = 'baz';
+      expect(element.dataset['foo'], 'baz');
+      expect(attributes['data-foo'], 'baz');
+      attributes['data-foo2'] = 'baz2';
+      expect(attributes['data-foo2'], 'baz2');
+      expect(element.dataset['foo2'], 'baz2');
+      expect(attributes['dir'], 'rtl');
 
-        final dataset = element.dataset;
-        dataset.remove('foo2');
-        expect(attributes.length, 4);
-        expect(dataset.length, 1);
-        attributes.remove('style');
-        expect(attributes.length, 3);
-        dataset['foo3'] = 'baz3';
-        expect(dataset.length, 2);
-        expect(attributes.length, 4);
-        attributes['style'] = 'width: 300px;';
-        expect(attributes.length, 5);
-      });
+      final dataset = element.dataset;
+      dataset.remove('foo2');
+      expect(attributes.length, 4);
+      expect(dataset.length, 1);
+      attributes.remove('style');
+      expect(attributes.length, 3);
+      dataset['foo3'] = 'baz3';
+      expect(dataset.length, 2);
+      expect(attributes.length, 4);
+      attributes['style'] = 'width: 300px;';
+      expect(attributes.length, 5);
+    });
 
-      test('namespaces', () {
-        var element = new svg.SvgElement.svg(
-          '''<svg xmlns="http://www.w3.org/2000/svg"
+    test('namespaces', () {
+      var element =
+          new svg.SvgElement.svg('''<svg xmlns="http://www.w3.org/2000/svg"
                   xmlns:xlink="http://www.w3.org/1999/xlink">
             <image xlink:href="foo" data-foo="bar"/>
           </svg>''').children[0];
 
-        var attributes = element.attributes;
-        expect(attributes.length, 1);
-        expect(attributes['data-foo'], 'bar');
+      var attributes = element.attributes;
+      expect(attributes.length, 1);
+      expect(attributes['data-foo'], 'bar');
 
-        var xlinkAttrs =
-            element.getNamespacedAttributes('http://www.w3.org/1999/xlink');
-        expect(xlinkAttrs.length, 1);
-        expect(xlinkAttrs['href'], 'foo');
+      var xlinkAttrs =
+          element.getNamespacedAttributes('http://www.w3.org/1999/xlink');
+      expect(xlinkAttrs.length, 1);
+      expect(xlinkAttrs['href'], 'foo');
 
-        xlinkAttrs.remove('href');
-        expect(xlinkAttrs.length, 0);
+      xlinkAttrs.remove('href');
+      expect(xlinkAttrs.length, 0);
 
-        xlinkAttrs['href'] = 'bar';
-        expect(xlinkAttrs['href'], 'bar');
+      xlinkAttrs['href'] = 'bar';
+      expect(xlinkAttrs['href'], 'bar');
 
-        var randomAttrs = element.getNamespacedAttributes('http://example.com');
-        expect(randomAttrs.length, 0);
-        randomAttrs['href'] = 'bar';
-        expect(randomAttrs.length, 1);
-      });
+      var randomAttrs = element.getNamespacedAttributes('http://example.com');
+      expect(randomAttrs.length, 0);
+      randomAttrs['href'] = 'bar';
+      expect(randomAttrs.length, 1);
+    });
   });
 
   group('children', () {
     test('is a subset of nodes', () {
       var el = new Element.html("<div>Foo<br/><img/></div>");
       expect(el.nodes.length, 3);
       expect(el.children.length, 2);
       expect(el.nodes[1], el.children[0]);
       expect(el.nodes[2], el.children[1]);
     });
@@ skipping 22 matching lines @@
     test('forEach', () {
       var els = [];
       var el = makeElementWithChildren();
       el.children.forEach((n) => els.add(n));
       expect(els[0], isBRElement);
       expect(els[1], isImageElement);
       expect(els[2], isInputElement);
     });
 
     test('where', () {
-      var filtered = makeElementWithChildren().children.
-        where((n) => n is ImageElement);
+      var filtered =
+          makeElementWithChildren().children.where((n) => n is ImageElement);
       expect(1, filtered.length);
       expect(filtered.first, isImageElement);
       expect(filtered, isElementIterable);
     });
 
     test('every', () {
       var el = makeElementWithChildren();
       expect(el.children.every((n) => n is Element), isTrue);
       expect(el.children.every((n) => n is InputElement), isFalse);
     });
@@ skipping 321 matching lines @@
       expect(range, isElementList);
       expect(range[0], isImageElement);
       expect(range[1], isInputElement);
     });
   });
 
   group('eventDelegation', () {
     test('matches', () {
       Element clickOne = new Element.a();
       Element selectorOne = new Element.div()
-          ..classes.add('selector')
-          ..children.add(clickOne);
+        ..classes.add('selector')
+        ..children.add(clickOne);
 
       Element clickTwo = new Element.a();
       Element selectorTwo = new Element.div()
-          ..classes.add('selector')
-          ..children.add(clickTwo);
+        ..classes.add('selector')
+        ..children.add(clickTwo);
       document.body.append(selectorOne);
       document.body.append(selectorTwo);
 
-      document.body.onClick.matches('.selector').listen(expectAsync(
-          (Event event) {
+      document.body.onClick
+          .matches('.selector')
+          .listen(expectAsync((Event event) {
         expect(event.currentTarget, document.body);
         expect(event.target, clickOne);
         expect(event.matchingTarget, selectorOne);
       }));
 
-      selectorOne.onClick.matches('.selector').listen(expectAsync(
-          (Event event) {
+      selectorOne.onClick
+          .matches('.selector')
+          .listen(expectAsync((Event event) {
         expect(event.currentTarget, selectorOne);
         expect(event.target, clickOne);
         expect(event.matchingTarget, selectorOne);
       }));
       clickOne.click();
 
       Element elem = new Element.div()..classes.addAll(['a', 'b']);
       Element img = new Element.img()
         ..classes.addAll(['b', 'a', 'd'])
         ..id = 'cookie';
@@ skipping 93 matching lines @@
       });
 
       b.on['custom_event'].capture((_) {
         eventOrder.add('b capture');
       });
 
       document.body.append(a);
 
       var event = new Event('custom_event', canBubble: true);
       c.dispatchEvent(event);
-      expect(eventOrder, [
-        'a capture',
-        'b capture',
-        'b no-capture',
-        'a no-capture'
-      ]);
+      expect(eventOrder,
+          ['a capture', 'b capture', 'b no-capture', 'a no-capture']);
     });
   });
 
   group('ElementList', () {
     // Tests for methods on the DOM class 'NodeList'.
     //
     // There are two interesting things that are checked here from the viewpoint
     // of the dart2js implementation of a 'native' class:
     //
     //   1. Some methods are implementated from by 'Object' or 'Interceptor';
     //      some of these tests simply check that a method can be called.
     //   2. Some methods are implemented by mixins.
 
     ElementList<Element> makeElementList() =>
         (new Element.html("<div>Foo<br/><!--baz--><br/><br/></div>"))
-        .queryAll('br');
+            .queryAll('br');
 
     test('hashCode', () {
       var nodes = makeElementList();
       var hash = nodes.hashCode;
       final int N = 1000;
       int matchCount = 0;
       for (int i = 0; i < N; i++) {
         if (makeElementList().hashCode == hash) matchCount++;
       }
       expect(matchCount, lessThan(N));
     });
 
     test('operator==', () {
       var a = [makeElementList(), makeElementList(), null];
       for (int i = 0; i < a.length; i++) {
         for (int j = 0; j < a.length; j++) {
-          expect(i == j,  a[i] == a[j]);
+          expect(i == j, a[i] == a[j]);
         }
       }
     });
 
     test('runtimeType', () {
       var nodes1 = makeElementList();
       var nodes2 = makeElementList();
       var type1 = nodes1.runtimeType;
       var type2 = nodes2.runtimeType;
       expect(type1 == type2, true);
@@ skipping 18 matching lines @@
       expect(filtered.length, 3);
       expect(filtered[0], isBRElement);
     });
 
     test('sublist', () {
       var range = makeElementList().sublist(1, 3);
       expect(range.length, 2);
       expect(range[0], isBRElement);
       expect(range[1], isBRElement);
     });
-
   });
 }