-
Notifications
You must be signed in to change notification settings - Fork 2k
/
take-attributes.html
126 lines (117 loc) · 4.54 KB
/
take-attributes.html
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html>
<head>
<title>take attributes</title>
<script src="../../toolkit.js"></script>
<script src="../../tools/test/htmltest.js"></script>
<script src="../../node_modules/chai/chai.js"></script>
</head>
<body>
<element name="x-foo">
<script>
Toolkit.register(this, {
publish: {
bool: false,
num: 42,
str: "don't panic"
}
});
</script>
</element>
<x-foo id="foo0" bool="true"></x-foo>
<x-foo id="foo1" bool="false"></x-foo>
<x-foo id="foo2" bool></x-foo>
<x-foo id="foo3"></x-foo>
<x-foo id="foo4" bool="squid"></x-foo>
<x-foo id="foo5" bool="0"></x-foo>
<element name="x-bar" attributes="bool num str">
<script>
Toolkit.register(this, {
bool: false,
num: 42,
str: "don't panic"
});
</script>
</element>
<x-bar id="bar0" bool="true"></x-bar>
<x-bar id="bar1" bool="false"></x-bar>
<x-bar id="bar2" bool></x-bar>
<x-bar id="bar3"></x-bar>
<x-bar id="bar4" bool="squid"></x-bar>
<x-bar id="bar5" bool="0"></x-bar>
<element name="x-zot" extends="x-bar" attributes="bool">
<script>
Toolkit.register(this, {
num: 84
});
</script>
</element>
<x-zot id="zot0" bool="true"></x-zot>
<x-zot id="zot1" bool="false"></x-zot>
<x-zot id="zot2" bool></x-zot>
<x-zot id="zot3"></x-zot>
<x-zot id="zot4" bool="squid"></x-zot>
<x-zot id="zot5" bool="0"></x-zot>
<element name="x-date" attributes="value">
<script>
Toolkit.register(this, {
value: new Date()
});
</script>
</element>
<x-date id="date1" value="2014/12/25"></x-date>
<x-date id="date2" value="December 25, 2014"></x-date>
<x-date id="date3" value="2014/12/25 11:45"></x-date>
<x-date id="date4" value="2014/12/25 11:45:30"></x-date>
<x-date id="date5" value="2014/12/25 11:45:30:33"></x-date>
<script>
var assert = chai.assert;
document.addEventListener('WebComponentsReady', function() {
assert.isTrue(document.querySelector("#foo0").bool);
assert.isFalse(document.querySelector("#foo1").bool);
assert.isTrue(document.querySelector("#foo2").bool);
assert.isFalse(document.querySelector("#foo3").bool);
// this one is only 'truthy'
assert.ok(document.querySelector("#foo4").bool);
// this one is also 'truthy', but should it be?
assert.ok(document.querySelector("#foo4").bool);
//
assert.equal(document.querySelector("#foo0").num, 42);
assert.equal(document.querySelector("#foo0").str, "don't panic");
//
assert.isTrue(document.querySelector("#bar0").bool);
assert.isFalse(document.querySelector("#bar1").bool);
assert.isTrue(document.querySelector("#bar2").bool);
assert.isFalse(document.querySelector("#bar3").bool);
// this one is only 'truthy'
assert.ok(document.querySelector("#bar4").bool);
// this one is also 'truthy', but should it be?
assert.ok(document.querySelector("#bar4").bool);
//
assert.equal(document.querySelector("#bar0").num, 42);
assert.equal(document.querySelector("#bar0").str, "don't panic");
//
assert.isTrue(document.querySelector("#zot0").bool);
assert.isFalse(document.querySelector("#zot1").bool);
assert.isTrue(document.querySelector("#zot2").bool);
assert.isFalse(document.querySelector("#zot3").bool);
// this one is only 'truthy'
assert.ok(document.querySelector("#zot4").bool);
// this one is also 'truthy', but should it be?
assert.ok(document.querySelector("#zot4").bool);
//
assert.equal(document.querySelector("#zot0").num, 84);
assert.equal(document.querySelector("#zot0").str, "don't panic");
//
// Date deserialization tests
assert.equal(String(document.querySelector("#date1").value), String(new Date(2014, 11, 25)));
assert.equal(String(document.querySelector("#date2").value), String(new Date(2014, 11, 25)));
assert.equal(String(document.querySelector("#date3").value), String(new Date(2014, 11, 25, 11, 45)));
assert.equal(String(document.querySelector("#date4").value), String(new Date(2014, 11, 25, 11, 45, 30)));
assert.equal(document.querySelector("#date5").value.getMilliseconds(), new Date(2014, 11, 25, 11, 45, 30, 33).getMilliseconds());
//
done();
});
</script>
</body>
</html>