mirror of
https://github.com/servo/servo.git
synced 2025-08-04 13:10:20 +01:00
Update web-platform-tests to revision d73b07b850fa51f23e846518bb6e8c59c58eef19
This commit is contained in:
parent
62031e3cb0
commit
7776ed79d7
107 changed files with 3306 additions and 538 deletions
|
@ -0,0 +1,9 @@
|
||||||
|
[filereader_events.any.html]
|
||||||
|
[events are dispatched in the correct order for an empty blob]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
|
[filereader_events.any.worker.html]
|
||||||
|
[events are dispatched in the correct order for an empty blob]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
[filereader_result.html]
|
||||||
|
[result is null during "loadstart" event for readAsBinaryString]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[result is null during "loadstart" event for readAsDataURL]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[result is null during "progress" event for readAsArrayBuffer]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[result is null during "progress" event for readAsBinaryString]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[result is null during "loadstart" event for readAsArrayBuffer]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[readAsBinaryString]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[result is null during "progress" event for readAsDataURL]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[result is null during "loadstart" event for readAsText]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[result is null during "progress" event for readAsText]
|
||||||
|
expected: FAIL
|
||||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -0,0 +1,4 @@
|
||||||
|
[getComputedStyle-border-radius-001.html]
|
||||||
|
[testing border-radius shorthand]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
[getComputedStyle-border-radius-003.html]
|
||||||
|
[testing border-radius shorthand]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
[matchMedia-display-none-iframe.html]
|
||||||
|
expected: ERROR
|
|
@ -2,6 +2,7 @@
|
||||||
type: testharness
|
type: testharness
|
||||||
|
|
||||||
[single-byte-decoder.html?document]
|
[single-byte-decoder.html?document]
|
||||||
|
expected: TIMEOUT
|
||||||
[ISO-8859-4: iso_8859-4:1988 (document.characterSet and document.inputEncoding)]
|
[ISO-8859-4: iso_8859-4:1988 (document.characterSet and document.inputEncoding)]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
@ -312,3 +312,24 @@
|
||||||
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
[<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: combined response Content-Type: */* text/html]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: separate response Content-Type: text/html;" text/plain]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: separate response Content-Type: text/html;charset=gbk text/plain text/html]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: separate response Content-Type: */* text/html]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: separate response Content-Type: text/html;x=" text/plain]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
@ -11,3 +11,6 @@
|
||||||
[X-Content-Type-Options%3A%20nosniff%0C]
|
[X-Content-Type-Options%3A%20nosniff%0C]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[X-Content-Type-Options%3A%20%2Cnosniff]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
@ -1,4 +0,0 @@
|
||||||
[traverse_the_history_1.html]
|
|
||||||
[Multiple history traversals from the same task]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
[traverse_the_history_5.html]
|
||||||
|
[Multiple history traversals, last would be aborted]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
@ -90,3 +90,21 @@
|
||||||
[[INPUT in PASSWORD status\] The value attribute mismatches the pattern attribute]
|
[[INPUT in PASSWORD status\] The value attribute mismatches the pattern attribute]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[[INPUT in EMAIL status\] The value attribute mismatches the pattern attribute even when a subset matches]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[[INPUT in TEL status\] The value attribute mismatches the pattern attribute even when a subset matches]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[[INPUT in PASSWORD status\] The value attribute mismatches the pattern attribute even when a subset matches]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[[INPUT in TEXT status\] The value attribute mismatches the pattern attribute even when a subset matches]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[[INPUT in SEARCH status\] The value attribute mismatches the pattern attribute even when a subset matches]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[[INPUT in URL status\] The value attribute mismatches the pattern attribute even when a subset matches]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
@ -198,3 +198,6 @@
|
||||||
[Test whitespace-only attribute value]
|
[Test whitespace-only attribute value]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[one-time-code is an allowed autocomplete field name]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
[iframe_005.html]
|
||||||
|
[document.write external script into iframe write back into parent]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
[ignore-opens-during-unload.window.html]
|
[ignore-opens-during-unload.window.html]
|
||||||
expected: CRASH
|
expected: TIMEOUT
|
||||||
[ignore-opens-during-unload]
|
[ignore-opens-during-unload]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
@ -1,2 +0,0 @@
|
||||||
[Worker-constructor.html]
|
|
||||||
expected: ERROR
|
|
9
tests/wpt/metadata/xhr/event-timeout-order.any.js.ini
Normal file
9
tests/wpt/metadata/xhr/event-timeout-order.any.js.ini
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
[event-timeout-order.any.html]
|
||||||
|
[XMLHttpRequest: event - timeout (order of events)]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
|
[event-timeout-order.any.worker.html]
|
||||||
|
[XMLHttpRequest: event - timeout (order of events)]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
[event-upload-progress-crossorigin.any.html]
|
||||||
|
[Upload events registered too late (resources/redirect.py?code=307&location=http://www1.web-platform.test:8000/xhr/resources/corsenabled.py)]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Upload events registered too late (http://www1.web-platform.test:8000/xhr/resources/corsenabled.py)]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
|
[event-upload-progress-crossorigin.any.worker.html]
|
||||||
|
[Upload events registered too late (resources/redirect.py?code=307&location=http://www1.web-platform.test:8000/xhr/resources/corsenabled.py)]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Upload events registered too late (http://www1.web-platform.test:8000/xhr/resources/corsenabled.py)]
|
||||||
|
expected: FAIL
|
||||||
|
|
15
tests/wpt/metadata/xhr/event-upload-progress.any.js.ini
Normal file
15
tests/wpt/metadata/xhr/event-upload-progress.any.js.ini
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
[event-upload-progress.any.worker.html]
|
||||||
|
[Upload events registered too late (resources/redirect.py?code=307&location=http://www1.web-platform.test:8000/xhr/resources/corsenabled.py)]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Upload events registered too late (http://www1.web-platform.test:8000/xhr/resources/corsenabled.py)]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
|
[event-upload-progress.any.html]
|
||||||
|
[Upload events registered too late (resources/redirect.py?code=307&location=http://www1.web-platform.test:8000/xhr/resources/corsenabled.py)]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Upload events registered too late (http://www1.web-platform.test:8000/xhr/resources/corsenabled.py)]
|
||||||
|
expected: FAIL
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
[transition_calc_implicit.html]
|
||||||
|
expected: TIMEOUT
|
|
@ -0,0 +1,19 @@
|
||||||
|
promise_test(async t => {
|
||||||
|
var reader = new FileReader();
|
||||||
|
var eventWatcher = new EventWatcher(t, reader, ['loadstart', 'progress', 'abort', 'error', 'load', 'loadend']);
|
||||||
|
reader.readAsText(new Blob([]));
|
||||||
|
await eventWatcher.wait_for('loadstart');
|
||||||
|
// No progress event for an empty blob, as no data is loaded.
|
||||||
|
await eventWatcher.wait_for('load');
|
||||||
|
await eventWatcher.wait_for('loadend');
|
||||||
|
}, 'events are dispatched in the correct order for an empty blob');
|
||||||
|
|
||||||
|
promise_test(async t => {
|
||||||
|
var reader = new FileReader();
|
||||||
|
var eventWatcher = new EventWatcher(t, reader, ['loadstart', 'progress', 'abort', 'error', 'load', 'loadend']);
|
||||||
|
reader.readAsText(new Blob(['a']));
|
||||||
|
await eventWatcher.wait_for('loadstart');
|
||||||
|
await eventWatcher.wait_for('progress');
|
||||||
|
await eventWatcher.wait_for('load');
|
||||||
|
await eventWatcher.wait_for('loadend');
|
||||||
|
}, 'events are dispatched in the correct order for a non-empty blob');
|
|
@ -12,9 +12,10 @@
|
||||||
<div id="log"></div>
|
<div id="log"></div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var blob;
|
var blob, blob2;
|
||||||
setup(function() {
|
setup(function() {
|
||||||
blob = new Blob(["This test the result attribute"]);
|
blob = new Blob(["This test the result attribute"]);
|
||||||
|
blob2 = new Blob(["This is a second blob"]);
|
||||||
});
|
});
|
||||||
|
|
||||||
async_test(function() {
|
async_test(function() {
|
||||||
|
@ -54,6 +55,43 @@
|
||||||
|
|
||||||
readArrayBuffer.readAsArrayBuffer(blob);
|
readArrayBuffer.readAsArrayBuffer(blob);
|
||||||
}, "readAsArrayBuffer");
|
}, "readAsArrayBuffer");
|
||||||
|
|
||||||
|
async_test(function() {
|
||||||
|
var readBinaryString = new FileReader();
|
||||||
|
assert_equals(readBinaryString.result, null);
|
||||||
|
|
||||||
|
readBinaryString.onloadend = this.step_func(function(evt) {
|
||||||
|
assert_equals(typeof readBinaryString.result, "string", "The result type is string");
|
||||||
|
assert_equals(readBinaryString.result, "This test the result attribute", "The result is correct");
|
||||||
|
this.done();
|
||||||
|
});
|
||||||
|
|
||||||
|
readBinaryString.readAsBinaryString(blob);
|
||||||
|
}, "readAsBinaryString");
|
||||||
|
|
||||||
|
|
||||||
|
for (let event of ['loadstart', 'progress']) {
|
||||||
|
for (let method of ['readAsText', 'readAsDataURL', 'readAsArrayBuffer', 'readAsBinaryString']) {
|
||||||
|
promise_test(async function(t) {
|
||||||
|
var reader = new FileReader();
|
||||||
|
assert_equals(reader.result, null, 'result is null before read');
|
||||||
|
|
||||||
|
var eventWatcher = new EventWatcher(t, reader,
|
||||||
|
[event, 'loadend']);
|
||||||
|
|
||||||
|
reader[method](blob);
|
||||||
|
assert_equals(reader.result, null, 'result is null after first read call');
|
||||||
|
await eventWatcher.wait_for(event);
|
||||||
|
assert_equals(reader.result, null, 'result is null during event');
|
||||||
|
await eventWatcher.wait_for('loadend');
|
||||||
|
assert_not_equals(reader.result, null);
|
||||||
|
reader[method](blob);
|
||||||
|
assert_equals(reader.result, null, 'result is null after second read call');
|
||||||
|
await eventWatcher.wait_for(event);
|
||||||
|
assert_equals(reader.result, null, 'result is null during second read event');
|
||||||
|
}, 'result is null during "' + event + '" event for ' + method);
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -924,11 +924,6 @@ const subresourceMap = {
|
||||||
invoker: url =>
|
invoker: url =>
|
||||||
requestViaDedicatedWorker(workerUrlThatImports(url), {type: "module"}),
|
requestViaDedicatedWorker(workerUrlThatImports(url), {type: "module"}),
|
||||||
},
|
},
|
||||||
"classic-data-worker-fetch": {
|
|
||||||
path: "/common/security-features/subresource/empty.py",
|
|
||||||
invoker: url =>
|
|
||||||
requestViaDedicatedWorker(dedicatedWorkerUrlThatFetches(url), {}),
|
|
||||||
},
|
|
||||||
"shared-worker": {
|
"shared-worker": {
|
||||||
path: "/common/security-features/subresource/shared-worker.py",
|
path: "/common/security-features/subresource/shared-worker.py",
|
||||||
invoker: requestViaSharedWorker,
|
invoker: requestViaSharedWorker,
|
||||||
|
@ -1064,12 +1059,32 @@ function invokeRequest(subresource, sourceContextList) {
|
||||||
"iframe": { // <iframe src="same-origin-URL"></iframe>
|
"iframe": { // <iframe src="same-origin-URL"></iframe>
|
||||||
invoker: invokeFromIframe,
|
invoker: invokeFromIframe,
|
||||||
},
|
},
|
||||||
|
"classic-worker": {
|
||||||
|
// Classic dedicated worker loaded from same-origin.
|
||||||
|
invoker: invokeFromWorker.bind(undefined, false, {}),
|
||||||
|
},
|
||||||
|
"classic-data-worker": {
|
||||||
|
// Classic dedicated worker loaded from data: URL.
|
||||||
|
invoker: invokeFromWorker.bind(undefined, true, {}),
|
||||||
|
},
|
||||||
|
"module-worker": {
|
||||||
|
// Module dedicated worker loaded from same-origin.
|
||||||
|
invoker: invokeFromWorker.bind(undefined, false, {type: 'module'}),
|
||||||
|
},
|
||||||
|
"module-data-worker": {
|
||||||
|
// Module dedicated worker loaded from data: URL.
|
||||||
|
invoker: invokeFromWorker.bind(undefined, true, {type: 'module'}),
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return sourceContextMap[sourceContextList[0].sourceContextType].invoker(
|
return sourceContextMap[sourceContextList[0].sourceContextType].invoker(
|
||||||
subresource, sourceContextList);
|
subresource, sourceContextList);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Quick hack to expose invokeRequest when common.js is loaded either
|
||||||
|
// as a classic or module script.
|
||||||
|
self.invokeRequest = invokeRequest;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
invokeFrom*() functions are helper functions with the same parameters
|
invokeFrom*() functions are helper functions with the same parameters
|
||||||
and return values as invokeRequest(), that are tied to specific types
|
and return values as invokeRequest(), that are tied to specific types
|
||||||
|
@ -1078,6 +1093,51 @@ function invokeRequest(subresource, sourceContextList) {
|
||||||
sourceContextList[0] is an iframe.
|
sourceContextList[0] is an iframe.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
@param {boolean} isDataUrl
|
||||||
|
true if the worker script is loaded from data: URL.
|
||||||
|
Otherwise, the script is loaded from same-origin.
|
||||||
|
@param {object} workerOptions
|
||||||
|
The `options` argument for Worker constructor.
|
||||||
|
|
||||||
|
Other parameters and return values are the same as those of invokeRequest().
|
||||||
|
*/
|
||||||
|
function invokeFromWorker(isDataUrl, workerOptions,
|
||||||
|
subresource, sourceContextList) {
|
||||||
|
const currentSourceContext = sourceContextList.shift();
|
||||||
|
let workerUrl =
|
||||||
|
"/common/security-features/scope/worker.py?policyDeliveries=" +
|
||||||
|
encodeURIComponent(JSON.stringify(
|
||||||
|
currentSourceContext.policyDeliveries || []));
|
||||||
|
if (workerOptions.type === 'module') {
|
||||||
|
workerUrl += "&type=module";
|
||||||
|
}
|
||||||
|
|
||||||
|
let promise;
|
||||||
|
if (isDataUrl) {
|
||||||
|
promise = fetch(workerUrl)
|
||||||
|
.then(r => r.text())
|
||||||
|
.then(source => {
|
||||||
|
return 'data:text/javascript;base64,' + btoa(source);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
promise = Promise.resolve(workerUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
return promise
|
||||||
|
.then(url => {
|
||||||
|
const worker = new Worker(url, workerOptions);
|
||||||
|
worker.postMessage({subresource: subresource,
|
||||||
|
sourceContextList: sourceContextList});
|
||||||
|
return bindEvents2(worker, "message", worker, "error", window, "error");
|
||||||
|
})
|
||||||
|
.then(event => {
|
||||||
|
if (event.data.error)
|
||||||
|
return Promise.reject(event.data.error);
|
||||||
|
return event.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function invokeFromIframe(subresource, sourceContextList) {
|
function invokeFromIframe(subresource, sourceContextList) {
|
||||||
const currentSourceContext = sourceContextList.shift();
|
const currentSourceContext = sourceContextList.shift();
|
||||||
const frameUrl =
|
const frameUrl =
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
Access-Control-Allow-Origin: *
|
|
@ -0,0 +1,24 @@
|
||||||
|
%(import)s
|
||||||
|
|
||||||
|
// Receive a message from the parent and start the test.
|
||||||
|
function onMessageFromParent(event) {
|
||||||
|
// Because this window might receive messages from child context during
|
||||||
|
// tests, we first remove the listener here before staring the test.
|
||||||
|
self.removeEventListener('message', onMessageFromParent);
|
||||||
|
|
||||||
|
const configurationError = "%(error)s";
|
||||||
|
if (configurationError.length > 0) {
|
||||||
|
postMessage({error: configurationError});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
invokeRequest(event.data.subresource,
|
||||||
|
event.data.sourceContextList)
|
||||||
|
.then(result => postMessage(result))
|
||||||
|
.catch(e => {
|
||||||
|
const message = (e.error && e.error.stack) || e.message || "Error";
|
||||||
|
postMessage({error: message});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
self.addEventListener('message', onMessageFromParent);
|
|
@ -0,0 +1,40 @@
|
||||||
|
import os, sys, json
|
||||||
|
|
||||||
|
sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
|
||||||
|
import util
|
||||||
|
|
||||||
|
|
||||||
|
def main(request, response):
|
||||||
|
policyDeliveries = json.loads(request.GET.first('policyDeliveries', '[]'))
|
||||||
|
worker_type = request.GET.first('type', 'classic')
|
||||||
|
commonjs_url = '%s://%s:%s/common/security-features/resources/common.js' % (
|
||||||
|
request.url_parts.scheme, request.url_parts.hostname,
|
||||||
|
request.url_parts.port)
|
||||||
|
if worker_type == 'classic':
|
||||||
|
import_line = 'importScripts("%s");' % commonjs_url
|
||||||
|
else:
|
||||||
|
import_line = 'import "%s";' % commonjs_url
|
||||||
|
|
||||||
|
maybe_additional_headers = {}
|
||||||
|
error = ''
|
||||||
|
for delivery in policyDeliveries:
|
||||||
|
if delivery['deliveryType'] == 'meta':
|
||||||
|
error = '<meta> cannot be used in WorkerGlobalScope'
|
||||||
|
elif delivery['deliveryType'] == 'http-rp':
|
||||||
|
if delivery['key'] == 'referrerPolicy':
|
||||||
|
maybe_additional_headers['Referrer-Policy'] = delivery['value']
|
||||||
|
else:
|
||||||
|
error = 'invalid delivery key for http-rp: %s' % delivery['key']
|
||||||
|
else:
|
||||||
|
error = 'invalid deliveryType: %s' % delivery['deliveryType']
|
||||||
|
|
||||||
|
handler = lambda: util.get_template('worker.js.template') % ({
|
||||||
|
'import': import_line,
|
||||||
|
'error': error
|
||||||
|
})
|
||||||
|
util.respond(
|
||||||
|
request,
|
||||||
|
response,
|
||||||
|
payload_generator=handler,
|
||||||
|
content_type='text/javascript',
|
||||||
|
maybe_additional_headers=maybe_additional_headers)
|
11
tests/wpt/web-platform-tests/css/css-break/form-control.html
Normal file
11
tests/wpt/web-platform-tests/css/css-break/form-control.html
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks">
|
||||||
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||||
|
<meta name="assert" content="Replaced content should be considered to be monolithic">
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
<div style="width:100px; height:100px; background:red;">
|
||||||
|
<div style="columns:3; column-gap:0;">
|
||||||
|
<input style="display:block; margin:0; border:none; padding:0; width:100px; height:100px; background:green;">
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -7,6 +7,9 @@
|
||||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
div {
|
div {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-display-3/">
|
||||||
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">
|
||||||
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
<iframe id="victim" src="support/red-square.html" style="width:100px; height:100px; border:none;"></iframe>
|
||||||
|
<script>
|
||||||
|
var loaded_once = false;
|
||||||
|
victim.onload = function() {
|
||||||
|
// The child document should only load once. It should not be reloaded
|
||||||
|
// by changing the display type of the IFRAME.
|
||||||
|
if (loaded_once)
|
||||||
|
return;
|
||||||
|
loaded_once = true;
|
||||||
|
var childDoc = victim.contentWindow.document;
|
||||||
|
// Change the red background to green. This will revert back to red if
|
||||||
|
// the document gets reloaded (which shouldn't happen) when re-attaching
|
||||||
|
// #victim.
|
||||||
|
childDoc.getElementById("square").style.background = "green";
|
||||||
|
document.offsetTop;
|
||||||
|
victim.style.display = "block";
|
||||||
|
document.documentElement.className = "";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</html>
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait">
|
||||||
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-display-3/">
|
||||||
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">
|
||||||
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
<object id="victim" data="support/red-square.html" style="width:100px; height:100px;"></object>
|
||||||
|
<script>
|
||||||
|
var loaded_once = false;
|
||||||
|
victim.onload = function() {
|
||||||
|
// The child document should only load once. It should not be reloaded
|
||||||
|
// by changing the display type of the OBJECT.
|
||||||
|
if (loaded_once)
|
||||||
|
return;
|
||||||
|
loaded_once = true;
|
||||||
|
var childDoc = victim.contentWindow.document;
|
||||||
|
// Change the red background to green. This will revert back to red if
|
||||||
|
// the document gets reloaded (which shouldn't happen) when re-attaching
|
||||||
|
// #victim.
|
||||||
|
childDoc.getElementById("square").style.background = "green";
|
||||||
|
document.offsetTop;
|
||||||
|
victim.style.display = "block";
|
||||||
|
document.documentElement.className = "";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</html>
|
|
@ -0,0 +1,5 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<style>
|
||||||
|
body { margin:0; }
|
||||||
|
</style>
|
||||||
|
<div id="square" style="width:100px; height:100px; background:red;"></div>
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<html><head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Lists: dynamic update test for 'counter-set'</title>
|
||||||
|
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<ol><li></li></ol>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<html><head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Lists: dynamic update test for 'counter-set'</title>
|
||||||
|
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-lists/#propdef-counter-set">
|
||||||
|
<link rel="match" href="counter-set-002-ref.html">
|
||||||
|
</head>
|
||||||
|
<body onload="document.getElementById('item').style=''">
|
||||||
|
<noscript>Test not run - javascript required.</noscript>
|
||||||
|
<ol><li id="item" style="counter-increment: list-item 3"></li></ol>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>fixed position, z-index, and mix-blend-mode</title>
|
||||||
|
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||||
|
|
||||||
|
<div style="width: 100px; height:4000px;"></div>
|
||||||
|
<div style="background: green; width: 100px; height:100px;"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
requestAnimationFrame(()=>{
|
||||||
|
requestAnimationFrame(()=>{
|
||||||
|
window.scrollBy(0, 3000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="reftest-wait" style="overflow-x:hidden;">
|
||||||
|
<title>fixed position, z-index, and mix-blend-mode</title>
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#fixed-positioning">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#propdef-z-index">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/compositing-1/#mix-blend-mode">
|
||||||
|
<meta name="assert" content="Tests fixed, z-index, and mix-blend-mode.
|
||||||
|
Passes if there is a green box when the page is scrolled to the bottom.">
|
||||||
|
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||||
|
<link rel="match" href="fixed-z-index-blend-ref.html">
|
||||||
|
|
||||||
|
<div class="blend"></div>
|
||||||
|
<div class="background"></div>
|
||||||
|
<div class="text">
|
||||||
|
<div style="width: 100px; height:4000px;"></div>
|
||||||
|
<div style="background: green; width: 100px; height:100px;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.blend {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
mix-blend-mode: overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background {
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-size: 50px;
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script src="/common/reftest-wait.js"></script>
|
||||||
|
<script>
|
||||||
|
requestAnimationFrame(()=>{
|
||||||
|
requestAnimationFrame(()=>{
|
||||||
|
window.scrollBy(0, 3000);
|
||||||
|
takeScreenshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>Reference</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<style type='text/css'>
|
||||||
|
.container {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 4em;
|
||||||
|
overflow: auto;
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
}
|
||||||
|
.container > div {
|
||||||
|
height: 1em;
|
||||||
|
margin: 1em 0;
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div></div>
|
||||||
|
</div>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>#target and snap position with snapping off (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name="flags" content="may">
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll snapping is honored
|
||||||
|
on a scroll container with 'scroll-snap-type: none'
|
||||||
|
when navigating to an element with the target fragment ID.">
|
||||||
|
|
||||||
|
<style type='text/css'>
|
||||||
|
iframe {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 80px;
|
||||||
|
width: calc(100% - 8px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<iframe class="container" src="support/scroll-target-align-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe>
|
|
@ -0,0 +1,57 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>scrollIntoView() and snap position with snapping off (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name="flags" content="may">
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll snapping is honored
|
||||||
|
on a scroll container with 'scroll-snap-type: none'
|
||||||
|
when scrolling an element into view
|
||||||
|
explicitly by script.">
|
||||||
|
|
||||||
|
<style type='text/css'>
|
||||||
|
.container {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 4em;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.container > div {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
.container { scroll-padding: .5em 0 0; } /* set up a snap position */
|
||||||
|
#target { scroll-margin: .5em 0 0;
|
||||||
|
scroll-snap-align: center; }
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('target').scrollIntoView();
|
||||||
|
</script>
|
|
@ -0,0 +1,58 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>focus() and snap position with snapping off (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name="flags" content="may">
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll snapping is honored
|
||||||
|
on a scroll container with 'scroll-snap-type: none'
|
||||||
|
when scrolling an element into view
|
||||||
|
even if that operation is implied (in this case, by .focus()).">
|
||||||
|
<style type='text/css'>
|
||||||
|
.container {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 4em;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.container > div, a {
|
||||||
|
height: 1em;
|
||||||
|
display: block;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.container { scroll-padding: .5em 0 0; } /* set up a snap position */
|
||||||
|
#target { scroll-margin: .5em 0 0;
|
||||||
|
scroll-snap-align: center; }
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<a href="" id="target"></a>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('target').focus();
|
||||||
|
</script>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>#target and scroll-margin with snapping off (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name="flags" content="should">
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll-margin is honored
|
||||||
|
on a scroll container with 'scroll-snap-type: none'
|
||||||
|
when navigating to an element with the target fragment ID.">
|
||||||
|
|
||||||
|
<style type='text/css'>
|
||||||
|
iframe {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 80px;
|
||||||
|
width: calc(100% - 8px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<iframe class="container" src="support/scroll-target-margin-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe>
|
|
@ -0,0 +1,54 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>scrollIntoView() and scroll-margin with snapping off (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name="flags" content="should">
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll-margin is honored
|
||||||
|
on a scroll container with 'scroll-snap-type: none'
|
||||||
|
when scrolling an element into view
|
||||||
|
explicitly by script.">
|
||||||
|
<style type='text/css'>
|
||||||
|
.container {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 4em;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.container > div {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
#target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('target').scrollIntoView();
|
||||||
|
</script>
|
|
@ -0,0 +1,56 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>focus() and scroll-margin with snapping off (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name="flags" content="should">
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll-margin is honored
|
||||||
|
on a scroll container with 'scroll-snap-type: none'
|
||||||
|
when scrolling an element into view
|
||||||
|
even if that operation is implied (in this case, by .focus()).">
|
||||||
|
<style type='text/css'>
|
||||||
|
.container {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 4em;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.container > div, a {
|
||||||
|
height: 1em;
|
||||||
|
display: block;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
#target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<a href="" id="target"></a>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('target').focus();
|
||||||
|
</script>
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>#target and scroll-padding with snapping off (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-padding'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll-padding is honored
|
||||||
|
on a scroll container with 'scroll-snap-type: none'
|
||||||
|
when navigating to an element with the target fragment ID.">
|
||||||
|
<style type='text/css'>
|
||||||
|
iframe {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 80px;
|
||||||
|
width: calc(100% - 8px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<iframe class="container" src="support/scroll-target-padding-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe>
|
|
@ -0,0 +1,53 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>scrollIntoView() and scroll-padding with snapping off (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-padding'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll-padding is honored
|
||||||
|
on a scroll container with 'scroll-snap-type: none'
|
||||||
|
when scrolling an element into view
|
||||||
|
explicitly by script.">
|
||||||
|
<style type='text/css'>
|
||||||
|
.container {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 4em;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.container > div {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
.container { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('target').scrollIntoView();
|
||||||
|
</script>
|
|
@ -0,0 +1,55 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>focus() and scroll-padding with snapping off (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll-padding is honored
|
||||||
|
on a scroll container with 'scroll-snap-type: none'
|
||||||
|
when scrolling an element into view
|
||||||
|
even if that operation is implied (in this case, by .focus()).">
|
||||||
|
<style type='text/css'>
|
||||||
|
.container {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 4em;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.container > div, a {
|
||||||
|
height: 1em;
|
||||||
|
display: block;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.container { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<a href="" id="target"></a>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('target').focus();
|
||||||
|
</script>
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>#target and snap position with snapping on (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll snapping is honored
|
||||||
|
when navigating to an element with the target fragment ID.">
|
||||||
|
|
||||||
|
<style type='text/css'>
|
||||||
|
iframe {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 80px;
|
||||||
|
width: calc(100% - 8px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<iframe class="container" src="support/scroll-target-snap-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe>
|
|
@ -0,0 +1,64 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>scrollIntoView() and snap position with snapping on (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll snapping is honored
|
||||||
|
when scrolling an element into view
|
||||||
|
explicitly by script.">
|
||||||
|
|
||||||
|
<style type='text/css'>
|
||||||
|
.container {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 4em;
|
||||||
|
overflow: auto;
|
||||||
|
scroll-snap-type: block;
|
||||||
|
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.container > div {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
#target { scroll-margin: 1em 0 0;
|
||||||
|
scroll-snap-align: center; } /* set up a snap position */
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
|
||||||
|
/* Try to foil the UA */
|
||||||
|
.foilup { margin-bottom: -1em; scroll-snap-align: start; }
|
||||||
|
.foildn { margin-top: -1em; scroll-snap-align: end; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="foilup"></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<div class="foilup"></div>
|
||||||
|
<div class="foildn"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div class="foildn"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="foildn"></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('target').scrollIntoView();
|
||||||
|
</script>
|
|
@ -0,0 +1,66 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<title>focus() and snap position with snapping on (y-axis)</title>
|
||||||
|
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
|
||||||
|
<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'>
|
||||||
|
<link rel='match' href='scroll-target-001-ref.html'>
|
||||||
|
<meta name='assert'
|
||||||
|
content="Test passes if scroll snapping is honored
|
||||||
|
when scrolling an element into view
|
||||||
|
even if that operation is implied (in this case, by .focus()).">
|
||||||
|
|
||||||
|
<style type='text/css'>
|
||||||
|
.container {
|
||||||
|
border: solid blue 4px;
|
||||||
|
height: 4em;
|
||||||
|
overflow: auto;
|
||||||
|
scroll-snap-type: block;
|
||||||
|
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
.container > div, a {
|
||||||
|
height: 1em;
|
||||||
|
display: block;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
#target { scroll-margin: 1em 0 0;
|
||||||
|
scroll-snap-align: center; } /* set up a snap position */
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
|
||||||
|
/* Try to foil the UA */
|
||||||
|
.foilup { margin-bottom: -1em; scroll-snap-align: start; }
|
||||||
|
.foildn { margin-top: -1em; scroll-snap-align: end; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="foilup"></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<div class="foilup"></div>
|
||||||
|
<a href="" id="target"></a>
|
||||||
|
<div class="foildn"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div class="foildn"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="foildn"></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('target').focus();
|
||||||
|
</script>
|
|
@ -22,7 +22,6 @@ div {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
left: 300px;
|
left: 300px;
|
||||||
top: 300px;
|
top: 300px;
|
||||||
scroll-snap-align: end start;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -32,22 +31,81 @@ div {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var scroller = document.getElementById("scroller");
|
const scroller_width = scroller.clientWidth;
|
||||||
var width = scroller.clientWidth;
|
const scroller_height = scroller.clientHeight;
|
||||||
var height = scroller.clientHeight;
|
|
||||||
[
|
[
|
||||||
["horizontal-tb", 300, 500 - height],
|
["horizontal-tb", 300, 500 - scroller_height],
|
||||||
["vertical-lr", 500 - width, 300],
|
["vertical-lr", 500 - scroller_width, 300],
|
||||||
["vertical-rl", width - 700, 300]
|
["vertical-rl", scroller_width - 700, 300]
|
||||||
].forEach(([writing_mode, left, top]) => {
|
].forEach(([writing_mode, left, top]) => {
|
||||||
test(() => {
|
test(() => {
|
||||||
|
const target_left = getComputedStyle(target).left;
|
||||||
scroller.style.writingMode = writing_mode;
|
scroller.style.writingMode = writing_mode;
|
||||||
if (writing_mode == "vertical-rl")
|
target.style.scrollSnapAlign = "end start";
|
||||||
document.getElementById("target").style.left = (width - 700) + "px";
|
if (writing_mode == "vertical-rl") {
|
||||||
|
target.style.left = (scroller_width - 700) + "px";
|
||||||
|
}
|
||||||
scroller.scrollTo(0, 0);
|
scroller.scrollTo(0, 0);
|
||||||
assert_equals(scroller.scrollLeft, left, "aligns correctly on x");
|
assert_equals(scroller.scrollLeft, left, "aligns correctly on x");
|
||||||
assert_equals(scroller.scrollTop, top, "aligns correctly on y");
|
assert_equals(scroller.scrollTop, top, "aligns correctly on y");
|
||||||
|
target.style.left = target_left;
|
||||||
|
scroller.style.writingMode = "";
|
||||||
}, "Snaps correctly for " + writing_mode +
|
}, "Snaps correctly for " + writing_mode +
|
||||||
" writing mode with 'inline' and 'block' alignments");
|
" writing mode with 'scroll-snap-align: end start' alignment");
|
||||||
})
|
});
|
||||||
|
|
||||||
|
[
|
||||||
|
["horizontal-tb", 500 - scroller_width, 300],
|
||||||
|
["vertical-lr", 300, 500 - scroller_height],
|
||||||
|
["vertical-rl", target.clientWidth - 700, 500 - scroller_height]
|
||||||
|
].forEach(([writing_mode, left, top]) => {
|
||||||
|
test(() => {
|
||||||
|
const target_left = getComputedStyle(target).left;
|
||||||
|
scroller.style.writingMode = writing_mode;
|
||||||
|
target.style.scrollSnapAlign = "start end";
|
||||||
|
if (writing_mode == "vertical-rl") {
|
||||||
|
target.style.left = (scroller_width - 700) + "px";
|
||||||
|
}
|
||||||
|
scroller.scrollTo(0, 0);
|
||||||
|
assert_equals(scroller.scrollLeft, left, "aligns correctly on x");
|
||||||
|
assert_equals(scroller.scrollTop, top, "aligns correctly on y");
|
||||||
|
target.style.left = target_left;
|
||||||
|
scroller.style.writingMode = "";
|
||||||
|
}, "Snaps correctly for " + writing_mode +
|
||||||
|
" writing mode with 'scroll-snap-align: start end' alignment");
|
||||||
|
});
|
||||||
|
|
||||||
|
test(() => {
|
||||||
|
const target_left = getComputedStyle(target).left;
|
||||||
|
scroller.style.direction = "rtl";
|
||||||
|
target.style.scrollSnapAlign = "end start";
|
||||||
|
target.style.left = (scroller_width - 700) + "px";
|
||||||
|
|
||||||
|
scroller.scrollTo(0, 0);
|
||||||
|
assert_equals(scroller.scrollLeft, target.clientWidth - 700,
|
||||||
|
"aligns correctly on x");
|
||||||
|
assert_equals(scroller.scrollTop, 500 - scroller_height,
|
||||||
|
"aligns correctly on y");
|
||||||
|
|
||||||
|
target.style.left = target_left;
|
||||||
|
scroller.style.direction = "";
|
||||||
|
}, "Snaps correctly for 'direction: rtl' with 'scroll-snap-align: end start' " +
|
||||||
|
"alignment");
|
||||||
|
|
||||||
|
test(() => {
|
||||||
|
const target_left = getComputedStyle(target).left;
|
||||||
|
scroller.style.direction = "rtl";
|
||||||
|
target.style.scrollSnapAlign = "start end";
|
||||||
|
target.style.left = (scroller_width - 700) + "px";
|
||||||
|
|
||||||
|
scroller.scrollTo(0, 0);
|
||||||
|
assert_equals(scroller.scrollLeft, scroller_width - 700,
|
||||||
|
"aligns correctly on x");
|
||||||
|
assert_equals(scroller.scrollTop, 300, "aligns correctly on y");
|
||||||
|
|
||||||
|
target.style.left = target_left;
|
||||||
|
scroller.style.direction = "";
|
||||||
|
}, "Snaps correctly for 'direction: rtl' with 'scroll-snap-align: start end' " +
|
||||||
|
"alignment");
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>iframe for #target and snap position with snapping off</title>
|
||||||
|
<style type='text/css'>
|
||||||
|
html, body {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
html { scroll-padding: .5em 0 0; } /* set up a snap position */
|
||||||
|
#target { scroll-margin: .5em 0 0;
|
||||||
|
scroll-snap-align: center; }
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>iframe for #target and scroll-margin with snapping off (y</title>
|
||||||
|
<style type='text/css'>
|
||||||
|
html, body {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
#target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>iframe for #target and scroll-snap-padding with snapping off (y</title>
|
||||||
|
<style type='text/css'>
|
||||||
|
html, body {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
html { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>iframe for #target and snap position with snapping on</title>
|
||||||
|
<style type='text/css'>
|
||||||
|
html, body {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
/* to make failing more obvious */
|
||||||
|
background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed;
|
||||||
|
/* avoid anti-aliasing issues */
|
||||||
|
font: 20px/1 sans-serif;
|
||||||
|
scrollbar-width: none;
|
||||||
|
|
||||||
|
/* turn on snapping */
|
||||||
|
scroll-snap-type: block;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
#target { scroll-margin: 1em 0 0;
|
||||||
|
scroll-snap-align: center; } /* set up a snap position */
|
||||||
|
#stripe { background: green; } /* color part of the snap area */
|
||||||
|
.fail { color: red; } /* make failing more obvious */
|
||||||
|
|
||||||
|
/* Try to foil the UA */
|
||||||
|
.foilup { margin-bottom: -1em; scroll-snap-align: start; }
|
||||||
|
.foildn { margin-top: -1em; scroll-snap-align: end; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="foilup"></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div></div>
|
||||||
|
<div id="stripe"></div>
|
||||||
|
<div class="foilup"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<div class="foildn"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="fail">FAIL</div>
|
||||||
|
<div class="foildn"></div>
|
||||||
|
<div></div>
|
||||||
|
<div class="foildn"></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<title>CSS Values Test: computed value of rgb() with calc(percentage)</title>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Original code is from Yves Lafon
|
||||||
|
|
||||||
|
Re: [css3-values] percentage in calc() and attr()
|
||||||
|
https://lists.w3.org/Archives/Public/www-style/2016May/0028.html
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-serialize">
|
||||||
|
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div#target
|
||||||
|
{
|
||||||
|
background-color: rgb(calc(5% + 15%), calc(40% / 2), calc(5% * 4));
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="target"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
test(function()
|
||||||
|
{
|
||||||
|
assert_equals(getComputedStyle(document.getElementById("target")).backgroundColor, "rgb(51, 51, 51)");
|
||||||
|
}, "testing rgb(calc(5% + 15%), calc(40% / 2), calc(5% * 4))");
|
||||||
|
</script>
|
|
@ -0,0 +1,95 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<title>CSS Values Test: mixed units in calc() and computed border-radius longhand and shorthand values (complex)</title>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Original test is:
|
||||||
|
|
||||||
|
https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/getComputedStyle-border-radius.html
|
||||||
|
|
||||||
|
|
||||||
|
Bug 137688: getPropertyValue on computed style does not do shorthand properties
|
||||||
|
https://bugzilla.mozilla.org/show_bug.cgi?id=137688
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-serialize">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-radius">
|
||||||
|
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div#target
|
||||||
|
{
|
||||||
|
border: solid 2px;
|
||||||
|
border-top-left-radius: calc(10px + 25%) calc(20px + 25%);
|
||||||
|
border-top-right-radius: calc(1em + 25%);
|
||||||
|
border-bottom-right-radius: calc(25%);
|
||||||
|
border-bottom-left-radius: calc(25px);
|
||||||
|
font-size: 16px; /* was 10px in original test */
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="target"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function startTesting()
|
||||||
|
{
|
||||||
|
|
||||||
|
var targetElement = document.getElementById("target");
|
||||||
|
|
||||||
|
function verifyComputedStyle(property_name, expected_value, description)
|
||||||
|
{
|
||||||
|
|
||||||
|
test(function()
|
||||||
|
{
|
||||||
|
|
||||||
|
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
|
||||||
|
|
||||||
|
}, description);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* verifyComputedStyle(property_name, expected_value, description) */
|
||||||
|
|
||||||
|
verifyComputedStyle("border-top-left-radius", "calc(25% + 10px) calc(25% + 20px)", "testing border-top-left-radius: calc(10px + 25%) calc(20px + 25%)");
|
||||||
|
|
||||||
|
verifyComputedStyle("border-top-right-radius", "calc(25% + 16px)", "testing border-top-right-radius: calc(1em + 25%)");
|
||||||
|
|
||||||
|
verifyComputedStyle("border-bottom-right-radius", "25%", "testing border-bottom-right-radius: calc(25%)");
|
||||||
|
|
||||||
|
verifyComputedStyle("border-bottom-left-radius", "25px", "testing border-bottom-left-radius: calc(25px);");
|
||||||
|
|
||||||
|
verifyComputedStyle("border-radius", "calc(25% + 10px) calc(25% + 16px) 25% 25px / calc(25% + 20px) calc(25% + 16px) 25% 25px", "testing border-radius shorthand");
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
The first value is the horizontal radius, the second the vertical radius.
|
||||||
|
|
||||||
|
horizontal radius / vertical radius
|
||||||
|
|__________________________________________| |__________________________________________|
|
||||||
|
|
||||||
|
|
||||||
|
The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left:
|
||||||
|
|
||||||
|
|
||||||
|
top-left top-right bottom-right bottom-left / top-left top-right bottom-right bottom-left
|
||||||
|
|
||||||
|
|__________________________________________| |__________________________________________|
|
||||||
|
|
||||||
|
horizontal radius / vertical radius
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
startTesting();
|
||||||
|
|
||||||
|
</script>
|
|
@ -0,0 +1,81 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<title>CSS Values Test: mixed units in calc() and computed border-radius shorthand value (complex)</title>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Bug 137688: getPropertyValue on computed style does not do shorthand properties
|
||||||
|
https://bugzilla.mozilla.org/show_bug.cgi?id=137688
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-serialize">
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-border-radius">
|
||||||
|
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div#target
|
||||||
|
{
|
||||||
|
border: solid 2px;
|
||||||
|
border-top-left-radius: calc(1px + 1%) calc(5px + 5%);
|
||||||
|
border-top-right-radius: calc(2px + 2%) calc(6px + 6%);
|
||||||
|
border-bottom-right-radius: calc(3px + 3%) calc(7px + 7%);
|
||||||
|
border-bottom-left-radius: calc(4px + 4%) calc(8px + 8%);
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="target"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function startTesting()
|
||||||
|
{
|
||||||
|
|
||||||
|
var targetElement = document.getElementById("target");
|
||||||
|
|
||||||
|
function verifyComputedStyle(property_name, expected_value, description)
|
||||||
|
{
|
||||||
|
|
||||||
|
test(function()
|
||||||
|
{
|
||||||
|
|
||||||
|
assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
|
||||||
|
|
||||||
|
}, description);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* verifyComputedStyle(property_name, expected_value, description) */
|
||||||
|
|
||||||
|
verifyComputedStyle("border-radius", "calc(1% + 1px) calc(2% + 2px) calc(3% + 3px) calc(4% + 4px) / calc(5% + 5px) calc(6% + 6px) calc(7% + 7px) calc(8% + 8px)", "testing border-radius shorthand");
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
The first value is the horizontal radius, the second the vertical radius.
|
||||||
|
|
||||||
|
horizontal radius / vertical radius
|
||||||
|
|__________________________________________| |__________________________________________|
|
||||||
|
|
||||||
|
|
||||||
|
The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left:
|
||||||
|
|
||||||
|
|
||||||
|
top-left top-right bottom-right bottom-left / top-left top-right bottom-right bottom-left
|
||||||
|
|
||||||
|
|__________________________________________| |__________________________________________|
|
||||||
|
|
||||||
|
horizontal radius / vertical radius
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
startTesting();
|
||||||
|
|
||||||
|
</script>
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<title>Element Timing: do not observe a disconnected image</title>
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script>
|
||||||
|
async_test(function (t) {
|
||||||
|
const observer = new PerformanceObserver(
|
||||||
|
t.step_func_done(() => {
|
||||||
|
// The image should not have caused an entry, so fail test.
|
||||||
|
assert_unreached('Should not have received an entry!');
|
||||||
|
})
|
||||||
|
);
|
||||||
|
observer.observe({entryTypes: ['element']});
|
||||||
|
// We add the image during onload to be sure that the observer is registered
|
||||||
|
// in time for it to observe the element timing.
|
||||||
|
window.onload = () => {
|
||||||
|
// Add image of width equal to 100 and height equal to 100.
|
||||||
|
const img = document.createElement('img');
|
||||||
|
img.src = 'resources/square100.png';
|
||||||
|
img.setAttribute('elementtiming', 'my_image');
|
||||||
|
img.setAttribute('id', 'my_id');
|
||||||
|
// Image has been created but not added.
|
||||||
|
// Wait for 500ms and end test, ensuring no entry was created.
|
||||||
|
t.step_timeout(() => {
|
||||||
|
t.done();
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
}, 'Image which is not added to DOM tree is not observable.');
|
||||||
|
</script>
|
|
@ -61,7 +61,7 @@
|
||||||
}, false);
|
}, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var index = 0; index < fm1.elements.length; index++) {
|
for (var index = 0; index < fm2.elements.length; index++) {
|
||||||
var ele = fm2.elements.item(index);
|
var ele = fm2.elements.item(index);
|
||||||
ele.addEventListener("invalid", function (e) {
|
ele.addEventListener("invalid", function (e) {
|
||||||
times2++;
|
times2++;
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
{conditions: {pattern: "[A-Z]+", value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
{conditions: {pattern: "[A-Z]+", value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
||||||
{conditions: {pattern: "[A-Z]{1}", value: "A"}, expected: false, name: "[target] The value attribute matches the pattern attribute"},
|
{conditions: {pattern: "[A-Z]{1}", value: "A"}, expected: false, name: "[target] The value attribute matches the pattern attribute"},
|
||||||
{conditions: {pattern: "[A-Z]+", value: "\u0041\u0042\u0043"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute"},
|
{conditions: {pattern: "[A-Z]+", value: "\u0041\u0042\u0043"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute"},
|
||||||
{conditions: {pattern: "[a-z]{3,}", value: "ABCD"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute"}
|
{conditions: {pattern: "[a-z]{3,}", value: "ABCD"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute"},
|
||||||
|
{conditions: {pattern: "[A-Z]+", value: "ABC123"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute even when a subset matches"}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
autocompletetest(document.forms.autocomplete_off, ["off", "", "on", "off", ""], "form autocomplete attribute off");
|
autocompletetest(document.forms.autocomplete_off, ["off", "", "on", "off", ""], "form autocomplete attribute off");
|
||||||
autocompletetest(document.forms.autocomplete_invalid, ["on", "", "on", "off", ""], "form autocomplete attribute invalid");
|
autocompletetest(document.forms.autocomplete_invalid, ["on", "", "on", "off", ""], "form autocomplete attribute invalid");
|
||||||
|
|
||||||
var keywords = [ "on", "off", "name", "honorific-prefix", "given-name", "additional-name", "family-name", "honorific-suffix", "nickname", "username", "new-password", "current-password", "organization-title", "organization", "street-address", "address-line1", "address-line2", "address-line3", "address-level4", "address-level3", "address-level2", "address-level1", "country", "country-name", "postal-code", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "transaction-currency", "transaction-amount", "language", "bday", "bday-day", "bday-month", "bday-year", "sex", "url", "photo", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-local-prefix", "tel-local-suffix", "tel-extension", "email", "impp" ];
|
var keywords = [ "on", "off", "name", "honorific-prefix", "given-name", "additional-name", "family-name", "honorific-suffix", "nickname", "username", "new-password", "current-password", "one-time-code", "organization-title", "organization", "street-address", "address-line1", "address-line2", "address-line3", "address-level4", "address-level3", "address-level2", "address-level1", "country", "country-name", "postal-code", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "transaction-currency", "transaction-amount", "language", "bday", "bday-day", "bday-month", "bday-year", "sex", "url", "photo", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-local-prefix", "tel-local-suffix", "tel-extension", "email", "impp" ];
|
||||||
|
|
||||||
keywords.forEach(function(keyword) {
|
keywords.forEach(function(keyword) {
|
||||||
test(function(){
|
test(function(){
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<html><head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>HTML LI element: dynamic update test for LI @value</title>
|
||||||
|
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org">
|
||||||
|
</head>
|
||||||
|
<body onload="document.getElementById('item').removeAttribute('value');">
|
||||||
|
<ol><li id="item" value="3"></li></ol>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
Any copyright is dedicated to the Public Domain.
|
||||||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
|
-->
|
||||||
|
<html><head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>HTML LI element: dynamic update test for LI @value</title>
|
||||||
|
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org">
|
||||||
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-lists/#propdef-counter-set">
|
||||||
|
<link rel="match" href="grouping-li-reftest-003-ref.html">
|
||||||
|
</head>
|
||||||
|
<body onload="document.getElementById('item').removeAttribute('value');">
|
||||||
|
<noscript>Test not run - javascript required.</noscript>
|
||||||
|
<ol><li id="item" value="3"></li></ol>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel=match href=fuzzy-ref-1.html>
|
||||||
|
<!-- This exactly matches the reference, and includes the possibilty of
|
||||||
|
0 pixels different; in this case the maxDifference is ignored --->
|
||||||
|
<meta name=fuzzy content="fuzzy-ref-1.html:128;0-100">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<link rel=match href=fuzzy-ref-1.html>
|
||||||
|
<!-- This exactly matches the reference, and includes the possibilty of
|
||||||
|
0 difference in the color channel; in this case the pixelsDifferent is ignored --->
|
||||||
|
<meta name=fuzzy content="fuzzy-ref-1.html:0-128;100">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Baseline of inferred mrows</title>
|
||||||
|
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#mrow">
|
||||||
|
<meta name="assert" content="Baseline for mrow-like elements is correct.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
setup({ explicit_done: true });
|
||||||
|
window.addEventListener("load", runTests);
|
||||||
|
function runTests()
|
||||||
|
{
|
||||||
|
["Mrow", "Sqrt", "Style", "Error", "Phantom", "Math", "Menclose", "Mpadded"].forEach((tag) => {
|
||||||
|
var x = document.getElementById("above" + tag).getBoundingClientRect();
|
||||||
|
var y = document.getElementById("below" + tag).getBoundingClientRect();
|
||||||
|
test(function() {
|
||||||
|
assert_equals(x.bottom, y.top);
|
||||||
|
}, "baseline alignment inside " + tag);
|
||||||
|
});
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="log"></div>
|
||||||
|
<p>
|
||||||
|
<math><mrow><mspace id="aboveMrow" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowMrow" width="10px" depth="30px" style="background: blue"></mspace></mrow></math>
|
||||||
|
<math><msqrt><mspace id="aboveSqrt" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowSqrt" width="10px" depth="30px" style="background: blue"></mspace></msqrt></math>
|
||||||
|
<math><mstyle><mspace id="aboveStyle" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowStyle" width="10px" depth="30px" style="background: blue"></mspace></mstyle></math>
|
||||||
|
<math><merror><mspace id="aboveError" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowError" width="10px" depth="30px" style="background: blue"></mspace></merror></math>
|
||||||
|
<math><mphantom><mspace style="visibility: visible;" id="abovePhantom" width="10px" height="30px" style="background: purple"></mspace><mspace style="visibility: visible;" id="belowPhantom" width="10px" depth="30px" style="background: blue"></mspace></mphantom></math>
|
||||||
|
<math><mspace id="aboveMath" width="10px" height="30px" style="background: purple"></mspace><mspace id="belowMath" width="10px" depth="30px" style="background: blue"></mspace></math>
|
||||||
|
<math><menclose notation="box"><mspace id="aboveMenclose" width="10px" height="30px" style="background: purple"
|
||||||
|
></mspace><mspace id="belowMenclose" width="10px" depth="30px" style="background: blue"></mspace></menclose></math>
|
||||||
|
<math><mpadded notation="box"><mspace id="aboveMpadded" width="10px" height="30px" style="background: purple"
|
||||||
|
></mspace><mspace id="belowMpadded" width="10px" depth="30px" style="background: blue"></mspace></mpadded></math>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,51 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Stretchy in inferred mrows</title>
|
||||||
|
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#mrow">
|
||||||
|
<meta name="assert" content="Baseline for mrow-like elements is correct.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<style>
|
||||||
|
mo {
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: axisheight5000-verticalarrow14000;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: axisheight5000-verticalarrow14000;
|
||||||
|
src: url("/fonts/math/axisheight5000-verticalarrow14000.woff");
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
setup({ explicit_done: true });
|
||||||
|
window.addEventListener("load", function() {
|
||||||
|
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||||
|
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||||
|
});
|
||||||
|
function runTests()
|
||||||
|
{
|
||||||
|
["Mrow", "Sqrt", "Style", "Error", "Phantom", "Math", "Menclose", "Mpadded"].forEach((tag) => {
|
||||||
|
var mo = document.getElementById("mo" + tag);
|
||||||
|
test(function() {
|
||||||
|
assert_greater_than_equal(mo.getBoundingClientRect().height, 100);
|
||||||
|
}, "operator stretching inside " + tag);
|
||||||
|
});
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="log"></div>
|
||||||
|
<p>
|
||||||
|
<math><mrow><mo id="moMrow">↨</mo><mspace width="1px" height="100px" style="background: blue"></mspace></mrow></math>
|
||||||
|
<math><msqrt><mo id="moSqrt">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></msqrt></math>
|
||||||
|
<math><mstyle><mo id="moStyle">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mstyle></math>
|
||||||
|
<math><merror><mo id="moError">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></merror></math>
|
||||||
|
<math><mphantom><mo style="visibilty: visible;" id="moPhantom">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mphantom></math>
|
||||||
|
<math><mo id="moMath">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></math>
|
||||||
|
<math><menclose notation="box"><mo id="moMenclose">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></menclose></math>
|
||||||
|
<math><mpadded notation="box"><mo id="moMpadded">↨</mo><mspace width="1px" height="100px" style="background: magenta"></mspace></mpadded></math>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -61,6 +61,21 @@ function getSubresourceOrigin(originType) {
|
||||||
*/
|
*/
|
||||||
function MixedContentTestCase(scenario, description, sanityChecker) {
|
function MixedContentTestCase(scenario, description, sanityChecker) {
|
||||||
sanityChecker.checkScenario(scenario, subresourceMap);
|
sanityChecker.checkScenario(scenario, subresourceMap);
|
||||||
|
|
||||||
|
let sourceContextList = [];
|
||||||
|
let subresourceType = scenario.subresource;
|
||||||
|
if (subresourceType === 'classic-data-worker-fetch') {
|
||||||
|
// Currently 'classic-data-worker-fetch' (fetch API from inside classic
|
||||||
|
// data: worker) is handled as a kind of subresource request
|
||||||
|
// on the genarator side, but should be processed using the combination of
|
||||||
|
// SourceContext list (classic data: worker) + Subresource (fetch API)
|
||||||
|
// on the JavaScript side.
|
||||||
|
// We bridge this inconsistency here, and will later pass these information
|
||||||
|
// directly from the generated tests and remove this conversion here.
|
||||||
|
subresourceType = 'fetch-request';
|
||||||
|
sourceContextList = [{sourceContextType: 'classic-data-worker'}];
|
||||||
|
}
|
||||||
|
|
||||||
const originTypeConversion = {
|
const originTypeConversion = {
|
||||||
"same-host-https": "same-https",
|
"same-host-https": "same-https",
|
||||||
"same-host-http": "same-http",
|
"same-host-http": "same-http",
|
||||||
|
@ -71,7 +86,8 @@ function MixedContentTestCase(scenario, description, sanityChecker) {
|
||||||
"cross-origin-wss": "cross-wss",
|
"cross-origin-wss": "cross-wss",
|
||||||
"cross-origin-ws": "cross-ws",
|
"cross-origin-ws": "cross-ws",
|
||||||
};
|
};
|
||||||
const urls = getRequestURLs(scenario.subresource,
|
|
||||||
|
const urls = getRequestURLs(subresourceType,
|
||||||
originTypeConversion[scenario.origin],
|
originTypeConversion[scenario.origin],
|
||||||
scenario.redirection);
|
scenario.redirection);
|
||||||
const checkResult = _ => {
|
const checkResult = _ => {
|
||||||
|
@ -88,7 +104,7 @@ function MixedContentTestCase(scenario, description, sanityChecker) {
|
||||||
function runTest() {
|
function runTest() {
|
||||||
/** @type {Subresource} */
|
/** @type {Subresource} */
|
||||||
const subresource = {
|
const subresource = {
|
||||||
subresourceType: scenario.subresource,
|
subresourceType: subresourceType,
|
||||||
url: urls.testUrl,
|
url: urls.testUrl,
|
||||||
policyDeliveries: []
|
policyDeliveries: []
|
||||||
};
|
};
|
||||||
|
@ -97,7 +113,7 @@ function MixedContentTestCase(scenario, description, sanityChecker) {
|
||||||
return xhrRequest(urls.announceUrl)
|
return xhrRequest(urls.announceUrl)
|
||||||
// Send out the real resource request.
|
// Send out the real resource request.
|
||||||
// This should tear down the key if it's not blocked.
|
// This should tear down the key if it's not blocked.
|
||||||
.then(_ => invokeRequest(subresource, []))
|
.then(_ => invokeRequest(subresource, sourceContextList))
|
||||||
// We check the key state, regardless of whether the main request
|
// We check the key state, regardless of whether the main request
|
||||||
// succeeded or failed.
|
// succeeded or failed.
|
||||||
.then(checkResult, checkResult);
|
.then(checkResult, checkResult);
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
self.addEventListener('canmakepayment', (event) => {
|
||||||
|
event.respondWith(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
async function responder(event) {
|
||||||
|
const methodName = event.methodData[0].supportedMethods;
|
||||||
|
if (!event.changePaymentMethod) {
|
||||||
|
return {
|
||||||
|
methodName,
|
||||||
|
details: {
|
||||||
|
changePaymentMethodReturned:
|
||||||
|
'The changePaymentMethod() method is not implemented.',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
let changePaymentMethodReturned;
|
||||||
|
try {
|
||||||
|
const response = await event.changePaymentMethod(methodName, {
|
||||||
|
country: 'US',
|
||||||
|
});
|
||||||
|
changePaymentMethodReturned = response;
|
||||||
|
} catch (err) {
|
||||||
|
changePaymentMethodReturned = error.message;
|
||||||
|
}
|
||||||
|
return {methodName, details: {changePaymentMethodReturned}};
|
||||||
|
}
|
||||||
|
|
||||||
|
self.addEventListener('paymentrequest', (event) => {
|
||||||
|
event.respondWith(responder(event));
|
||||||
|
});
|
|
@ -0,0 +1,170 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Tests for PaymentRequestEvent.changePaymentMethod()</title>
|
||||||
|
<link
|
||||||
|
rel="help"
|
||||||
|
href="https://w3c.github.io/payment-handler/#changepaymentmethod-method"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="/payment-handler/basic-card.json" />
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/resources/testdriver-vendor.js"></script>
|
||||||
|
<script src="/resources/testdriver.js"></script>
|
||||||
|
<script src="register-and-activate-service-worker.js"></script>
|
||||||
|
<p>If the payment sheet is shown, please authorize the mock payment.</p>
|
||||||
|
<script>
|
||||||
|
async function runTests(registration) {
|
||||||
|
const methodName = window.location.origin + '/payment-handler/payment-app/';
|
||||||
|
await registration.paymentManager.instruments.clear();
|
||||||
|
await registration.paymentManager.instruments.set('instrument-key', {
|
||||||
|
name: 'Instrument Name',
|
||||||
|
method: methodName,
|
||||||
|
});
|
||||||
|
|
||||||
|
promise_test(async (t) => {
|
||||||
|
const request = new PaymentRequest([{supportedMethods: methodName}], {
|
||||||
|
total: {label: 'Total', amount: {currency: 'USD', value: '0.01'}},
|
||||||
|
});
|
||||||
|
// Intentionally do not respond to the 'paymentmethodchange' event.
|
||||||
|
const response = await test_driver.bless('showing a payment sheet', () =>
|
||||||
|
request.show()
|
||||||
|
);
|
||||||
|
const complete_promise = response.complete('success');
|
||||||
|
|
||||||
|
assert_equals(response.details.changePaymentMethodReturned, null);
|
||||||
|
|
||||||
|
return complete_promise;
|
||||||
|
}, 'If updateWith(details) is not run, changePaymentMethod() returns null.');
|
||||||
|
|
||||||
|
promise_test(async (t) => {
|
||||||
|
const request = new PaymentRequest([{supportedMethods: methodName}], {
|
||||||
|
total: {label: 'Total', amount: {currency: 'USD', value: '0.01'}},
|
||||||
|
});
|
||||||
|
request.addEventListener('paymentmethodchange', (event) => {
|
||||||
|
assert_equals(event.methodName, methodName);
|
||||||
|
assert_equals(event.methodDetails.country, 'US');
|
||||||
|
event.updateWith(Promise.reject('Error'));
|
||||||
|
});
|
||||||
|
const response_promise = test_driver.bless(
|
||||||
|
'showing a payment sheet',
|
||||||
|
() => request.show()
|
||||||
|
);
|
||||||
|
|
||||||
|
return promise_rejects(t, 'AbortError', response_promise);
|
||||||
|
}, 'If updateWith(details) is rejected, abort the PaymentRequest.show().');
|
||||||
|
|
||||||
|
promise_test(async (t) => {
|
||||||
|
const request = new PaymentRequest([{supportedMethods: methodName}], {
|
||||||
|
total: {label: 'Total', amount: {currency: 'USD', value: '0.01'}},
|
||||||
|
});
|
||||||
|
request.addEventListener('paymentmethodchange', (event) => {
|
||||||
|
assert_equals(event.methodName, methodName);
|
||||||
|
assert_equals(event.methodDetails.country, 'US');
|
||||||
|
event.updateWith(
|
||||||
|
new Promise(() => {
|
||||||
|
throw 'Error for test';
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const response_promise = test_driver.bless(
|
||||||
|
'showing a payment sheet',
|
||||||
|
() => request.show()
|
||||||
|
);
|
||||||
|
|
||||||
|
return promise_rejects(t, 'AbortError', response_promise);
|
||||||
|
}, 'If updateWith(details) throws inside of the promise, abort the PaymentRequest.show().');
|
||||||
|
|
||||||
|
promise_test(async (t) => {
|
||||||
|
const request = new PaymentRequest([{supportedMethods: methodName}], {
|
||||||
|
total: {label: 'Total', amount: {currency: 'USD', value: '0.01'}},
|
||||||
|
});
|
||||||
|
request.addEventListener('paymentmethodchange', (event) => {
|
||||||
|
assert_equals(event.methodName, methodName);
|
||||||
|
assert_equals(event.methodDetails.country, 'US');
|
||||||
|
event.updateWith({
|
||||||
|
total: {label: 'Total', amount: {currency: 'GBP', value: '0.02'}},
|
||||||
|
error: 'Error for test',
|
||||||
|
modifiers: [
|
||||||
|
{
|
||||||
|
supportedMethods: methodName,
|
||||||
|
data: {soup: 'potato'},
|
||||||
|
total: {
|
||||||
|
label: 'Modified total',
|
||||||
|
amount: {currency: 'EUR', value: '0.03'},
|
||||||
|
},
|
||||||
|
additionalDisplayItems: [
|
||||||
|
{
|
||||||
|
label: 'Modified display item',
|
||||||
|
amount: {currency: 'INR', value: '0.06'},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
supportedMethods: methodName + '2',
|
||||||
|
data: {soup: 'tomato'},
|
||||||
|
total: {
|
||||||
|
label: 'Modified total #2',
|
||||||
|
amount: {currency: 'CHF', value: '0.07'},
|
||||||
|
},
|
||||||
|
additionalDisplayItems: [
|
||||||
|
{
|
||||||
|
label: 'Modified display item #2',
|
||||||
|
amount: {currency: 'CAD', value: '0.08'},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
paymentMethodErrors: {country: 'Unsupported country'},
|
||||||
|
displayItems: [
|
||||||
|
{
|
||||||
|
label: 'Display item',
|
||||||
|
amount: {currency: 'CNY', value: '0.04'},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
shippingOptions: [
|
||||||
|
{
|
||||||
|
label: 'Shipping option',
|
||||||
|
id: 'id',
|
||||||
|
amount: {currency: 'JPY', value: '0.05'},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const response = await test_driver.bless('showing a payment sheet', () =>
|
||||||
|
request.show()
|
||||||
|
);
|
||||||
|
const complete_promise = response.complete('success');
|
||||||
|
const changePaymentMethodReturned =
|
||||||
|
response.details.changePaymentMethodReturned;
|
||||||
|
|
||||||
|
assert_equals(changePaymentMethodReturned.total.currency, 'GBP');
|
||||||
|
assert_equals(changePaymentMethodReturned.total.value, '0.02');
|
||||||
|
assert_equals(changePaymentMethodReturned.total.label, undefined);
|
||||||
|
assert_equals(changePaymentMethodReturned.error, 'Error for test');
|
||||||
|
assert_equals(changePaymentMethodReturned.modifiers.length, 1);
|
||||||
|
assert_equals(changePaymentMethodReturned.displayItems, undefined);
|
||||||
|
assert_equals(changePaymentMethodReturned.shippingOptions, undefined);
|
||||||
|
assert_equals(
|
||||||
|
changePaymentMethodReturned.paymentMethodErrors.country,
|
||||||
|
'Unsupported country'
|
||||||
|
);
|
||||||
|
|
||||||
|
const modifier = changePaymentMethodReturned.modifiers[0];
|
||||||
|
|
||||||
|
assert_equals(modifier.supportedMethods, methodName);
|
||||||
|
assert_equals(modifier.data.soup, 'potato');
|
||||||
|
assert_equals(modifier.total.label, '');
|
||||||
|
assert_equals(modifier.total.amount.currency, 'EUR');
|
||||||
|
assert_equals(modifier.total.amount.value, '0.03');
|
||||||
|
assert_equals(modifier.additionalDisplayItems, undefined);
|
||||||
|
|
||||||
|
return complete_promise;
|
||||||
|
}, 'The changePaymentMethod() returns some details from the "paymentmethodchange" event\'s updateWith(details) call.');
|
||||||
|
}
|
||||||
|
|
||||||
|
registerAndActiveServiceWorker(
|
||||||
|
'app-change-payment-method.js',
|
||||||
|
'payment-app/',
|
||||||
|
runTests
|
||||||
|
);
|
||||||
|
</script>
|
|
@ -51,7 +51,6 @@ PerformanceObserverInit.buffered should retrieve previously buffered entries
|
||||||
});
|
});
|
||||||
po_nop.observe({
|
po_nop.observe({
|
||||||
entryTypes,
|
entryTypes,
|
||||||
buffered: false
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// this PerformanceObserver should be notified about the previously
|
// this PerformanceObserver should be notified about the previously
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<title>Pointer Events pointer lock tests</title>
|
<title>Pointer Events pointer lock tests</title>
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
<link rel="stylesheet" type="text/css" href="/external/wpt/pointerevents/pointerevent_styles.css">
|
<link rel="stylesheet" type="text/css" href="../pointerevent_styles.css">
|
||||||
<script src="/resources/testharness.js"></script>
|
<script src="/resources/testharness.js"></script>
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
<script src="/resources/testdriver.js"></script>
|
<script src="/resources/testdriver.js"></script>
|
||||||
|
@ -36,21 +36,19 @@
|
||||||
var test_pointerEvent = setup_pointerevent_test("Test pointerevent coordinates when pointer is locked", ['mouse']);
|
var test_pointerEvent = setup_pointerevent_test("Test pointerevent coordinates when pointer is locked", ['mouse']);
|
||||||
var div1 = document.getElementById("target");
|
var div1 = document.getElementById("target");
|
||||||
|
|
||||||
on_event(div1, 'pointerdown', function(event) {
|
on_event(div1, 'click', function(event) {
|
||||||
if (test_state == kStateInit)
|
if (test_state == kStateInit)
|
||||||
div1.requestPointerLock();
|
div1.requestPointerLock();
|
||||||
});
|
else if (test_state == kStateLocked)
|
||||||
on_event(div1, 'pointerup', function(event) {
|
|
||||||
if (test_state == kStateLocked)
|
|
||||||
document.exitPointerLock();
|
document.exitPointerLock();
|
||||||
});
|
});
|
||||||
on_event(div1, 'pointermove', function(event) {
|
on_event(div1, 'pointermove', function(event) {
|
||||||
if (test_state == kStateLocked) {
|
if (test_state == kStateLocked) {
|
||||||
test_pointerEvent.step(function() {
|
test_pointerEvent.step(function() {
|
||||||
assert_equals(last_pointer_client_pos['x'], event.clientX)
|
assert_equals(event.clientX, last_pointer_client_pos['x'], 'clientX')
|
||||||
assert_equals(last_pointer_client_pos['y'], event.clientY)
|
assert_equals(event.clientY, last_pointer_client_pos['y'], 'clientY')
|
||||||
assert_equals(last_pointer_screen_pos['x'], event.screenX)
|
assert_equals(event.screenX, last_pointer_screen_pos['x'], 'screenX')
|
||||||
assert_equals(last_pointer_screen_pos['y'], event.screenY)
|
assert_equals(event.screenY, last_pointer_screen_pos['y'], 'screenY')
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
last_pointer_client_pos = {'x': event.clientX, 'y': event.clientY}
|
last_pointer_client_pos = {'x': event.clientX, 'y': event.clientY}
|
||||||
|
@ -63,6 +61,17 @@
|
||||||
test_pointerEvent.step(function() {
|
test_pointerEvent.step(function() {
|
||||||
assert_equals(document.pointerLockElement, div1, "document.pointerLockElement should be div1.");
|
assert_equals(document.pointerLockElement, div1, "document.pointerLockElement should be div1.");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var actions = new test_driver.Actions();
|
||||||
|
pos_x = div1.offsetWidth / 2;
|
||||||
|
pos_y = div1.offsetHeight / 2;
|
||||||
|
for (var i = 0; i < 10; i++) {
|
||||||
|
// Move left and up.
|
||||||
|
pos_x += 10;
|
||||||
|
pos_y -= 10;
|
||||||
|
actions.pointerMove(pos_x, pos_y, {origin: div1});
|
||||||
|
}
|
||||||
|
actions.pointerDown().pointerUp().send();
|
||||||
} else if (test_state == kStateLocked) {
|
} else if (test_state == kStateLocked) {
|
||||||
test_state = kStateUnlocked;
|
test_state = kStateUnlocked;
|
||||||
test_pointerEvent.step(function() {
|
test_pointerEvent.step(function() {
|
||||||
|
@ -72,18 +81,7 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var actions = new test_driver.Actions();
|
new test_driver.Actions().pointerMove(/* x = */ 0, /* y = */ 0, {origin: div1}).pointerDown().pointerUp().send();
|
||||||
actions.pointerMove(/* x = */ 0, /* y = */ 0, {origin: div1}).pointerDown();
|
|
||||||
|
|
||||||
pos_x = div1.offsetWidth / 2;
|
|
||||||
pos_y = div1.offsetHeight / 2;
|
|
||||||
for (var i = 0; i < 10; i++) {
|
|
||||||
// Alternatively move left/right and up/down.
|
|
||||||
pos_x += ((-1)**i) * i * 10;
|
|
||||||
pos_y -= ((-1)**i) * i * 10;
|
|
||||||
actions.pointerMove(pos_x, pos_y, {origin: div1});
|
|
||||||
}
|
|
||||||
actions.pointerUp().send();
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
@ -93,16 +91,16 @@
|
||||||
<h4>
|
<h4>
|
||||||
Test Description: This test checks the pointer event coordinates stays unchanged when pointer is locked.
|
Test Description: This test checks the pointer event coordinates stays unchanged when pointer is locked.
|
||||||
<ol>
|
<ol>
|
||||||
<li>Press left button down on the green rectangle and hold it.</li>
|
<li>Click left mouse button on the green rectangle.</li>
|
||||||
<li>Move the mouse inside the green rectangle.</li>
|
<li>Move the mouse around.</li>
|
||||||
<li>Release mouse button. </li>
|
<li>Click left mouse button again. </li>
|
||||||
</ol>
|
</ol>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
Test passes if the proper behavior of the events is observed.
|
Test passes if the proper behavior of the events is observed.
|
||||||
</h4>
|
</h4>
|
||||||
<div id="testContainer">
|
<div id="testContainer">
|
||||||
<div id="target" style="width:800px;height:250px;background:green"></div>
|
<div id="target" style="width:200px;height:200px;background:green"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
let iframe;
|
let iframe;
|
||||||
const redirect_url = 'common/redirect.py';
|
const redirect_url = 'common/redirect.py';
|
||||||
const url_prefix = redirect_url + '?location=/resource-timing/resources/';
|
const url_prefix = redirect_url + '?location=/resource-timing/resources/';
|
||||||
const https_url_prefix = redirect_url + '?location=https://{{hosts[][www]}}:{{ports[https][0]}}/resource-timing/resources/';
|
const https_url_prefix = redirect_url + '?location=https://{{hosts[alt][]}}:{{ports[https][0]}}/resource-timing/resources/';
|
||||||
function setup_iframe() {
|
function setup_iframe() {
|
||||||
const iframe_content =
|
const iframe_content =
|
||||||
'<link rel="stylesheet" href="/' + url_prefix + 'resource_timing_test0.css"></link>' +
|
'<link rel="stylesheet" href="/' + url_prefix + 'resource_timing_test0.css"></link>' +
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<script>
|
<script>
|
||||||
function request() {
|
function request() {
|
||||||
var client = new XMLHttpRequest,
|
var client = new XMLHttpRequest,
|
||||||
baseurl = "https://{{hosts[][www]}}:{{ports[https][0]}}{{location[pathname]}}",
|
baseurl = "https://{{hosts[alt][]}}:{{ports[https][0]}}{{location[pathname]}}",
|
||||||
url = new URL("fake_responses.py", baseurl).href;
|
url = new URL("fake_responses.py", baseurl).href;
|
||||||
client.open("GET", url, false)
|
client.open("GET", url, false)
|
||||||
client.send(null)
|
client.send(null)
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<script>
|
<script>
|
||||||
function request() {
|
function request() {
|
||||||
var client = new XMLHttpRequest,
|
var client = new XMLHttpRequest,
|
||||||
baseurl = "http://{{hosts[][www]}}:{{ports[http][0]}}{{location[pathname]}}",
|
baseurl = "http://{{hosts[alt][]}}:{{ports[http][0]}}{{location[pathname]}}",
|
||||||
subresource = "fake_responses.py",
|
subresource = "fake_responses.py",
|
||||||
redirecturl = new URL(subresource, "https://{{hosts[][www]}}:{{ports[https][0]}}{{location[pathname]}}").href,
|
redirecturl = new URL(subresource, "https://{{hosts[][www]}}:{{ports[https][0]}}{{location[pathname]}}").href,
|
||||||
url = new URL(subresource + "?redirect=" + redirecturl, baseurl).href;
|
url = new URL(subresource + "?redirect=" + redirecturl, baseurl).href;
|
||||||
|
|
|
@ -105,6 +105,8 @@ class URLManifestItem(ManifestItem):
|
||||||
|
|
||||||
|
|
||||||
class TestharnessTest(URLManifestItem):
|
class TestharnessTest(URLManifestItem):
|
||||||
|
__slots__ = ()
|
||||||
|
|
||||||
item_type = "testharness"
|
item_type = "testharness"
|
||||||
|
|
||||||
@property
|
@property
|
||||||
|
@ -162,10 +164,15 @@ class RefTestBase(URLManifestItem):
|
||||||
|
|
||||||
@property
|
@property
|
||||||
def fuzzy(self):
|
def fuzzy(self):
|
||||||
rv = self._extras.get("fuzzy", [])
|
fuzzy = self._extras.get("fuzzy", {})
|
||||||
if isinstance(rv, list):
|
if not isinstance(fuzzy, list):
|
||||||
return {tuple(item[0]): item[1]
|
return fuzzy
|
||||||
for item in self._extras.get("fuzzy", [])}
|
|
||||||
|
rv = {}
|
||||||
|
for k, v in fuzzy:
|
||||||
|
if k is not None:
|
||||||
|
k = tuple(k)
|
||||||
|
rv[k] = v
|
||||||
return rv
|
return rv
|
||||||
|
|
||||||
def to_json(self):
|
def to_json(self):
|
||||||
|
@ -207,30 +214,44 @@ class RefTestBase(URLManifestItem):
|
||||||
|
|
||||||
|
|
||||||
class RefTestNode(RefTestBase):
|
class RefTestNode(RefTestBase):
|
||||||
|
__slots__ = ()
|
||||||
|
|
||||||
item_type = "reftest_node"
|
item_type = "reftest_node"
|
||||||
|
|
||||||
|
|
||||||
class RefTest(RefTestBase):
|
class RefTest(RefTestBase):
|
||||||
|
__slots__ = ()
|
||||||
|
|
||||||
item_type = "reftest"
|
item_type = "reftest"
|
||||||
|
|
||||||
|
|
||||||
class ManualTest(URLManifestItem):
|
class ManualTest(URLManifestItem):
|
||||||
|
__slots__ = ()
|
||||||
|
|
||||||
item_type = "manual"
|
item_type = "manual"
|
||||||
|
|
||||||
|
|
||||||
class ConformanceCheckerTest(URLManifestItem):
|
class ConformanceCheckerTest(URLManifestItem):
|
||||||
|
__slots__ = ()
|
||||||
|
|
||||||
item_type = "conformancechecker"
|
item_type = "conformancechecker"
|
||||||
|
|
||||||
|
|
||||||
class VisualTest(URLManifestItem):
|
class VisualTest(URLManifestItem):
|
||||||
|
__slots__ = ()
|
||||||
|
|
||||||
item_type = "visual"
|
item_type = "visual"
|
||||||
|
|
||||||
|
|
||||||
class Stub(URLManifestItem):
|
class Stub(URLManifestItem):
|
||||||
|
__slots__ = ()
|
||||||
|
|
||||||
item_type = "stub"
|
item_type = "stub"
|
||||||
|
|
||||||
|
|
||||||
class WebDriverSpecTest(URLManifestItem):
|
class WebDriverSpecTest(URLManifestItem):
|
||||||
|
__slots__ = ()
|
||||||
|
|
||||||
item_type = "wdspec"
|
item_type = "wdspec"
|
||||||
|
|
||||||
@property
|
@property
|
||||||
|
@ -245,6 +266,8 @@ class WebDriverSpecTest(URLManifestItem):
|
||||||
|
|
||||||
|
|
||||||
class SupportFile(ManifestItem):
|
class SupportFile(ManifestItem):
|
||||||
|
__slots__ = ()
|
||||||
|
|
||||||
item_type = "support"
|
item_type = "support"
|
||||||
|
|
||||||
@property
|
@property
|
||||||
|
|
|
@ -483,9 +483,11 @@ def load_and_update(tests_root,
|
||||||
allow_cached=allow_cached)
|
allow_cached=allow_cached)
|
||||||
except ManifestVersionMismatch:
|
except ManifestVersionMismatch:
|
||||||
logger.info("Manifest version changed, rebuilding")
|
logger.info("Manifest version changed, rebuilding")
|
||||||
|
rebuild = True
|
||||||
|
|
||||||
if manifest is not None and manifest.url_base != url_base:
|
if manifest is not None and manifest.url_base != url_base:
|
||||||
logger.info("Manifest url base did not match, rebuilding")
|
logger.info("Manifest url base did not match, rebuilding")
|
||||||
|
rebuild = True
|
||||||
|
|
||||||
if manifest is None:
|
if manifest is None:
|
||||||
manifest = Manifest(tests_root, url_base)
|
manifest = Manifest(tests_root, url_base)
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
|
import json
|
||||||
|
|
||||||
import pytest
|
import pytest
|
||||||
|
|
||||||
from ..item import URLManifestItem
|
from ..manifest import Manifest
|
||||||
|
from ..item import URLManifestItem, RefTest
|
||||||
|
|
||||||
|
|
||||||
@pytest.mark.parametrize("path", [
|
@pytest.mark.parametrize("path", [
|
||||||
|
@ -39,3 +42,55 @@ def test_url_not_https(path):
|
||||||
m = URLManifestItem("/foo", "bar/" + path, "/", "bar/" + path)
|
m = URLManifestItem("/foo", "bar/" + path, "/", "bar/" + path)
|
||||||
|
|
||||||
assert m.https is False
|
assert m.https is False
|
||||||
|
|
||||||
|
|
||||||
|
@pytest.mark.parametrize("fuzzy", [
|
||||||
|
{('/foo/test.html', u'/foo/ref.html', '=='): [[1, 1], [200, 200]]},
|
||||||
|
{('/foo/test.html', u'/foo/ref.html', '=='): [[0, 1], [100, 200]]},
|
||||||
|
{None: [[0, 1], [100, 200]]},
|
||||||
|
{None: [[1, 1], [200, 200]]},
|
||||||
|
])
|
||||||
|
def test_reftest_fuzzy(fuzzy):
|
||||||
|
t = RefTest('/',
|
||||||
|
'foo/test.html',
|
||||||
|
'/',
|
||||||
|
'foo/test.html',
|
||||||
|
[('/foo/ref.html', '==')],
|
||||||
|
fuzzy=fuzzy)
|
||||||
|
assert fuzzy == t.fuzzy
|
||||||
|
|
||||||
|
json_obj = t.to_json()
|
||||||
|
|
||||||
|
m = Manifest("/", "/")
|
||||||
|
t2 = RefTest.from_json(m, t.path, json_obj)
|
||||||
|
assert fuzzy == t2.fuzzy
|
||||||
|
|
||||||
|
# test the roundtrip case, given tuples become lists
|
||||||
|
roundtrip = json.loads(json.dumps(json_obj))
|
||||||
|
t3 = RefTest.from_json(m, t.path, roundtrip)
|
||||||
|
assert fuzzy == t3.fuzzy
|
||||||
|
|
||||||
|
|
||||||
|
@pytest.mark.parametrize("fuzzy", [
|
||||||
|
{('/foo/test.html', u'/foo/ref-2.html', '=='): [[0, 1], [100, 200]]},
|
||||||
|
{None: [[1, 1], [200, 200]], ('/foo/test.html', u'/foo/ref-2.html', '=='): [[0, 1], [100, 200]]},
|
||||||
|
])
|
||||||
|
def test_reftest_fuzzy_multi(fuzzy):
|
||||||
|
t = RefTest('/',
|
||||||
|
'foo/test.html',
|
||||||
|
'/',
|
||||||
|
'foo/test.html',
|
||||||
|
[('/foo/ref-1.html', '=='), ('/foo/ref-2.html', '==')],
|
||||||
|
fuzzy=fuzzy)
|
||||||
|
assert fuzzy == t.fuzzy
|
||||||
|
|
||||||
|
json_obj = t.to_json()
|
||||||
|
|
||||||
|
m = Manifest("/", "/")
|
||||||
|
t2 = RefTest.from_json(m, t.path, json_obj)
|
||||||
|
assert fuzzy == t2.fuzzy
|
||||||
|
|
||||||
|
# test the roundtrip case, given tuples become lists
|
||||||
|
roundtrip = json.loads(json.dumps(json_obj))
|
||||||
|
t3 = RefTest.from_json(m, t.path, roundtrip)
|
||||||
|
assert fuzzy == t3.fuzzy
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
mypy==0.701
|
mypy==0.701
|
||||||
mypy-extensions==0.4.1
|
mypy-extensions==0.4.1
|
||||||
typed-ast==1.3.4
|
typed-ast==1.3.5
|
||||||
|
|
|
@ -309,8 +309,10 @@ class RefTestImplementation(object):
|
||||||
self.logger.info("Allowed %s pixels different, maximum difference per channel %s" %
|
self.logger.info("Allowed %s pixels different, maximum difference per channel %s" %
|
||||||
("-".join(str(item) for item in allowed_different),
|
("-".join(str(item) for item in allowed_different),
|
||||||
"-".join(str(item) for item in allowed_per_channel)))
|
"-".join(str(item) for item in allowed_per_channel)))
|
||||||
equal = (allowed_per_channel[0] <= max_per_channel <= allowed_per_channel[1] and
|
equal = ((pixels_different == 0 and allowed_different[0] == 0) or
|
||||||
allowed_different[0] <= pixels_different <= allowed_different[1])
|
(max_per_channel == 0 and allowed_per_channel[0] == 0) or
|
||||||
|
(allowed_per_channel[0] <= max_per_channel <= allowed_per_channel[1] and
|
||||||
|
allowed_different[0] <= pixels_different <= allowed_different[1]))
|
||||||
return equal if relation == "==" else not equal
|
return equal if relation == "==" else not equal
|
||||||
|
|
||||||
def get_differences(self, screenshots):
|
def get_differences(self, screenshots):
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="resources/user-timing-helper.js"></script>
|
||||||
|
<title>User Timing L3: create mark entry by constructor</title>
|
||||||
|
<h1>User Timing L3: create mark entry by constructor</h1>
|
||||||
|
<p>
|
||||||
|
User Timing L3: Mark entry can be created by using constructor."
|
||||||
|
</p>
|
||||||
|
<script>
|
||||||
|
test(()=>{
|
||||||
|
const entry = new PerformanceMark("name");
|
||||||
|
assert_true(entry instanceof PerformanceMark);
|
||||||
|
checkEntry(entry, {name: "name", entryType: "mark"});
|
||||||
|
}, "Mark entry can be created by 'new PerformanceMark(string)'.");
|
||||||
|
|
||||||
|
test(()=>{
|
||||||
|
const entry = new PerformanceMark("name", {});
|
||||||
|
assert_true(entry instanceof PerformanceMark);
|
||||||
|
checkEntry(entry, {name: "name", entryType: "mark"});
|
||||||
|
}, "Mark entry can be created by 'new PerformanceMark(string, {})'.");
|
||||||
|
|
||||||
|
test(()=>{
|
||||||
|
const entry = new PerformanceMark("name", {startTime: 1});
|
||||||
|
assert_true(entry instanceof PerformanceMark);
|
||||||
|
checkEntry(entry, {name: "name", entryType: "mark", startTime: 1});
|
||||||
|
}, "Mark entry can be created by 'new PerformanceMark(string, {startTime})'.");
|
||||||
|
|
||||||
|
test(()=>{
|
||||||
|
const entry = new PerformanceMark("name", {detail: {info: "abc"}});
|
||||||
|
assert_true(entry instanceof PerformanceMark);
|
||||||
|
checkEntry(entry, {name: "name", entryType: "mark", detail: {info: "abc"}});
|
||||||
|
}, "Mark entry can be created by 'new PerformanceMark(string, {detail})'.");
|
||||||
|
|
||||||
|
test(()=>{
|
||||||
|
const entry =
|
||||||
|
new PerformanceMark("name", {startTime: 1, detail: {info: "abc"}});
|
||||||
|
assert_true(entry instanceof PerformanceMark);
|
||||||
|
checkEntry(entry, {name: "name", entryType: "mark", startTime: 1, detail: {info: "abc"}});
|
||||||
|
}, "Mark entry can be created by " +
|
||||||
|
"'new PerformanceMark(string, {startTime, detail})'.");
|
||||||
|
|
||||||
|
test(()=>{
|
||||||
|
const entry = new PerformanceMark("name");
|
||||||
|
assert_true(entry instanceof PerformanceMark);
|
||||||
|
checkEntry(entry, {name: "name", entryType: "mark"});
|
||||||
|
assert_equals(performance.getEntriesByName("name").length, 0);
|
||||||
|
}, "Using new PerformanceMark() shouldn't add the entry to performance timeline.");
|
||||||
|
</script>
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<title>Calculating computed keyframes: Shorthand properties</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/web-animations-1/#calculating-computed-keyframes">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="../../testcommon.js"></script>
|
||||||
|
<body>
|
||||||
|
<div id="log"></div>
|
||||||
|
<div id="target"></div>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
test(t => {
|
||||||
|
const div = createDiv(t);
|
||||||
|
div.style.opacity = '0';
|
||||||
|
|
||||||
|
const animation = div.animate({ all: 'initial' }, 100 * MS_PER_SEC);
|
||||||
|
animation.currentTime = 50 * MS_PER_SEC;
|
||||||
|
|
||||||
|
assert_approx_equals(
|
||||||
|
parseFloat(getComputedStyle(div).opacity),
|
||||||
|
0.5,
|
||||||
|
0.0001,
|
||||||
|
'Should be half way through an opacity animation'
|
||||||
|
);
|
||||||
|
}, 'It should be possible to animate the all shorthand');
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
|
@ -98,6 +98,19 @@ let testFunction =
|
||||||
assert_transform_approx_equals(transform, inverse_transform.inverse);
|
assert_transform_approx_equals(transform, inverse_transform.inverse);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Inverse should always return the same object, and calling inverse on that
|
||||||
|
// object should return the original object.
|
||||||
|
transform = new XRRigidTransform(
|
||||||
|
{ x: 1.0, y: -2.0, z: 3.0 },
|
||||||
|
{ x: 0.0, y: 0.0, z: 1.0, w: 1.0 });
|
||||||
|
inverse_transform = transform.inverse;
|
||||||
|
t.step(() => {
|
||||||
|
assert_true(transform.inverse === inverse_transform);
|
||||||
|
assert_true(inverse_transform.inverse === transform);
|
||||||
|
assert_true(transform.inverse.inverse === transform);
|
||||||
|
assert_true(transform.inverse.inverse.inverse === inverse_transform);
|
||||||
|
});
|
||||||
|
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
15
tests/wpt/web-platform-tests/xhr/event-abort.any.js
Normal file
15
tests/wpt/web-platform-tests/xhr/event-abort.any.js
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
// META: title=XMLHttpRequest: abort event
|
||||||
|
|
||||||
|
var test = async_test();
|
||||||
|
test.step(function () {
|
||||||
|
var client = new XMLHttpRequest();
|
||||||
|
client.onabort = test.step_func(function () {
|
||||||
|
test.done();
|
||||||
|
});
|
||||||
|
client.open("GET", "resources/well-formed.xml");
|
||||||
|
client.send(null);
|
||||||
|
client.abort();
|
||||||
|
test.step_timeout(() => {
|
||||||
|
assert_unreached("onabort not called after 4 ms");
|
||||||
|
}, 4);
|
||||||
|
});
|
|
@ -1,29 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>XMLHttpRequest: abort event</title>
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#handler-xhr-onabort" data-tested-assertations="../.." />
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#event-xhr-abort" data-tested-assertations="../.." />
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#dom-xmlhttprequest-abort" data-tested-assertations="following::ol//ol//ol/li[3]" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="log"></div>
|
|
||||||
<script>
|
|
||||||
var test = async_test();
|
|
||||||
test.step(function() {
|
|
||||||
var client = new XMLHttpRequest();
|
|
||||||
client.onabort = test.step_func(function() {
|
|
||||||
test.done();
|
|
||||||
});
|
|
||||||
client.open("GET", "resources/well-formed.xml");
|
|
||||||
client.send(null);
|
|
||||||
client.abort();
|
|
||||||
test.step_timeout(() => {
|
|
||||||
assert_unreached("onabort not called after 4 ms");
|
|
||||||
}, 4);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
13
tests/wpt/web-platform-tests/xhr/event-error.sub.any.js
Normal file
13
tests/wpt/web-platform-tests/xhr/event-error.sub.any.js
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
// META: title=XMLHttpRequest Test: event - error
|
||||||
|
|
||||||
|
async_test(function (t) {
|
||||||
|
var client = new XMLHttpRequest();
|
||||||
|
client.onerror = t.step_func(function (e) {
|
||||||
|
assert_true(e instanceof ProgressEvent);
|
||||||
|
assert_equals(e.type, "error");
|
||||||
|
t.done();
|
||||||
|
});
|
||||||
|
|
||||||
|
client.open("GET", "http://nonexistent.{{host}}:{{ports[http][0]}}");
|
||||||
|
client.send("null");
|
||||||
|
});
|
|
@ -1,25 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>XMLHttpRequest Test: event - error</title>
|
|
||||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
|
||||||
<meta name="assert" content="Check if event onerror is fired When the request has failed.">
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
|
|
||||||
<div id="log"></div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
async_test(function (t) {
|
|
||||||
var client = new XMLHttpRequest();
|
|
||||||
client.onerror = t.step_func(function(e) {
|
|
||||||
assert_true(e instanceof ProgressEvent);
|
|
||||||
assert_equals(e.type, "error");
|
|
||||||
t.done();
|
|
||||||
});
|
|
||||||
|
|
||||||
client.open("GET", "http://nonexistent.{{host}}:{{ports[http][0]}}");
|
|
||||||
client.send("null");
|
|
||||||
}, document.title);
|
|
||||||
|
|
||||||
</script>
|
|
21
tests/wpt/web-platform-tests/xhr/event-load.any.js
Normal file
21
tests/wpt/web-platform-tests/xhr/event-load.any.js
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
// META: title=XMLHttpRequest: The send() method: Fire an event named load (synchronous flag is unset)
|
||||||
|
|
||||||
|
var test = async_test();
|
||||||
|
test.step(function () {
|
||||||
|
var client = new XMLHttpRequest();
|
||||||
|
client.onload = test.step_func(function (e) {
|
||||||
|
assert_true(e instanceof ProgressEvent);
|
||||||
|
assert_equals(e.type, "load");
|
||||||
|
assert_equals(client.readyState, 4);
|
||||||
|
test.done();
|
||||||
|
});
|
||||||
|
client.onreadystatechange = test.step_func(function () {
|
||||||
|
if (client.readyState !== 4) return;
|
||||||
|
|
||||||
|
test.step_timeout(() => {
|
||||||
|
assert_unreached("Didn't get load event within 4ms of readystatechange==4");
|
||||||
|
}, 4);
|
||||||
|
});
|
||||||
|
client.open("GET", "resources/well-formed.xml");
|
||||||
|
client.send(null);
|
||||||
|
});
|
|
@ -1,30 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<meta charset=utf-8>
|
|
||||||
<title>XMLHttpRequest: The send() method: Fire an event named load (synchronous flag is unset)</title>
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#handler-xhr-onload" data-tested-assertations="../.." />
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#event-xhr-load" data-tested-assertations="../.." />
|
|
||||||
<div id="log"></div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var test = async_test();
|
|
||||||
test.step(function() {
|
|
||||||
var client = new XMLHttpRequest();
|
|
||||||
client.onload = test.step_func(function(e) {
|
|
||||||
assert_true(e instanceof ProgressEvent);
|
|
||||||
assert_equals(e.type, "load");
|
|
||||||
assert_equals(client.readyState, 4);
|
|
||||||
test.done();
|
|
||||||
});
|
|
||||||
client.onreadystatechange = test.step_func(function() {
|
|
||||||
if (client.readyState !== 4) return;
|
|
||||||
|
|
||||||
test.step_timeout(() => {
|
|
||||||
assert_unreached("Didn't get load event within 4ms of readystatechange==4");
|
|
||||||
}, 4);
|
|
||||||
});
|
|
||||||
client.open("GET", "resources/well-formed.xml");
|
|
||||||
client.send(null);
|
|
||||||
});
|
|
||||||
</script>
|
|
19
tests/wpt/web-platform-tests/xhr/event-loadend.any.js
Normal file
19
tests/wpt/web-platform-tests/xhr/event-loadend.any.js
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
// META: title=XMLHttpRequest: loadend event
|
||||||
|
|
||||||
|
var test = async_test();
|
||||||
|
test.step(function () {
|
||||||
|
var client = new XMLHttpRequest();
|
||||||
|
client.onloadend = test.step_func(function (e) {
|
||||||
|
assert_true(e instanceof ProgressEvent);
|
||||||
|
assert_equals(e.type, "loadend");
|
||||||
|
test.done();
|
||||||
|
});
|
||||||
|
client.onreadystatechange = function () {
|
||||||
|
if (client.readyState !== 4) return;
|
||||||
|
test.step_timeout(() => {
|
||||||
|
assert_unreached("onloadend not called after 100 ms");
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
client.open("GET", "resources/well-formed.xml");
|
||||||
|
client.send(null);
|
||||||
|
});
|
|
@ -1,32 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>XMLHttpRequest: loadend event</title>
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#handler-xhr-onloadend" data-tested-assertations="/../.." />
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#event-xhr-loadend" data-tested-assertations="/../.." />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="log"></div>
|
|
||||||
<script>
|
|
||||||
var test = async_test();
|
|
||||||
test.step(function() {
|
|
||||||
var client = new XMLHttpRequest();
|
|
||||||
client.onloadend = test.step_func(function(e) {
|
|
||||||
assert_true(e instanceof ProgressEvent);
|
|
||||||
assert_equals(e.type, "loadend");
|
|
||||||
test.done();
|
|
||||||
});
|
|
||||||
client.onreadystatechange = function() {
|
|
||||||
if (client.readyState !== 4) return;
|
|
||||||
test.step_timeout(() => {
|
|
||||||
assert_unreached("onloadend not called after 100 ms");
|
|
||||||
}, 100);
|
|
||||||
};
|
|
||||||
client.open("GET", "resources/well-formed.xml");
|
|
||||||
client.send(null);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
// META: title=XMLHttpRequest: The send() method: Fire a progress event named loadstart on upload object (synchronous flag is unset)
|
||||||
|
|
||||||
|
var test = async_test();
|
||||||
|
test.step(function () {
|
||||||
|
var client = new XMLHttpRequest();
|
||||||
|
client.upload.onloadstart = test.step_func(function (e) {
|
||||||
|
assert_true(e instanceof ProgressEvent);
|
||||||
|
assert_equals(e.total, 7, 'upload.onloadstart: event.total');
|
||||||
|
assert_equals(e.loaded, 0, 'upload.onloadstart: event.loaded');
|
||||||
|
assert_equals(e.type, "loadstart");
|
||||||
|
test.done();
|
||||||
|
});
|
||||||
|
client.onreadystatechange = test.step_func(function () {
|
||||||
|
if (client.readyState === 4)
|
||||||
|
assert_unreached("onloadstart not called.");
|
||||||
|
});
|
||||||
|
client.open("POST", "resources/trickle.py?ms=5&count=8");
|
||||||
|
client.send('foo=bar');
|
||||||
|
});
|
|
@ -1,28 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang=en>
|
|
||||||
<meta charset=utf-8>
|
|
||||||
<title>XMLHttpRequest: The send() method: Fire a progress event named loadstart on upload object (synchronous flag is unset)</title>
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#handler-xhr-onprogress" data-tested-assertations="../.." />
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#event-xhr-progress" data-tested-assertations="../.." />
|
|
||||||
<div id="log"></div>
|
|
||||||
<script>
|
|
||||||
var test = async_test();
|
|
||||||
test.step(function() {
|
|
||||||
var client = new XMLHttpRequest();
|
|
||||||
client.upload.onloadstart = test.step_func(function(e) {
|
|
||||||
assert_true(e instanceof ProgressEvent);
|
|
||||||
assert_equals(e.total, 7, 'upload.onloadstart: event.total');
|
|
||||||
assert_equals(e.loaded, 0, 'upload.onloadstart: event.loaded');
|
|
||||||
assert_equals(e.type, "loadstart");
|
|
||||||
test.done();
|
|
||||||
});
|
|
||||||
client.onreadystatechange = test.step_func(function() {
|
|
||||||
if (client.readyState === 4)
|
|
||||||
assert_unreached("onloadstart not called.");
|
|
||||||
});
|
|
||||||
client.open("POST", "resources/trickle.py?ms=5&count=8");
|
|
||||||
client.send('foo=bar');
|
|
||||||
});
|
|
||||||
</script>
|
|
17
tests/wpt/web-platform-tests/xhr/event-loadstart.any.js
Normal file
17
tests/wpt/web-platform-tests/xhr/event-loadstart.any.js
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
// META: title=XMLHttpRequest: loadstart event
|
||||||
|
|
||||||
|
var test = async_test();
|
||||||
|
test.step(function () {
|
||||||
|
var client = new XMLHttpRequest();
|
||||||
|
client.onloadstart = test.step_func(function (e) {
|
||||||
|
assert_true(e instanceof ProgressEvent);
|
||||||
|
assert_equals(e.type, "loadstart");
|
||||||
|
assert_equals(client.readyState, 1);
|
||||||
|
test.done();
|
||||||
|
});
|
||||||
|
test.step_timeout(function () {
|
||||||
|
assert_unreached("onloadstart not called after 500 ms");
|
||||||
|
}, 500);
|
||||||
|
client.open("GET", "resources/well-formed.xml");
|
||||||
|
client.send(null);
|
||||||
|
});
|
|
@ -1,31 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>XMLHttpRequest: loadstart event</title>
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#handler-xhr-onloadstart" data-tested-assertations="../.." />
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#event-xhr-loadstart" data-tested-assertations="../.." />
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#the-send()-method" data-tested-assertations="following-sibling::ol/li[9]/ol/li[2]" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="log"></div>
|
|
||||||
<script>
|
|
||||||
var test = async_test();
|
|
||||||
test.step(function() {
|
|
||||||
var client = new XMLHttpRequest();
|
|
||||||
client.onloadstart = test.step_func(function(e) {
|
|
||||||
assert_true(e instanceof ProgressEvent);
|
|
||||||
assert_equals(e.type, "loadstart");
|
|
||||||
assert_equals(client.readyState, 1);
|
|
||||||
test.done();
|
|
||||||
});
|
|
||||||
test.step_timeout(function () {
|
|
||||||
assert_unreached("onloadstart not called after 500 ms");
|
|
||||||
}, 500);
|
|
||||||
client.open("GET", "resources/well-formed.xml");
|
|
||||||
client.send(null);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
18
tests/wpt/web-platform-tests/xhr/event-progress.any.js
Normal file
18
tests/wpt/web-platform-tests/xhr/event-progress.any.js
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
// META: title=XMLHttpRequest: The send() method: Fire a progress event named progress (synchronous flag is unset)
|
||||||
|
// META: timeout=long
|
||||||
|
|
||||||
|
var test = async_test();
|
||||||
|
test.step(function () {
|
||||||
|
var client = new XMLHttpRequest();
|
||||||
|
client.onprogress = test.step_func(function (e) {
|
||||||
|
assert_true(e instanceof ProgressEvent);
|
||||||
|
assert_equals(e.type, "progress");
|
||||||
|
test.done();
|
||||||
|
});
|
||||||
|
client.onreadystatechange = test.step_func(function () {
|
||||||
|
if (client.readyState === 4)
|
||||||
|
assert_unreached("onprogress not called.");
|
||||||
|
});
|
||||||
|
client.open("GET", "resources/trickle.py?count=4&delay=150");
|
||||||
|
client.send(null);
|
||||||
|
});
|
|
@ -1,27 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang=en>
|
|
||||||
<meta charset=utf-8>
|
|
||||||
<title>XMLHttpRequest: The send() method: Fire a progress event named progress (synchronous flag is unset)</title>
|
|
||||||
<meta name="timeout" content="long">
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#handler-xhr-onprogress" data-tested-assertations="../.." />
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#event-xhr-progress" data-tested-assertations="../.." />
|
|
||||||
<div id="log"></div>
|
|
||||||
<script>
|
|
||||||
var test = async_test();
|
|
||||||
test.step(function() {
|
|
||||||
var client = new XMLHttpRequest();
|
|
||||||
client.onprogress = test.step_func(function(e) {
|
|
||||||
assert_true(e instanceof ProgressEvent);
|
|
||||||
assert_equals(e.type, "progress");
|
|
||||||
test.done();
|
|
||||||
});
|
|
||||||
client.onreadystatechange = test.step_func(function() {
|
|
||||||
if (client.readyState === 4)
|
|
||||||
assert_unreached("onprogress not called.");
|
|
||||||
});
|
|
||||||
client.open("GET", "resources/trickle.py?count=4&delay=150");
|
|
||||||
client.send(null);
|
|
||||||
});
|
|
||||||
</script>
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
// META: title=XMLHttpRequest: open() call fires sync readystate event
|
||||||
|
|
||||||
|
const title = "XMLHttpRequest: open() call fires sync readystate event";
|
||||||
|
|
||||||
|
test(function () {
|
||||||
|
var client = new XMLHttpRequest()
|
||||||
|
var eventsFired = []
|
||||||
|
client.onreadystatechange = function () {
|
||||||
|
eventsFired.push(client.readyState)
|
||||||
|
}
|
||||||
|
client.open('GET', "...", false)
|
||||||
|
assert_array_equals(eventsFired, [1])
|
||||||
|
}, title + ' (sync)');
|
||||||
|
|
||||||
|
test(function () {
|
||||||
|
var client = new XMLHttpRequest()
|
||||||
|
var eventsFired = []
|
||||||
|
client.onreadystatechange = function () {
|
||||||
|
eventsFired.push(client.readyState)
|
||||||
|
}
|
||||||
|
client.open('GET', "...", true)
|
||||||
|
assert_array_equals(eventsFired, [1])
|
||||||
|
}, title + ' (async)');
|
|
@ -1,33 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>XMLHttpRequest: open() call fires sync readystate event</title>
|
|
||||||
<script src="/resources/testharness.js"></script>
|
|
||||||
<script src="/resources/testharnessreport.js"></script>
|
|
||||||
<link rel="help" href="https://xhr.spec.whatwg.org/#the-open()-method" data-tested-assertations="following::ol[1]/li[13]/ol[1]/li[2]" />
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="log"></div>
|
|
||||||
<script>
|
|
||||||
test(function() {
|
|
||||||
var client = new XMLHttpRequest()
|
|
||||||
var eventsFired = []
|
|
||||||
client.onreadystatechange = function(){
|
|
||||||
eventsFired.push(client.readyState)
|
|
||||||
}
|
|
||||||
client.open('GET', "...", false)
|
|
||||||
assert_array_equals(eventsFired, [1])
|
|
||||||
}, document.title + ' (sync)')
|
|
||||||
test(function() {
|
|
||||||
var client = new XMLHttpRequest()
|
|
||||||
var eventsFired = []
|
|
||||||
client.onreadystatechange = function(){
|
|
||||||
eventsFired.push(client.readyState)
|
|
||||||
}
|
|
||||||
client.open('GET', "...", true)
|
|
||||||
assert_array_equals(eventsFired, [1])
|
|
||||||
}, document.title + ' (async)')
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
// META: title=XMLHttpRequest: the LOADING state change may be emitted multiple times
|
||||||
|
|
||||||
|
var test = async_test();
|
||||||
|
|
||||||
|
test.step(function () {
|
||||||
|
var client = new XMLHttpRequest();
|
||||||
|
var countedLoading = 0;
|
||||||
|
|
||||||
|
client.onreadystatechange = test.step_func(function () {
|
||||||
|
if (client.readyState === 3) {
|
||||||
|
countedLoading += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (client.readyState === 4) {
|
||||||
|
assert_greater_than(countedLoading, 1, "LOADING state change may be emitted multiple times");
|
||||||
|
|
||||||
|
test.done();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
client.open("GET", "resources/trickle.py?count=10"); // default timeout in trickle.py is 1/2 sec, so this request will take 5 seconds to complete
|
||||||
|
client.send(null);
|
||||||
|
});
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue