-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbrb-test-polyfill.xhtml
44 lines (42 loc) · 1.26 KB
/
brb-test-polyfill.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
>
<head>
<meta charset='utf-8'/>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<title>My Rockin' Page</title>
<link rel='import' href='brb-component.html'/>
</head>
<body style='background: #fff'>
<h1>My Rockin' Page</h1>
<p>I am so hot I spontaneously unbreak symmetry.</p>
<big-red-button size="100" id='attr'>Attr</big-red-button>
<big-red-button size="200" id='brb'>Push Me!</big-red-button>
<script><![CDATA[
var step = 10
, brb = document.getElementById("brb")
, running = false
;
function animate() {
brb.size += step;
if (brb.size >= 300 || brb.size < 200)
step = -step;
if (running)
requestAnimationFrame(animate);
}
brb.onclick = function() {
if (running)
running = false;
else {
running = true;
requestAnimationFrame(animate);
}
};
document.getElementById("attr").onclick = function() {
brb.setAttribute("size", brb.size === 200 ? "500" : "200");
};
]]>
</script>
</body>
</html>