<!DOCTYPE html>
<html>
<head>
<title>Touch Adjustment : Plugin boundary - bug ????</title>
<script src="../resources/js-test.js"></script>
<script src="resources/touchadjustment.js"></script>
<style>
#plugin {
height: 160px;
margin-left: 10px;
margin-top: 10px;
width: 320px;
}
#toolbar {
-webkit-box-align: stretch;
-webkit-box-orient: horizontal;
display: -webkit-box;
margin-left: 10px;
}
</style>
</head>
<body>
<div id=sandbox>
<embed id="plugin" type="Application/x-webkit-test-webplugin">
<div id="toolbar" onckick="function(){}">
<button id="button1">A</button>
<button id="button2">B</button>
<button id="button3">C</button>
</div>
</div>
<p id='description'></p>
<div id='console'></div>
<script>
// Set up shortcut access to elements
var ids = ['sandbox', 'plugin', 'toolbar', 'button1', 'button2', 'button3'];
var e = {};
ids.forEach(function(a) {
e[a] = document.getElementById(a);
});
var bounds = {};
ids.forEach(function(a) {
bounds[a] = findAbsoluteBounds(e[a]);
});
function testMidpoint(id)
{
var x = bounds[id].left + bounds[id].width / 2;
var y = bounds[id].top + bounds[id].height / 2;
testTouchPoint(touchPoint(x, y, 10), e[id]);
}
function testBoundary(buttonId)
{
var x = bounds[buttonId].left + bounds[buttonId].width / 2;
var y = (bounds['plugin'].top + bounds['plugin'].height + bounds[buttonId].top) / 2;
testTouchPoint(touchPoint(x, y - 5, 10), e['plugin']);
testTouchPoint(touchPoint(x, y + 5, 10), e[buttonId]);
}
function testDirectTouches()
{
debug('Test direct hits.');
testMidpoint('plugin');
testMidpoint('button1');
testMidpoint('button2');
testMidpoint('button3');
}
function testIndirectTouches()
{
debug('Test hits spanning the plugin boundary.');
testBoundary('button1');
testBoundary('button2');
testBoundary('button3');
}
function runTests()
{
if (window.testRunner && window.internals && internals.touchNodeAdjustedToBestClickableNode) {
description('Tests touch-adjustment at a plugin boundary.');
testDirectTouches();
testIndirectTouches();
e['sandbox'].style.display = 'none';
}
}
runTests();
</script>
</body>
</html>