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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
<html>
<head>
<title>Pseudo Element Matching in Shadow DOM</title>
<style>
input[type=range] {
-webkit-appearance: none;
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsText();
var head;
var input;
var logDiv;
var NAMESPACE_DECLARATION = '@namespace "http://example.com/foo/namespace";\n@namespace html "http://www.w3.org/1999/xhtml";\n';
var SELECTOR_TEST_PROPERTIES = ' { height: 1px; -webkit-appearance: none; border: none; }';
var SELECTORS = [
'::-webkit-slider-thumb',
'*::-webkit-slider-thumb',
'input::-webkit-slider-thumb',
'#foo::-webkit-slider-thumb',
'input#foo::-webkit-slider-thumb',
'input.bar::-webkit-slider-thumb',
'input[type=range]::-webkit-slider-thumb'
];
var DISABLED_SELECTORS = SELECTORS.map(function(selector) { return selector + ':disabled'; });
var HOVER_SELECTORS = SELECTORS.map(function(selector) { return selector + ':hover'; });
var DESCENDANT_ID_SELECTORS = SELECTORS.map(function(selector) { return '#baz ' + selector; });
var DESCENDANT_CLASS_SELECTORS = SELECTORS.map(function(selector) { return '.qux ' + selector; });
var DIRECT_SIBLING_ID_SELECTORS = SELECTORS.map(function(selector) { return '#sib + ' + selector; });
var INDIRECT_SIBLING_ID_SELECTORS = SELECTORS.map(function(selector) { return '#sib ~ ' + selector; });
var DIRECT_SIBLING_CLASS_SELECTORS = SELECTORS.map(function(selector) { return '.ling + ' + selector; });
var INDIRECT_SIBLING_CLASS_SELECTORS = SELECTORS.map(function(selector) { return '.ling ~ ' + selector; });
// convenience constants
var MATCH = true;
var NO_MATCH = false;
var WITH_NAMESPACES = true;
function log(msg, success)
{
logDiv.appendChild(document.createElement('div')).innerHTML = msg + (arguments.length == 1 ? '' : (': ' + (success ? 'PASS' : 'FAIL')));
}
function hoverOverSliderThumb()
{
if (!window.eventSender)
return false;
var x = input.offsetLeft + input.offsetWidth / 2;
var y = input.offsetTop + input.offsetHeight / 2;
eventSender.mouseMoveTo(x, y);
return true;
}
function runSelectorTest(matchExpected, selector, useNamespaces)
{
var style = document.createElement('style');
style.textContent = (useNamespaces ? NAMESPACE_DECLARATION : '') + selector + SELECTOR_TEST_PROPERTIES;
head.appendChild(style);
var matched = input.offsetHeight == 1;
log('<code>' + selector + '</code>' + (useNamespaces ? ', where HTML is not default namespace' : '') + ' <strong>should' + (matchExpected ? '' : ' not') + '</strong> match', matchExpected ? matched : !matched);
head.removeChild(style);
}
function runTest()
{
head = document.getElementsByTagName('head')[0];
input = document.getElementsByTagName('input')[0];
testContainer = document.getElementById('baz');
logDiv = document.getElementById('log');
log('Basic selector tests:');
runSelectorTest(MATCH, '::-webkit-slider-thumb');
runSelectorTest(MATCH, '*::-webkit-slider-thumb');
runSelectorTest(NO_MATCH, '::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(NO_MATCH, '*|::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(MATCH, '*|*::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(NO_MATCH, 'html|::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(MATCH, 'html|*::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(MATCH, '#foo::-webkit-slider-thumb');
runSelectorTest(MATCH, '.bar::-webkit-slider-thumb');
runSelectorTest(NO_MATCH, '#foo::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(NO_MATCH, '.bar::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(NO_MATCH, 'html|#foo::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(NO_MATCH, 'html|.bar::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(NO_MATCH, '*|#foo::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(MATCH, 'input::-webkit-slider-thumb');
runSelectorTest(MATCH, 'input#foo::-webkit-slider-thumb');
runSelectorTest(MATCH, 'input.bar::-webkit-slider-thumb');
runSelectorTest(NO_MATCH, 'input::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(NO_MATCH, 'input#foo::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(NO_MATCH, 'input.bar::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(MATCH, 'html|input::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(MATCH, 'html|input#foo::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(MATCH, 'html|input.bar::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(MATCH, '*|input#foo::-webkit-slider-thumb', WITH_NAMESPACES);
runSelectorTest(MATCH, 'input[type=range]::-webkit-slider-thumb');
runSelectorTest(MATCH, 'input#foo[type=range]::-webkit-slider-thumb');
runSelectorTest(MATCH, 'input.bar[type=range]::-webkit-slider-thumb');
log('<br>Shouldn\'t ignore selector after the unknown pseudo element:');
DISABLED_SELECTORS.forEach(expectNoMatch);
input.disabled = true;
log('<br>Should not match disabled input, because the disabled state is on the input, not the thumb:');
DISABLED_SELECTORS.forEach(expectNoMatch);
input.disabled = false;
if (!hoverOverSliderThumb()) {
log(':hover tests require DRT');
return;
}
log('<br>Should match :hover when the mouse is over the slider thumb:');
HOVER_SELECTORS.forEach(expectMatch);
log('<br>Should match when combined with descendant selectors:');
DESCENDANT_ID_SELECTORS.forEach(expectMatch);
DESCENDANT_CLASS_SELECTORS.forEach(expectMatch);
log('<br>Should match when combined with sibling selectors:');
DIRECT_SIBLING_ID_SELECTORS.forEach(expectMatch);
INDIRECT_SIBLING_ID_SELECTORS.forEach(expectMatch);
DIRECT_SIBLING_CLASS_SELECTORS.forEach(expectMatch);
INDIRECT_SIBLING_CLASS_SELECTORS.forEach(expectMatch);
testContainer.parentNode.removeChild(testContainer);
}
function expectNoMatch(selector) {
runSelectorTest(NO_MATCH, selector);
}
function expectMatch(selector) {
runSelectorTest(MATCH, selector);
}
</script>
</head>
<body onload="runTest()">
<p>Tests various selector combinations, containing unknown pseudo element selectors.</p>
<div id="baz" class="qux">
<span id="sib" class="ling">Sibling</span>
<input id="foo" class="bar" type="range">
</div>
<div id="log"></div>
</body>
</html>
|
