mirror of
https://github.com/servo/servo.git
synced 2025-09-04 20:18:21 +01:00
Update web-platform-tests to revision 4a5223502fa660ce03e470af6a61c8bc26c5a8ee
This commit is contained in:
WPT Sync Bot
parent
c5f7c9ccf3
commit
e891345f26
1328 changed files with 36632 additions and 20588 deletions
|
|
@ -48,8 +48,20 @@ interface PointerEvent : MouseEvent {
|
|||
|
||||
</pre>
|
||||
<script>
|
||||
var idl_array = new IdlArray();
|
||||
idl_array.add_untested_idls(document.getElementById("untested_idl").textContent);
|
||||
promise_test(async function () {
|
||||
const dom = await fetch('/interfaces/dom.idl').then(r => r.text());
|
||||
const uievents = await fetch('/interfaces/uievents.idl').then(r => r.text());
|
||||
|
||||
const idl_array = new IdlArray();
|
||||
idl_array.add_untested_idls(dom, { only: ['EventInit'] });
|
||||
idl_array.add_untested_idls(uievents, { only: [
|
||||
'UIEventInit',
|
||||
'MouseEventInit',
|
||||
'EventModifierInit']
|
||||
});
|
||||
idl_array.add_untested_idls(
|
||||
document.getElementById("untested_idl").textContent);
|
||||
idl_array.add_idls(document.getElementById("idl").textContent);
|
||||
idl_array.test();
|
||||
}, 'pointerevents extension interfaces');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- This is a fork of the main to support new additions to touch-action.
|
||||
It should be integrated into web-platform-test when they are accepted into the
|
||||
specification. -->
|
||||
<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>
|
||||
<style>
|
||||
/*
|
||||
Give some rules below something to override in order to test
|
||||
that they really are being parsed
|
||||
*/
|
||||
.defnone {
|
||||
touch-action: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<h2>Pointer Events touch-action attribute support</h2>
|
||||
<h4 id="desc">Test Description: Test will automatically check parsing behaviour of various touch-action combinations.</h4>
|
||||
<script type='text/javascript'>
|
||||
var detected_pointertypes = {};
|
||||
|
||||
setup({ explicit_done: true });
|
||||
|
||||
function run() {
|
||||
var tests = document.querySelectorAll('.test');
|
||||
//TA 15.20
|
||||
for (var i = 0; i < tests.length; i++) {
|
||||
test(function() {
|
||||
var style = window.getComputedStyle(tests[i]);
|
||||
assert_equals(tests[i].attributes.expected.value, style.touchAction);
|
||||
}, tests[i].id);
|
||||
}
|
||||
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>
|
||||
<div class="test" id="default" expected="auto"></div>
|
||||
<div class="test defnone" id="stylesheet-none" expected="none"></div>
|
||||
<div class="test defnone" id="explicit-auto" style="touch-action: auto;" expected="auto"></div>
|
||||
<div class="test" id="explicit-pan-x" style="touch-action: pan-x;" expected="pan-x"></div>
|
||||
<div class="test" id="explicit-pan-left" style="touch-action: pan-left;" expected="pan-left"></div>
|
||||
<div class="test" id="explicit-pan-right" style="touch-action: pan-right;" expected="pan-right"></div>
|
||||
<div class="test" id="explicit-pan-y" style="touch-action: pan-y;" expected="pan-y"></div>
|
||||
<div class="test" id="explicit-pan-up" style="touch-action: pan-up;" expected="pan-up"></div>
|
||||
<div class="test" id="explicit-pan-down" style="touch-action: pan-down;" expected="pan-down"></div>
|
||||
<div class="test" id="explicit-pinch-zoom" style="touch-action: pinch-zoom;" expected="pinch-zoom"></div>
|
||||
<div class="test" id="explicit-pan-x-pan-y" style="touch-action: pan-x pan-y;" expected="pan-x pan-y"></div>
|
||||
<div class="test" id="explicit-pan-y-pan-x" style="touch-action: pan-y pan-x;" expected="pan-x pan-y"></div>
|
||||
<div class="test" id="explicit-pan-left-pan-up" style="touch-action: pan-left pan-up;" expected="pan-left pan-up"></div>
|
||||
<div class="test" id="explicit-pan-left-pan-down" style="touch-action: pan-left pan-down;" expected="pan-left pan-down"></div>
|
||||
<div class="test" id="explicit-pan-right-pan-up" style="touch-action: pan-right pan-up;" expected="pan-right pan-up"></div>
|
||||
<div class="test" id="explicit-pan-right-pan-down" style="touch-action: pan-right pan-down;" expected="pan-right pan-down"></div>
|
||||
<div class="test" id="explicit-pan-up-pan-left" style="touch-action: pan-up pan-left;" expected="pan-left pan-up"></div>
|
||||
<div class="test" id="explicit-pan-up-pan-right" style="touch-action: pan-up pan-right;" expected="pan-right pan-up"></div>
|
||||
<div class="test" id="explicit-pan-down-pan-left" style="touch-action: pan-down pan-left;" expected="pan-left pan-down"></div>
|
||||
<div class="test" id="explicit-pan-down-pan-right" style="touch-action: pan-down pan-right;" expected="pan-right pan-down"></div>
|
||||
<div class="test" id="explicit-pinch-zoom-pan-x-pan-up" style="touch-action: pinch-zoom pan-x pan-up;" expected="pan-x pan-up pinch-zoom"></div>
|
||||
<div class="test" id="explicit-pinch-zoom-pan-x-pan-y" style="touch-action: pinch-zoom pan-x pan-y;" expected="manipulation"></div>
|
||||
<div class="test" id="explicit-manipulation" style="touch-action: manipulation;" expected="manipulation"></div>
|
||||
<div class="test" id="explicit-none" style="touch-action: none;" expected="none"></div>
|
||||
<div class="test" id="explicit-invalid-1" style="touch-action: bogus;" expected="auto"></div>
|
||||
<div class="test defnone" id="explicit-invalid-2" style="touch-action: auto pan-x;" expected="none"></div>
|
||||
<div class="test" id="explicit-invalid-3" style="touch-action: pan-y none;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-4" style="touch-action: pan-x pan-x;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-5" style="touch-action: manipulation pan-x;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-6" style="touch-action: pan-x pan-left;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-7" style="touch-action: auto pan-left;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-8" style="touch-action: none pan-left;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-9" style="touch-action: pan-x pan-right;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-10" style="touch-action: pan-y pan-up;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-11" style="touch-action: pan-y pan-down;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-12" style="touch-action: pan-left pan-right;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-13" style="touch-action: pan-up pan-down;" expected="auto"></div>
|
||||
<div class="test" id="explicit-invalid-14" style="touch-action: pinch-zoom none;" expected="auto"></div>
|
||||
<div style="touch-action: none;">
|
||||
<div class="test" id="not-inherited" expected="auto"></div>
|
||||
<div class="test" id="inherit" style="touch-action: inherit;" expected="none"></div>
|
||||
</div>
|
||||
<div class="test defnone" id="initial" style="touch-action: initial;" expected="auto"></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue