<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="dart.unittest" content="full-stack-traces">
  <title> interop_test.html </title>
  <style>
     .unittest-table { font-family:monospace; border:1px; }
     .unittest-pass { background: #6b3;}
     .unittest-fail { background: #d55;}
     .unittest-error { background: #a11;}
  </style>
  <script src="packages/web_components/webcomponents-lite.js"></script>
  <script src="packages/web_components/interop_support.js"></script>
  <script src="packages/web_components/dart_support.js"></script>
</head>
<body>
  <h1> Running interop_test </h1>
  <script>
    var counter = 0;
    var A = function() {};
    A.prototype = Object.create(HTMLElement.prototype);
    A.prototype.inc = function() { this.x = counter++; };
    A.prototype.createdCallback = function() { this.inc(); };

    var B = function() {};
    B.prototype = Object.create(HTMLDivElement.prototype);
    B.prototype.createdCallback = function() { this.x = counter++; };
    B.extends = 'div';

    var D = function() {};
    D.prototype = Object.create(HTMLElement.prototype);
    D.prototype.inc = function() { this.x = counter++; };
    D.prototype.createdCallback = function() { this.inc(); };

    var E = { prototype: Object.create(D.prototype) };
    E.prototype.inc2 = function() {
      this.y = counter++;
    };
    E.prototype.createdCallback = function() {
      D.prototype.createdCallback.call(this);
      this.inc2();
    };

    document.registerElement('x-a', A);
    document.registerElement('x-b', B);
    document.registerElement('x-d', D);
    document.registerElement('x-e', E);

    function registerC() {
      var proto = Object.create(HTMLElement.prototype, {
        inc: { value: function() { this.x = counter++; } },
        createdCallback: {
          value: function() { this.inc(); },
          configurable: true},
      });
      document.registerElement('x-c', {prototype: proto});
    }
    function addA() {
      document.body.appendChild(document.createElement('x-a'));
    }
    function addB() {
      document.body.appendChild(document.createElement('div', 'x-b'));
    }
    function addC() {
      document.body.appendChild(document.createElement('x-c'));
    }
    function addD() {
      document.body.appendChild(document.createElement('x-d'));
    }
    function addE() {
      document.body.appendChild(document.createElement('x-e'));
    }
  </script>
  <x-a id="i1"></x-a>
  <div is="x-b" id="i2"></div>
  <x-c id="i3"></x-c>
  <x-d id="i4"></x-d>
  <link rel="x-dart-test" href="interop_test.dart">
  <script src="packages/test/dart.js"></script>
  <!-- <script type="application/dart" src="interop_test.dart"></script>
  <script src="packages/browser/dart.js"></script> -->
</html>