Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 08:15:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1323960 Part2: sync test cases from testing/web-platform/tests/pointerevents. r=smaug

Browse Source 
MozReview-Commit-ID: 6KIRgC5oQ2Q
This commit is contained in:
Stone Shih 2016-12-17 12:54:47 +08:00
parent 838a09cbf3
commit d0c20dd3b5
44 changed files with 501 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dom/events/test/pointerevents/mochitest.ini
View File

@ -116,6 +116,10 @@ support-files =
pointerevent_touch-action-span-test_touch-manual.html
pointerevent_touch-action-svg-test_touch-manual.html
pointerevent_touch-action-table-test_touch-manual.html
pointerevent_touch-action-pan-down-css_touch-manual.html
pointerevent_touch-action-pan-left-css_touch-manual.html
pointerevent_touch-action-pan-right-css_touch-manual.html
pointerevent_touch-action-pan-up-css_touch-manual.html
[test_bug1285128.html]
[test_bug1293174_implicit_pointer_capture_for_touch_1.html]
support-files = bug1293174_implicit_pointer_capture_for_touch_1.html

3
dom/events/test/pointerevents/pointerevent_attributes_hoverable_pointers-manual.html
View File

@ -5,10 +5,9 @@
<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="/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" src="mochitest_support_internal.js"></script>
<script>
var detected_pointertypes = {};
var detected_eventTypes = {};

3
dom/events/test/pointerevents/pointerevent_attributes_nohover_pointers-manual.html
View File

@ -5,10 +5,9 @@
<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="/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" src="mochitest_support_internal.js"></script>
<script>
var detected_pointertypes = {};
var detected_eventTypes = {};

5
dom/events/test/pointerevents/pointerevent_capture_mouse-manual.html
View File

@ -5,13 +5,11 @@
<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="/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" src="mochitest_support_internal.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:
@ -26,7 +24,6 @@
</ol>
</h4>
Test passes if the proper behaviour of the events is observed.
-->
<div id="target0"></div>
<br>
<div id="target1"></div>

5
dom/events/test/pointerevents/pointerevent_capture_suppressing_mouse-manual.html
View File

@ -5,13 +5,11 @@
<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="/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" src="mochitest_support_internal.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:
@ -27,7 +25,6 @@
</ol>
</h4>
Test passes if the proper behaviour of the events is observed.
-->
<div id="target0"></div>
<br>
<div id="target1"></div>

5
dom/events/test/pointerevents/pointerevent_change-touch-action-onpointerdown_touch-manual.html
View File

@ -5,9 +5,8 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.js"></script>
<style>
#target0 {
background: black;
@ -22,12 +21,10 @@
</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

5
dom/events/test/pointerevents/pointerevent_constructor.html
View File

@ -5,12 +5,11 @@
<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="/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" src="mochitest_support_internal.js"></script>
</head>
<body onload="run()">
<body>
<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>

5
dom/events/test/pointerevents/pointerevent_element_haspointercapture-manual.html
View File

@ -5,9 +5,8 @@
<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="/resources/testharnessreport.js"></script>
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript" src="mochitest_support_internal.js"></script>
<script>
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
@ -108,7 +107,6 @@
</head>
<body onload="run()">
<h1>Element.hasPointerCapture test</h1>
<!--
<h4>
Test Description: This test checks if Element.hasPointerCapture returns value correctly
<ol>
@ -119,7 +117,6 @@
</ol>
</h4>
<p>
-->
<div id="target0" touch-action:none></div>
<div id="target1" touch-action:none></div>
<div id="complete-notice">

5
dom/events/test/pointerevents/pointerevent_element_haspointercapture_release_pending_capture-manual.html
View File

@ -5,9 +5,8 @@
<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="/resources/testharnessreport.js"></script>
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript" src="mochitest_support_internal.js"></script>
<script>
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
@ -55,7 +54,6 @@
</head>
<body onload="run()">
<h1>Element.hasPointerCapture test after the pending pointer capture element releases pointer capture</h1>
<!--
<h4>
Test Description: This test checks if Element.hasPointerCapture returns value correctly after the pending pointer capture element releases pointer capture
<ol>
@ -64,7 +62,6 @@
<li> Release the pointer
</ol>
</h4>
-->
<p>
<div id="target0" touch-action:none></div>
<div id="target1" touch-action:none></div>

5
dom/events/test/pointerevents/pointerevent_gotpointercapture_before_first_pointerevent-manual.html
View File

@ -8,10 +8,9 @@
<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-->
<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" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("gotpointercapture event"); // set up test harness
@ -79,13 +78,11 @@
</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>

5
dom/events/test/pointerevents/pointerevent_lostpointercapture_for_disconnected_node-manual.html
View File

@ -5,12 +5,10 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.js"></script>
</head>
<body>
<!--
<h1>Pointer Events - lostpointercapture when capturing element is removed</h1>
<h4>
Test Description:
@ -21,7 +19,6 @@
<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>

5
dom/events/test/pointerevents/pointerevent_lostpointercapture_is_first-manual.html
View File

@ -6,13 +6,11 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.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.
@ -23,7 +21,6 @@
</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">

5
dom/events/test/pointerevents/pointerevent_multiple_primary_pointers_boundary_events-manual.html
View File

@ -7,9 +7,8 @@
<meta name="assert" content="When more than one primary pointers are active, each will have an independent sequence of pointer boundary events but the compatibilty mouse boundary events have their own sequence."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<!--script src="/resources/testharnessreport.js"></script-->
<script src="/resources/testharnessreport.js"></script>
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var test_pointerEvent = async_test("Multi-pointer boundary compat events");
add_completion_callback(end_of_test);
@ -118,7 +117,6 @@
</head>
<body onload="run()">
<h1>Pointer Event: Boundary compatibility events for multiple primary pointers</h1>
<!--
<h4>
When more than one primary pointers are active, each will have an independent sequence of pointer boundary events but the compatibilty mouse boundary events have their own sequence.
</h4>
@ -129,7 +127,6 @@
<li>Move the mouse into Target0 (if not there already) and move inside it.</li>
<li>Click Done (without passing over Target1).</li>
</ol>
-->
<div id="done">
Done
</div>

5
dom/events/test/pointerevents/pointerevent_pointerId_scope-manual.html
View File

@ -10,10 +10,9 @@ http://www.w3.org/wiki/PointerEvents/TestAssertions
<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="/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" src="mochitest_support_internal.js"></script>
<script>
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerId of an active pointer is the same across iframes");
@ -67,12 +66,10 @@ http://www.w3.org/wiki/PointerEvents/TestAssertions
<body onload="run()">
<h1>Pointer Events pointerdown tests</h1>
Complete the following actions:
<!--
<ol>
<li>Start with your pointing device outside of black box, then move it into black box. If using touch just press in black box and don't release.
<li>Move your pointing device into purple box (without leaving the digitizer range if you are using hover supported pen or without releasing touch if using touch). Then move it out of the purple box.
</ol>
-->
<div id="target0" class="touchActionNone">
</div>
<iframe src="resources/pointerevent_pointerId_scope-iframe.html" id="innerframe"></iframe>

5
dom/events/test/pointerevents/pointerevent_pointercancel_touch-manual.html
View File

@ -4,22 +4,19 @@
<title>PointerCancel - touch</title>
<meta name="viewport" content="width=device-width">
<script src="/resources/testharness.js"></script>
<!--script src="/resources/testharnessreport.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>
<script type="text/javascript" src="mochitest_support_internal.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 = {};

5
dom/events/test/pointerevents/pointerevent_pointerenter_does_not_bubble-manual.html
View File

@ -8,10 +8,9 @@
<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-->
<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" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerEnter event does not bubble"); // set up test harness
@ -69,7 +68,6 @@
</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.
@ -77,7 +75,6 @@
<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>

3
dom/events/test/pointerevents/pointerevent_pointerleave_after_pointercancel_touch-manual.html
View File

@ -5,10 +5,9 @@
<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="/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" src="mochitest_support_internal.js"></script>
</head>
<body class="scrollable" onload="run()">
<h2>pointerleave after pointercancel</h2>

5
dom/events/test/pointerevents/pointerevent_pointerleave_descendant_over-manual.html
View File

@ -5,13 +5,11 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.js"></script>
</head>
<body onload="run()">
<h1>pointerleave</h1>
<!--
<h4>
Test Description: This test checks if pointerleave event works properly.
<ol>
@ -22,7 +20,6 @@
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>

5
dom/events/test/pointerevents/pointerevent_pointerleave_descendants-manual.html
View File

@ -5,19 +5,16 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.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>

5
dom/events/test/pointerevents/pointerevent_pointerleave_does_not_bubble-manual.html
View File

@ -8,10 +8,9 @@
<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-->
<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" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerLeave event does not bubble"); // set up test harness
@ -58,7 +57,6 @@
</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.
@ -66,7 +64,6 @@
<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>

3
dom/events/test/pointerevents/pointerevent_pointerleave_pen-manual.html
View File

@ -8,10 +8,9 @@
<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-->
<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" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("pointerleave event"); // set up test harness

3
dom/events/test/pointerevents/pointerevent_pointermove-manual.html
View File

@ -6,10 +6,9 @@
<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-->
<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" src="mochitest_support_internal.js"></script>
</head>
<body onload="run()">
<h2>PointerMove</h2>

5
dom/events/test/pointerevents/pointerevent_pointermove_isprimary_same_as_pointerdown-manual.html
View File

@ -8,10 +8,9 @@
<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-->
<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" src="mochitest_support_internal.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
@ -51,7 +50,6 @@
</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.
@ -60,7 +58,6 @@
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">

3
dom/events/test/pointerevents/pointerevent_pointermove_on_chorded_mouse_button-manual.html
View File

@ -6,10 +6,9 @@
<meta name="assert" content="When a pointer changes button state and does not produce a different event, 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-->
<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" src="mochitest_support_internal.js"></script>
</head>
<body onload="run()">
<h2>PointerMove</h2>

3
dom/events/test/pointerevents/pointerevent_pointerout_after_pointercancel_touch-manual.html
View File

@ -5,10 +5,9 @@
<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="/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" src="mochitest_support_internal.js"></script>
</head>
<body class="scrollable" onload="run()">
<h2>pointerout</h2>

3
dom/events/test/pointerevents/pointerevent_pointerout_pen-manual.html
View File

@ -5,10 +5,9 @@
<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="/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" src="mochitest_support_internal.js"></script>
</head>
<body onload="run()">
<h2>pointerout</h2>

3
dom/events/test/pointerevents/pointerevent_pointerout_received_once-manual.html
View File

@ -5,9 +5,8 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.js"></script>
</head>
<body onload="run()">
<h1>pointerout received just once</h1>

5
dom/events/test/pointerevents/pointerevent_releasepointercapture_events_to_original_target-manual.html
View File

@ -7,10 +7,9 @@
<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-->
<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" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("lostpointercapture: subsequent events to target."); // set up test harness
@ -113,14 +112,12 @@
<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>

5
dom/events/test/pointerevents/pointerevent_releasepointercapture_invalid_pointerid-manual.html
View File

@ -10,10 +10,9 @@
<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-->
<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" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("releasePointerCapture: DOMException InvalidPointerId"); // set up test harness
@ -58,14 +57,12 @@
<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>

5
dom/events/test/pointerevents/pointerevent_releasepointercapture_onpointercancel_touch-manual.html
View File

@ -5,13 +5,11 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.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>
@ -20,7 +18,6 @@
</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'>

5
dom/events/test/pointerevents/pointerevent_releasepointercapture_onpointerup_mouse-manual.html
View File

@ -5,13 +5,11 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.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>
@ -20,7 +18,6 @@
</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">

5
dom/events/test/pointerevents/pointerevent_releasepointercapture_release_right_after_capture-manual.html
View File

@ -5,9 +5,8 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
@ -44,7 +43,6 @@
</head>
<body onload="run()">
<h1>Release pointer capture right after setpointercapture</h1>
<!--
<h4>Test Description:
When calling releasePointer right after setPointerCapture method is invoked, the pending pointer capture should be cleared and no element should receive gotpointercapture and lostpointercapture events
<ol>
@ -52,7 +50,6 @@
<li>Move mouse and release mouse button
</ol>
</h4>
-->
<br>
<div id="target0" touch-action:none></div>
<div id="target1" touch-action:none></div>

5
dom/events/test/pointerevents/pointerevent_setpointercapture_disconnected-manual.html
View File

@ -5,9 +5,8 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
@ -40,12 +39,10 @@
</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>

5
dom/events/test/pointerevents/pointerevent_setpointercapture_inactive_button_mouse-manual.html
View File

@ -5,13 +5,11 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.js"></script>
</head>
<body onload="run()">
<h1>setPointerCapture</h1>
<!--
<h4>
Test Description: This test checks if setPointerCapture works properly.
<ol>
@ -20,7 +18,6 @@
</ol>
</h4>
<p>
-->
<div id="target0" style="background:black; color:white;"></div>
<script>
var detected_pointertypes = {};

5
dom/events/test/pointerevents/pointerevent_setpointercapture_invalid_pointerid-manual.html
View File

@ -9,10 +9,9 @@
<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-->
<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" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
var test_pointerEvent = async_test("setPointerCapture: DOMException InvalidPointerId"); // set up test harness
@ -49,12 +48,10 @@
</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>

5
dom/events/test/pointerevents/pointerevent_setpointercapture_override_pending_capture_element-manual.html
View File

@ -5,9 +5,8 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
@ -46,7 +45,6 @@
</head>
<body onload="run()">
<h1>Pointer Event: Test overriding the pending pointer capture element</h1>
<!--
<h4>Test Description:
After an element setPointerCapture, if another element also setPointerCapture and override it, the old pending pointer capture element shouldn't receive any gotpointercapture or lostpointercapture event
<ol>
@ -54,7 +52,6 @@
<li>Move mouse and release mouse button
</ol>
</h4>
-->
<br>
<div id="target0" touch-action:none></div>
<div id="target1" touch-action:none></div>

6
dom/events/test/pointerevents/pointerevent_setpointercapture_relatedtarget-manual.html
View File

@ -5,12 +5,10 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.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:
@ -22,7 +20,7 @@
</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>

5
dom/events/test/pointerevents/pointerevent_setpointercapture_to_same_element_twice-manual.html
View File

@ -5,9 +5,8 @@
<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="/resources/testharnessreport.js"></script>
<script src="pointerevent_support.js"></script>
<script src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
@ -45,7 +44,6 @@
</head>
<body onload="run()">
<h1>Pointer Event: setPointerCapture to the element which already captured the pointer</h1>
<!--
<h4>Test Description:
When the setPointerCapture method is invoked, if the target element had already captured the pointer, it should not trigger any gotpointercapture or lostpointercapture event
<ol>
@ -53,7 +51,6 @@
<li>Move mouse and release mouse button
</ol>
</h4>
-->
<br>
<div id="target0" touch-action:none></div>
<div id="target1" touch-action:none></div>

5
dom/events/test/pointerevents/pointerevent_suppress_compat_events_on_click-manual.html
View File

@ -7,9 +7,8 @@
<meta name="assert" content="When a pointerdown is canceled, a click/tap shouldn't fire any compatibility mouse events."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<!--script src="/resources/testharnessreport.js"></script-->
<script src="/resources/testharnessreport.js"></script>
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var test_pointerEvent = async_test("Suppress compat mouse events on click");
add_completion_callback(end_of_test);
@ -79,13 +78,11 @@
<h4>
When a pointerdown is canceled, a click/tap shouldn't fire any compatibility mouse events.
</h4>
<!--
<ol>
<li> Click or tap on Target0.</li>
<li> Click or tap on Target1.</li>
<li> Click Done.</li>
</ol>
-->
<div id="target0">
Target0
</div>

5
dom/events/test/pointerevents/pointerevent_suppress_compat_events_on_drag_mouse-manual.html
View File

@ -7,9 +7,8 @@
<meta name="assert" content="When a pointerdown is canceled, a mouse drag shouldn't fire any compatibility mouse events."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<!--script src="/resources/testharnessreport.js"></script-->
<script src="/resources/testharnessreport.js"></script>
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript" src="mochitest_support_internal.js"></script>
<script type="text/javascript">
var test_pointerEvent = async_test("Suppress compat mouse events on drag");
add_completion_callback(end_of_test);
@ -89,7 +88,6 @@
</head>
<body onload="run()">
<h1>Pointer Event: Suppress compatibility mouse events on drag</h1>
<!--
<h4>
When a pointerdown is canceled, a mouse drag shouldn't fire any compatibility mouse events.
</h4>
@ -98,7 +96,6 @@
<li> Drag mouse within Target1 &amp; release.</li>
<li> Click Done.</li>
</ol>
-->
<div id="target0">
Target0
</div>

114
dom/events/test/pointerevents/pointerevent_touch-action-pan-down-css_touch-manual.html Normal file
View File

@ -0,0 +1,114 @@
<!doctype html>
<html>
<head>
<title>touch-action: pan-down</title>
<meta name="assert" content="TA15.4 - With `touch-action: pan-down` on a swiped or click/dragged element, only panning in the y-axis down direction 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-down;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element UP (drag down), then RIGHT (drag left), then DOWN (drag up). Tap Complete button under the rectangle when done. Expected: only pans in down 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");
target0.scrollTop = 200;
var scrollListenerExecuted = false;
target0.addEventListener("scroll", function(event) {
scrollListenerExecuted = true;
assert_greater_than_equal(target0.scrollTop, 200);
});
// Check if "touch-action: pan-down" attribute works properly
//TA: 15.4
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_true(scrollListenerExecuted, "scroll listener should have been executed by the end of the test");
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_greater_than(target0.scrollTop, 200, "scroll y offset should be greater than 200 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
}
</script>
<h1>touch-action: pan-down</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>

114
dom/events/test/pointerevents/pointerevent_touch-action-pan-left-css_touch-manual.html Normal file
View File

@ -0,0 +1,114 @@
<!doctype html>
<html>
<head>
<title>touch-action: pan-left</title>
<meta name="assert" content="TA15.3 - With `touch-action: pan-left` on a swiped or click/dragged element, only panning on the x-axis left direction 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-left;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN (drag up), then RIGHT (drag left), then LEFT (drag right). Tap Complete button under the rectangle when done. Expected: only pans in left 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");
target0.scrollLeft = 200;
var scrollListenerExecuted = false;
target0.addEventListener("scroll", function(event) {
scrollListenerExecuted = true;
assert_less_than_equal(target0.scrollLeft, 200);
});
// Check if "touch-action: pan-left" attribute works properly
//TA: 15.3
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_true(scrollListenerExecuted, "scroll listener should have been executed by the end of the test");
assert_less_than(target0.scrollLeft, 200, "scroll x offset should be less than 200 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-left</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>

114
dom/events/test/pointerevents/pointerevent_touch-action-pan-right-css_touch-manual.html Normal file
View File

@ -0,0 +1,114 @@
<!doctype html>
<html>
<head>
<title>touch-action: pan-right</title>
<meta name="assert" content="TA15.3 - With `touch-action: pan-right` on a swiped or click/dragged element, only panning on the x-axis right direction 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-right;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN (drag up), then LEFT (drag right), then RIGHT (drag left). Tap Complete button under the rectangle when done. Expected: only pans in right 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");
target0.scrollLeft = 200;
var scrollListenerExecuted = false;
target0.addEventListener("scroll", function(event) {
scrollListenerExecuted = true;
assert_greater_than_equal(target0.scrollLeft, 200);
});
// Check if "touch-action: pan-right" attribute works properly
//TA: 15.3
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_true(scrollListenerExecuted, "scroll listener should have been executed by the end of the test");
assert_greater_than(target0.scrollLeft, 200, "scroll x offset should be greater than 200 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-right</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>

114
dom/events/test/pointerevents/pointerevent_touch-action-pan-up-css_touch-manual.html Normal file
View File

@ -0,0 +1,114 @@
<!doctype html>
<html>
<head>
<title>touch-action: pan-up</title>
<meta name="assert" content="TA15.4 - With `touch-action: pan-up` on a swiped or click/dragged element, only panning in the y-axis up direction 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-up;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN (drag up), then RIGHT (drag left), then UP (drag down). Tap Complete button under the rectangle when done. Expected: only pans in up 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");
target0.scrollTop = 200;
var scrollListenerExecuted = false;
target0.addEventListener("scroll", function(event) {
scrollListenerExecuted = true;
assert_less_than_equal(target0.scrollTop, 200);
});
// Check if "touch-action: pan-up" attribute works properly
//TA: 15.4
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_true(scrollListenerExecuted, "scroll listener should have been executed by the end of the test");
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_less_than(target0.scrollTop, 200, "scroll y offset should be less than 200 in the end of the test");
});
test_touchaction.done();
updateDescriptionComplete();
});
}
</script>
<h1>touch-action: pan-up</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>