// 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:expect/legacy/async_minitest.dart'; // ignore: deprecated_member_use
import 'package:expect/expect.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);
  expect(rect.width, greaterThan(100));
  expect(rect.height, greaterThan(100));
  expect(rect.bottom, rect.top + rect.height);
  expect(rect.right, rect.left + rect.width);
}

void testUnsupported(String name, void f()) {
  test(name, () => Expect.throwsUnsupportedError(f));
}

main() {
  var isHRElement = predicate((x) => x is HRElement, 'is a HRElement');
  var isBRElement = predicate((x) => x is BRElement, 'is a BRElement');
  var isInputElement = predicate(
    (x) => x is InputElement,
    'is an InputElement',
  );
  var isImageElement = predicate(
    (x) => x is ImageElement,
    'is an ImageElement',
  );
  var isSpanElement = predicate((x) => x is SpanElement, 'is a SpanElement');
  var isAnchorElement = predicate(
    (x) => x is AnchorElement,
    'is an AnchorElement',
  );
  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>");

  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");
      container.style.position = 'absolute';
      container.style.top = '8px';
      container.style.left = '9px';
      final element = new Element.tag("div");
      element.style.width = '200px';
      element.style.height = '200px';
      container.children.add(element);
      document.body!.children.add(container);

      expect(element.client.width, greaterThan(100));
      expect(element.client.height, greaterThan(100));
      expect(element.offset.width, greaterThan(100));
      expect(element.offset.height, greaterThan(100));
      expect(element.scrollWidth, greaterThan(100));
      expect(element.scrollHeight, greaterThan(100));
      expect(element.getBoundingClientRect().left, 9);
      expect(element.getBoundingClientRect().top, 8);

      expect(element.documentOffset.x, 9);
      expect(element.documentOffset.y, 8);
      container.remove();
    });
  });

  group('constructors', () {
    test('error', () {
      Expect.throwsStateError(() => new Element.html('<br/><br/>'));
    });

    test(
      '.html has no parent',
      () => expect(new Element.html('<br/>').parent, isNull),
    );

    test('.html table', () {
      // http://developers.whatwg.org/tabular-data.html#tabular-data
      TableElement node =
          new Element.html('''
<table>
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>''')
              as TableElement;
      expect(node.tagName, 'TABLE');
      expect(node.parent, isNull);
      expect(
        node.caption!.innerHtml,
        'Characteristics with positive and negative sides',
      );
      expect(node.tHead!.rows.length, 1);
      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();
      TableCaptionElement node =
          table.createFragment('<caption><p>Table 1.').nodes.single
              as TableCaptionElement;
      expect(node.tagName, 'CAPTION');
      expect(node.parent, isNull);
      expect(node.innerHtml, '<p>Table 1.</p>');
    });

    test('.html colgroup', () {
      var table = new TableElement();
      TableColElement node =
          table.createFragment('<colgroup> <col> <col> <col>').nodes.single
              as 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();
      TableSectionElement node =
          table.createFragment('<tbody>$innerHtml').nodes.single
              as 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();
      TableSectionElement node =
          table.createFragment('<thead>$innerHtml').nodes.single
              as 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();
      TableSectionElement node =
          table.createFragment('<tfoot>$innerHtml').nodes.single
              as 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();
      TableRowElement node =
          tBody.createFragment('<tr><td>foo<td>bar').nodes.single
              as 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();
      TableCellElement node =
          tRow.createFragment('<td>foobar').nodes.single as 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();
      TableCellElement node =
          tRow.createFragment('<th>foobar').nodes.single as 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 TextAreaElement();

      void testEvent(Stream stream, String type, [createEvent(String type)?]) {
        var firedOnEvent = false;
        stream.listen((e) {
          firedOnEvent = true;
        });
        expect(firedOnEvent, isFalse);
        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',
        (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.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', (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',
        (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', () {
      var e = new DivElement();
      var firedEvent = false;
      e.onClick.listen((event) {
        firedEvent = true;
      });
      expect(firedEvent, false);
      e.click();
      expect(firedEvent, true);

      var e2 = new DivElement();
      var firedEvent2 = false;
      e2.onClick.matches('.foo').listen((event) {
        firedEvent2 = true;
      });
      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"
                   data-foo2="bar2" dir="rtl">
               </div>''',
        treeSanitizer: new NullTreeSanitizer(),
      );
      final attributes = element.attributes;
      expect(attributes['class'], 'foo');
      startsWith(match) => predicate((x) => x is String && x.startsWith(match));
      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);
    });

    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 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['href'] = 'bar';
      expect(xlinkAttrs['href'], 'bar');

      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]);
    });

    test('changes when an element is added to nodes', () {
      var el = new Element.html("<div>Foo<br/><img/></div>");
      el.nodes.add(new Element.tag('hr'));
      expect(el.children.length, 3);
      expect(el.children[2], isHRElement);
      expect(el.nodes[3], el.children[2]);
    });

    test('changes nodes when an element is added', () {
      var el = new Element.html("<div>Foo<br/><img/></div>");
      el.children.add(new Element.tag('hr'));
      expect(el.nodes.length, 4);
      expect(el.nodes[3], isHRElement);
      expect(el.children[2], el.nodes[3]);
    });

    test('last', () {
      var el = makeElementWithChildren();
      expect(el.children.last, isInputElement);
    });

    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,
      );
      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);
    });

    test('any', () {
      var el = makeElementWithChildren();
      expect(el.children.any((n) => n is InputElement), isTrue);
      expect(el.children.any((n) => n is svg.SvgElement), isFalse);
    });

    test('isEmpty', () {
      expect(makeElement().children.isEmpty, isTrue);
      expect(makeElementWithChildren().children.isEmpty, isFalse);
    });

    test('length', () {
      expect(makeElement().children.length, 0);
      expect(makeElementWithChildren().children.length, 3);
    });

    test('[]', () {
      var el = makeElementWithChildren();
      expect(el.children[0], isBRElement);
      expect(el.children[1], isImageElement);
      expect(el.children[2], isInputElement);
    });

    test('[]=', () {
      var el = makeElementWithChildren();
      el.children[1] = new Element.tag('hr');
      expect(el.children[0], isBRElement);
      expect(el.children[1], isHRElement);
      expect(el.children[2], isInputElement);
    });

    test('add', () {
      var el = makeElement();
      el.children.add(new Element.tag('hr'));
      expect(el.children.last, isHRElement);
    });

    test('iterator', () {
      var els = [];
      var el = makeElementWithChildren();
      for (var subel in el.children) {
        els.add(subel);
      }
      expect(els[0], isBRElement);
      expect(els[1], isImageElement);
      expect(els[2], isInputElement);
    });

    test('addAll', () {
      var el = makeElementWithChildren();
      el.children.addAll([
        new Element.tag('span'),
        new Element.tag('a'),
        new Element.tag('h1'),
      ]);
      expect(el.children[0], isBRElement);
      expect(el.children[1], isImageElement);
      expect(el.children[2], isInputElement);
      expect(el.children[3], isSpanElement);
      expect(el.children[4], isAnchorElement);
      expect(el.children[5], isHeadingElement);
    });

    test('insert', () {
      var element = new DivElement();
      element.children.insert(0, new BRElement());
      expect(element.children[0], isBRElement);
      element.children.insert(0, new HRElement());
      expect(element.children[0], isHRElement);
      element.children.insert(1, new ImageElement());
      expect(element.children[1], isImageElement);
      element.children.insert(element.children.length, new InputElement());
      expect(element.children.last, isInputElement);
    });

    test('clear', () {
      var el = makeElementWithChildren();
      el.children.clear();
      expect(el.children, equals([]));
    });

    test('removeLast', () {
      var el = makeElementWithChildren();
      expect(el.children.removeLast(), isInputElement);
      expect(el.children.length, 2);
      expect(el.children.removeLast(), isImageElement);
      expect(el.children.length, 1);
    });

    test('sublist', () {
      var el = makeElementWithChildren();
      expect(el.children.sublist(1, 2), isElementList);
    });

    test('getRange', () {
      var el = makeElementWithChildren();
      expect(el.children.getRange(1, 2).length, 1);
    });

    test('retainWhere', () {
      var el = makeElementWithChildren();
      expect(el.children.length, 3);
      el.children.retainWhere((e) => true);
      expect(el.children.length, 3);

      el = makeElementWithChildren();
      expect(el.children.length, 3);
      el.children.retainWhere((e) => false);
      expect(el.children.length, 0);

      el = makeElementWithChildren();
      expect(el.children.length, 3);
      el.children.retainWhere((e) => e.localName == 'input');
      expect(el.children.length, 1);

      el = makeElementWithChildren();
      expect(el.children.length, 3);
      el.children.retainWhere((e) => e.localName == 'br');
      expect(el.children.length, 1);
    });

    test('removeWhere', () {
      var el = makeElementWithChildren();
      expect(el.children.length, 3);
      el.children.removeWhere((e) => true);
      expect(el.children.length, 0);

      el = makeElementWithChildren();
      expect(el.children.length, 3);
      el.children.removeWhere((e) => false);
      expect(el.children.length, 3);

      el = makeElementWithChildren();
      expect(el.children.length, 3);
      el.children.removeWhere((e) => e.localName == 'input');
      expect(el.children.length, 2);

      el = makeElementWithChildren();
      expect(el.children.length, 3);
      el.children.removeWhere((e) => e.localName == 'br');
      expect(el.children.length, 2);
    });

    testUnsupported('sort', () {
      var l = makeElementWithChildren().children;
      l.sort();
    });

    testUnsupported('setRange', () {
      var l = makeElementWithChildren().children;
      l.setRange(0, 0, []);
    });

    testUnsupported('replaceRange', () {
      var l = makeElementWithChildren().children;
      l.replaceRange(0, 0, []);
    });

    testUnsupported('removeRange', () {
      var l = makeElementWithChildren().children;
      l.removeRange(0, 1);
    });

    testUnsupported('insertAll', () {
      var l = makeElementWithChildren().children;
      l.insertAll(0, []);
    });
  });

  group('matches', () {
    test('matches', () {
      var element = new DivElement();
      document.body!.append(element);
      element.classes.add('test');

      expect(element.matches('div'), true);
      expect(element.matches('span'), false);
      expect(element.matches('.test'), true);
    });
  });

  group('querySelectorAll', () {
    List<Element> getQuerySelectorAll() {
      return new Element.html("""
<div>
  <hr/>
  <a class='q' href='http://dartlang.org'>Dart!</a>
  <p>
    <span class='q'>Hello</span>,
    <em>world</em>!
  </p>
  <hr class='q'/>
</div>
""").querySelectorAll('.q');
    }

    List<Element> getEmptyQuerySelectorAll() =>
        new Element.tag('div').querySelectorAll('img');

    test('last', () {
      expect(getQuerySelectorAll().last, isHRElement);
    });

    test('forEach', () {
      var els = [];
      getQuerySelectorAll().forEach((el) => els.add(el));
      expect(els[0], isAnchorElement);
      expect(els[1], isSpanElement);
      expect(els[2], isHRElement);
    });

    test('map', () {
      var texts = getQuerySelectorAll().map((el) => el.text).toList();
      expect(texts, equals(['Dart!', 'Hello', '']));
    });

    test('where', () {
      var filtered = getQuerySelectorAll()
          .where((n) => n is SpanElement)
          .toList();
      expect(filtered.length, 1);
      expect(filtered[0], isSpanElement);
      expect(filtered, isElementList);
    });

    test('every', () {
      var el = getQuerySelectorAll();
      expect(el.every((n) => n is Element), isTrue);
      expect(el.every((n) => n is SpanElement), isFalse);
    });

    test('any', () {
      var el = getQuerySelectorAll();
      expect(el.any((n) => n is SpanElement), isTrue);
      expect(el.any((n) => n is svg.SvgElement), isFalse);
    });

    test('isEmpty', () {
      expect(getEmptyQuerySelectorAll().isEmpty, isTrue);
      expect(getQuerySelectorAll().isEmpty, isFalse);
    });

    test('length', () {
      expect(getEmptyQuerySelectorAll().length, 0);
      expect(getQuerySelectorAll().length, 3);
    });

    test('[]', () {
      var els = getQuerySelectorAll();
      expect(els[0], isAnchorElement);
      expect(els[1], isSpanElement);
      expect(els[2], isHRElement);
    });

    test('iterator', () {
      var els = [];
      for (var subel in getQuerySelectorAll()) {
        els.add(subel);
      }
      expect(els[0], isAnchorElement);
      expect(els[1], isSpanElement);
      expect(els[2], isHRElement);
    });

    test('sublist', () {
      expect(getQuerySelectorAll().sublist(1, 2) is List<Element>, isTrue);
    });

    testUnsupported(
      '[]=',
      () => getQuerySelectorAll()[1] = new Element.tag('br'),
    );
    testUnsupported(
      'add',
      () => getQuerySelectorAll().add(new Element.tag('br')),
    );

    testUnsupported('addAll', () {
      getQuerySelectorAll().addAll([
        new Element.tag('span'),
        new Element.tag('a'),
        new Element.tag('h1'),
      ]);
    });

    testUnsupported('sort', () => getQuerySelectorAll().sort((a1, a2) => 0));

    testUnsupported('setRange', () {
      getQuerySelectorAll().setRange(0, 1, [new BRElement()]);
    });

    testUnsupported(
      'removeRange',
      () => getQuerySelectorAll().removeRange(0, 1),
    );

    testUnsupported('clear', () => getQuerySelectorAll().clear());

    testUnsupported('removeLast', () => getQuerySelectorAll().removeLast());
  });

  group('functional', () {
    test('toString', () {
      final elems = makeElementWithChildren().children;
      expect(elems.toString(), "[br, img, input]");
      final elem = makeElement().children;
      expect(elem.toString(), '[]');
    });

    test('scrollIntoView', () {
      var child = new DivElement();
      document.body!.append(child);

      child.scrollIntoView(ScrollAlignment.TOP);
      child.scrollIntoView(ScrollAlignment.BOTTOM);
      child.scrollIntoView(ScrollAlignment.CENTER);
      child.scrollIntoView();
    });
  });

  group('_ElementList', () {
    List<Element> makeElList() => makeElementWithChildren().children;

    test('where', () {
      var filtered = makeElList().where((n) => n is ImageElement);
      expect(filtered.length, 1);
      expect(filtered.first, isImageElement);
      expect(filtered, isElementIterable);
    });

    test('sublist', () {
      var range = makeElList().sublist(1, 3);
      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);

      Element clickTwo = new Element.a();
      Element selectorTwo = new Element.div()
        ..classes.add('selector')
        ..children.add(clickTwo);
      document.body!.append(selectorOne);
      document.body!.append(selectorTwo);

      document.body!.onClick
          .matches('.selector')
          .listen(
            expectAsync1((Event event) {
              expect(event.currentTarget, document.body);
              expect(event.target, clickOne);
              expect(event.matchingTarget, selectorOne);
            }),
          );

      selectorOne.onClick
          .matches('.selector')
          .listen(
            expectAsync1((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';
      Element input = new InputElement()..classes.addAll(['c', 'd']);
      var div = new Element.div()
        ..classes.add('a')
        ..id = 'wat';
      document.body!.append(elem);
      document.body!.append(img);
      document.body!.append(input);
      document.body!.append(div);

      Element elem4 = new Element.div()..classes.addAll(['i', 'j']);
      Element elem5 = new Element.div()
        ..classes.addAll(['g', 'h'])
        ..children.add(elem4);
      Element elem6 = new Element.div()
        ..classes.addAll(['e', 'f'])
        ..children.add(elem5);
      document.body!.append(elem6);

      var firedEvent = false;
      var elems = querySelectorAll('.a');
      querySelectorAll('.a').onClick.listen((event) {
        firedEvent = true;
      });
      expect(firedEvent, false);
      querySelector('.c')!.click();
      expect(firedEvent, false);
      querySelector('#wat')!.click();
      expect(firedEvent, true);

      var firedEvent4 = false;
      querySelectorAll('.a').onClick.matches('.d').listen((event) {
        firedEvent4 = true;
      });
      expect(firedEvent4, false);
      querySelector('.c')!.click();
      expect(firedEvent4, false);
      querySelector('#wat')!.click();
      expect(firedEvent4, false);
      querySelector('#cookie')!.click();
      expect(firedEvent4, true);

      var firedEvent2 = false;
      querySelectorAll('.a').onClick.listen((event) {
        firedEvent2 = true;
      });
      Element elem2 = new Element.html('<div class="a"><br/>');
      document.body!.append(elem2);
      elem2.click();
      expect(firedEvent2, false);
      elem2.classes.add('a');
      elem2.click();
      expect(firedEvent2, false);

      var firedEvent3 = false;
      querySelectorAll(':root').onClick.matches('.a').listen((event) {
        firedEvent3 = true;
      });
      Element elem3 = new Element.html('<div class="d"><br/>');
      document.body!.append(elem3);
      elem3.click();
      expect(firedEvent3, false);
      elem3.classes.add('a');
      elem3.click();
      expect(firedEvent3, true);

      var firedEvent5 = false;
      querySelectorAll(':root').onClick.matches('.e').listen((event) {
        firedEvent5 = true;
      });
      expect(firedEvent5, false);
      querySelector('.i')!.click();
      expect(firedEvent5, true);
    });

    test('event ordering', () {
      var a = new DivElement();
      var b = new DivElement();
      a.append(b);
      var c = new DivElement();
      b.append(c);

      var eventOrder = [];

      ElementStream aEvent = a.on['custom_event'] as ElementStream;
      aEvent.listen((_) {
        eventOrder.add('a no-capture');
      });

      aEvent.capture((_) {
        eventOrder.add('a capture');
      });

      ElementStream bEvent = b.on['custom_event'] as ElementStream;
      bEvent.listen((_) {
        eventOrder.add('b no-capture');
      });

      bEvent.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',
      ]);
    });
  });

  group('ElementList', () {
    // Tests for methods on the DOM class 'NodeList'.
    //
    // There are two interesting things that are validated here from the
    // viewpoint of the dart2js implementation of a 'native' class:
    //
    //   1. Some methods are implemented from by 'Object' or 'Interceptor';
    //      some of these tests validate 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>",
    )).querySelectorAll('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]);
        }
      }
    });

    test('runtimeType', () {
      var nodes1 = makeElementList();
      var nodes2 = makeElementList();
      var type1 = nodes1.runtimeType;
      var type2 = nodes2.runtimeType;
      expect(type1 == type2, true);
      String name = '$type1';
      if (name.length > 3) {
        expect(name.contains('ElementList'), true);
      }
    });

    test('first', () {
      var nodes = makeElementList();
      expect(nodes.first, isBRElement);
    });

    test('last', () {
      var nodes = makeElementList();
      expect(nodes.last, isBRElement);
    });

    test('where', () {
      var filtered = makeElementList().where((n) => n is BRElement).toList();
      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);
    });
  });
}