155 lines
5.2 KiB
HTML
155 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<p>Tests for retargeting touch targets. This test requires touch events support and runUIScript.</p>
|
|
<script>
|
|
|
|
function block(width, height, color) {
|
|
return {display: 'block', width: width + 'px', height: height + 'px', backgroundColor: color};
|
|
}
|
|
|
|
function inlineBlock(width, height, color) {
|
|
return {display: 'inline-block', width: width + 'px', height: height + 'px', backgroundColor: color};
|
|
}
|
|
|
|
function addChildren(parent, children) {
|
|
for (var child of children) {
|
|
if (typeof(child) == 'string')
|
|
child = document.createTextNode(child);
|
|
parent.appendChild(child);
|
|
}
|
|
}
|
|
|
|
function element(name, children) {
|
|
var element = document.createElement(name);
|
|
element.treeName = name;
|
|
if (children)
|
|
addChildren(element, children);
|
|
return element;
|
|
}
|
|
|
|
function elementWithStyle(name, style, children) {
|
|
var newElement = element(name, children);
|
|
for (var name in style)
|
|
newElement.style[name] = style[name];
|
|
return newElement;
|
|
}
|
|
|
|
function attachShadow(name, element, shadowChildren) {
|
|
var shadowRoot = element.attachShadow({mode: 'closed'});
|
|
shadowRoot.treeName = name;
|
|
element.shadowTree = shadowRoot;
|
|
addChildren(shadowRoot, shadowChildren);
|
|
return shadowRoot;
|
|
}
|
|
|
|
/*
|
|
parent
|
|
+ left-host -- (left-shadow)
|
|
| + left-shadow-target
|
|
+ right-upper-host --------------------------------- (right-upper-shadow)
|
|
| + right-lower-host -- (right-lower-shadow) + right-shadow-child
|
|
| + right-target + right-lower-shadow-child + slot
|
|
| + slot
|
|
+ bottomTarget
|
|
*/
|
|
|
|
var leftHost = elementWithStyle('left-host', block(200, 150, 'yellow'));
|
|
var leftTarget = elementWithStyle('left-shadow-target', block(100, 100, 'red'));
|
|
var leftShadowRoot = attachShadow('left-shadow', leftHost, [leftTarget]);
|
|
|
|
var rightTarget = elementWithStyle('right-target', block(50, 50, 'blue'));
|
|
var rightLowerHost = elementWithStyle('right-lower-host', block(100, 100, 'purple'), [rightTarget]);
|
|
var rightLowerShadowRoot = attachShadow('right-lower-shadow', rightLowerHost, [
|
|
elementWithStyle('right-lower-shadow-child', block(100, 100, 'pink'), [
|
|
element('slot')
|
|
])]);
|
|
|
|
var rightUpperHost = elementWithStyle('right-upper-host', block(250, 250, 'green'), [rightLowerHost]);
|
|
var rightUpperShadowRoot = attachShadow('right-upper-shadow', rightUpperHost, [
|
|
elementWithStyle('right-shadow-child', block(200, 200, 'purple'), [
|
|
element('slot')
|
|
])]);
|
|
|
|
var bottomTarget = elementWithStyle('bottom-target', block(100, 100, '#666'));
|
|
|
|
document.body.appendChild(elementWithStyle('host-parent', block(500, 500, '#eee'), [leftHost, rightUpperHost, bottomTarget]));
|
|
|
|
function getUIScript()
|
|
{
|
|
function xCenter(element) { return element.offsetLeft + element.offsetWidth / 2; }
|
|
function yCenter(element) { return element.offsetTop + element.offsetHeight / 2; }
|
|
|
|
return `
|
|
(function() {
|
|
uiController.touchDownAtPoint(${xCenter(leftTarget)}, ${yCenter(leftTarget)}, 1, function() {
|
|
uiController.touchDownAtPoint(${xCenter(rightTarget)}, ${yCenter(rightTarget)}, 2, function() {
|
|
uiController.touchDownAtPoint(${xCenter(bottomTarget)}, ${yCenter(bottomTarget)}, 3, function() {
|
|
uiController.liftUpAtPoint(${xCenter(leftTarget)}, ${yCenter(leftTarget)}, 2, function () {
|
|
uiController.liftUpAtPoint(${xCenter(rightTarget)}, ${yCenter(rightTarget)}, 1, function () {
|
|
uiController.liftUpAtPoint(${xCenter(bottomTarget)}, ${yCenter(bottomTarget)}, 0, function () {
|
|
uiController.uiScriptComplete("Done");
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
})();`
|
|
}
|
|
|
|
window.onload = function runTest()
|
|
{
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
function formatTouchList(list) {
|
|
var text = '';
|
|
for (var i = 0; i < list.length; i++) {
|
|
if (text)
|
|
text += ', ';
|
|
text += `${i}: ${list[i].target.treeName}`;
|
|
}
|
|
return `[${text}]`;
|
|
}
|
|
|
|
var output = '';
|
|
|
|
function logger(event) {
|
|
output += `${event.type} at ${this.treeName} with
|
|
target: ${event.target.treeName}
|
|
touches: ${formatTouchList(event.touches)}
|
|
targetTouches: ${formatTouchList(event.targetTouches)}
|
|
changedTouches: ${formatTouchList(event.changedTouches)}
|
|
|
|
`;
|
|
}
|
|
|
|
function attachLoggers(node) {
|
|
node.addEventListener('touchstart', logger);
|
|
node.addEventListener('touchmove', logger);
|
|
node.addEventListener('touchend', logger);
|
|
}
|
|
|
|
document.body.treeName = 'body';
|
|
document.treeName = 'document';
|
|
attachLoggers(document);
|
|
attachLoggers(leftShadowRoot);
|
|
attachLoggers(rightUpperShadowRoot);
|
|
attachLoggers(rightLowerShadowRoot);
|
|
|
|
if (window.testRunner && testRunner.runUIScript) {
|
|
testRunner.waitUntilDone();
|
|
testRunner.runUIScript(getUIScript(), function(result) {
|
|
var pre = document.createElement('pre');
|
|
pre.textContent = output;
|
|
document.body.appendChild(pre);
|
|
testRunner.notifyDone();
|
|
});
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|