blob: cb0b79cf958f48fdb738d9ad1d6d98caf51dee3f [file] [log] [blame]
<!doctype html>
<!--
Copyright (c) 2013, 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.
-->
<html>
<!--polymer-test: this comment is needed for test_suite.dart-->
<head>
<title>polymer.js interop test</title>
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/polymer/polymer.html">
<script src="/root_dart/tools/testing/dart/test_controller.js"></script>
</head>
<body>
<polymer-element name="js-element">
<template>FOOBAR</template>
<script>
Polymer('js-element', {
publish: {
baz: {value: 42, reflect: true}
},
aJsMethod: function(inc) {
this.shadowRoot.textContent = this.baz + inc;
},
});
</script>
</polymer-element>
<polymer-element name="dart-element">
<template>
<js-element></js-element>
</template>
</polymer-element>
<dart-element></dart-element>
<js-element></js-element>
<polymer-element name="js-element2" attributes="qux">
<template>QUX:{{qux.baz}}</template>
<script>Polymer('js-element2');</script>
</polymer-element>
<polymer-element name="dart-element2">
<template>
<js-element2 qux="{{quux}}"></js-element2>
<!-- TODO(jakemac): remove this once
https://github.com/Polymer/ShadowDOM/issues/495 is resolved -->
<content hidden></content>
</template>
</polymer-element>
<dart-element2>
<js-element baz="123" class="quux"></js-element>
</dart-element2>
<polymer-element name="js-element3" attributes="qux">
<template>FOOBAR</template>
<script>Polymer('js-element3', {
quxChanged: function() {
this.shadowRoot.textContent = 'js-element3[qux]:' +
this.qux.aDartMethod(321);
}
});</script>
</polymer-element>
<polymer-element name="dart-element3">
<template>
<js-element3 qux="{{quux}}"></js-element3>
</template>
</polymer-element>
<dart-element3></dart-element3>
<polymer-element name="js-two-way" attributes="foobar">
<template>FOOBAR:{{foobar}}</template>
<script>Polymer('js-two-way', {
foobar: 0,
aJsMethod: function(inc) {
this.foobar = this.foobar + inc;
},
});</script>
</polymer-element>
<polymer-element name="dart-two-way">
<template>
<js-two-way foobar="{{twoWay}}"></js-two-way>
</template>
</polymer-element>
<dart-two-way></dart-two-way>
<script type="application/dart" src="js_interop_test.dart"></script>
</body>
</html>