five-bells-visualization
Version:
Tool to visualize Five Bells payments
156 lines (114 loc) • 4.95 kB
HTML
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<title>Custom Notify Smoke Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="import" href="../../polymer.html">
<style>
body {
font-family: sans-serif;
font-size: 15px;
}
</style>
</head>
<body>
<dom-module id="x-app">
<style>
</style>
<template>
<h1> Works correctly </h1>
<h3><input value="{{inputValue::input}}"></h3>
<input value="{{inputValue::input}}">
<input value="{{inputValue::input}}">
<hr>
<h3><input value="{{inputValueCommitted::change}}></h3>
<input value="{{inputValueCommitted::change}}">
<input value="{{inputValueCommitted::change}}">
<hr>
<h3><value="{{textareaValue::input}}"></h3>
<textarea value="{{textareaValue::input}}"></textarea>
<textarea value="{{textareaValue::input}}"></textarea>
<hr>
<h3><textarea value="{{textareaValueCommitted::change}}"></h3>
<textarea value="{{textareaValueCommitted::change}}"></textarea>
<textarea value="{{textareaValueCommitted::change}}"></textarea>
<hr>
<h3><input type="checkbox">.checked</h3>
<input type="checkbox" checked="{{checked::change}}">
<input type="checkbox" checked="{{checked::change}}">
<hr>
<h3><input type="date" value="{{date::change}}"></h3>
<input type="date" value="{{date::change}}">
<input type="date" value="{{date::change}}">
<hr>
<h3><select selected-index="{{selectedIndex::change}}"></h3>
<select selected-index="{{selectedIndex::change}}">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<select selected-index="{{selectedIndex::change}}">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<hr>
<div>Current time: <span>{{currentTime}}</span></div>
<video current-time="{{currentTime::timeupdate}}" src="http://media.w3.org/2010/05/sintel/trailer.mp4" height="200" controls></video>
<hr>
<h1> Does not work as expected </h1>
<h3><select value="{{selectedValue::change}}"></h3>
<p><em>Setting `value` on IE inexplicably clears the value</em></p>
<select value="{{selectedValue::change}}">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<select value="{{selectedValue::change}}">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<hr>
<h3><input type="radio" name="one" checked="{{aChecked::change}}"></h3>
<p><em>Radio buttons do not fire changed events when unchecking</em></p>
<label><input type="radio" name="one" checked="{{aChecked::change}}">a</label>
<label><input type="radio" name="one" checked="{{bChecked::change}}">b</label>
<label><input type="radio" name="one" checked="{{cChecked::change}}">c</label>
<br><br>
<label><input type="radio" name="two" checked="{{aChecked::change}}">a</label>
<label><input type="radio" name="two" checked="{{bChecked::change}}">b</label>
<label><input type="radio" name="two" checked="{{cChecked::change}}">c</label>
<hr>
<h3><input type="range" value="{{rangeValue::input}}"></h3>
<p><em>IE does not fire <strong>input</strong> event for range input</em></p>
<input type="range" value="{{rangeValue::input}}">
<input type="range" value="{{rangeValue::input}}">
<hr>
<h3><input type="range" value="{{rangeValueCommitted::change}}"></h3>
<p><em>IE fires <strong>change</strong> event immediately when dragging; all others fire change when stopping drag</em></p>
<input type="range" value="{{rangeValueCommitted::change}}">
<input type="range" value="{{rangeValueCommitted::change}}">
</template>
</dom-module>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-app'
});
});
</script>
<x-app></x-app>
</body>
</html>