mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1000870 - Add original official tests from W3C at 2015.03.01. r=smaug

This commit is contained in:
Maksim Lebedev 2015-03-31 07:02:00 +02:00
Родитель c797ca6392
Коммит fb06661214
67 изменённых файлов: 5764 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

57
dom/events/test/pointerevents/pointerevent_button_attribute_mouse-manual.html Normal file
Просмотреть файл

@ -0,0 +1,57 @@
<!doctype html>
<html>
<head>
<title>Button and buttons attribute test for mouse</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>Button attribute test for mouse</h1>
<h2>This test is for mouse only</h2>
<h4>
Test Description: This test checks if button attribute for mouse handled properly.
<p>Put your mouse over the black rectangle</p>
</h4>
<p>
<div id="target0" style="background:black"></div>
<script>
var eventTested = false;
var detected_pointertypes = {};
setup({ explicit_done: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
// If pointerType is "mouse" and no mouse button is depressed, then the button attribute of the pointermove event must be -1 and the buttons attribute must be 0.
// TA: 5.8
on_event(target0, "pointerover", function (event) {
detected_pointertypes[event.pointerType] = true;
if(event.pointerType != "mouse") {
alert("Use mouse for this test please!");
return;
}
if (eventTested == false) {
test(function() {
assert_true(event.button == -1, "If mouse buttons are released button attribute is -1")
}, "If mouse buttons are released button attribute is -1");
test(function() {
assert_true(event.buttons == 0, "If mouse buttons are released buttons attribute is 0")
}, "If mouse buttons are released buttons attribute is 0");
eventTested = true;
done();
}
});
}
</script>
<h1>Pointer Events button attribute test for mouse test</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

132
dom/events/test/pointerevents/pointerevent_capture_mouse-manual.html Normal file
Просмотреть файл

@ -0,0 +1,132 @@
<!doctype html>
<html>
<head>
<title>Set/Release capture</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body>
<h1>Pointer Events capture test</h1>
<h4>
Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions:
<ol>
<li> Move your mouse over the black rectangle. pointermove event should be logged in the black rectangle</li>
<li> Move your mouse over the purple rectangle. pointerover event should be logged in the purple rectangle</li>
<li> Press and hold left mouse button over "Set Capture" button. "gotpointercapture" should be logged in the black rectangle</li>
<li> Move your mouse anywhere. pointermove should be logged in the black rectangle</li>
<li> Move your mouse over the purple rectangle. Nothig should happen</li>
<li> Move your mouse over the black rectangle. pointermove should be logged in the black rectangle</li>
<li> Release left mouse button. "lostpointercapture" should be logged in the black rectangle</li>
</ol>
</h4>
Test passes if the proper behaviour of the events is observed.
<div id="target0"></div>
<br>
<div id="target1"></div>
<br>
<input type="button" id="btnCapture" value="Set Capture">
<script type='text/javascript'>
var isPointerCapture = false;
var pointermoveNoCaptureGot0 = false;
var pointermoveCaptureGot0 = false;
var pointermoveNoCaptureGot1 = false;
var ownEventForTheCapturedTargetGot = false;
var count=0;
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var target0 = document.getElementById('target0');
var target1 = document.getElementById('target1');
var captureButton = document.getElementById('btnCapture');
var test_gotpointercapture = async_test("gotpointercapture event received");
var test_lostpointercapture = async_test("lostpointercapture event received");
window.onload = function() {
on_event(captureButton, 'pointerdown', function(e) {
if(isPointerCapture == false) {
isPointerCapture = true;
sPointerCapture(e);
}
});
on_event(target0, 'gotpointercapture', function(e) {
test_gotpointercapture.done();
log("gotpointercapture", target0);
});
on_event(target0, 'lostpointercapture', function(e) {
test_lostpointercapture.done();
isPointerCapture = false;
log("lostpointercapture", target0);
});
run();
}
function run() {
var test_pointermove0 = async_test("pointerover event for black rectangle received")
var test_pointermove1 = async_test("pointerover event for purple rectangle received")
on_event(target0, "pointermove", function (event) {
detected_pointertypes[ event.pointerType ] = true;
if(!pointermoveNoCaptureGot0) {
test_pointermove0.done();
log("pointermove", document.getElementById('target0'));
pointermoveNoCaptureGot0 = true;
}
if(isPointerCapture) {
if(!pointermoveCaptureGot0) {
test(function() {
assert_true(event.relatedTarget==null, "relatedTarget is null when the capture is set")
}, "relatedTarget is null when the capture is set. relatedTarget is " + event.relatedTarget);
test(function() {
assert_true((event.clientX < target0.getBoundingClientRect().left)||
(event.clientX > target0.getBoundingClientRect().right)||
(event.clientY < target0.getBoundingClientRect().top)||
(event.clientY > target0.getBoundingClientRect().bottom),
"pointermove received for captured element while out of it")
}, "pointermove received for captured element while out of it");
log("pointermove", document.getElementById('target0'));
pointermoveCaptureGot0 = true;
}
if((event.clientX > target0.getBoundingClientRect().left)&&
(event.clientX < target0.getBoundingClientRect().right)&&
(event.clientY > target0.getBoundingClientRect().top)&&
(event.clientY < target0.getBoundingClientRect().bottom)&&
!ownEventForTheCapturedTargetGot) {
test(function() {
assert_true(true, "pointermove received for captured element while inside of it");
}, "pointermove received for captured element while inside of it");
log("pointermove", document.getElementById('target0'));
ownEventForTheCapturedTargetGot = true;
}
}
});
on_event(target1, "pointermove", function (event) {
if(isPointerCapture == true) {
test(function() {
assert_unreached("pointermove shouldn't trigger for this target when capture is enabled");
}, "pointermove shouldn't trigger for the purple rectangle while the black rectangle has capture");
}
if(!pointermoveNoCaptureGot1) {
test_pointermove1.done();
log("pointermove", document.getElementById('target1'));
pointermoveNoCaptureGot1 = true;
}
});
}
</script>
<h1>Pointer Events Capture Test</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

175
dom/events/test/pointerevents/pointerevent_capture_suppressing_mouse-manual.html Normal file
Просмотреть файл

@ -0,0 +1,175 @@
<!doctype html>
<html>
<head>
<title>Set/Release capture</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body>
<h1>Pointer Events capture test</h1>
<h4>
Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions:
<ol>
<li> Put your mouse over the black rectangle. pointerover and pointerenter should be logged inside of it.</li>
<li> Move your mouse out of the black rectangle. pointerout and pointerleave should be logged inside of it</li>
<li> Put your mouse over the purple rectangle. pointerover and pointerenter should be logged inside of it.</li>
<li> Move your mouse out of the purple rectangle. pointerout and pointerleave should be logged inside of it</li>
<li> Press and hold left mouse button over "Set Capture" button. "gotpointercapture" should be logged in the black rectangle</li>
<li> Put your mouse over the purple rectangle and then move it out. Nothing should happen</li>
<li> Put your mouse over the black rectangle. pointerover and pointerenter should be logged inside of it.</li>
<li> Move your mouse out of the black rectangle. pointerout and pointerleave should be logged inside of it</li>
<li> Release left mouse button. "lostpointercapture" should be logged in the black rectangle</li>
</ol>
</h4>
Test passes if the proper behaviour of the events is observed.
<div id="target0"></div>
<br>
<div id="target1"></div>
<br>
<input type="button" id="btnCapture" value="Set Capture">
<script type='text/javascript'>
var isPointerCapture = false;
var isRelatedTargetValueTested = false;
var count = 0;
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var target0 = document.getElementById('target0');
var target1 = document.getElementById('target1');
var captureButton = document.getElementById('btnCapture');
var test_gotpointercapture = async_test("gotpointercapture event received");
var test_lostpointercapture = async_test("lostpointercapture event received");
var test_pointerover_no_capture = async_test("pointerover event without capture received");
var test_pointerover_capture = async_test("pointerover event with capture received");
var test_pointerout_no_capture = async_test("pointerout event without capture received");
var test_pointerout_capture = async_test("pointerout event with capture received");
var test_pointerenter_no_capture = async_test("pointerenter event without capture received");
var test_pointerenter_capture = async_test("pointerenter event with capture received");
var test_pointerleave_no_capture = async_test("pointerleave event without capture received");
var test_pointerleave_capture = async_test("pointerleave event with capture received");
window.onload = function() {
on_event(captureButton, 'pointerdown', function(e) {
if(isPointerCapture == false) {
sPointerCapture(e);
isPointerCapture = true;
}
});
on_event(target0, 'gotpointercapture', function(e) {
test_gotpointercapture.done();
log("gotpointercapture", target0);
});
on_event(target0, 'lostpointercapture', function(e) {
isPointerCapture = false;
test_lostpointercapture.done();
log("lostpointercapture", target0);
});
run();
}
function run() {
on_event(target0, "pointerover", function (event) {
detected_pointertypes[ event.pointerType ] = true;
log("pointerover", target0);
if(isPointerCapture) {
test_pointerover_capture.done();
if (!isRelatedTargetValueTested) {
test(function() {
assert_true(event.relatedTarget==null, "relatedTarget is null when the capture is set")
}, "relatedTarget is null when the capture is set. relatedTarget is " + event.relatedTarget);
isRelatedTargetValueTested = true;
}
}
else {
test_pointerover_no_capture.done();
}
});
on_event(target0, "pointerout", function (event) {
log("pointerout", target0);
if(isPointerCapture) {
test_pointerout_capture.done();
}
else {
test_pointerout_no_capture.done();
}
});
on_event(target0, "pointerenter", function (event) {
log("pointerenter", target0);
if(isPointerCapture) {
test_pointerenter_capture.done();
}
else {
test_pointerenter_no_capture.done();
}
});
on_event(target0, "pointerleave", function (event) {
log("pointerleave", target0);
if(isPointerCapture) {
test_pointerleave_capture.done();
}
else {
test_pointerleave_no_capture.done();
}
});
// fail if capture is set but event is received for the non-captured target
on_event(target1, "pointerover", function (event) {
log("pointerover", target1);
if(isPointerCapture == true) {
test(function() {
assert_unreached("pointerover shouldn't trigger for this target when capture is enabled");
}, "pointerover shouldn't trigger for the purple rectangle while the black rectangle has capture");
}
});
on_event(target1, "pointerout", function (event) {
log("pointerout", target1);
if(isPointerCapture == true) {
test(function() {
assert_unreached("pointerout shouldn't trigger for this target when capture is enabled");
}, "pointerout shouldn't trigger for the purple rectangle while the black rectangle has capture");
}
});
on_event(target1, "pointerenter", function (event) {
log("pointerenter", target1);
if(isPointerCapture == true) {
test(function() {
assert_unreached("pointerenter shouldn't trigger for this target when capture is enabled");
}, "pointerenter shouldn't trigger for the purple rectangle while the black rectangle has capture");
}
});
on_event(target1, "pointerleave", function (event) {
log("pointerleave", target1);
if(isPointerCapture == true) {
test(function() {
assert_unreached("pointerleave shouldn't trigger for this target when capture is enabled");
}, "pointerleave shouldn't trigger for the purple rectangle while the black rectangle has capture");
}
});
}
</script>
<h1>Pointer Events Capture Test</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

135
dom/events/test/pointerevents/pointerevent_change-touch-action-onpointerdown_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,135 @@
<!doctype html>
<html>
<head>
<title>Change touch-action on pointerdown</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
background: black;
width: 700px;
height: 430px;
color: white;
overflow-y: auto;
overflow-x: auto;
white-space: nowrap;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4>Test Description: Press and hold your touch. Try to scroll text in any direction.
Then release your touch and try to scroll again. Expected: no panning.
</h4>
<p>Note: this test is for touch-devices only</p>
<div id="target0" style="touch-action: auto;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<script type='text/javascript'>
var detected_pointertypes = {};
var styleIsChanged = false;
var scrollIsReceived = false;
var firstTouchCompleted = false;
var countToPass = 50;
var xScr0, yScr0, xScr1, yScr1;
setup({ explicit_done: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, 'scroll', function(event) {
if(!scrollIsReceived && firstTouchCompleted) {
test(function() {
failOnScroll();
}, "scroll was received while shouldn't");
scrollIsReceived = true;
}
done();
});
on_event(target0, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
if(!styleIsChanged) {
var before = document.getElementById('target0').style.touchAction;
document.getElementById('target0').style.touchAction = 'none';
var after = document.getElementById('target0').style.touchAction;
test(function() {
assert_true(before != after, "touch-action was changed");
}, "touch-action was changed");
styleIsChanged = true;
}
});
on_event(target0, 'pointerup', function(event) {
firstTouchCompleted = true;
});
}
</script>
<h1>touch-action: auto to none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

104
dom/events/test/pointerevents/pointerevent_constructor.html Normal file
Просмотреть файл

@ -0,0 +1,104 @@
<!doctype html>
<html>
<head>
<title>PointerEvent: Constructor test</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>PointerEvent: Dispatch custom event</h1>
<h4>Test Description: This test checks if PointerEvent constructor works properly using synthetic pointerover and pointerout events. For valid results, this test must be run without generating real (trusted) pointerover or pointerout events on the black rectangle below.</h4>
<div id="target0"></div>
<script>
var eventTested = false;
var detected_pointertypes = {};
setup({ explicit_done: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
// set values for non-default constructor
var testBubbles = true;
var testCancelable = true;
var testPointerId = 42;
var testPointerType = 'pen';
var testClientX = 300;
var testClientY = 500;
var testWidth = 3;
var testHeight = 5;
var testTiltX = -45;
var testTiltY = 30;
var testPressure = 0.4;
var testIsPrimary = true;
var pointerEventCustom;
var pointerEventDefault;
on_event(target0, "pointerover", function(event) {
detected_pointertypes[ event.pointerType ] = true;
generate_tests(assert_equals, [
["custom bubbles", event.bubbles, testBubbles],
["custom cancelable", event.cancelable, testCancelable],
["custom pointerId", event.pointerId, testPointerId],
["custom pointerType", event.pointerType, testPointerType],
["custom width", event.width, testWidth],
["custom height", event.height, testHeight],
["custom clientX", event.clientX, testClientX],
["custom clientY", event.clientY, testClientY],
["custom tiltX", event.tiltX, testTiltX],
["custom tiltY", event.tiltY, testTiltY],
["custom isPrimary", event.isPrimary, testIsPrimary]
]);
test(function() {
assert_approx_equals(event.pressure, testPressure, 0.00000001, "custom pressure: ");
}, "custom pressure: ");
});
on_event(target0, "pointerout", function(event) {
generate_tests(assert_equals, [
["default pointerId", event.pointerId, 0],
["default pointerType", event.pointerType, ""],
["default width", event.width, 0],
["default height", event.height, 0],
["default tiltX", event.tiltX, 0],
["default tiltY", event.tiltY, 0],
["default pressure", event.pressure, 0],
["default isPrimary", event.isPrimary, false]
]);
});
test(function() {
assert_not_equals(window.PointerEvent, undefined);
pointerEventCustom = new PointerEvent("pointerover",
{bubbles: testBubbles,
cancelable: testCancelable,
pointerId: testPointerId,
pointerType: testPointerType,
width: testWidth,
height: testHeight,
clientX: testClientX,
clientY: testClientY,
tiltX: testTiltX,
tiltY: testTiltY,
pressure: testPressure,
isPrimary: testIsPrimary
});
// A PointerEvent created with a PointerEvent constructor must have all its attributes set to the corresponding values provided to the constructor.
// For attributes where values are not provided to the constructor, the corresponding default values must be used.
// TA: 12.1
target0.dispatchEvent(pointerEventCustom);
pointerEventDefault = new PointerEvent("pointerout");
target0.dispatchEvent(pointerEventDefault);
done();
}, "PointerEvent constructor");
}
</script>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

97
dom/events/test/pointerevents/pointerevent_gotpointercapture_before_first_pointerevent-manual.html Normal file
Просмотреть файл

@ -0,0 +1,97 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: gotpiontercapture is fired first and asynchronously.</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<meta name="assert" content="After setting capture, the gotpointercapture dispatched to the capturing element before any other event is fired." />
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("gotpointercapture event"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var target0;
var listener;
var pointerdown_event;
var detected_pointerEvents = new Array();
var eventRcvd = false;
var isWaiting = false;
function run() {
target0 = document.getElementById("target0");
target0.style["touchAction"] = "none";
listener = document.getElementById("listener");
// listen to all events
for (var i = 0; i < All_Pointer_Events.length; i++) {
on_event(listener, All_Pointer_Events[i], function (event) {
if (event.type == "gotpointercapture") {
check_PointerEvent(event);
// TA: 10.2
assert_true(isWaiting, "gotpointercapture must be fired asynchronously");
isWaiting = false;
// if any events have been received with same pointerId before gotpointercapture, then fail
var eventsRcvd_str = "";
if (eventRcvd) {
eventsRcvd_str = "Events received before gotpointercapture: ";
for (var i = 0; i < detected_pointerEvents.length; i++) {
eventsRcvd_str += detected_pointerEvents[i] + ", ";
}
}
test_pointerEvent.step(function () {
assert_false(eventRcvd, "no other events should be received before gotpointercapture." + eventsRcvd_str);
assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerID is same for pointerdown and gotpointercapture");
});
}
else {
if (pointerdown_event.pointerId === event.pointerId) {
assert_false(isWaiting, event.type + " must be fired after gotpointercapture");
detected_pointerEvents.push(event.type);
eventRcvd = true;
test_pointerEvent.done(); // complete test
}
}
});
}
// set pointer capture
on_event(target0, "pointerdown", function (event) {
detected_pointertypes[event.pointerType] = true;
pointerdown_event = event;
listener.setPointerCapture(event.pointerId);
isWaiting = true;
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch gotpointercapture event</h1>
<h4>Test Description:
After pointer capture is set for a pointer, and prior to dispatching the first event for the pointer, the gotpointercapture
event must be dispatched to the element that is receiving the pointer capture. The gotpointercapture event must be dispatched asynchronously.
</h4>
<br />
<div id="target0">
Use the mouse, touch or pen to tap/click this box.
</div>
<div id="listener">Do not hover over or touch this element. </div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

78
dom/events/test/pointerevents/pointerevent_lostpointercapture_for_disconnected_node-manual.html Normal file
Просмотреть файл

@ -0,0 +1,78 @@
<!doctype html>
<html>
<head>
<title>Lostpointercapture fires on document when target is removed</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body>
<h1>Pointer Events - lostpointercapture when capturing element is removed</h1>
<h4>
Test Description:
This test checks if lostpointercapture is fired at the document when the capturing node is removed from the document.
Complete the following actions:
<ol>
<li>Press and hold left mouse button over "Set Capture" button. "gotpointercapture" should be logged inside of the black rectangle.
<li>"lostpointercapture" should be logged inside of the black rectangle after a short delay.
</ol>
</h4>
<div id="target0"></div>
<div id="target1" style="background:black; color:white"></div>
<br>
<input type="button" id="btnCapture" value="Set Capture">
<script type='text/javascript'>
var isDisconnected = false;
var count = 0;
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var target0 = document.getElementById('target0');
var target1 = document.getElementById('target1');
var captureButton = document.getElementById('btnCapture');
var test_lostpointercapture = async_test("lostpointercapture event received");
window.onload = function() {
on_event(captureButton, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
sPointerCapture(event);
});
on_event(target0, 'gotpointercapture', function(e) {
log("gotpointercapture", target1);
setTimeout(function() {
isDisconnected = true;
target0.parentNode.removeChild(target0);
}, 250);
});
on_event(target0, 'lostpointercapture', function(e) {
log("lostpointercapture on element", target1);
test(function() {
// TA: 11.3
assert_unreached("lostpointercapture must be fired on the document, not the capturing element");
}, "lostpointercapture must not be dispatched on the disconnected node");
});
on_event(document, 'lostpointercapture', function(e) {
log("lostpointercapture on document", target1);
test(function() {
// TA: 11.3
assert_true(isDisconnected, "lostpointercapture must be fired on the document");
}, "lostpointercapture is dispatched on the document");
test_lostpointercapture.done();
});
}
</script>
<h1>Pointer Events Capture Test</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

111
dom/events/test/pointerevents/pointerevent_lostpointercapture_is_first-manual.html Normal file
Просмотреть файл

@ -0,0 +1,111 @@
<!doctype html>
<html>
<head>
<title>Lostpointercapture triggers first and asynchronously</title>
<meta name="assert" content="TA11.1: After pointer capture is released for a pointer, and prior to any subsequent events for the pointer, the lostpointercapture event must be dispatched to the element from which pointer capture was removed; TA11.2: lostpointercapture must be dispatched asynchronously.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>Pointer Events capture test - lostpointercapture order</h1>
<h4>
Test Description:
This test checks if lostpointercapture is handled asynchronously and prior to all subsequent events.
Complete the following actions:
<ol>
<li>Press and hold left mouse button over "Set Capture" button. "gotpointercapture" should be logged inside of the black rectangle
<li>"lostpointercapture" should be logged inside of the black rectangle after a short delay
</ol>
</h4>
Test passes if lostpointercapture is dispatched after releasing the mouse button and before any additional pointer events.
<div id="target0" style="background:black; color:white"></div>
<br>
<input type="button" id="btnCapture" value="Set Capture">
<script type='text/javascript'>
var detected_pointertypes = {};
var detected_pointerEvents = new Array();
var pointerdown_event = null;
var test_pointerEvent = async_test("lostpointercapture is dispatched prior to subsequent events"); // set up test harness
var isPointerCapture = false;
var count=0;
var testStarted = false;
var eventRcvd = false;
var isAsync = false;
add_completion_callback(showPointerTypes);
var target0 = document.getElementById('target0');
var captureButton = document.getElementById('btnCapture');
function run() {
on_event(captureButton, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
pointerdown_event = event;
if(isPointerCapture == false) {
isPointerCapture = true;
captureButton.value = 'Release Capture';
sPointerCapture(event);
}
});
// After pointer capture is released for a pointer, and prior to any subsequent events for the pointer,
// the lostpointercapture event must be dispatched to the element from which pointer capture was removed.
// TA: 11.1
// listen to all events
for (var i = 0; i < All_Pointer_Events.length; i++) {
on_event(target0, All_Pointer_Events[i], function (event) {
// if the event was gotpointercapture, just log it and return
if (event.type == "gotpointercapture") {
testStarted = true;
rPointerCapture(event);
isAsync = true;
log("gotpointercapture", target0);
return;
}
else if (event.type == "lostpointercapture") {
log("lostpointercapture", target0);
captureButton.value = 'Set Capture';
isPointerCapture = false;
// TA: 11.2
test_pointerEvent.step(function () {
assert_true(isAsync, "lostpointercapture must be fired asynchronously");
});
// if any events have been received with same pointerId before lostpointercapture, then fail
var eventsRcvd_str = "";
if (eventRcvd) {
eventsRcvd_str = "Events received before lostpointercapture: ";
for (var i = 0; i < detected_pointerEvents.length; i++) {
eventsRcvd_str += detected_pointerEvents[i] + ", ";
}
}
test_pointerEvent.step(function () {
assert_false(eventRcvd, "no other events should be received before lostpointercapture." + eventsRcvd_str);
assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerID is same for pointerdown and lostpointercapture");
});
test_pointerEvent.done(); // complete test
}
else {
if (testStarted && pointerdown_event != null && pointerdown_event.pointerId === event.pointerId) {
detected_pointerEvents.push(event.type);
eventRcvd = true;
}
}
});
}
}
</script>
<h1>Pointer Events Capture Test</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

77
dom/events/test/pointerevents/pointerevent_pointercancel_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,77 @@
<!doctype html>
<html>
<head>
<title>PointerCancel - touch</title>
<meta name="viewport" content="width=device-width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body class="scrollable" onload="run()">
<h1>pointercancel test</h1>
<h3>Warning: this test works properly only for devices that have touchscreen</h3>
<h4>
Test Description: This test checks if pointercancel event triggers.
<p>Start touch over the black rectangle and then move your finger to scroll the page.</p>
</h4>
<p>
<div id="target0" style="background: black"></div>
<script>
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointercancel event received");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var pointerdown_event = null;
var pointercancel_event = null;
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerdown", function (event) {
pointerdown_event = event;
detected_pointertypes[event.pointerType] = true;
});
on_event(target0, "pointercancel", function (event) {
pointercancel_event = event;
test_pointerEvent.step(function () {
assert_not_equals(pointerdown_event, null, "pointerdown was received: ");
assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerId should be the same for pointerdown and pointercancel");
assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType should be the same for pointerdown and pointercancel");
assert_equals(event.isPrimary, pointerdown_event.isPrimary, "isPrimary should be the same for pointerdown and pointercancel");
check_PointerEvent(event);
});
});
on_event(target0, "pointerout", function (event) {
test_pointerEvent.step(function () {
assert_not_equals(pointercancel_event, null, "pointercancel was received before pointerout: ");
assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerId should be the same for pointerout and pointercancel");
assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType should be the same for pointerout and pointercancel");
assert_equals(event.isPrimary, pointerdown_event.isPrimary, "isPrimary should be the same for pointerout and pointercancel");
});
});
on_event(target0, "pointerleave", function (event) {
test_pointerEvent.step(function () {
assert_not_equals(pointercancel_event, null, "pointercancel was received before pointerleave: ");
assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerId should be the same for pointerleave and pointercancel");
assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType should be the same for pointerleave and pointercancel");
assert_equals(event.isPrimary, pointerdown_event.isPrimary, "isPrimary should be the same for pointerleave and pointercancel");
});
test_pointerEvent.done();
});
}
</script>
<h1>Pointer Events pointercancel Tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

59
dom/events/test/pointerevents/pointerevent_pointerdown-manual.html Normal file
Просмотреть файл

@ -0,0 +1,59 @@
<!doctype html>
<html>
<!--
Test cases for Pointer Events v1 spec
This document references Test Assertions (abbrev TA below) written by Cathy Chan
http://www.w3.org/wiki/PointerEvents/TestAssertions
-->
<head>
<title>Pointer Events pointerdown tests</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script>
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerdown event received");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var pointerover_event;
on_event(target0, "pointerover", function (event) {
detected_pointertypes[event.pointerType] = true;
pointerover_event = event;
check_PointerEvent(event);
});
on_event(target0, "pointerdown", function (event) {
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.pointerType, pointerover_event.pointerType, "pointerType is same for pointerover and pointerdown");
assert_equals(event.isPrimary, pointerover_event.isPrimary, "isPrimary is same for pointerover and pointerdown");
});
test_pointerEvent.done();
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Events pointerdown tests</h1>
<div id="target0">
Start with your pointing device outside of this box, then click here.
</div>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

52
dom/events/test/pointerevents/pointerevent_pointerenter-manual.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: Dispatch pointerenter. </title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="When a pointing device is moved into the hit test boundaries of an element or one of its descendants, the pointerenter event must be dispatched."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerenter event"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerenter", function (event) {
detected_pointertypes[event.pointerType] = true;
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.type, "pointerenter", "pointer event received: " + event.type);
});
test_pointerEvent.done(); // complete test
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch pointerenter</h1>
<h4>
Test Description:
When a pointing device is moved into the hit test boundaries of an element or one of its descendants, the pointerenter event must be dispatched.
</h4>
<div id="target0">
Use the mouse or pen to move over this box.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

88
dom/events/test/pointerevents/pointerevent_pointerenter_does_not_bubble-manual.html Normal file
Просмотреть файл

@ -0,0 +1,88 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: The pointerenter event does not bubble </title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="The pointerenter event must not bubble up to parent elements."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerEnter event does not bubble"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var pointerenter_event = null;
function run() {
var target0 = document.getElementById("target0");
var parent0 = document.getElementById("parent0");
on_event(target0, "pointerenter", function (event) {
pointerenter_event = event;
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.type, "pointerenter", "pointer event received: " + event.type);
assert_false(event.bubbles, "pointerenter event.bubbles should be false: " + event.bubbles);
});
});
on_event(target0, "pointerout", function (event) {
test_pointerEvent.step(function () {
assert_not_equals(pointerenter_event, null, "pointerout event was never received: ");
});
test_pointerEvent.done(); // complete test
});
// parent
on_event(parent0, "pointerenter", function (event) {
detected_pointertypes[event.pointerType] = true;
test_pointerEvent.step(function () {
assert_equals(event.target.id, "parent0", "Recieved " + event.type + " in parent for " + event.target.id);
});
});
}
</script>
<style>
#target0 {
background: purple;
border: 1px solid orange;
width:50px;
height:50px;
}
#parent0 {
background: black;
border: 1px solid orange;
width:100px;
height:100px;
}
</style>
</head>
<body onload="run()">
<h1> Pointer Event: pointerenter does not bubble</h1>
<h4>
Test Description:
The pointerenter event must not bubble up to parent elements.
</h4>
<div id="instructions">
Use the mouse or pen to hover over then out of the purple box nested in the black box. Or with touch, tap on the purple box.
</div>
<div id="parent0">
<div id="target0"></div>
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

74
dom/events/test/pointerevents/pointerevent_pointerenter_nohover-manual.html Normal file
Просмотреть файл

@ -0,0 +1,74 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: Dispatch pointerenter. (nohover)</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="When a pointing device that does not support hover is moved into the hit test boundaries of an element
or one of its descendants as a result of a pointerdown event, the pointerenter event must be dispatched. "/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerenter event"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var test_pointerEnter;
var f_pointerenter_rcvd = false;
var pointerenter_event;
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerdown", function (event) {
if(event.pointerType == 'touch') {
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.type, "pointerdown", "pointer event received: " + event.type);
assert_true(f_pointerenter_rcvd, "pointerenter event should have been received before pointerdown");
assert_equals(event.pointerType, pointerenter_event.pointerType, "pointerType is same for pointerenter and pointerdown");
assert_equals(event.isPrimary, pointerenter_event.isPrimary, "isPrimary is same for pointerenter and pointerdown");
});
test_pointerEvent.done(); // complete test
}
});
on_event(target0, "pointerenter", function (event) {
detected_pointertypes[event.pointerType] = true;
if(event.pointerType == 'touch') {
pointerenter_event = event;
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.type, "pointerenter", "pointer event received: " + event.type);
});
f_pointerenter_rcvd = true;
}
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch pointerenter (nohover)</h1>
<h4>
Test Description:
When a pointing device that does not support hover is moved into the hit test boundaries of an element or one of its
descendants as a result of a pointerdown event, the pointerenter event must be dispatched.
</h4>
<br />
<div id="target0">
Tap here.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

66
dom/events/test/pointerevents/pointerevent_pointerleave_after_pointercancel_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,66 @@
<!doctype html>
<html>
<head>
<title>pointerleave after pointercancel</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body class="scrollable" onload="run()">
<h2>pointerleave after pointercancel</h2>
<h4>Test Description: This test checks if pointerleave event triggers after pointercancel. Start touch on the black rectangle and move your touch to scroll in any direction. </h4>
<p>Note: this test is for touch devices only</p>
<div id="target0"></div>
<script>
var test_pointerleave = async_test("pointerleave event received");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var eventTested = false;
var pointercancel_event = null;
var detected_pointertypes = {};
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointercancel", function (event) {
detected_pointertypes[event.pointerType] = true;
pointercancel_event = event;
});
// After firing the pointercancel event the pointerleave event must be dispatched.
// TA: 4.3.1
on_event(target0, "pointerleave", function (event) {
if(event.pointerType == 'touch') {
if(pointercancel_event != null) {
if(eventTested == false) {
test_pointerleave.step(function() {
assert_equals(event.pointerType, pointercancel_event.pointerType, "pointerType is same for pointercancel and pointerleave");
assert_equals(event.isPrimary, pointercancel_event.isPrimary, "isPrimary is same for pointercancel and pointerleave");
});
eventTested = true;
test_pointerleave.done();
}
}
else {
test_pointerleave.step(function() {
assert_unreached("pointerleave received before pointercancel");
}, "pointerleave received before pointercancel");
}
}
});
}
</script>
<h1>Pointer Events pointerleave tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

67
dom/events/test/pointerevents/pointerevent_pointerleave_after_pointerup_nohover-manual.html Normal file
Просмотреть файл

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<title>pointerleave after pointerup</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h2>pointerleave after pointerup</h2>
<h4>Test Description: This test checks if pointerleave event triggers for devices that don't support hover. Tap the black rectangle. </h4>
<p>Note: this test is only for devices that do not support hover.</p>
<div id="target0"></div>
<script>
var test_pointerleave = async_test("pointerleave event received");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var eventTested = false;
var isPointerupReceived = false;
var pointerup_event = null;
var detected_pointertypes = {};
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerup", function (event) {
detected_pointertypes[event.pointerType] = true;
pointerup_event = event;
});
// For input devices that do not support hover, a pointerleave event must follow the pointerup event.
// TA: 3.6
on_event(target0, "pointerleave", function (event) {
if(event.pointerType == 'touch') {
if(pointerup_event != null) {
if(eventTested == false) {
eventTested = true;
test_pointerleave.step(function() {
assert_equals(event.pointerType, pointerup_event.pointerType, "pointerType is same for pointerup and pointerleave");
assert_equals(event.isPrimary, pointerup_event.isPrimary, "isPrimary is same for pointerup and pointerleave");
});
test_pointerleave.done();
}
}
else {
test_pointerleave.step(function() {
assert_unreached("pointerleave received before pointerup");
}, "pointerleave received before pointerup");
}
}
});
}
</script>
<h1>Pointer Events pointerleave tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

61
dom/events/test/pointerevents/pointerevent_pointerleave_descendant_over-manual.html Normal file
Просмотреть файл

@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<title>pointerleave + descendant</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>pointerleave</h1>
<h4>
Test Description: This test checks if pointerleave event works properly.
<ol>
<li>Put your mouse over the black rectangle
<li>Then move it into the purple rectangle
<li>Click on the purple rectangle to complete the test
</ol>
Note: when you entered the black rectangle once don't leave it before the end of the test to get proper results.
</h4>
<p>
<div id="target0" style="background:black">
<div id="target1" style="background:purple"></div>
</div>
<script>
var eventTested = false;
var pointerleaveReceived = false;
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
// The pointerleave event must not be dispatched when the pointer enters a child element without leaving the hit test boundaries of the parent. (as distinct from pointerout)
// TA: 9.2
on_event(target1, "pointerdown", function(event) {
detected_pointertypes[event.pointerType] = true;
test(function() {
assert_true(!pointerleaveReceived, "pointerleave shouldn't be received on descendant's pointerover")
}, "pointerleave shouldn't be received on descendant's pointerover");
});
on_event(target0, "pointerleave", function (event) {
if (eventTested == false) {
pointerleaveReceived = true;
eventTested = true;
}
});
}
</script>
<h1>Pointer Events pointerleave tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

52
dom/events/test/pointerevents/pointerevent_pointerleave_descendants-manual.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!doctype html>
<html>
<head>
<title>Pointerleave + descendant</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>pointerleave</h1>
<h4>
Test Description: This test checks if pointerleave event works properly.
<p>Put your mouse over the black rectangle and then move it out through purple rectangle boundaries.</p>
</h4>
<p>
<div id="target0" style="background:black; height: 47px;">
<div style="background:purple; height: 35px; width: 90%; position: absolute"></div>
</div>
<script>
var eventTested = false;
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var test_pointerleave = async_test("pointerleave event received");
on_event(target0, "pointerover", function(event) {
detected_pointertypes[ event.pointerType ] = true;
});
// When a pointing device is moved off of the hit test boundaries of an element and all of its descendants, the pointerleave event must be dispatched.
// TA: 9.1
on_event(target0, "pointerleave", function (event) {
if (eventTested == false) {
test_pointerleave.done();
eventTested = true;
}
});
}
</script>
<h1>Pointer Events pointerleave tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

77
dom/events/test/pointerevents/pointerevent_pointerleave_does_not_bubble-manual.html Normal file
Просмотреть файл

@ -0,0 +1,77 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: The pointerleave event does not bubble </title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="The pointerleave event must not bubble up to parent elements."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerLeave event does not bubble"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var parent0 = document.getElementById("parent0");
on_event(target0, "pointerleave", function (event) {
detected_pointertypes[event.pointerType] = true;
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.type, "pointerleave", "pointer event received: " + event.type);
assert_false(event.bubbles, "pointerleave event.bubbles should be false: " + event.bubbles);
});
});
on_event(parent0, "pointerleave", function (event) {
test_pointerEvent.step(function () {
assert_equals(event.target.id, "parent0", "Recieved " + event.type + " in parent for " + event.target.id);
});
test_pointerEvent.done(); // complete test
});
}
</script>
<style>
#target0 {
background: purple;
border: 1px solid orange;
width:50px;
height:50px;
}
#parent0 {
background: black;
border: 1px solid orange;
width:100px;
height:100px;
}
</style>
</head>
<body onload="run()">
<h1> Pointer Event: pointerleave does not bubble</h1>
<h4>
Test Description:
The pointerleave event must not bubble up to parent elements.
</h4>
<div id="instructions">
Use the mouse or pen to hover over then out of the purple box nested in the black box. Or with touch, tap on the purple box.
</div>
<div id="parent0">
<div id="target0"></div>
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

53
dom/events/test/pointerevents/pointerevent_pointerleave_mouse-manual.html Normal file
Просмотреть файл

@ -0,0 +1,53 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: Dispatch pointerleave (mouse). </title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="When a pointing device that has continuous position (such as a mouse) leaves the hit test boundaries of an element, the pointerleave event must be dispatched."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerleave event"); // set up test harness;
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerleave", function (event) {
detected_pointertypes[event.pointerType] = true;
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.pointerType, "mouse", "Test should be run using a mouse as input.");
assert_equals(event.type, "pointerleave", "The " + event.type + " event was received.");
});
test_pointerEvent.done(); // complete test
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch pointerleave (mouse)</h1>
<h4>
Test Description:
When a pointing device that has continuous position (such as a mouse) leaves the hit test boundaries of an element, the pointerleave event must be dispatched.
</h4>
<br />
<div id="target0">
Use a mouse to move over then out of this element
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

58
dom/events/test/pointerevents/pointerevent_pointerleave_pen-manual.html Normal file
Просмотреть файл

@ -0,0 +1,58 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: Dispatch pointerleave (pen). </title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="When a pointing device that supports hover (pen stylus) leaves the range of the digitizer while over an element, the pointerleave event must be dispatched."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerleave event"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerleave", function (event) {
detected_pointertypes[event.pointerType] = true;
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.pointerType, "pen", "Test should be run using a pen as input");
assert_equals(event.type, "pointerleave", "The " + event.type + " event was received");
assert_true((event.clientX > target0.getBoundingClientRect().left)&&
(event.clientX < target0.getBoundingClientRect().right)&&
(event.clientY > target0.getBoundingClientRect().top)&&
(event.clientY < target0.getBoundingClientRect().bottom),
"pointerleave should be received inside of target bounds");
});
test_pointerEvent.done(); // complete test
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch pointerleave (pen)</h1>
<h4>
Test Description:
When a pointing device that supports hover (pen stylus) leaves the range of the digitizer while over an element, the pointerleave event must be dispatched.
</h4>
<br />
<div id="target0">
Use a pen to hover over then lift up away from this element.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

53
dom/events/test/pointerevents/pointerevent_pointerleave_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,53 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: Dispatch pointerleave (touch). </title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="When a pointing device that does not support hover (such as a finger) leaves the hit test boundaries as a result of a pointerup event, the pointerleave event must be dispatched. "/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerleave event");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerleave", function (event) {
detected_pointertypes[event.pointerType] = true;
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.pointerType, "touch", "Test should be run using touch input");
assert_equals(event.type, "pointerleave", "The " + event.type + " event received");
});
test_pointerEvent.done(); // complete test
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch pointerleave (touch)</h1>
<h4>
Test Description:
When a pointing device that does not support hover (such as a finger) leaves the hit test boundaries as a result of a pointerup event, the pointerleave event must be dispatched.
</h4>
<br />
<div id="target0">
Use touch to tap on this box.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

44
dom/events/test/pointerevents/pointerevent_pointermove-manual.html Normal file
Просмотреть файл

@ -0,0 +1,44 @@
<!doctype html>
<html>
<head>
<title>Pointermove</title>
<meta name="viewport" content="width=device-width">
<meta name="assert" content="When a pointer changes coordinates, the pointermove event must be dispatched."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h2>PointerMove</h2>
<h4>Test Description: This test checks if pointermove event triggers. Move your mouse over the black rectangle or slide it if you are using touchscreen.</h4>
<div id="target0" style="background:black"></div>
<script>
var eventTested = false;
var detected_pointertypes = {};
var test_pointermove = async_test("pointermove event received");
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
// When a pointer changes coordinates, the pointermove event must be dispatched.
// TA: 5.3
on_event(target0, "pointermove", function (event) {
detected_pointertypes[event.pointerType] = true;
if (eventTested == false) {
test_pointermove.done();
eventTested = true;
}
});
}
</script>
<h1>Pointer Events pointermove Tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

70
dom/events/test/pointerevents/pointerevent_pointermove_isprimary_same_as_pointerdown-manual.html Normal file
Просмотреть файл

@ -0,0 +1,70 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: pointermove has same isPrimary as last pointerdown with the same pointerId</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="The isPrimary attribute of a pointermove event must have the same value as the isPrimary attribute of the last pointerdown event with the same pointerId attribute."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointermove has same isPrimary as last pointerdown"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var pointermove_event = null;
var pointerdown_event = null;
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointermove", function (event) {
if (pointerdown_event != null) {
test_pointerEvent.step(function () {
assert_equals(event.pointerId, pointerdown_event.pointerId, "pointermove.pointerId should be the same as pointerdown.pointerId.");
assert_equals(event.isPrimary, pointerdown_event.isPrimary, "pointermove.isPrimary should be the same as pointerdown.isPrimary.");
});
pointermove_event = event;
}
});
on_event(target0, "pointerdown", function (event) {
pointerdown_event = event;
detected_pointertypes[event.pointerType] = true;
});
on_event(target0, "pointerup", function (event) {
test_pointerEvent.step(function () {
assert_not_equals(pointermove_event, null, "pointermove event was never received: ");
});
test_pointerEvent.done(); // complete test
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: pointermove has the same isPrimary as last pointerdown with the same pointerId</h1>
<h4>Test Description:
The isPrimary attribute of a pointermove event must have the same value as the isPrimary attribute of the last pointerdown event with the same pointerId attribute.
</h4>
<div id="instructions">
Press and hold a mouse button, touch contact or pen contact on this element. Move around inside the element while maintaining contact/button down. Only use one device per test run.
<p>Lift off of the element to complete the test.</p>
</div>
<div id="target0" style="touch-action: none;">
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

64
dom/events/test/pointerevents/pointerevent_pointermove_pointertype-manual.html Normal file
Просмотреть файл

@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>pointerType conservation</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>pointerType conservation</h1>
<h4>Test Description: This test checks if pointerType attribute defined properly.</h4>
<div id="instructions">
Press and move a mouse button, touch contact or pen contact on the black rectangle. Only use one device per test run.
</div>
<p>Note: This test may be run with different pointer devices, however only one device should be used per test run.
<p>
<div id="target0"></div>
<script>
var eventTested = false;
var pointerTypeGot = false;
var pointerdown_event;
var detected_pointertypes = {};
setup({ explicit_done: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerover", function(event) {
detected_pointertypes[ event.pointerType ] = true;
});
// The pointerType attribute of a pointermove event must have the same value as the pointerType attribute of the last pointerdown event with the same pointerId attribute.
// TA: 5.1
on_event(target0, "pointerdown", function (event) {
pointerdown_event = event;
pointerTypeGot = true;
});
on_event(target0, "pointermove", function (event) {
if(pointerTypeGot == true) {
if(!eventTested) {
test(function() {
assert_equals(event.pointerId, pointerdown_event.pointerId, "pointer IDs are equal: ");
assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType of pointermove event matches pointerdown event: ");
}, "pointerType is dispatched properly");
}
done();
}
});
}
</script>
<h1>Pointer Events pointerType conservation tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

46
dom/events/test/pointerevents/pointerevent_pointerout-manual.html Normal file
Просмотреть файл

@ -0,0 +1,46 @@
<!doctype html>
<html>
<head>
<title>pointerout</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h2>pointerout</h2>
<h4>Test Description: This test checks if pointerout event triggers. Put your mouse over the black rectangle and then move it out of the rectangle boundaries. If you are using touchscreen tap the black rectangle. </h4>
<div id="target0" style="background: black"></div>
<script>
var test_pointerEvent = async_test("pointerout event received");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var eventTested = false;
var detected_pointertypes = {};
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerout", function (event) {
detected_pointertypes[event.pointerType] = true;
if (eventTested == false) {
eventTested = true;
check_PointerEvent(event);
test_pointerEvent.done();
}
});
}
</script>
<h1>Pointer Events pointerout tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

67
dom/events/test/pointerevents/pointerevent_pointerout_after_pointercancel_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<title>pointerout</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body class="scrollable" onload="run()">
<h2>pointerout</h2>
<h4>Test Description: This test checks if pointerout event triggers after pointercancel. Start touch on the black rectangle and move your touch to scroll in any direction. </h4>
<p>Note: this test is for touch devices only</p>
<div id="target0"></div>
<script>
var test_pointerout = async_test("pointerout event received");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var eventTested = false;
var pointercancel_event = null;
var detected_pointertypes = {};
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointercancel", function (event) {
detected_pointertypes[event.pointerType] = true;
pointercancel_event = event;
});
// After firing the pointercancel event the pointerout event must be dispatched.
// TA: 4.3
on_event(target0, "pointerout", function (event) {
if(event.pointerType == 'touch') {
if(pointercancel_event != null) {
if (eventTested == false) {
test_pointerout.step(function() {
assert_equals(event.pointerType, pointercancel_event.pointerType, "pointerType is same for pointercancel and pointerout");
assert_equals(event.isPrimary, pointercancel_event.isPrimary, "isPrimary is same for pointercancel and pointerout");
});
eventTested = true;
test_pointerout.done();
}
}
else {
test_pointerout.step(function() {
assert_true(false,
"pointercancel received before pointerout");
}, "pointercancel received before pointerout");
}
}
});
}
</script>
<h1>Pointer Events pointerout tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

67
dom/events/test/pointerevents/pointerevent_pointerout_after_pointerup_nohover-manual.html Normal file
Просмотреть файл

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<title>pointerout</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h2>pointerout</h2>
<h4>Test Description: This test checks if pointerout event triggers for devices that don't support hover. Tap the black rectangle. </h4>
<p>Note: this test is only for devices that do not support hover.</p>
<div id="target0"></div>
<script>
var test_pointerout = async_test("pointerout event received");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var eventTested = false;
var pointerup_event = null;
var detected_pointertypes = {};
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerup", function (event) {
detected_pointertypes[event.pointerType] = true;
pointerup_event = event;
});
// For input devices that do not support hover, a pointerout event must follow the pointerup event.
// TA: 3.6
on_event(target0, "pointerout", function (event) {
if(event.pointerType == 'touch') {
if(pointerup_event != null) {
if(eventTested == false) {
test_pointerout.step(function() {
assert_equals(event.pointerType, pointerup_event.pointerType, "pointerType is same for pointerup and pointerout");
assert_equals(event.isPrimary, pointerup_event.isPrimary, "isPrimary is same for pointerup and pointerout");
});
eventTested = true;
test_pointerout.done();
}
}
else {
test_pointerout.step(function() {
assert_true(false,
"pointerup received before pointerout");
}, "pointerup received before pointerout");
}
}
});
}
</script>
<h1>Pointer Events pointerout tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

57
dom/events/test/pointerevents/pointerevent_pointerout_pen-manual.html Normal file
Просмотреть файл

@ -0,0 +1,57 @@
<!doctype html>
<html>
<head>
<title>pointerout</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h2>pointerout</h2>
<h4>Test Description: This test checks if pointerout event triggers for pen. Place your pen over the black rectangle and then pull the pen out of the digitizer's detectable range. </h4>
<p>Note: this test is for devices that support hover - for pen only</p>
<div id="target0"></div>
<script>
var test_pointerout = async_test("pointerout event received");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var eventTested = false;
var isPointerupReceived = false;
var detected_pointertypes = {};
function run() {
var target0 = document.getElementById("target0");
// When a pen stylus leaves the hover range detectable by the digitizer the pointerout event must be dispatched.
// TA: 7.2
on_event(target0, "pointerout", function (event) {
detected_pointertypes[event.pointerType] = true;
if(event.pointerType == 'pen') {
if (eventTested == false) {
eventTested = true;
test_pointerout.done();
}
}
else {
test_pointerout.step(function() {
assert_true(false,
"you have to use pen for this test");
}, "you have to use pen for this test");
}
});
}
</script>
<h1>Pointer Events pointerout tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

58
dom/events/test/pointerevents/pointerevent_pointerout_received_once-manual.html Normal file
Просмотреть файл

@ -0,0 +1,58 @@
<!doctype html>
<html>
<head>
<title>pointerout received just once</title>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<meta name="viewport" content="width=device-width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>pointerout received just once</h1>
<h4>
Test Description: This test checks if pointerout event dispatched properly.
<ol>
<li>Put your mouse over the black rectangle.
<li>Move your mouse out of the black rectangle
</ol>
</h4>
<p>
<div id="target0" style="background:black"></div>
<script>
var pointeroutCounter = 0;
var detected_pointertypes = {};
setup({ explicit_done: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
// When a mouse passes through dispatches one event
// TA: 7.4
on_event(target0, "pointerover", function (event) {
pointeroutCounter = 0;
detected_pointertypes[event.pointerType] = true;
});
on_event(target0, "pointerout", function (event) {
pointeroutCounter++;
setTimeout(function() {
test(function() {
assert_true(pointeroutCounter == 1, "pointerout received just once")
}, "pointerout received just once");
done();
}, 5000);
});
}
</script>
<h1>Pointer Events pointerout received once test</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

52
dom/events/test/pointerevents/pointerevent_pointerover-manual.html Normal file
Просмотреть файл

@ -0,0 +1,52 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: Dispatch pointerover. </title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="When a pointing device is moved into the hit test boundaries of an element, the pointerover event must be dispatched. "/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerover is dispatched"); // set up test harness;
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerover", function (event) {
detected_pointertypes[event.pointerType] = true;
test_pointerEvent.step(function () {
check_PointerEvent(event);
assert_equals(event.type, "pointerover", "Pointer Event received");
});
test_pointerEvent.done(); // complete test
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch pointerover.</h1>
<h4>Test Description:
When a pointing device is moved into the hit test boundaries of an element, the pointerover event must be dispatched.
</h4>
<br />
<div id="target0">
Use mouse, touch or pen to hover or contact this element..
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

63
dom/events/test/pointerevents/pointerevent_pointertype_mouse-manual.html Normal file
Просмотреть файл

@ -0,0 +1,63 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: If a pointer event is initiated by a mouse device, then the pointerType must be "mouse"</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="If a pointer event is initiated by a mouse device, then the pointerType must be 'mouse'."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointer event have pointerType as mouse"); // set up test harness
var eventTested = false;
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function eventHandler(event) {
detected_pointertypes[event.pointerType] = true;
if(!eventTested && event.type == "pointerover") {
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.pointerType, "mouse", "Verify event.pointerType is 'mouse'.");
});
eventTested = true;
}
if (event.type == "pointerup") {
test_pointerEvent.done(); // complete test
}
}
function run() {
var target0 = document.getElementById("target0");
// listen for all events.
for (var i = 0; i < All_Pointer_Events.length; i++) {
on_event(target0, All_Pointer_Events[i], eventHandler);
}
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch pointer events with pointerType equal to "mouse"</h1>
<h4>Test Description:
If a pointer event is initiated by a mouse device, then the pointerType must be 'mouse'.
</h4>
<br />
<div id="target0">
Using the mouse, click this element.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

61
dom/events/test/pointerevents/pointerevent_pointertype_pen-manual.html Normal file
Просмотреть файл

@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: If a pointer event is initiated by a pen device, then the pointerType must be "pen"</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="If a pointer event is initiated by a pen device, then the pointerType must be 'pen'."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointer event has pointerType as pen"); // set up test harness
var eventTested = false;
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function eventHandler(event) {
detected_pointertypes[event.pointerType] = true;
if(!eventTested) {
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.pointerType, "pen", "Verify event.pointerType is 'pen'.");
});
eventTested = true;
}
if (event.type == "pointerup") {
test_pointerEvent.done(); // complete test
}
}
function run() {
var target0 = document.getElementById("target0");
// listen for all events.
for (var i = 0; i < All_Pointer_Events.length; i++) {
on_event(target0, All_Pointer_Events[i], eventHandler);
}
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch pointer events with pointerType equal to "pen"</h1>
<h4>Test Description:
If a pointer event is initiated by a pen device, then the pointerType must be 'pen'.
</h4>
<br />
<div id="target0">
Using pen, tap here.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

62
dom/events/test/pointerevents/pointerevent_pointertype_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,62 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: If a pointer event is initiated by a touch device, then the pointerType must be "touch"</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="If a pointer event is initiated by a touch device, then the pointerType must be 'touch'."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointer event has pointerType as touch"); // set up test harness
var eventTested = false;
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function eventHandler(event) {
detected_pointertypes[event.pointerType] = true;
if(!eventTested) {
check_PointerEvent(event);
test_pointerEvent.step(function () {
assert_equals(event.pointerType, "touch", "Verify event.pointerType is 'touch'.");
});
eventTested = true;
}
if (event.type == "pointerup") {
test_pointerEvent.done(); // complete test
}
}
function run() {
var target0 = document.getElementById("target0");
// listen for all events.
for (var i = 0; i < All_Pointer_Events.length; i++) {
on_event(target0, All_Pointer_Events[i], eventHandler);
}
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: Dispatch pointer events with pointerType equal to "touch"</h1>
<h4>Test Description:
If a pointer event is initiated by a touch device, then the pointerType must be 'touch'.
</h4>
<br />
<div id="target0">
Using touch, tap here.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

44
dom/events/test/pointerevents/pointerevent_pointerup-manual.html Normal file
Просмотреть файл

@ -0,0 +1,44 @@
<!doctype html>
<html>
<head>
<title>pointerup</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>pointerup</h1>
<h4>Test Description: This test checks if pointerup event triggers. Press mouse left button and release it over the black rectangle or tap it if you are using a touchscreen.</h4>
<div id="target0" style="background:black"></div>
<script>
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerup event received");
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerup", function (event) {
detected_pointertypes[event.pointerType] = true;
test_pointerEvent.step(function () {
check_PointerEvent(event);
assert_equals(event.type, "pointerup", "Pointer Event received.");
});
test_pointerEvent.done();
});
}
</script>
<h1>Pointer Events pointerup tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

63
dom/events/test/pointerevents/pointerevent_pointerup_isprimary_same_as_pointerdown-manual.html Normal file
Просмотреть файл

@ -0,0 +1,63 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: pointerup has same isPrimary as last pointerdown with the same pointerId</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="The isPrimary attribute of a pointerup event must have the same value as the isPrimary attribute of the last pointerdown event with the same pointerId attribute."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerup has same isPrimary as last pointerdown"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var pointerup_event = null;
var pointerdown_event = null;
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerup", function (event) {
if (pointerdown_event != null) {
test_pointerEvent.step(function () {
assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerup.pointerId should be the same as pointerdown.pointerId.");
assert_equals(event.isPrimary, pointerdown_event.isPrimary, "pointerup.isPrimary should be the same as pointerdown.isPrimary.");
});
pointerup_event = event;
test_pointerEvent.done(); // complete test
}
});
on_event(target0, "pointerdown", function (event) {
pointerdown_event = event;
detected_pointertypes[event.pointerType] = true;
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: pointerup has the same isPrimary as last pointerdown with the same pointerId</h1>
<h4>Test Description:
The isPrimary attribute of a pointerup event must have the same value as the isPrimary attribute of the last pointerdown event with the same pointerId attribute.
</h4>
<div id="instructions">
Press and release a mouse button, touch contact or pen contact on this element. Only use one device per test run.
</div>
<div id="target0" style="touch-action: none;">
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

64
dom/events/test/pointerevents/pointerevent_pointerup_pointertype-manual.html Normal file
Просмотреть файл

@ -0,0 +1,64 @@
<!doctype html>
<html>
<head>
<title>pointerType conservation</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>pointerType conservation</h1>
<h4>Test Description: This test checks if pointerType attribute defined properly.</h4>
<div id="instructions">
Press and release a mouse button, touch contact or pen contact on the black rectangle. Only use one device per test run.
</div>
<p>Note: This test may be run with different pointer devices, however only one device should be used per test run.
<p>
<div id="target0"></div>
<script>
var eventTested = false;
var pointerTypeGot = false;
var pointerdown_event;
var detected_pointertypes = {};
setup({ explicit_done: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerover", function(event) {
detected_pointertypes[ event.pointerType ] = true;
});
// The pointerType attribute of a pointerup event must have the same value as the pointerType attribute of the last pointerdown event with the same pointerId attribute.
// TA: 3.1
on_event(target0, "pointerdown", function (event) {
pointerdown_event = event;
pointerTypeGot = true;
});
on_event(target0, "pointerup", function (event) {
if(pointerTypeGot == true) {
if(!eventTested) {
test(function() {
assert_equals(event.pointerId, pointerdown_event.pointerId, "pointer IDs are equal: ");
assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType of pointerup event matches pointerdown event: ");
}, "pointerType is dispatched properly");
}
done();
}
});
}
</script>
<h1>Pointer Events pointerType conservation tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

116
dom/events/test/pointerevents/pointerevent_releasepointercapture_events_to_original_target-manual.html Normal file
Просмотреть файл

@ -0,0 +1,116 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: releasePointerCapture() - subsequent events follow normal hitting testing mechanisms</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<meta name="assert" content="After invoking the releasePointerCapture method on an element, subsequent events for the specified pointer must follow normal hit testing mechanisms for determining the event target"/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("lostpointercapture: subsequent events to target."); // set up test harness
var suppressedEventsFail = false;
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var captured_event;
var f_gotPointerCapture = false;
var f_lostPointerCapture = false;
function listenerEventHandler(event) {
detected_pointertypes[event.pointerType] = true;
if (event.type == "gotpointercapture") {
f_gotPointerCapture = true;
check_PointerEvent(event);
}
else if (event.type == "lostpointercapture") {
f_lostPointerCapture = true;
f_gotPointerCapture = false;
check_PointerEvent(event);
}
else if(event.type == "pointerover" || event.type == "pointerenter" || event.type == "pointerout" || event.type == "pointerleave") {
if(!suppressedEventsFail) {
test(function() {
assert_true(false, "Suppressed events were received");
}, "Suppressed events were received");
suppressedEventsFail = true;
}
}
else if (event.pointerId == captured_event.pointerId) {
if (f_gotPointerCapture && event.type == "pointermove") {
// on first event received for capture, release capture
listener.releasePointerCapture(event.pointerId);
}
else {
// if any other events are received after releaseCapture, then the test fails
test_pointerEvent.step(function () {
assert_true(false, event.target.id + "-" + event.type + " should be handled by target element handler");
});
}
}
}
function targetEventHandler(event) {
if (f_gotPointerCapture) {
if(event.type != "pointerout" && event.type != "pointerleave") {
test_pointerEvent.step(function () {
assert_true(false, "The Target element should not have received any events while capture is active. Event recieved:" + event.type + ". ");
});
}
}
if (event.type == "pointerdown") {
// pointerdown event received will be used to capture events.
listener.setPointerCapture(event.pointerId);
captured_event = event;
}
if (f_lostPointerCapture) {
test_pointerEvent.step(function () {
assert_equals(event.pointerId, captured_event.pointerId, "pointerID is same for event captured and after release");
});
if (event.type == "pointerup") {
test_pointerEvent.done(); // complete test
}
}
}
function run() {
var listener = document.getElementById("listener");
var target0 = document.getElementById("target0");
target0.style["touchAction"] = "none";
// target0 and listener - handle all events
for (var i = 0; i < All_Pointer_Events.length; i++) {
on_event(target0, All_Pointer_Events[i], targetEventHandler);
on_event(listener, All_Pointer_Events[i], listenerEventHandler);
}
}
</script>
</head>
<body onload="run()">
<div id="listener"></div>
<h1>Pointer Event: releasePointerCapture() - subsequent events follow normal hitting testing mechanisms</h1>
<h4>
Test Description:
After invoking the releasePointerCapture method on an element, subsequent events for the specified
pointer must follow normal hit testing mechanisms for determining the event target
</h4>
<br />
<div id="target0">
Use mouse, touch or pen to contact here and move around.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

76
dom/events/test/pointerevents/pointerevent_releasepointercapture_invalid_pointerid-manual.html Normal file
Просмотреть файл

@ -0,0 +1,76 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: releasePointerCapture DOMException - InvalidPointerId</title>
<meta name="assert" content="releasePointerCapture DOMException - InvalidPointerId"/>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="help" href="http://www.w3.org/wiki/PointerEvents/TestAssertions">
<meta name="assert" content="When the releasePointerCapture method is invoked, if the provided pointerId value does not match any of the active pointers, a DOMException with the name InvalidPointerId must be thrown."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("releasePointerCapture: DOMException InvalidPointerId"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var invalid_pointerId = 314159265358973923;
function run() {
var target0 = document.getElementById("target0");
target0.style["touchAction"] = "none";
var listener = document.getElementById("listener");
// try to release pointer capture with an invalid id
on_event(listener, "pointermove", function (event) {
detected_pointertypes[event.pointerType] = true;
try {
listener.releasePointerCapture(invalid_pointerId);
test_pointerEvent.step(function () {
assert_true(false, "DOMException not thrown. Expected: InvalidPointerId should have been thrown");
});
} catch (e) {
test_pointerEvent.step(function () {
assert_true(e.name == "InvalidPointerId", "DOMException should be InvalidPointerId");
});
}
test_pointerEvent.done(); // complete test
});
// set pointer capture
on_event(target0, "pointerdown", function (event) {
detected_pointertypes[event.pointerType] = true;
listener.setPointerCapture(event.pointerId);
});
}
</script>
</head>
<body onload="run()">
<div id="listener"></div>
<h1> Pointer Event: releasePointerCapture() DOMException - InvalidPointerId</h1>
<h4>
Test Description:
Upon invocation of the releasePointerCapture method, if the provided pointerId value does not match any of the
active pointers, a DOMException with the name InvalidPointerId must be thrown.
</h4>
<br />
<div id="target0">
Use the mouse, touch or pen to move over or contact this box.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

71
dom/events/test/pointerevents/pointerevent_releasepointercapture_onpointercancel_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,71 @@
<!doctype html>
<html>
<head>
<title>Release capture on pointercancel</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body class="scrollable">
<h1>Pointer Events Capture Test - release capture on pointercancel</h1>
<h4>
Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions:
<ol>
<li> Touch black rectangle and do not release your touch
<li> Move your touch to scroll the page. "lostpointercapture" should be logged inside of the black rectangle immediately after "pointercancel"
</ol>
</h4>
Test passes if the proper behavior of the events is observed.
<div id="target0" style="background:black; color:white"></div>
<script type='text/javascript'>
var pointercancelGot = false;
var count=0;
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointer capture is released on pointercancel");
var target0 = document.getElementById('target0');
add_completion_callback(showPointerTypes);
window.onload = function() {
on_event(target0, 'pointerdown', function(e) {
detected_pointertypes[e.pointerType] = true;
test_pointerEvent.step(function () {
assert_equals(e.pointerType, "touch", "Test should be run using a touch as input");
});
isPointerCapture = true;
sPointerCapture(e);
pointercancelGot = false;
});
on_event(target0, 'gotpointercapture', function(e) {
log("gotpointercapture", document.getElementById('target0'));
});
// If the setPointerCapture method has been invoked on the pointer specified by pointerId, and the releasePointerCapture method has not been invoked, a lostpointercapture event must be dispatched to the element on which the setPointerCapture method was invoked. Furthermore, subsequent events for the specified pointer must follow normal hit testing mechanisms for determining the event target.
// TA: 4.4
on_event(target0, 'lostpointercapture', function(e) {
log("lostpointercapture", document.getElementById('target0'));
test_pointerEvent.step(function () {
assert_true(pointercancelGot, "pointercancel was received before lostpointercapture");
});
test_pointerEvent.done();
});
on_event(target0, 'pointercancel', function(e) {
log("pointercancel", target0);
pointercancelGot = true;
});
}
</script>
<h1>Pointer Events Capture Test</h1>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

79
dom/events/test/pointerevents/pointerevent_releasepointercapture_onpointerup_mouse-manual.html Normal file
Просмотреть файл

@ -0,0 +1,79 @@
<!doctype html>
<html>
<head>
<title>Release capture on pointerup</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body>
<h1>Pointer Events Capture Test - release capture on pointerup</h1>
<h4>
Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions:
<ol>
<li> Press and hold left mouse button over "Set Capture" button
<li> Release left mouse button anywhere over the document. "lostpointercapture" should be logged inside of the black rectangle immediately after "pointerup"
</ol>
</h4>
Test passes if the proper behavior of the events is observed.
<div id="target0" style="background:black; color:white"></div>
<br>
<input type="button" id="btnCapture" value="Set Capture">
<script type='text/javascript'>
var isPointerCapture = false;
var pointerupGot = false;
var count=0;
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var target0 = document.getElementById('target0');
var captureButton = document.getElementById('btnCapture');
setup({ explicit_done: true });
window.onload = function() {
on_event(captureButton, 'pointerdown', function(e) {
detected_pointertypes[e.pointerType] = true;
if(isPointerCapture == false) {
isPointerCapture = true;
sPointerCapture(e);
pointerupGot = false;
}
});
on_event(target0, 'gotpointercapture', function(e) {
log("gotpointercapture", document.getElementById('target0'));
});
// If the setPointerCapture method has been invoked on the pointer specified by pointerId,
// and the releasePointerCapture method has not been invoked,a lostpointercapture event must be
// dispatched to the element on which the setPointerCapture method was invoked. Furthermore,
// subsequent events for the specified pointer must follow normal hit testing mechanisms for
// determining the event target.
// TA: 3.7
on_event(target0, 'lostpointercapture', function(e) {
test(function() {
assert_true(pointerupGot, "pointerup was received before lostpointercapture")
}, "pointerup was received before lostpointercapture");
log("lostpointercapture", document.getElementById('target0'));
isPointerCapture = false;
done();
});
on_event(target0, 'pointerup', function(e) {
log("pointerup", target0);
pointerupGot = true;
});
}
</script>
<h1>Pointer Events Capture Test</h1>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

55
dom/events/test/pointerevents/pointerevent_setpointercapture_disconnected-manual.html Normal file
Просмотреть файл

@ -0,0 +1,55 @@
<!doctype html>
<html>
<head>
<title>setPointerCapture() throws on disconnected node</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var test_setPointerCapture = async_test("setPointerCapture: DOMException InvalidStateError");
function run() {
var target0 = document.getElementById("target0");
var target1 = document.getElementById("target1");
target1.parentNode.removeChild(target1);
on_event(target0, "pointerdown", function (event) {
detected_pointertypes[ event.pointerType ] = true;
try {
target1.setPointerCapture(event.pointerId);
test_setPointerCapture.step(function() {
assert_unreached("DOMException: InvalidStateError should have been thrown.");
});
} catch (e) {
// TA: 13.4
test_setPointerCapture.step(function() {
assert_equals(e.name, "InvalidStateError", "DOMException should be InvalidStateError");
});
}
test_setPointerCapture.done();
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: DOMException InvalidStateError</h1>
<h4>Test Description:
When the setPointerCapture method is invoked, if the target node does not participate in its ownerDocument's tree, a DOMException with the name InvalidStateError must be thrown.
</h4>
<br>
<div id="target0">
Use the mouse, touch or pen to contact this box.
</div>
<div id="target1"></div>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

58
dom/events/test/pointerevents/pointerevent_setpointercapture_inactive_button_mouse-manual.html Normal file
Просмотреть файл

@ -0,0 +1,58 @@
<!doctype html>
<html>
<head>
<title>setPointerCapture + inactive button state</title>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<meta name="viewport" content="width=device-width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body onload="run()">
<h1>setPointerCapture</h1>
<h4>
Test Description: This test checks if setPointerCapture works properly.
<ol>
<li>Put your mouse over the black rectangle
<li>Move you mouse out to complete the test
</ol>
</h4>
<p>
<div id="target0" style="background:black; color:white;"></div>
<script>
var detected_pointertypes = {};
var captureGot = false;
setup({ explicit_done: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
on_event(target0, "pointerover", function (event) {
detected_pointertypes[event.pointerType] = true;
target0.setPointerCapture(event.pointerId);
});
// When the setPointerCapture method is invoked, if the specified pointer is not in active button state, then the method must have no effect on subsequent pointer events.
// TA: 13.2
on_event(target0, "pointerout", function (event) {
test(function() {
assert_false(captureGot, "pointer capture is not set while button state is inactive")
}, "pointer capture is not set while button state is inactive");
done();
});
on_event(target0, 'gotpointercapture', function(e) {
captureGot = true;
});
}
</script>
<h1>Pointer Events setPointerCapture Tests</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

65
dom/events/test/pointerevents/pointerevent_setpointercapture_invalid_pointerid-manual.html Normal file
Просмотреть файл

@ -0,0 +1,65 @@
<!doctype html>
<html>
<head>
<title>Pointer Event: gotPiontercapture is fired first.</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/wiki/PointerEvents/TestAssertions">
<meta name="assert" content="When the setPointerCapture method is invoked, if the provided pointerId value does not match any of the active pointers, a DOMException with the name InvalidPointerId must be thrown." />
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<!-- /resources/testharness.js -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("setPointerCapture: DOMException InvalidPointerId"); // set up test harness
// showPointerTypes is defined in pointerevent_support.js
// Requirements: the callback function will reference the test_pointerEvent object and
// will fail unless the async_test is created with the var name "test_pointerEvent".
add_completion_callback(showPointerTypes);
var INVALID_POINTERID = -39548;
function run() {
var target0 = document.getElementById("target0");
target0.style["touchAction"] = "none";
var listener = document.getElementById("complete-notice");
on_event(target0, "pointerdown", function (event) {
detected_pointertypes[event.pointerType] = true;
try {
listener.setPointerCapture(INVALID_POINTERID);
test_pointerEvent.step(function () {
assert_true(false, "DOMException: InvalidPointerId should have been thrown.");
});
} catch (e) {
test_pointerEvent.step(function () {
assert_equals(e.name, "InvalidPointerId", "DOMException should be InvalidPointerId");
});
}
test_pointerEvent.done(); // complete test
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Event: DOMException InvalidPointerId</h1>
<h4>Test Description:
When the setPointerCapture method is invoked, if the provided pointerId value does not match any of the active pointers, a DOMException with the name InvalidPointerId must be thrown.
</h4>
<br />
<div id="target0">
Use the mouse, touch or pen to contact this box.
</div>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

101
dom/events/test/pointerevents/pointerevent_setpointercapture_relatedtarget-manual.html Normal file
Просмотреть файл

@ -0,0 +1,101 @@
<!doctype html>
<html>
<head>
<title>Set/Release capture + relatedTarget</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body>
<h1>Pointer Events Capture Test - capture and relatedTarget</h1>
<h4>
Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions:
<ol>
<li> Put your mouse over the lower rectangle. pointerover should be received for the purple rectangle
<li> Press and hold left mouse button over "Set Capture" button
<li> Put your mouse over the upper rectangle. pointerover should be received for the black rectangle
<li> Release left mouse button to complete the test.
</ol>
</h4>
Test passes if the proper behavior of the events is observed.
<div id="target0" style="background:black; color:white"></div>
<br>
<div id="target1" style="background:purple; color:white"></div>
<br>
<input type="button" id="btnCapture" value="Set Capture">
<script type='text/javascript'>
var isPointerCapture = false;
var isPointeroverGot = false;
var count=0;
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var target0 = document.getElementById('target0');
var target1 = document.getElementById('target1');
var captureButton = document.getElementById('btnCapture');
setup({ explicit_done: true });
window.onload = function() {
on_event(captureButton, 'pointerdown', function(e) {
if(isPointerCapture == false) {
isPointerCapture = true;
sPointerCapture(e);
}
else {
isPointerCapture = false;
rPointerCapture(e);
}
});
on_event(target0, 'gotpointercapture', function(e) {
log("gotpointercapture", document.getElementById('target0'));
});
on_event(target0, 'lostpointercapture', function(e) {
log("lostpointercapture", document.getElementById('target0'));
isPointerCapture = false;
});
run();
}
function run() {
// After invoking the setPointerCapture method on an element, subsequent pointer events for the specified pointer must be targeted at that element.
// Additionally, the relatedTarget property of all such pointer events must be set to null.
// TA: 13.3
on_event(target0, "pointerover", function (event) {
log("pointerover", document.getElementById('target0'));
if(isPointerCapture && isPointeroverGot) {
test(function() {
assert_true(event.relatedTarget==null, "relatedTarget is null when the capture is set")
}, "relatedTarget is null when the capture is set. relatedTarget is " + event.relatedTarget);
done();
}
});
on_event(target1, "pointerover", function (event) {
detected_pointertypes[ event.pointerType ] = true;
if(!isPointeroverGot) {
test(function() {
assert_true(isPointerCapture==false, "pointerover shouldn't trigger for this target when capture is enabled");
}, "pointerover shouldn't trigger for the purple rectangle while the black rectangle has capture");
isPointeroverGot = true;
log("pointerover", document.getElementById('target1'));
}
});
}
</script>
<h1>Pointer Events Capture Test</h1>
<div id="complete-notice">
<p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>Refresh the page to run the tests again with a different pointer type.</p>
</div>
<div id="log"></div>
</body>
</html>

61
dom/events/test/pointerevents/pointerevent_styles.css Normal file
Просмотреть файл

@ -0,0 +1,61 @@
#target0 {
background: black;
color: white;
white-space: nowrap;
overflow-y: auto;
overflow-x: auto;
}
#target1 {
background: purple;
color: white;
white-space: nowrap;
overflow-y: auto;
overflow-x: auto;
}
.scroller {
width: 700px;
height: 430px;
margin: 20px;
overflow: auto;
background: black;
}
.scroller > div {
height: 1000px;
width: 1000px;
color: white;
}
.scroller > div div {
height: 100%;
width: 100%;
color: white;
}
div {
margin: 0em;
padding: 2em;
}
#complete-notice {
background: #afa;
border: 1px solid #0a0;
display: none;
}
#pointertype-log {
font-weight: bold;
}
#listener {
background: orange;
border: 1px solid orange;
position: absolute;
top: -100px;
}
body.scrollable {
min-height: 5000px;
}

170
dom/events/test/pointerevents/pointerevent_support.js Normal file
Просмотреть файл

@ -0,0 +1,170 @@
var All_Pointer_Events = [
"pointerdown",
"pointerup",
"pointercancel",
"pointermove",
"pointerover",
"pointerout",
"pointerenter",
"pointerleave",
"gotpointercapture",
"lostpointercapture"];
// Check for conformance to PointerEvent interface
// TA: 1.1, 1.2, 1.6, 1.7, 1.8, 1.9, 1.10, 1.11, 1.12, 1.13
function check_PointerEvent(event) {
test(function () {
assert_true(event instanceof PointerEvent, "event is a PointerEvent event");
}, event.type + " event is a PointerEvent event");
// Check attributes for conformance to WebIDL:
// * attribute exists
// * has proper type
// * if the attribute is "readonly", it cannot be changed
// TA: 1.1, 1.2
var idl_type_check = {
"long": function (v) { return typeof v === "number" && Math.round(v) === v; },
"float": function (v) { return typeof v === "number"; },
"string": function (v) { return typeof v === "string"; },
"boolean": function (v) { return typeof v === "boolean" }
};
[
["readonly", "long", "pointerId"],
["readonly", "float", "width"],
["readonly", "float", "height"],
["readonly", "float", "pressure"],
["readonly", "long", "tiltX"],
["readonly", "long", "tiltY"],
["readonly", "string", "pointerType"],
["readonly", "boolean", "isPrimary"]
].forEach(function (attr) {
var readonly = attr[0];
var type = attr[1];
var name = attr[2];
// existence check
test(function () {
assert_true(name in event, name + " attribute in " + event.type + " event");
}, event.type + "." + name + " attribute exists");
// readonly check
if (readonly === "readonly") {
test(function () {
assert_readonly(event.type, name, event.type + "." + name + " cannot be changed");
}, event.type + "." + name + " is readonly");
}
// type check
test(function () {
assert_true(idl_type_check[type](event[name]), name + " attribute of type " + type);
}, event.type + "." + name + " IDL type " + type + " (JS type was " + typeof event[name] + ")");
});
// Check the pressure value
// TA: 1.6, 1.7, 1.8
test(function () {
// TA: 1.6
assert_greater_than_equal(event.pressure, 0, "pressure is greater than or equal to 0");
assert_less_than_equal(event.pressure, 1, "pressure is less than or equal to 1");
// TA: 1.7, 1.8
if (event.pointerType === "mouse") {
if (event.buttons === 0) {
assert_equals(event.pressure, 0, "pressure is 0 for mouse with no buttons pressed");
} else {
assert_equals(event.pressure, 0.5, "pressure is 0.5 for mouse with a button pressed");
}
}
}, event.type + ".pressure value is valid");
// Check mouse-specific properties
if (event.pointerType === "mouse") {
// TA: 1.9, 1.10, 1.13
test(function () {
assert_equals(event.tiltX, 0, event.type + ".tiltX is 0 for mouse");
assert_equals(event.tiltY, 0, event.type + ".tiltY is 0 for mouse");
assert_true(event.isPrimary, event.type + ".isPrimary is true for mouse");
}, event.type + " properties for pointerType = mouse");
// Check properties for pointers other than mouse
}
}
function showPointerTypes() {
var complete_notice = document.getElementById("complete-notice");
var pointertype_log = document.getElementById("pointertype-log");
var pointertypes = Object.keys(detected_pointertypes);
pointertype_log.innerHTML = pointertypes.length ?
pointertypes.join(",") : "(none)";
complete_notice.style.display = "block";
}
function log(msg, el) {
if (++count > 10){
count = 0;
el.innerHTML = ' ';
}
el.innerHTML = msg + '; ' + el.innerHTML;
}
function failOnScroll() {
assert_true(false,
"scroll received while shouldn't");
}
function updateDescriptionNextStep() {
document.getElementById('desc').innerHTML = "Test Description: Try to scroll text RIGHT.";
}
function updateDescriptionComplete() {
document.getElementById('desc').innerHTML = "Test Description: Test complete";
}
function updateDescriptionSecondStepTouchActionElement(target, scrollReturnInterval) {
window.setTimeout(function() {
objectScroller(target, 'up', 0);}
, scrollReturnInterval);
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT moving your outside of the red border";
}
function updateDescriptionThirdStepTouchActionElement(target, scrollReturnInterval) {
window.setTimeout(function() {
objectScroller(target, 'left', 0);}
, scrollReturnInterval);
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the element. Then tap complete button";
}
function updateDescriptionFourthStepTouchActionElement(target, scrollReturnInterval) {
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT starting your touch inside of the element";
}
function objectScroller(target, direction, value) {
if (direction == 'up') {
target.scrollTop = 0;
} else if (direction == 'left') {
target.scrollLeft = 0;
}
}
function sPointerCapture(e) {
try {
target0.setPointerCapture(e.pointerId);
}
catch(e) {
}
}
function rPointerCapture(e) {
try {
captureButton.value = 'Set Capture';
target0.releasePointerCapture(e.pointerId);
}
catch(e) {
}
}

129
dom/events/test/pointerevents/pointerevent_touch-action-auto-css_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,129 @@
<!doctype html>
<html>
<head>
<title>touch-action: auto</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
width: 700px;
height: 430px;
touch-action: auto;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll text DOWN. Wait for description update. Expected: pan enabled</h4>
<p>Note: this test is for touch-devices only</p>
<div id="target0">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<script type='text/javascript'>
var detected_pointertypes = {};
var xScrollIsReceived = false;
var yScrollIsReceived = false;
var xScr0, yScr0, xScr1, yScr1;
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var test_touchaction = async_test("touch-action attribute test");
xScr0 = target0.scrollLeft;
yScr0 = target0.scrollTop;
on_event(target0, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_equals(event.pointerType, "touch", "wrong pointer type was detected: ");
});
});
on_event(target0, 'scroll', function(event) {
xScr1 = target0.scrollLeft;
yScr1 = target0.scrollTop;
if(xScr1 != xScr0) {
xScrollIsReceived = true;
}
if(yScr1 != yScr0) {
test_touchaction.step(function () {
yScrollIsReceived = true;
assert_true(true, "y-scroll received.");
});
updateDescriptionNextStep();
}
if(xScrollIsReceived && yScrollIsReceived) {
test_touchaction.done();
updateDescriptionComplete();
}
});
}
</script>
<h1>touch-action: auto</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

109
dom/events/test/pointerevents/pointerevent_touch-action-button-test_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,109 @@
<!doctype html>
<html>
<head>
<title>Button touch-action test</title>
<meta name="assert" content="TA15.11 -The touch-action CSS property applies to button elements.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
height: 150px;
width: 200px;
overflow-y: auto;
background: black;
padding: 100px;
position: relative;
}
button {
touch-action: none;
width: 350px;
height: 350px;
border: 2px solid red;
}
</style>
</head>
<body onload="run()">
<h2>Pointer Events touch-action attribute support</h2>
<h4 id="desc">Test Description: Try to scroll black element DOWN moving your touch outside of the red border. Wait for description update.</h4>
<p>Note: this test is for touch only</p>
<div id="target0">
<button>Test Button</button>
</div>
<br>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
var xScrollIsReceived = false;
var yScrollIsReceived = false;
var xScr0, yScr0, xScr1, yScr1;
var scrollReturnInterval = 1000;
var isFirstPart = true;
setup({ explicit_timeout: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
//TA 15.11
var test_touchaction_div = async_test("touch-action attribute test out of element");
var test_touchaction_button = async_test("touch-action attribute test in element");
xScr0 = target0.scrollLeft;
yScr0 = target0.scrollTop;
on_event(btnComplete, 'click', function(event) {
test_touchaction_button.step(function() {
assert_equals(target0.scrollLeft, 0, "button scroll x offset should be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "button scroll y offset should be 0 in the end of the test");
assert_true(xScrollIsReceived && yScrollIsReceived, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively");
});
test_touchaction_button.done();
updateDescriptionComplete();
});
on_event(btnComplete, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
});
on_event(target0, 'scroll', function(event) {
if(isFirstPart) {
xScr1 = target0.scrollLeft;
yScr1 = target0.scrollTop;
if(xScr1 != xScr0) {
xScrollIsReceived = true;
}
if(yScr1 != yScr0) {
test_touchaction_div.step(function () {
yScrollIsReceived = true;
});
updateDescriptionSecondStepTouchActionElement(target0, scrollReturnInterval);
}
if(xScrollIsReceived && yScrollIsReceived) {
test_touchaction_div.done();
updateDescriptionThirdStepTouchActionElement(target0, scrollReturnInterval);
setTimeout(function() {
isFirstPart = false;
}, 2 * scrollReturnInterval); // avoid immediate triggering while scroll is still being performed
}
}
else {
test_touchaction_button.step(failOnScroll, "scroll received while shouldn't");
}
});
}
</script>
<h1>touch-action: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

67
dom/events/test/pointerevents/pointerevent_touch-action-illegal.html Normal file
Просмотреть файл

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<title>touch-action: illegal</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
width: 700px;
height: 50px;
touch-action: pan-x none;
}
#target1 {
width: 700px;
height: 50px;
background: black;
margin-top: 5px;
touch-action: pan-y none;
}
#target2 {
width: 700px;
height: 50px;
background: black;
margin-top: 5px;
touch-action: auto none;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Test will automatically check behaviour of following combinations: 'pan-x none', 'pan-y none', 'auto none'</h4>
<div id="target0"></div>
<div id="target1"></div>
<div id="target2"></div>
<script type='text/javascript'>
var detected_pointertypes = {};
setup({ explicit_done: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById('target0');
var target1 = document.getElementById('target1');
var target2 = document.getElementById('target2');
test(function() {
assert_true(getComputedStyle(target0).touchAction == 'auto', "'pan-x none' is corrected properly");
}, "'pan-x none' is corrected properly");
test(function() {
assert_true(getComputedStyle(target1).touchAction == 'auto', "'pan-y none' is corrected properly");
}, "'pan-y none' is corrected properly");
test(function() {
assert_true(getComputedStyle(target2).touchAction == 'auto', "'auto none' is corrected properly");
}, "'auto none' is corrected properly");
done();
}
</script>
<h1>touch-action: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

117
dom/events/test/pointerevents/pointerevent_touch-action-inherit_child-auto-child-none_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,117 @@
<!doctype html>
<html>
<head>
<title>touch-action: parent > child: auto > child: none</title>
<meta name="assert" content="TA15.5 - when a user touches an element, the effect of that touch is determined by the value of the touch-action property and the default touch behaviors on the element and its ancestors. Scrollable-Parent, Child: `auto`, Grand-Child: `none`">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
.scroller > div {
touch-action: auto;
}
.scroller > div div {
touch-action: none;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: no panning.</h4>
<p>Note: this test is for touch-devices only</p>
<div class="scroller" id="target0">
<div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var test_touchaction = async_test("touch-action attribute test");
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
// Check if touch-action attribute works properly for embedded divs
// Scrollable-Parent, Child: `auto`, Grand-Child: `none`
// TA: 15.5
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
on_event(target0, 'scroll', function(event) {
test_touchaction.step(failOnScroll, "scroll received while touch-action is none");
});
}
</script>
<h1>behaviour: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

112
dom/events/test/pointerevents/pointerevent_touch-action-inherit_child-none_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,112 @@
<!doctype html>
<html>
<head>
<title>touch-action: child: none</title>
<meta name="assert" content="TA15.9 - when a user touches an element, the effect of that touch is determined by the value of the touch-action property and the default touch behaviors on the element and its ancestors. Scrollable-Parent, Child: `none`">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
.scroller > div {
touch-action: none;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: no panning</h4>
<p>Note: this test is for touch-devices only</p>
<div class="scroller" id="target0">
<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var test_touchaction = async_test("touch-action attribute test");
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
// Check if touch-action attribute works properly for embedded divs
//
// TA: 15.9
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
on_event(target0, 'scroll', function(event) {
test_touchaction.step(failOnScroll, "scroll received while touch-action is none");
});
}
</script>
<h1>behaviour: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

112
dom/events/test/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-x_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,112 @@
<!doctype html>
<html>
<head>
<title>touch-action: parent > child: pan-x > child: pan-x</title>
<meta name="assert" content="TA15.6 - when a user touches an element, the effect of that touch is determined by the value of the touch-action property and the default touch behaviors on the element and its ancestors. Scrollable-Parent, Child: `pan-x`, Grand-Child: `pan-x`">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
.scroller > div {
touch-action: pan-x;
}
.scroller > div div {
touch-action: pan-x;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: only pans in x direction.</h4>
<p>Note: this test is for touch-devices only</p>
<div class="scroller" id="target0">
<div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
var test_touchaction = async_test("touch-action attribute test");
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
// Check if touch-action attribute works properly for embedded divs
//
// TA: 15.6
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_not_equals(target0.scrollLeft, 0, "scroll x offset should not be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
}
</script>
<h1>behaviour: pan-x</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

117
dom/events/test/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-y_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,117 @@
<!doctype html>
<html>
<head>
<title>touch-action: parent > child: pan-x > child: pan-y</title>
<meta name="assert" content="TA15.13 - Touch action inherits child 'pan-x' -> child 'pan-y' test">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
.scroller > div {
touch-action: pan-x;
}
.scroller > div div {
touch-action: pan-y;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: no panning/zooming/etc.</h4>
<p>Note: this test is for touch-devices only</p>
<div class="scroller" id="target0">
<div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var test_touchaction = async_test("touch-action attribute test");
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
// Check if touch-action attribute works properly for embedded divs
// Scrollable-Parent, Child: `pan-x`, Grand-Child: `pan-y`
// TA: 15.13
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
on_event(target0, 'scroll', function(event) {
test_touchaction.step(failOnScroll, "scroll received while touch-action is none");
});
}
</script>
<h1>behaviour: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

133
dom/events/test/pointerevents/pointerevent_touch-action-inherit_highest-parent-none_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,133 @@
<!doctype html>
<html>
<head>
<title>touch-action: parent: none + two embedded children</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#divParent {
touch-action: none;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll text DOWN. Wait for description update. Expected: pan enabled</h4>
<p>Note: this test is for touch-devices only</p>
<div id="divParent">
<div class="scroller" id="target0">
<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<script type='text/javascript'>
var detected_pointertypes = {};
var xScrollIsReceived = false;
var yScrollIsReceived = false;
var xScr0, yScr0, xScr1, yScr1;
add_completion_callback(showPointerTypes);
add_completion_callback(enableScrolling);
function run() {
var target0 = document.getElementById("target0");
var test_touchaction = async_test("touch-action attribute test");
xScr0 = target0.scrollLeft;
yScr0 = target0.scrollTop;
on_event(target0, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
});
// Check if touch-action attribute works properly for embedded divs
//
// TA: 15.
on_event(target0, 'scroll', function(event) {
xScr1 = target0.scrollLeft;
yScr1 = target0.scrollTop;
if(xScr1 != xScr0) {
xScrollIsReceived = true;
}
if(yScr1 != yScr0) {
yScrollIsReceived = true;
updateDescriptionNextStep();
}
if(xScrollIsReceived && yScrollIsReceived) {
test_touchaction.done();
updateDescriptionComplete();
}
});
}
function enableScrolling() {
document.getElementById('divParent').setAttribute('style', 'touch-action: auto');
}
</script>
<h1>behaviour: auto</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

112
dom/events/test/pointerevents/pointerevent_touch-action-inherit_parent-none_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,112 @@
<!doctype html>
<html>
<head>
<title>touch-action: inherit from parent: none</title>
<meta name="assert" content="TA15.8 - when a user touches an element, the effect of that touch is determined by the value of the touch-action property and the default touch behaviors on the element and its ancestors. Scrollable-Parent: `none` Child: `auto`">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
.scroller {
touch-action: none;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: no panning</h4>
<p>Note: this test is for touch-devices only</p>
<div class="scroller" id="target0">
<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var test_touchaction = async_test("touch-action attribute test");
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
// Check if touch-action attribute works properly for embedded divs
//
// TA: 15.8
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
on_event(target0, 'scroll', function(event) {
test_touchaction.step(failOnScroll, "scroll received while touch-action is none");
});
}
</script>
<h1>behaviour: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

124
dom/events/test/pointerevents/pointerevent_touch-action-keyboard-manual.html Normal file
Просмотреть файл

@ -0,0 +1,124 @@
<!doctype html>
<html>
<head>
<title>touch-action: keyboard</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
width: 700px;
height: 430px;
touch-action: none;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Press DOWN ARROW key. Wait for description update. Expected: pan enabled</h4>
<p>Note: this test is for keyboard only</p>
<div id="target0">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<script type='text/javascript'>
var xScrollIsReceived = false;
var yScrollIsReceived = false;
var xScr0, yScr0, xScr1, yScr1;
function run() {
var target0 = document.getElementById("target0");
var test_touchaction = async_test("touch-action attribute test");
xScr0 = target0.scrollLeft;
yScr0 = target0.scrollTop;
target0.focus();
on_event(target0, 'scroll', function(event) {
xScr1 = target0.scrollLeft;
yScr1 = target0.scrollTop;
if(xScr1 != xScr0) {
xScrollIsReceived = true;
}
if(yScr1 != yScr0) {
test_touchaction.step(function () {
yScrollIsReceived = true;
assert_true(true, "y-scroll received.");
});
updateDescriptionNextStepKeyboard();
}
if(xScrollIsReceived && yScrollIsReceived) {
test_touchaction.done();
updateDescriptionComplete();
}
});
}
function updateDescriptionNextStepKeyboard() {
document.getElementById('desc').innerHTML = "Test Description: press RIGHT ARROW key.";
}
</script>
<h1>touch-action: none</h1>
<div id="complete-notice">
</div>
<div id="log"></div>
</body>
</html>

130
dom/events/test/pointerevents/pointerevent_touch-action-mouse-manual.html Normal file
Просмотреть файл

@ -0,0 +1,130 @@
<!doctype html>
<html>
<head>
<title>touch-action: mouse</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
width: 700px;
height: 430px;
touch-action: none;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll text down using mouse (use mouse wheel or click on the scrollbar). Wait for description update.</h4>
<p>Note: this test is for mouse only</p>
<div id="target0">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<script type='text/javascript'>
var detected_pointertypes = {};
var xScrollIsReceived = false;
var yScrollIsReceived = false;
var xScr0, yScr0, xScr1, yScr1;
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var test_touchaction = async_test("touch-action attribute test");
xScr0 = target0.scrollLeft;
yScr0 = target0.scrollTop;
on_event(target0, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
});
on_event(target0, 'scroll', function(event) {
xScr1 = target0.scrollLeft;
yScr1 = target0.scrollTop;
if(xScr1 != xScr0) {
xScrollIsReceived = true;
}
if(yScr1 != yScr0) {
test_touchaction.step(function () {
yScrollIsReceived = true;
assert_true(true, "y-scroll received.");
});
updateDescriptionNextStepMouse();
}
if(xScrollIsReceived && yScrollIsReceived) {
test_touchaction.done();
updateDescriptionComplete();
}
});
}
function updateDescriptionNextStepMouse() {
document.getElementById('desc').innerHTML = "Test Description: Try to scroll text right using mouse (use mouse wheel or click on the scrollbar).";
}
</script>
<h1>touch-action: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

111
dom/events/test/pointerevents/pointerevent_touch-action-none-css_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,111 @@
<!doctype html>
<html>
<head>
<title>touch-action: none</title>
<meta name="assert" content="TA15.2 - With `touch-action: none` on a swiped or click/dragged element, `pointerdown+(optional pointermove)+pointerup` must be dispatched.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
width: 700px;
height: 430px;
touch-action: none;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: no panning/zooming/etc.</h4>
<p>Note: this test is for touch-devices only</p>
<div id="target0">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
var test_touchaction = async_test("touch-action attribute test");
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
// Check if "touch-action: none" attribute works properly
//TA: 15.2
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
on_event(target0, 'scroll', function(event) {
test_touchaction.step(failOnScroll, "scroll received while touch-action is none");
});
}
</script>
<h1>touch-action: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

106
dom/events/test/pointerevents/pointerevent_touch-action-pan-x-css_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,106 @@
<!doctype html>
<html>
<head>
<title>touch-action: pan-x</title>
<meta name="assert" content="TA15.3 - With `touch-action: pan-x` on a swiped or click/dragged element, only panning on the x-axis should be possible.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
width: 700px;
height: 430px;
touch-action: pan-x;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: only pans in x direction.</h4>
<p>Note: this test is for touch-devices only</p>
<div id="target0">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
var test_touchaction = async_test("touch-action attribute test");
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
// Check if "touch-action: pan-x" attribute works properly
//TA: 15.3
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_not_equals(target0.scrollLeft, 0, "scroll x offset should not be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
}
</script>
<h1>touch-action: pan-x</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

111
dom/events/test/pointerevents/pointerevent_touch-action-pan-x-pan-y-pan-y_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,111 @@
<!doctype html>
<html>
<head>
<title>touch-action: parent > child: pan-x pan-y > child: pan-y</title>
<meta name="assert" content="TA15.17 - Touch action 'pan-x pan-y' 'pan-y' test">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
.scroller > div {
touch-action: pan-x pan-y;
}
.scroller > div div {
touch-action: pan-y;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: only pans in y direction.</h4>
<p>Note: this test is for touch-devices only</p>
<div class="scroller" id="target0">
<div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
var test_touchaction = async_test("touch-action attribute test");
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
// Check if touch-action attribute works properly for embedded divs
//
// TA: 15.17
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_not_equals(target0.scrollTop, 0, "scroll y offset should not be 0 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
}
</script>
<h1>behaviour: pan-y</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

126
dom/events/test/pointerevents/pointerevent_touch-action-pan-x-pan-y_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,126 @@
<!doctype html>
<html>
<head>
<title>touch-action: pan-x pan-y</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
width: 700px;
height: 430px;
touch-action: pan-x pan-y;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll text DOWN. Wait for description update. Expected: pan enabled</h4>
<p>Note: this test is for touch-devices only</p>
<div id="target0">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<script type='text/javascript'>
var detected_pointertypes = {};
var xScrollIsReceived = false;
var yScrollIsReceived = false;
var xScr0, yScr0, xScr1, yScr1;
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var test_touchaction = async_test("touch-action attribute test");
xScr0 = target0.scrollLeft;
yScr0 = target0.scrollTop;
on_event(target0, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
});
on_event(target0, 'scroll', function(event) {
xScr1 = target0.scrollLeft;
yScr1 = target0.scrollTop;
if(xScr1 != xScr0) {
xScrollIsReceived = true;
}
if(yScr1 != yScr0) {
test_touchaction.step(function () {
yScrollIsReceived = true;
assert_true(true, "y-scroll received.");
});
updateDescriptionNextStep();
}
if(xScrollIsReceived && yScrollIsReceived) {
test_touchaction.done();
updateDescriptionComplete();
}
});
}
</script>
<h1>touch-action: pan-x pan-y</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

106
dom/events/test/pointerevents/pointerevent_touch-action-pan-y-css_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,106 @@
<!doctype html>
<html>
<head>
<title>touch-action: pan-y</title>
<meta name="assert" content="TA15.4 - With `touch-action: pan-y` on a swiped or click/dragged element, only panning in the y-axis should be possible.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
width: 700px;
height: 430px;
touch-action: pan-y;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: only pans in y direction.</h4>
<p>Note: this test is for touch-devices only</p>
<div id="target0">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
var test_touchaction = async_test("touch-action attribute test");
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
// Check if "touch-action: pan-y" attribute works properly
//TA: 15.4
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_not_equals(target0.scrollTop, 0, "scroll y offset should not be 0 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
}
</script>
<h1>touch-action: pan-y</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

113
dom/events/test/pointerevents/pointerevent_touch-action-span-test_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,113 @@
<!doctype html>
<html>
<head>
<title>Span touch-action test</title>
<meta name="assert" content="TA15.18 - The touch-action CSS property applies to all elements except non-replaced inline elements."
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
height: 150px;
width: 200px;
overflow-y: auto;
background: black;
padding: 100px;
position: relative;
}
#testspan {
touch-action: none;
font-size: 72pt;
padding: 0px 0px 180px 0px;
border: 2px solid red;
}
</style>
</head>
<body onload="run()">
<h2>Pointer Events touch-action attribute support</h2>
<h4 id="desc">Test Description: Try to scroll black element DOWN moving your touch outside of the red border. Wait for description update.</h4>
<p>Note: this test is for touch only</p>
<div id="target0">
<span id="testspan">
Test span
</span>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
var xScrollIsReceived = false;
var yScrollIsReceived = false;
var failScrollIsReceived = false;
var xScr0, yScr0, xScr1, yScr1;
var scrollReturnInterval = 500;
var isFirstPart = true;
setup({ explicit_timeout: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
//TA 15.18
var test_touchaction_div = async_test("touch-action attribute test out of element");
var test_touchaction_span = async_test("touch-action attribute test in element");
xScr0 = target0.scrollLeft;
yScr0 = target0.scrollTop;
on_event(btnComplete, 'click', function(event) {
test_touchaction_span.step(function() {
assert_not_equals(target0.scrollLeft, 0, "span scroll x offset should not be 0 in the end of the test");
assert_not_equals(target0.scrollTop, 0, "span scroll y offset should not be 0 in the end of the test");
assert_true(!isFirstPart, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively");
});
test_touchaction_span.done();
updateDescriptionComplete();
});
on_event(btnComplete, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
});
on_event(target0, 'scroll', function(event) {
if(isFirstPart) {
xScr1 = target0.scrollLeft;
yScr1 = target0.scrollTop;
if(xScr1 != xScr0) {
xScrollIsReceived = true;
}
if(yScr1 != yScr0) {
test_touchaction_div.step(function () {
yScrollIsReceived = true;
});
updateDescriptionSecondStepTouchActionElement(target0, scrollReturnInterval);
}
if(xScrollIsReceived && yScrollIsReceived) {
test_touchaction_div.done();
updateDescriptionThirdStepTouchActionElement(target0, scrollReturnInterval);
setTimeout(function() {
isFirstPart = false;
xScr0 = target0.scrollLeft;
xScr0 = target0.scrollLeft;
xScrollIsReceived = false;
yScrollIsReceived = false;
}, 2 * scrollReturnInterval); // avoid immediate triggering while scroll is still being performed
}
}
});
}
</script>
<h1>touch-action: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

122
dom/events/test/pointerevents/pointerevent_touch-action-svg-test_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,122 @@
<!doctype html>
<html>
<head>
<title>SVG test</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
height: 350px;
width: 300px;
overflow-y: auto;
background: black;
padding: 100px;
position: relative;
}
</style>
</head>
<body onload="run()">
<h2>Pointer Events touch-action attribute support</h2>
<h4 id="desc">Test Description: Try to scroll black element DOWN moving your touch outside of the red border. Wait for description update.</h4>
<p>Note: this test is for touch only</p>
<div id="target0">
<svg width="555" height="555" style="touch-action: none; border: 4px double red;">
<circle cx="305" cy="305" r="250" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
<br>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
var xScrollIsReceived = false;
var yScrollIsReceived = false;
var xScr0, yScr0, xScr1, yScr1;
var scrollReturnInterval = 1000;
var isFirstPart = true;
setup({ explicit_timeout: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
var test_touchaction_div = async_test("touch-action attribute test out of SVG");
var test_touchaction_svg = async_test("touch-action attribute test in SVG");
xScr0 = target0.scrollLeft;
yScr0 = target0.scrollTop;
on_event(btnComplete, 'click', function(event) {
test_touchaction_svg.step(function() {
assert_equals(target0.scrollLeft, 0, "SVG scroll x offset should be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "SVG scroll y offset should be 0 in the end of the test");
});
test_touchaction_svg.done();
updateDescriptionComplete();
});
on_event(btnComplete, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
});
on_event(target0, 'scroll', function(event) {
if(isFirstPart) {
xScr1 = target0.scrollLeft;
yScr1 = target0.scrollTop;
if(xScr1 != xScr0) {
xScrollIsReceived = true;
}
if(yScr1 != yScr0) {
test_touchaction_div.step(function () {
yScrollIsReceived = true;
assert_true(true, "y-scroll received.");
});
updateDescriptionSecondStepSVG();
}
if(xScrollIsReceived && yScrollIsReceived) {
test_touchaction_div.done();
updateDescriptionThirdStepSVG();
setTimeout(function() {
isFirstPart = false;
}, 2 * scrollReturnInterval);
}
}
});
}
function updateDescriptionSecondStepSVG() {
window.setTimeout(function() {
objectScroller(target0, 'up', 0);}
, scrollReturnInterval);
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT moving your touch outside of the red border";
}
function updateDescriptionThirdStepSVG() {
window.setTimeout(function() {
objectScroller(target0, 'left', 0);}
, scrollReturnInterval);
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the circle. Tap Complete button under the rectangle when done";
}
function objectScroller(target, direction, value) {
if (direction == 'up') {
target.scrollTop = 0;
} else if (direction == 'left') {
target.scrollLeft = 0;
}
}
</script>
<h1>touch-action: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

141
dom/events/test/pointerevents/pointerevent_touch-action-table-test_touch-manual.html Normal file
Просмотреть файл

@ -0,0 +1,141 @@
<!doctype html>
<html>
<head>
<title>Table touch-action test</title>
<meta name="assert" content="TA15.19 The touch-action CSS property applies to all elements except table rows, row groups, table columns, and column groups.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
height: 150px;
width: 200px;
overflow-y: auto;
background: black;
padding: 100px;
position: relative;
}
#testtable{
color: white;
width: 350px;
padding: 0px 0px 200px 0px;
border: 2px solid green;
}
.testtd, .testth {
border: 2px solid green;
height: 80px;
}
#row1 {
touch-action: none;
}
#cell3 {
touch-action: none;
}
</style>
</head>
<body onload="run()">
<h2>Pointer Events touch-action attribute support</h2>
<h4 id="desc">Test Description: Try to scroll element DOWN starting your touch over the 1st Row. Wait for description update.</h4>
<p>Note: this test is for touch only</p>
<div id="target0">
<table id="testtable">
<caption>The caption, first row element, and cell 3 have touch-action: none.</caption>
<tr id="row1"><th class="testth">Header 1 <td class="testtd">Cell 1 <td class="testtd">Cell 2</tr>
<tr id="row2"><th class="testth">Header 2 <td id="cell3" class="testtd">Cell 3 <td class="testtd">Cell 4</tr>
<tr id="row3"> <th class="testth">Header 3 <td class="testtd">Cell 5 <td class="testtd"> Cell 6</tr>
</table>
</div>
<br>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
var xScrollIsReceived = false;
var yScrollIsReceived = false;
var xScr0, yScr0, xScr1, yScr1;
var scrollReturnInterval = 1000;
var isFirstPart = true;
setup({ explicit_timeout: true });
add_completion_callback(showPointerTypes);
function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
//TA 15.19
var test_touchaction_cell = async_test("touch-action attribute test on the cell");
var test_touchaction_row = async_test("touch-action attribute test on the row");
xScr0 = target0.scrollLeft;
yScr0 = target0.scrollTop;
on_event(btnComplete, 'click', function(event) {
test_touchaction_cell.step(function() {
assert_equals(target0.scrollLeft, 0, "table scroll x offset should be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "table scroll y offset should be 0 in the end of the test");
assert_true(xScrollIsReceived && yScrollIsReceived, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively");
});
test_touchaction_cell.done();
updateDescriptionComplete();
});
on_event(btnComplete, 'pointerdown', function(event) {
detected_pointertypes[event.pointerType] = true;
});
on_event(target0, 'scroll', function(event) {
if(isFirstPart) {
xScr1 = target0.scrollLeft;
yScr1 = target0.scrollTop;
if(xScr1 != xScr0) {
xScrollIsReceived = true;
}
if(yScr1 != yScr0) {
test_touchaction_row.step(function () {
yScrollIsReceived = true;
});
updateDescriptionSecondStepTable(target0, scrollReturnInterval);
}
if(xScrollIsReceived && yScrollIsReceived) {
test_touchaction_row.done();
updateDescriptionThirdStepTable(target0, scrollReturnInterval);
setTimeout(function() {
isFirstPart = false;
}, 2 * scrollReturnInterval); // avoid immediate triggering while scroll is still being performed
}
}
else {
test_touchaction_cell.step(failOnScroll, "scroll received while shouldn't");
}
});
}
function updateDescriptionSecondStepTable(target, scrollReturnInterval, element) {
window.setTimeout(function() {
objectScroller(target, 'up', 0);
}
, scrollReturnInterval);
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT staring your touch over the Row 1";
}
function updateDescriptionThirdStepTable(target, scrollReturnInterval) {
window.setTimeout(function() {
objectScroller(target, 'left', 0);
}
, scrollReturnInterval);
document.getElementById('desc').innerHTML = "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the Cell 3";
}
</script>
<h1>touch-action: none</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

101
dom/events/test/pointerevents/pointerevent_touch-action-verification.html Normal file
Просмотреть файл

@ -0,0 +1,101 @@
<!doctype html>
<html>
<head>
<title>touch-action: basic verification</title>
<meta name="assert" content="TA15.20 - The touch-action CSS property determines whether touch input MAY trigger default behavior supplied by the user agent.
auto: The user agent MAY determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element.
none: Touches that begin on the element MUST NOT trigger default touch behaviors.
pan-x: The user agent MAY consider touches that begin on the element only for the purposes of horizontally scrolling the element's nearest ancestor with horizontally scrollable content.
pan-y: The user agent MAY consider touches that begin on the element only for the purposes of vertically scrolling the element's nearest ancestor with vertically scrollable content.
manipulation: The user agent MAY consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<style>
#target0 {
width: 700px;
height: 20px;
touch-action: auto;
}
#target1 {
width: 700px;
height: 20px;
touch-action: none;
background: black;
margin-top: 5px;
touch-action: pan-x;
}
#target2 {
width: 700px;
height: 20px;
touch-action: none;
background: black;
margin-top: 5px;
touch-action: pan-y;
}
#target3 {
width: 700px;
height: 20px;
touch-action: none;
background: black;
margin-top: 5px;
touch-action: none;
}
#target4 {
width: 700px;
height: 20px;
touch-action: none;
background: black;
margin-top: 5px;
touch-action: manipulation;
}
</style>
</head>
<body onload="run()">
<h2>Pointer Events touch-action attribute support</h2>
<h4 id="desc">Test Description: Test will automatically check behaviour of following values: 'auto', 'pan-x', 'pan-y', ' none', 'manipulation'</h4>
<div id="target0"></div>
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<div id="target4"></div>
<script type='text/javascript'>
var detected_pointertypes = {};
setup({ explicit_done: true });
function run() {
var target0 = document.getElementById('target0');
var target1 = document.getElementById('target1');
var target2 = document.getElementById('target2');
var target3 = document.getElementById('target3');
var target4 = document.getElementById('target4');
//TA 15.20
test(function() {
assert_true(getComputedStyle(target0).touchAction == 'auto', "'auto' is set properly");
}, "'auto' is set properly");
test(function() {
assert_true(getComputedStyle(target1).touchAction == 'pan-x', "'pan-x' is corrected properly");
}, "'pan-x' is corrected properly");
test(function() {
assert_true(getComputedStyle(target2).touchAction == 'pan-y', "'pan-y' is set properly");
}, "'pan-y' is set properly");
test(function() {
assert_true(getComputedStyle(target3).touchAction == 'none', "'none' is set properly");
}, "'none' is set properly");
test(function() {
assert_true(getComputedStyle(target4).touchAction == 'manipulation', "'manipulation' is set properly");
}, "'manipulation' is set properly");
done();
}
</script>
<h1>touch-action: basic verification</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>

5
dom/events/test/pointerevents/readme.md Normal file
Просмотреть файл

@ -0,0 +1,5 @@
Directory for Pointer Events Tests
All tests were got from official repository:
https://github.com/w3c/web-platform-tests/tree/master/pointerevents