Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit e23e55b

Browse files
dfreedmdfreedm
committed
cat and hat experiments
1 parent ebb724b commit e23e55b

File tree

2 files changed

+228
-0
lines changed

2 files changed

+228
-0
lines changed

‎dfreedm/cat-hat/ce-only.html

+151
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Cat and Hat</title>
6+
</head>
7+
<body>
8+
<!-- layout from cat and hat document -->
9+
<style id="style1"></style>
10+
<div id="host">
11+
<shadow-root>
12+
<style id="style2"></style>
13+
<div id="b">
14+
<shadow-root>
15+
<style id="style3"></style>
16+
<div id="d"></div>
17+
</shadow-root>
18+
</div>
19+
</shadow-root>
20+
<shadow-root>
21+
<style id="style4"></style>
22+
<div id="c">
23+
<shadow-root>
24+
<style id="style5"></style>
25+
<div id="e"></div>
26+
</shadow-root>
27+
</div>
28+
<shadow></shadow>
29+
</shadow-root>
30+
<div id="a"></div>
31+
</div>
32+
33+
34+
35+
<script>
36+
// collect test elements
37+
var elements = Array.prototype.slice.call(document.body.querySelectorAll('div'));
38+
elements = elements.sort(function(e1, e2) {
39+
var a = e1.id, b = e2.id;
40+
if (a == 'host') {
41+
return -1;
42+
}
43+
if (b == 'host') {
44+
return 1;
45+
}
46+
return a.localeCompare(b);
47+
});
48+
49+
// collect style elements
50+
var styles = Array.prototype.slice.call(document.body.querySelectorAll('style'));
51+
styles = styles.sort(function(a, b) {
52+
return a.id.localeCompare(b.id);
53+
});
54+
55+
// Abuse Custom Elements to make self-injecting shadow roots
56+
document.register('shadow-root', {
57+
prototype: Object.create(HTMLElement.prototype, {
58+
enteredViewCallback: {
59+
value: function() {
60+
var s = this.parentNode.createShadowRoot();
61+
while(this.children.length) {
62+
s.appendChild(this.firstChild);
63+
}
64+
this.remove();
65+
}
66+
}
67+
})
68+
});
69+
70+
var border = 'rgb(0, 255, 0)';
71+
var tests = [
72+
'div ^ div',
73+
':host ^ div',
74+
'div ^^ div',
75+
':host ^^ div'
76+
];
77+
78+
function makeRule(s) {
79+
return document.createTextNode(s + '{ border: 1px solid ' + border + '; }');
80+
}
81+
82+
function testRule(s, r, test) {
83+
var ret;
84+
s.appendChild(r);
85+
ret = test();
86+
s.removeChild(r);
87+
return ret;
88+
}
89+
90+
var results = [
91+
// across: styles
92+
// down: elements
93+
[
94+
[ 0, 0, 0, 0, 0 ],
95+
[ 0, 0, 0, 0, 0 ],
96+
[ 1, 0, 0, 0, 0 ],
97+
[ 1, 0, 0, 0, 0 ],
98+
[ 0, 1, 0, 1, 0 ],
99+
[ 0, 1, 0, 1, 0 ]
100+
],
101+
[
102+
[ 0, 0, 0, 0, 0 ],
103+
[ 0, 0, 0, 0, 0 ],
104+
[ 0, 1, 0, 1, 0 ],
105+
[ 0, 1, 0, 1, 0 ],
106+
[ 0, 0, 1, 0, 0 ],
107+
[ 0, 0, 0, 0, 1 ]
108+
],
109+
[
110+
[ 0, 0, 0, 0, 0 ],
111+
[ 1, 0, 0, 0, 0 ],
112+
[ 1, 0, 0, 0, 0 ],
113+
[ 1, 0, 0, 0, 0 ],
114+
[ 1, 1, 0, 1, 0 ],
115+
[ 1, 1, 0, 1, 0 ]
116+
],
117+
[
118+
[ 0, 0, 0, 0, 0 ],
119+
[ 0, 0, 0, 0, 0 ],
120+
[ 0, 1, 0, 1, 0 ],
121+
[ 0, 1, 0, 1, 0 ],
122+
[ 0, 1, 1, 1, 0 ],
123+
[ 0, 1, 0, 1, 1 ]
124+
]
125+
];
126+
127+
results.forEach(function(r, ix) {
128+
var rule = makeRule(tests[ix]);
129+
var el, style, ex;
130+
for(var i = 0; i < r.length; i++) {
131+
el = elements[i];
132+
for (var j = 0; j < r[i].length; j++) {
133+
style = styles[j];
134+
ex = r[i][j];
135+
testRule(style, rule, function() {
136+
// force style recalc
137+
el.offsetHeight;
138+
var c = getComputedStyle(el, null).getPropertyValue('border-color');
139+
var matches = c === border;
140+
var matchesExpectation = !(matches ^ ex);
141+
if (!matchesExpectation) {
142+
console.log(el.id, style.id, tests[ix]);
143+
console.log('expected: %s, actual: %s', ex ? border : 'rgb(0, 0, 0)', c);
144+
}
145+
});
146+
}
147+
}
148+
});
149+
</script>
150+
</body>
151+
</html>

‎dfreedm/cat-hat/polymer.html

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Cat and Hat</title>
6+
<script src="../../../polymer/polymer.js"></script>
7+
</head>
8+
<body>
9+
10+
<style id="style1">
11+
body ^^ x-baz ^^ x-nub {
12+
background: yellow;
13+
}
14+
</style>
15+
16+
<polymer-element name="x-bar" noscript>
17+
<template>
18+
<div>x-bar</div>
19+
<style id="style3">
20+
</style>
21+
<div id="d">d</div>
22+
</template>
23+
</polymer-element>
24+
25+
<polymer-element name="x-foo" noscript>
26+
<template>
27+
<div>x-foo</div>
28+
<style id="style2">
29+
:host(.foo) ^ x-quux {
30+
display: block;
31+
border: 1px solid red;
32+
}
33+
</style>
34+
<x-bar id="b">b</x-bar>
35+
</template>
36+
</polymer-element>
37+
38+
<polymer-element name="x-baz" extends="x-foo" noscript>
39+
<template>
40+
<div>x-baz</div>
41+
<style id="style4">
42+
:host(.foo) ^ x-quux {
43+
display: block;
44+
border: 1px solid black;
45+
}
46+
</style>
47+
<x-quux id="c">c</x-quux>
48+
<x-nub class="nested"></x-nub>
49+
<shadow></shadow>
50+
</template>
51+
</polymer-element>
52+
53+
<polymer-element name="x-quux" noscript>
54+
<template>
55+
<div>x-quux</div>
56+
<style id="style5">
57+
</style>
58+
<div id="e">e</div>
59+
</template>
60+
</polymer-element>
61+
62+
<polymer-element name="x-nub" noscript>
63+
<template>
64+
x-nub
65+
</template>
66+
</polymer-element>
67+
68+
<div class="foo">
69+
<x-baz id="host">
70+
<div id="a">a</div>
71+
</x-baz>
72+
</div>
73+
74+
<x-nub></x-nub>
75+
76+
</body>
77+
</html>

0 commit comments

Comments
 (0)