mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
Update web-platform-tests to revision 2dda7b8c10c7566fa6167a32b09c85d51baf2a85
This commit is contained in:
WPT Sync Bot
parent
25ebde78aa
commit
8edc7686ef
129 changed files with 5280 additions and 820 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,2 +0,0 @@
|
|||
[vh_not_refreshing_on_chrome.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
[cors-preflight-not-cors-safelisted.any.html]
|
||||
[Need CORS-preflight for content-language/@ header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for content-language/\x01 header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for accept-language/@ header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for accept/" header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for accept-language/\x01 header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for content-type/text/plain; long=0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901 header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for accept/012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678 header]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
[cors-preflight-not-cors-safelisted.any.worker.html]
|
||||
[Need CORS-preflight for content-language/@ header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for content-language/\x01 header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for accept-language/@ header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for accept/" header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for accept-language/\x01 header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for content-type/text/plain; long=0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901 header]
|
||||
expected: FAIL
|
||||
|
||||
[Need CORS-preflight for accept/012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678 header]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
[headers-no-cors.window.html]
|
||||
["no-cors" Headers object cannot have accept-language/@ as header]
|
||||
expected: FAIL
|
||||
|
||||
["no-cors" Headers object cannot have accept-language/\x01 as header]
|
||||
expected: FAIL
|
||||
|
||||
["no-cors" Headers object cannot have content-type/text/plain; long=0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901 as header]
|
||||
expected: FAIL
|
||||
|
||||
["no-cors" Headers object cannot have content-language/@ as header]
|
||||
expected: FAIL
|
||||
|
||||
["no-cors" Headers object cannot have content-language/\x01 as header]
|
||||
expected: FAIL
|
||||
|
||||
["no-cors" Headers object cannot have accept/" as header]
|
||||
expected: FAIL
|
||||
|
||||
["no-cors" Headers object cannot have accept/012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678 as header]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
[embed.tentative.https.sub.html]
|
||||
expected: TIMEOUT
|
||||
[Cross-Site embed]
|
||||
expected: NOTRUN
|
||||
|
||||
[Same-Site embed]
|
||||
expected: NOTRUN
|
||||
|
||||
[Same-Origin embed]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[font.tentative.https.sub.html]
|
||||
[font]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
[object.tentative.https.sub.html]
|
||||
expected: TIMEOUT
|
||||
[Same-Origin object]
|
||||
expected: TIMEOUT
|
||||
|
||||
[Cross-Site object]
|
||||
expected: NOTRUN
|
||||
|
||||
[Same-Site object]
|
||||
expected: NOTRUN
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[cross-site.tentative.https.sub.html]
|
||||
[Cross-Site -> Cross-Site redirect]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[same-origin.tentative.https.sub.html]
|
||||
[Cross-Site -> Same-Origin redirect]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[same-site.tentative.https.sub.html]
|
||||
[Cross-Site -> Same-Site redirect]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[cross-site.tentative.https.sub.html]
|
||||
[Same-Origin -> Cross-Site redirect]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[same-origin.tentative.https.sub.html]
|
||||
[Same-Origin -> Same-Origin redirect]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[same-site.tentative.https.sub.html]
|
||||
[Same-Origin -> Same-Site redirect]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[cross-site.tentative.https.sub.html]
|
||||
[Same-Site -> Cross-Site redirect]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[same-origin.tentative.https.sub.html]
|
||||
[Same-Site -> Same-Origin redirect]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[same-site.tentative.https.sub.html]
|
||||
[Same-Site -> Same-Site redirect]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[report.tentative.https.sub.html]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[sharedworker.tentative.https.sub.html]
|
||||
[sharedworker]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
[style.tentative.https.sub.html]
|
||||
[Cross-Site style]
|
||||
expected: FAIL
|
||||
|
||||
[Same-Site style]
|
||||
expected: FAIL
|
||||
|
||||
[Same-Origin style]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
[track.tentative.https.sub.html]
|
||||
expected: TIMEOUT
|
||||
[Same-Site track]
|
||||
expected: NOTRUN
|
||||
|
||||
[Same-Origin track]
|
||||
expected: TIMEOUT
|
||||
|
||||
[Cross-Site track]
|
||||
expected: NOTRUN
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[worker.tentative.https.sub.html]
|
||||
[Same-Origin worker]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[xslt.tentative.https.sub.html]
|
||||
expected: TIMEOUT
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
[traverse_the_history_4.html]
|
||||
[Multiple history traversals, last would be aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -5,3 +5,6 @@
|
|||
[_charset_ control sets the expected encoding name.]
|
||||
expected: FAIL
|
||||
|
||||
[The button cannot be setted if it is not a submitter.]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,22 @@
|
|||
[response.formData() with input: a&b&c]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: _charset_=windows-1252&test=%C2x]
|
||||
[request.formData() with input: a=b&c=d]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a=b&c=d]
|
||||
[request.formData() with input: &&&a=b&&&&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a&b&c]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: _charset_=windows-1252&test=%C2x]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: &&&a=b&&&&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a=b&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
|
|
@ -13,9 +25,6 @@
|
|||
[request.formData() with input: a&b&c]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a=b&c=d]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: a=b&c=d]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -25,3 +34,15 @@
|
|||
[request.formData() with input: a=b&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: &&&a=b&&&&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: _charset_=windows-1252&test=%C2x]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: a=b&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: _charset_=windows-1252&test=%C2x]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
[convolver-upmixing-1-channel-response.html]
|
||||
[speakers, initially mono]
|
||||
expected: FAIL
|
||||
|
||||
[discrete]
|
||||
expected: FAIL
|
||||
|
||||
[speakers, initially stereo]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -8,8 +8,8 @@
|
|||
promise_test(async test => {
|
||||
// 6.3.1.9.2: If |registration|’s active worker is null, then reject promise
|
||||
// with a TypeError and abort these steps.
|
||||
const script = 'resources/sw.js';
|
||||
const scope = 'resources/scope' + location.pathname;
|
||||
const script = 'service_workers/sw.js';
|
||||
const scope = 'service_workers/' + location.pathname;
|
||||
|
||||
const serviceWorkerRegistration =
|
||||
await service_worker_unregister_and_register(test, script, scope);
|
||||
|
|
@ -21,7 +21,7 @@ promise_test(async test => {
|
|||
await promise_rejects(
|
||||
test, new TypeError(),
|
||||
serviceWorkerRegistration.backgroundFetch.fetch(
|
||||
uniqueId(), ['resources/sw.js']),
|
||||
uniqueId(), ['resources/feature-name.txt']),
|
||||
'fetch() must reject on pending and installing workers');
|
||||
|
||||
}, 'Background Fetch requires an activated Service Worker');
|
||||
|
|
@ -44,7 +44,9 @@ backgroundFetchTest(async (test, backgroundFetch) => {
|
|||
// 6.3.1.7.2: If |internalRequest|’s mode is "no-cors", then return a
|
||||
// promise rejected with a TypeError.
|
||||
{
|
||||
const request = new Request('resources/sw.js', {mode: 'no-cors'});
|
||||
const request =
|
||||
new Request('resources/feature-name.txt', {mode: 'no-cors'});
|
||||
|
||||
await promise_rejects(
|
||||
test, new TypeError(), backgroundFetch.fetch(uniqueId(), request),
|
||||
'Requests must not be in no-cors mode');
|
||||
|
|
@ -56,8 +58,8 @@ backgroundFetchTest(async (test, backgroundFetch) => {
|
|||
// 6.3.1.9.2: If |bgFetchMap[id]| exists, reject |promise| with a TypeError
|
||||
// and abort these steps.
|
||||
return promise_rejects(test, new TypeError(), Promise.all([
|
||||
backgroundFetch.fetch('my-id', 'resources/sw.js'),
|
||||
backgroundFetch.fetch('my-id', 'resources/feature-name.txt')
|
||||
backgroundFetch.fetch('my-id', 'resources/feature-name.txt?1'),
|
||||
backgroundFetch.fetch('my-id', 'resources/feature-name.txt?2')
|
||||
]));
|
||||
|
||||
}, 'IDs must be unique among active Background Fetch registrations');
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
// https://wicg.github.io/background-fetch/#background-fetch-manager-getIds
|
||||
|
||||
promise_test(async test => {
|
||||
const script = 'resources/sw.js';
|
||||
const scope = 'resources/scope' + location.pathname;
|
||||
const script = 'service_workers/sw.js';
|
||||
const scope = 'service_workers/' + location.pathname;
|
||||
|
||||
const serviceWorkerRegistration =
|
||||
await service_worker_unregister_and_register(test, script, scope);
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
// https://wicg.github.io/background-fetch/#background-fetch-manager-get
|
||||
|
||||
promise_test(async test => {
|
||||
const script = 'resources/sw.js';
|
||||
const scope = 'resources/scope' + location.pathname;
|
||||
const script = 'service_workers/sw.js';
|
||||
const scope = 'service_workers/' + location.pathname;
|
||||
|
||||
const serviceWorkerRegistration =
|
||||
await service_worker_unregister_and_register(test, script, scope);
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
spec: https://wicg.github.io/budget-api/
|
||||
suggested_reviewers:
|
||||
- beverloo
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
// META: script=/resources/WebIDLParser.js
|
||||
// META: script=/resources/idlharness.js
|
||||
|
||||
'use strict';
|
||||
|
||||
// See https://wicg.github.io/budget-api/
|
||||
|
||||
idl_test(
|
||||
['budget-api'],
|
||||
['html'],
|
||||
async idl_array => {
|
||||
idl_array.add_objects({ BudgetService: ['navigator.budget'] });
|
||||
if (self.Window) {
|
||||
idl_array.add_objects({ Navigator: ['navigator'] });
|
||||
} else {
|
||||
idl_array.add_objects({ WorkerNavigator: ['navigator'] });
|
||||
}
|
||||
const budgetStates = await navigator.budget.getBudget();
|
||||
if (budgetStates.length) {
|
||||
self.budgetState = budgetStates[0];
|
||||
idl_array.add_objects({ BudgetState: ['budgetState'] });
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -229,9 +229,9 @@ test(t => {
|
|||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease",
|
||||
color: "rgb(0, 0, 0)", composite: null },
|
||||
color: "rgb(0, 0, 0)", composite: "auto" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease",
|
||||
color: "rgb(255, 255, 255)", composite: null },
|
||||
color: "rgb(255, 255, 255)", composite: "auto" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
|
|
@ -299,10 +299,10 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
marginBottom: "8px", marginLeft: "8px",
|
||||
marginRight: "8px", marginTop: "8px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
marginBottom: "16px", marginLeft: "16px",
|
||||
marginRight: "16px", marginTop: "16px" },
|
||||
];
|
||||
|
|
@ -323,9 +323,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
];
|
||||
|
||||
|
|
@ -345,9 +345,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
];
|
||||
|
||||
|
|
@ -367,11 +367,11 @@ test(t => {
|
|||
assert_equals(frames.length, 3, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "ease", composite: null,
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
];
|
||||
|
||||
|
|
@ -391,9 +391,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
marginTop: '50px', marginBottom: '100px' },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
marginTop: '250px', marginBottom: '200px' },
|
||||
];
|
||||
|
||||
|
|
@ -413,13 +413,13 @@ test(t => {
|
|||
assert_equals(frames.length, 4, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 0, 0)", marginTop: "8px" },
|
||||
{ offset: 0.25, computedOffset: 0.25, easing: "ease", composite: null,
|
||||
{ offset: 0.25, computedOffset: 0.25, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease", composite: null,
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease", composite: "auto",
|
||||
marginTop: "12px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)", marginTop: "16px" },
|
||||
];
|
||||
|
||||
|
|
@ -439,13 +439,13 @@ test(t => {
|
|||
assert_equals(frames.length, 4, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "linear", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "linear", composite: "auto",
|
||||
color: "rgb(0, 0, 0)", marginTop: "8px" },
|
||||
{ offset: 0.25, computedOffset: 0.25, easing: "steps(1)", composite: null,
|
||||
{ offset: 0.25, computedOffset: 0.25, easing: "steps(1)", composite: "auto",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease-in", composite: null,
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease-in", composite: "auto",
|
||||
marginTop: "12px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)", marginTop: "16px" },
|
||||
];
|
||||
|
||||
|
|
@ -465,9 +465,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 0, 0)", marginTop: "8px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)", marginTop: "16px" },
|
||||
];
|
||||
|
||||
|
|
@ -487,11 +487,11 @@ test(t => {
|
|||
assert_equals(frames.length, 3, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1)", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto",
|
||||
color: "rgb(0, 0, 0)", fontSize: "16px" },
|
||||
{ offset: 0, computedOffset: 0, easing: "linear", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "linear", composite: "auto",
|
||||
marginTop: "8px", paddingLeft: "2px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)", fontSize: "32px", marginTop: "16px",
|
||||
paddingLeft: "4px" },
|
||||
];
|
||||
|
|
@ -512,11 +512,11 @@ test(t => {
|
|||
assert_equals(frames.length, 3, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1)", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto",
|
||||
marginTop: "0px", marginRight: "0px", marginBottom: "0px" },
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "steps(1)", composite: null,
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "steps(1)", composite: "auto",
|
||||
marginTop: "10px", marginRight: "10px", marginBottom: "10px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
marginTop: "20px", marginRight: "20px", marginBottom: "20px" },
|
||||
];
|
||||
|
||||
|
|
@ -536,17 +536,17 @@ test(t => {
|
|||
assert_equals(frames.length, 6, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
paddingTop: "30px" },
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "ease", composite: null,
|
||||
{ offset: 0.5, computedOffset: 0.5, easing: "ease", composite: "auto",
|
||||
paddingTop: "20px" },
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease", composite: null,
|
||||
{ offset: 0.75, computedOffset: 0.75, easing: "ease", composite: "auto",
|
||||
paddingTop: "20px" },
|
||||
{ offset: 0.85, computedOffset: 0.85, easing: "ease", composite: null,
|
||||
{ offset: 0.85, computedOffset: 0.85, easing: "ease", composite: "auto",
|
||||
paddingTop: "30px" },
|
||||
{ offset: 0.851, computedOffset: 0.851, easing: "ease", composite: null,
|
||||
{ offset: 0.851, computedOffset: 0.851, easing: "ease", composite: "auto",
|
||||
paddingTop: "60px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
paddingTop: "70px" },
|
||||
];
|
||||
|
||||
|
|
@ -568,9 +568,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
filter: "none" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
filter: "blur(5px) sepia(60%) saturate(30%)" },
|
||||
];
|
||||
|
||||
|
|
@ -589,9 +589,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
filter: "drop-shadow(rgb(0, 255, 0) 10px 10px 10px)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
filter: "drop-shadow(rgb(255, 0, 0) 50px 30px 10px)" },
|
||||
];
|
||||
|
||||
|
|
@ -617,11 +617,11 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
textShadow: "rgb(0, 0, 0) 1px 1px 2px,"
|
||||
+ " rgb(0, 0, 255) 0px 0px 16px,"
|
||||
+ " rgb(0, 0, 255) 0px 0px 3.2px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
textShadow: "none" },
|
||||
];
|
||||
|
||||
|
|
@ -644,9 +644,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
backgroundSize: "auto auto" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
backgroundSize: "50% auto, 6px auto, contain" },
|
||||
];
|
||||
|
||||
|
|
@ -676,9 +676,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
transform: "none" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
transform: "translate(100px, 0px)" },
|
||||
];
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
|
|
@ -696,12 +696,12 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
marginBottom: "0px",
|
||||
marginLeft: "0px",
|
||||
marginRight: "0px",
|
||||
marginTop: "0px" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
marginBottom: "100px",
|
||||
marginLeft: "100px",
|
||||
marginRight: "100px",
|
||||
|
|
@ -722,9 +722,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 0, 0)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 255, 0)" },
|
||||
];
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
|
|
@ -742,9 +742,9 @@ test(t => {
|
|||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: null,
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
transform: "translate(100px, 0px)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: null,
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
transform: "none" },
|
||||
];
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-around">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Content Distribution offset doesn't account for tracks with non-spanning items.">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
background: grey;
|
||||
grid-template-columns: 100px;
|
||||
font: 20px/1 Ahem;
|
||||
width: 200px;
|
||||
}
|
||||
.item1 {
|
||||
background: green;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.item2 {
|
||||
background: blue;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid justifyContentSpaceAround" data-expected-width="200" data-expected-height="60">
|
||||
<div class="item1" data-expected-width="100" data-expected-height="40">XXXX XXX</div>
|
||||
<div class="item2" data-expected-width="100" data-expected-height="20">XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-between">
|
||||
<link rel="stylesheet" href="../../support/alignment.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Content Distribution offset doesn't account for relative sized tracks with non-spanning items.">
|
||||
<style>
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
background: grey;
|
||||
grid-template-columns: 50%;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
|
||||
.item1 {
|
||||
background: green;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.item2 {
|
||||
background: blue;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid justifyContentSpaceBetween" data-expected-width="220" data-expected-height="40">
|
||||
<div class="item1" data-expected-width="110" data-expected-height="40">XXXX XXX</div>
|
||||
<div class="item2" data-expected-width="60" data-expected-height="40">XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: counter-* properties with a calc() expression</title>
|
||||
<link rel="author" title="Ondřej Žára" href="https://ondras.zarovi.cz/"/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>The following two lines should be the same:</p>
|
||||
|
||||
<div id="test">
|
||||
<span id="a">8</span>
|
||||
<span id="b">10</span>
|
||||
</div>
|
||||
|
||||
<div id="reference">
|
||||
<span>8</span>
|
||||
<span>10</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: counter-* properties with a calc() expression</title>
|
||||
<link rel="author" title="Ondřej Žára" href="https://ondras.zarovi.cz/"/>
|
||||
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS21/generate.html#counters"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS21/generate.html#propdef-content"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS21/syndata.html#counter"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-notation"/>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-lists-3/#counter-properties"/>
|
||||
<link rel="match" href="calc-in-counter-001-ref.xhtml"/>
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#a { counter-reset: a calc(3 + 5); }
|
||||
#a::before { content: counter(a); }
|
||||
|
||||
#b { counter-reset: b 0; counter-increment: b calc(4 + 6); }
|
||||
#b::before { content: counter(b); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>The following two lines should be the same:</p>
|
||||
|
||||
<div id="test">
|
||||
<span id="a"></span>
|
||||
<span id="b"></span>
|
||||
</div>
|
||||
|
||||
<div id="reference">
|
||||
<span>8</span>
|
||||
<span>10</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -138,5 +138,33 @@
|
|||
<div class="b" style="margin-top: 30px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-top: 30px"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -147,5 +147,33 @@
|
|||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -148,5 +148,33 @@
|
|||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -141,5 +141,33 @@
|
|||
<div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 30px"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-left: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -147,5 +147,33 @@
|
|||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -148,5 +148,33 @@
|
|||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,173 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
height: 20px;
|
||||
clear: all;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background: lightgreen;
|
||||
float: left;
|
||||
}
|
||||
div.b {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background: pink;
|
||||
float: left;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 160px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 80px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 60px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b" style="margin-left: 60px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 60px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 40px"/>
|
||||
<div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 20px"/>
|
||||
<div class="b" style="margin-left: 40px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 40px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: calc(160px / 3)"/>
|
||||
<div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 30px"/>
|
||||
<div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
|
||||
<div class="c" style="margin-left: 30px"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-left: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-left: 120px"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
|
||||
testing each possible value of the 'align-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'align-content' in a vertical writing-mode flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
|
||||
<link rel="match" href="flexbox-align-content-wmvert-001-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
height: 20px; /* Short, to force us to wrap */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2px;
|
||||
background: lightgray;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.a {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: auto;
|
||||
height: 20px; /* height comes from contents */
|
||||
flex: none;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
/* Inside of 'b': */
|
||||
div.fixedSizeChild {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (stretch) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-start">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: flex-end">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: center">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-between">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-around">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: space-evenly">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- start -->
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: start; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- end -->
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
</div>
|
||||
<div class="flexbox" style="align-content: end; flex-wrap: wrap-reverse">
|
||||
<div class="a"/>
|
||||
<div class="b"><div class="fixedSizeChild"/></div>
|
||||
<div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
.flexbox > div { float: left }
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch,
|
||||
.auto, .unspecified, .initial, .inherit {
|
||||
.auto, .unspecified, .initial, .inherit, .self-start, .self-end {
|
||||
width: 40px;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
|
|
@ -53,6 +53,16 @@
|
|||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
}
|
||||
.wmvertrev {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -81,5 +91,12 @@
|
|||
<div class="stretch" style="height: 182px">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end wmvertrev">self-end</div>
|
||||
<div class="self-end wmvertrev big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -57,6 +57,18 @@
|
|||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
align-self: self-start;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
align-self: self-end;
|
||||
}
|
||||
.wmvertrev {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -75,5 +87,12 @@
|
|||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end wmvertrev">self-end</div>
|
||||
<div class="self-end wmvertrev big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
font-size: 10px;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch {
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch,
|
||||
.self-start, .self-end {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
|
|
@ -58,6 +59,16 @@
|
|||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
float: left;
|
||||
text-align: right;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -86,5 +97,11 @@
|
|||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end">self-end</div>
|
||||
<div class="self-end big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,17 @@
|
|||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
align-self: self-start;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
align-self: self-end;
|
||||
}
|
||||
.dirrtl {
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -73,5 +84,11 @@
|
|||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start dirrtl">self-start</div>
|
||||
<div class="self-start dirrtl big">a b c d e f</div>
|
||||
<div class="self-end dirrtl">self-end</div>
|
||||
<div class="self-end dirrtl big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case for align-items / align-self behavior, using blocks in
|
||||
place of flex items and using float and width keywords to emulate the
|
||||
align-items / align-self properties. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.flex-start, .flex-end, .center, .baseline, .stretch, .self-start, .self-end {
|
||||
clear: both;
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
float: right;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
float: left;
|
||||
}
|
||||
<!-- We center shrinkwrapped text by putting it into an inline-block, and
|
||||
then wrapping that inline-block in a helper-div that has
|
||||
"text-align:center" set. -->
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
display: inline-block;
|
||||
text-align: right; /* Keep parent's centering from tweaking my text */
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
float: right;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
float: right;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
float: left;
|
||||
}
|
||||
.clearFloats { clear: both }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="centerParent">
|
||||
<div class="center">center</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="clearFloats"></div>
|
||||
<div class="stretch">stretch</div>
|
||||
<!-- Force a 3px + 1px = 4px margin between this and the previous div
|
||||
(to thwart the effects of margin-collapsing). This is the only
|
||||
place we need this hack, because everywhere else in this test
|
||||
we use floats or inline-blocks, whose margins don't collapse. -->
|
||||
<div class="stretch big" style="margin-top: 4px">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start">self-start</div>
|
||||
<div class="self-start big">a b c d e f</div>
|
||||
<div class="self-end">self-end</div>
|
||||
<div class="self-end big">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase for align-items / align-self behavior, with all the possible
|
||||
values included on different items within a flex container, and with
|
||||
margin/border/padding values on each item. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction:rtl'</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
|
||||
<link rel="match" href="flexbox-align-self-vert-rtl-005-ref.xhtml"/>
|
||||
<style>
|
||||
.flexbox {
|
||||
border: 1px dashed blue;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
font-size: 10px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.flexbox > div {
|
||||
margin: 1px 2px 3px 4px;
|
||||
border-width: 2px 3px 4px 5px;
|
||||
padding: 3px 4px 5px 6px;
|
||||
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
div.big {
|
||||
font-size: 20px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Classes for each of the various align-self values */
|
||||
.flex-start {
|
||||
background: lime;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-end {
|
||||
background: orange;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.center {
|
||||
background: lightblue;
|
||||
align-self: center;
|
||||
}
|
||||
.baseline {
|
||||
background: teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
.stretch {
|
||||
background: pink;
|
||||
align-self: stretch;
|
||||
}
|
||||
.self-start {
|
||||
background: yellow;
|
||||
align-self: self-start;
|
||||
}
|
||||
.self-end {
|
||||
background: purple;
|
||||
align-self: self-end;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-start">start</div>
|
||||
<div class="flex-start big">a b c d e f</div>
|
||||
<div class="flex-end">end</div>
|
||||
<div class="flex-end big">a b c d e f</div>
|
||||
<div class="center">center</div>
|
||||
<div class="center big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="baseline">base</div>
|
||||
<div class="baseline big">abc</div>
|
||||
<div class="stretch">stretch</div>
|
||||
<div class="stretch big">a b c d e f</div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="self-start dirrtl">self-start</div>
|
||||
<div class="self-start dirrtl big">a b c d e f</div>
|
||||
<div class="self-end dirrtl">self-end</div>
|
||||
<div class="self-end dirrtl big nowidth">a b c d e f</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
body { line-height: 0; }
|
||||
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
margin-bottom: 2px;
|
||||
direction: rtl;
|
||||
}
|
||||
div.flexbox > * {
|
||||
display: inline-block;
|
||||
}
|
||||
div.a {
|
||||
height: 20px;
|
||||
width: 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
height: 20px;
|
||||
width: 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
background: orange;
|
||||
}
|
||||
.centerParent {
|
||||
text-align: center;
|
||||
}
|
||||
.center {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="text-align: left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="text-align: left;">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="text-align: left;">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b" style="float: left"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a" style="display:block; float: right"/>
|
||||
<div class="c" style="float:left"/>
|
||||
<!-- Use fixed-size margins to subtract space for "a" and "c", and then
|
||||
use auto margins to center 'b' within the remaining space -->
|
||||
<div style="display: block; margin-right: 10px; margin-left: 100px">
|
||||
<div class="b" style="margin: auto"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<!-- Center "a" here just as we did above in the "center" case. -->
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- For the rest, we'll use a flex container with invisible flexible items
|
||||
instead of packing space. That's simpler than trying to hack up
|
||||
a width-independent reference case for "justify-content: space-around".
|
||||
(There are other reftests to ensure that basic flex container
|
||||
behavior is correct, so it's safe to rely on it here.) -->
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 0.5"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 0.5"/>
|
||||
</div>
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 0.5"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="c"/>
|
||||
<div style="flex: 0.5"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<!-- Center "a" here just as we did above in the "center" case. -->
|
||||
<div class="centerParent">
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- As above with space-around, we'll use a flex container with invisible
|
||||
flexible items instead of packing space. -->
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 1"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 1"/>
|
||||
</div>
|
||||
<div class="flexbox" style="display: flex">
|
||||
<div style="flex: 1"/>
|
||||
<div class="a"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="b"/>
|
||||
<div style="flex: 1"/>
|
||||
<div class="c"/>
|
||||
<div style="flex: 1"/>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="text-align:left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="text-align:left">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="text-align:left">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase to exercise each possible value of the 'justify-content'
|
||||
property, in an auto-sized horizontal flex container. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'justify-content' in an auto-sized reversed horizontal flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
|
||||
<link rel="match" href="flexbox-justify-content-horiz-006-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
width: 200px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
div.a {
|
||||
height: 20px;
|
||||
flex: 0 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
height: 20px;
|
||||
flex: 0 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
height: 20px;
|
||||
flex: 0 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top:140px"/><div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top:140px"/><div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 70px"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a" style="margin-top: 140px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"
|
||||
/><div class="b" style="margin-top: 20px"
|
||||
/><div class="a" style="margin-top: 20px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 35px"
|
||||
/><div class="a" style="margin-top: 70px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: calc(40px / 6)"
|
||||
/><div class="b" style="margin-top: calc(40px / 3)"
|
||||
/><div class="a" style="margin-top: calc(40px / 3)"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: calc(140px / 3)"
|
||||
/><div class="a" style="margin-top: calc(140px / 3)"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 10px"
|
||||
/><div class="b" style="margin-top: 10px"
|
||||
/><div class="a" style="margin-top: 10px"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of vertical flex containers, testing each
|
||||
possible value of the 'justify-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'justify-content' in a vertical flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
|
||||
<link rel="match" href="flexbox-justify-content-vert-006-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
flex: 0 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
flex: 0 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
flex: 0 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top:140px"/><div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top:140px"/><div class="a"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top:40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 70px"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 20px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top:190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a" style="margin-top: 140px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"
|
||||
/><div class="b" style="margin-top: 20px"
|
||||
/><div class="a" style="margin-top: 20px"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 35px"
|
||||
/><div class="a" style="margin-top: 70px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: calc(40px / 6)"
|
||||
/><div class="b" style="margin-top: calc(40px / 3)"
|
||||
/><div class="a" style="margin-top: calc(40px / 3)"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 95px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: calc(140px / 3)"
|
||||
/><div class="a" style="margin-top: calc(140px / 3)"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 10px"
|
||||
/><div class="b" style="margin-top: 10px"
|
||||
/><div class="a" style="margin-top: 10px"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox">
|
||||
<div class="a" style="margin-top: 190px"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="b" style="margin-top: 140px"/><div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="c" style="margin-top: 40px"/><div class="b"/><div class="a"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with a series of vertical flex containers, testing each
|
||||
possible value of the 'justify-content' property. -->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Testing 'justify-content' in a vertical writing mode flex container</title>
|
||||
<link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
|
||||
<link rel="match" href="flexbox-justify-content-wmvert-001-ref.xhtml"/>
|
||||
<style>
|
||||
div.flexbox {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.a {
|
||||
width: 20px;
|
||||
flex: 0 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.b {
|
||||
width: 20px;
|
||||
flex: 0 50px;
|
||||
background: pink;
|
||||
}
|
||||
div.c {
|
||||
width: 20px;
|
||||
flex: 0 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- default (start) -->
|
||||
<div class="flexbox">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"></div>
|
||||
</div>
|
||||
<div class="flexbox">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-start -->
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-start">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- flex-end -->
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: flex-end">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- center -->
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: center">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-between -->
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-between">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-around -->
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-around">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- space-evenly -->
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: space-evenly">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- left -->
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: left">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
<!-- right -->
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/>
|
||||
</div>
|
||||
<div class="flexbox" style="justify-content: right">
|
||||
<div class="a"/><div class="b"/><div class="c"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
== flexbox-align-content-horiz-001b.xhtml flexbox-align-content-horiz-001-ref.xhtml
|
||||
== flexbox-align-content-vert-001a.xhtml flexbox-align-content-vert-001-ref.xhtml
|
||||
== flexbox-align-content-vert-001b.xhtml flexbox-align-content-vert-001-ref.xhtml
|
||||
== flexbox-align-content-wmvert-001.xhtml flexbox-align-content-wmvert-001-ref.xhtml
|
||||
|
||||
# Tests for cross-axis alignment (align-self / align-items properties)
|
||||
== flexbox-align-self-baseline-horiz-001a.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml
|
||||
|
|
@ -39,6 +40,7 @@
|
|||
== flexbox-align-self-vert-rtl-002.xhtml flexbox-align-self-vert-rtl-002-ref.xhtml
|
||||
== flexbox-align-self-vert-rtl-003.xhtml flexbox-align-self-vert-rtl-003-ref.xhtml
|
||||
== flexbox-align-self-vert-rtl-004.xhtml flexbox-align-self-vert-rtl-004-ref.xhtml
|
||||
== flexbox-align-self-vert-rtl-005.xhtml flexbox-align-self-vert-rtl-005-ref.xhtml
|
||||
|
||||
== flexbox-align-items-center-nested-001.html flexbox-align-items-center-nested-001-ref.html
|
||||
|
||||
|
|
@ -158,12 +160,15 @@
|
|||
== flexbox-justify-content-horiz-003.xhtml flexbox-justify-content-horiz-003-ref.xhtml
|
||||
== flexbox-justify-content-horiz-004.xhtml flexbox-justify-content-horiz-004-ref.xhtml
|
||||
== flexbox-justify-content-horiz-005.xhtml flexbox-justify-content-horiz-005-ref.xhtml
|
||||
== flexbox-justify-content-horiz-006.xhtml flexbox-justify-content-horiz-006-ref.xhtml
|
||||
== flexbox-justify-content-vert-001a.xhtml flexbox-justify-content-vert-001-ref.xhtml
|
||||
== flexbox-justify-content-vert-001b.xhtml flexbox-justify-content-vert-001-ref.xhtml
|
||||
== flexbox-justify-content-vert-002.xhtml flexbox-justify-content-vert-002-ref.xhtml
|
||||
== flexbox-justify-content-vert-003.xhtml flexbox-justify-content-vert-003-ref.xhtml
|
||||
== flexbox-justify-content-vert-004.xhtml flexbox-justify-content-vert-004-ref.xhtml
|
||||
== flexbox-justify-content-vert-005.xhtml flexbox-justify-content-vert-005-ref.xhtml
|
||||
== flexbox-justify-content-vert-006.xhtml flexbox-justify-content-vert-006-ref.xhtml
|
||||
== flexbox-justify-content-wmvert-001.xhtml flexbox-justify-content-wmvert-001-ref.xhtml
|
||||
|
||||
# Tests for flexbox with margin, border, and/or padding on flex items
|
||||
== flexbox-margin-auto-horiz-001.xhtml flexbox-margin-auto-horiz-001-ref.xhtml
|
||||
|
|
|
|||
|
|
@ -18,6 +18,32 @@ the global scope.
|
|||
NB: presently, testdriver.js only works in the top-level test browsing
|
||||
context (and not therefore in any frame or window opened from it).
|
||||
|
||||
### `test_driver.bless(intent, action)`
|
||||
#### `intent: a string describing the motivation for this invocation`
|
||||
#### `action: an optional function`
|
||||
|
||||
This function simulates [activation][activation], allowing tests to
|
||||
perform privileged operations that require user interaction. For
|
||||
example, sandboxed iframes with the
|
||||
`allow-top-navigation-by-user-activation` may only navigate their
|
||||
parent's browsing context under these circumstances. The `intent`
|
||||
string is presented to human operators when the test is not run in
|
||||
automation.
|
||||
|
||||
This method returns a promise which is resolved with the result of
|
||||
invoking the `action` function. If no such function is provided, the
|
||||
promise is resolved with the value `undefined`.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
var mediaElement = document.createElement('video');
|
||||
|
||||
test_driver.bless('initiate media playback', function () {
|
||||
mediaElement.play();
|
||||
});
|
||||
```
|
||||
|
||||
### `test_driver.click(element)`
|
||||
#### `element: a DOM Element object`
|
||||
|
||||
|
|
@ -48,4 +74,5 @@ between the function being called and the promise settling.
|
|||
To send special keys, one must send the respective key's codepoint. Since this uses the WebDriver protocol, you can find a [list for code points to special keys in the spec](https://w3c.github.io/webdriver/webdriver-spec.html#keyboard-actions).
|
||||
For example, to send the tab key you would send "\uE004".
|
||||
|
||||
[activation]: https://html.spec.whatwg.org/multipage/interaction.html#activation
|
||||
[testharness]: {{ site.baseurl }}{% link _writing-tests/testharness.md %}
|
||||
|
|
|
|||
|
|
@ -56,16 +56,16 @@ test(t => {
|
|||
assert_equals(counter++, 3);
|
||||
}));
|
||||
child.addEventListener("hi", t.step_func(e => {
|
||||
assert_equals(window.event, e);
|
||||
assert_equals(window.event, undefined);
|
||||
assert_equals(counter++, 2);
|
||||
}));
|
||||
furtherChild.addEventListener("hi", t.step_func(e => {
|
||||
host.appendChild(child);
|
||||
assert_equals(window.event, e);
|
||||
assert_equals(window.event, undefined);
|
||||
assert_equals(counter++, 0);
|
||||
}));
|
||||
furtherChild.addEventListener("hi", t.step_func(e => {
|
||||
assert_equals(window.event, e);
|
||||
assert_equals(window.event, undefined);
|
||||
assert_equals(counter++, 1);
|
||||
}));
|
||||
furtherChild.dispatchEvent(new Event("hi", { composed: true, bubbles: true }));
|
||||
|
|
@ -75,7 +75,7 @@ test(t => {
|
|||
async_test(t => {
|
||||
const frame = document.body.appendChild(document.createElement("iframe"));
|
||||
frame.src = "resources/event-global-extra-frame.html";
|
||||
frame.onload = t.step_func_done(() => {
|
||||
frame.onload = t.step_func_done((load_event) => {
|
||||
const event = new Event("hi");
|
||||
document.addEventListener("hi", frame.contentWindow.listener); // listener intentionally not wrapped in t.step_func
|
||||
document.addEventListener("hi", t.step_func(e => {
|
||||
|
|
@ -85,6 +85,6 @@ async_test(t => {
|
|||
document.dispatchEvent(event);
|
||||
assert_equals(frameState.event, event);
|
||||
assert_equals(frameState.windowEvent, event);
|
||||
assert_equals(frameState.parentEvent, undefined);
|
||||
assert_equals(frameState.parentEvent, load_event);
|
||||
});
|
||||
}, "Listener from a different global");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
// META: script=/common/utils.js
|
||||
// META: script=../resources/utils.js
|
||||
// META: script=/common/get-host-info.sub.js
|
||||
// META: script=resources/corspreflight.js
|
||||
|
||||
const corsURL = get_host_info().HTTP_REMOTE_ORIGIN + dirname(location.pathname) + RESOURCES_DIR + "preflight.py";
|
||||
|
||||
promise_test(() => fetch("resources/not-cors-safelisted.json").then(res => res.json().then(runTests)), "Loading data…");
|
||||
|
||||
function runTests(testArray) {
|
||||
testArray.forEach(testItem => {
|
||||
const [headerName, headerValue] = testItem;
|
||||
corsPreflight("Need CORS-preflight for " + headerName + "/" + headerValue + " header",
|
||||
corsURL,
|
||||
"GET",
|
||||
true,
|
||||
[[headerName, headerValue]]);
|
||||
});
|
||||
}
|
||||
|
|
@ -1,65 +1,7 @@
|
|||
// META: script=/common/utils.js
|
||||
// META: script=../resources/utils.js
|
||||
// META: script=/common/get-host-info.sub.js
|
||||
|
||||
function headerNames(headers)
|
||||
{
|
||||
let names = [];
|
||||
for (let header of headers)
|
||||
names.push(header[0].toLowerCase());
|
||||
return names
|
||||
}
|
||||
|
||||
/*
|
||||
Check preflight is done
|
||||
Control if server allows method and headers and check accordingly
|
||||
Check control access headers added by UA (for method and headers)
|
||||
*/
|
||||
function corsPreflight(desc, corsUrl, method, allowed, headers, safeHeaders) {
|
||||
return promise_test(function(test) {
|
||||
var uuid_token = token();
|
||||
return fetch(RESOURCES_DIR + "clean-stash.py?token=" + uuid_token).then(function(response) {
|
||||
var url = corsUrl + (corsUrl.indexOf("?") === -1 ? "?" : "&");
|
||||
var urlParameters = "token=" + uuid_token + "&max_age=0";
|
||||
var requestInit = {"mode": "cors", "method": method};
|
||||
var requestHeaders = [];
|
||||
if (headers)
|
||||
requestHeaders.push.apply(requestHeaders, headers);
|
||||
if (safeHeaders)
|
||||
requestHeaders.push.apply(requestHeaders, safeHeaders);
|
||||
requestInit["headers"] = requestHeaders;
|
||||
|
||||
if (allowed) {
|
||||
urlParameters += "&allow_methods=" + method + "&control_request_headers";
|
||||
if (headers) {
|
||||
//Make the server allow the headers
|
||||
urlParameters += "&allow_headers=" + headerNames(headers).join("%20%2C");
|
||||
}
|
||||
return fetch(url + urlParameters, requestInit).then(function(resp) {
|
||||
assert_equals(resp.status, 200, "Response's status is 200");
|
||||
assert_equals(resp.headers.get("x-did-preflight"), "1", "Preflight request has been made");
|
||||
if (headers) {
|
||||
var actualHeaders = resp.headers.get("x-control-request-headers").toLowerCase().split(",");
|
||||
for (var i in actualHeaders)
|
||||
actualHeaders[i] = actualHeaders[i].trim();
|
||||
for (var header of headers)
|
||||
assert_in_array(header[0].toLowerCase(), actualHeaders, "Preflight asked permission for header: " + header);
|
||||
|
||||
let accessControlAllowHeaders = headerNames(headers).sort().join(",");
|
||||
assert_equals(resp.headers.get("x-control-request-headers"), accessControlAllowHeaders, "Access-Control-Allow-Headers value");
|
||||
return fetch(RESOURCES_DIR + "clean-stash.py?token=" + uuid_token);
|
||||
} else {
|
||||
assert_equals(resp.headers.get("x-control-request-headers"), null, "Access-Control-Request-Headers should be omitted")
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return promise_rejects(test, new TypeError(), fetch(url + urlParameters, requestInit)).then(function(){
|
||||
return fetch(RESOURCES_DIR + "clean-stash.py?token=" + uuid_token);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, desc);
|
||||
}
|
||||
// META: script=resources/corspreflight.js
|
||||
|
||||
var corsUrl = get_host_info().HTTP_REMOTE_ORIGIN + dirname(location.pathname) + RESOURCES_DIR + "preflight.py";
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
function headerNames(headers) {
|
||||
let names = [];
|
||||
for (let header of headers) {
|
||||
names.push(header[0].toLowerCase());
|
||||
}
|
||||
return names;
|
||||
}
|
||||
|
||||
/*
|
||||
Check preflight is done
|
||||
Control if server allows method and headers and check accordingly
|
||||
Check control access headers added by UA (for method and headers)
|
||||
*/
|
||||
function corsPreflight(desc, corsUrl, method, allowed, headers, safeHeaders) {
|
||||
return promise_test(function(test) {
|
||||
var uuid_token = token();
|
||||
return fetch(RESOURCES_DIR + "clean-stash.py?token=" + uuid_token).then(function(response) {
|
||||
var url = corsUrl + (corsUrl.indexOf("?") === -1 ? "?" : "&");
|
||||
var urlParameters = "token=" + uuid_token + "&max_age=0";
|
||||
var requestInit = {"mode": "cors", "method": method};
|
||||
var requestHeaders = [];
|
||||
if (headers)
|
||||
requestHeaders.push.apply(requestHeaders, headers);
|
||||
if (safeHeaders)
|
||||
requestHeaders.push.apply(requestHeaders, safeHeaders);
|
||||
requestInit["headers"] = requestHeaders;
|
||||
|
||||
if (allowed) {
|
||||
urlParameters += "&allow_methods=" + method + "&control_request_headers";
|
||||
if (headers) {
|
||||
//Make the server allow the headers
|
||||
urlParameters += "&allow_headers=" + headerNames(headers).join("%20%2C");
|
||||
}
|
||||
return fetch(url + urlParameters, requestInit).then(function(resp) {
|
||||
assert_equals(resp.status, 200, "Response's status is 200");
|
||||
assert_equals(resp.headers.get("x-did-preflight"), "1", "Preflight request has been made");
|
||||
if (headers) {
|
||||
var actualHeaders = resp.headers.get("x-control-request-headers").toLowerCase().split(",");
|
||||
for (var i in actualHeaders)
|
||||
actualHeaders[i] = actualHeaders[i].trim();
|
||||
for (var header of headers)
|
||||
assert_in_array(header[0].toLowerCase(), actualHeaders, "Preflight asked permission for header: " + header);
|
||||
|
||||
let accessControlAllowHeaders = headerNames(headers).sort().join(",");
|
||||
assert_equals(resp.headers.get("x-control-request-headers"), accessControlAllowHeaders, "Access-Control-Allow-Headers value");
|
||||
return fetch(RESOURCES_DIR + "clean-stash.py?token=" + uuid_token);
|
||||
} else {
|
||||
assert_equals(resp.headers.get("x-control-request-headers"), null, "Access-Control-Request-Headers should be omitted")
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return promise_rejects(test, new TypeError(), fetch(url + urlParameters, requestInit)).then(function(){
|
||||
return fetch(RESOURCES_DIR + "clean-stash.py?token=" + uuid_token);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, desc);
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
[
|
||||
["accept", "\""],
|
||||
["accept", "012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678"],
|
||||
["accept-language", "\u0001"],
|
||||
["accept-language", "@"],
|
||||
["content-language", "\u0001"],
|
||||
["content-language", "@"],
|
||||
["content-type", "text/html"],
|
||||
["content-type", "text/plain; long=0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901"],
|
||||
["test", "hi"]
|
||||
]
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
promise_test(() => fetch("../cors/resources/not-cors-safelisted.json").then(res => res.json().then(runTests)), "Loading data…");
|
||||
|
||||
function runTests(testArray) {
|
||||
testArray = testArray.concat([
|
||||
["dpr", "2"],
|
||||
["downlink", "1"], // https://wicg.github.io/netinfo/
|
||||
["save-data", "on"],
|
||||
["viewport-width", "100"],
|
||||
["width", "100"]
|
||||
]);
|
||||
testArray.forEach(testItem => {
|
||||
const [headerName, headerValue] = testItem;
|
||||
test(() => {
|
||||
const noCorsHeaders = new Request("about:blank", { mode: "no-cors" }).headers;
|
||||
noCorsHeaders.append(headerName, headerValue);
|
||||
assert_false(noCorsHeaders.has(headerName));
|
||||
}, "\"no-cors\" Headers object cannot have " + headerName + "/" + headerValue + " as header");
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
<script>
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let key = "embed-same-origin";
|
||||
|
||||
let e = document.createElement('embed');
|
||||
e.src = "https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=" + key;
|
||||
e.onload = e => {
|
||||
let expected = {"destination":"embed", "site":"same-origin"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(_ => resolve())
|
||||
.catch(e => reject(e));
|
||||
};
|
||||
|
||||
document.body.appendChild(e);
|
||||
})
|
||||
}, "Same-Origin embed");
|
||||
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let key = "embed-same-site";
|
||||
|
||||
let e = document.createElement('embed');
|
||||
e.src = "https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=" + key;
|
||||
e.onload = e => {
|
||||
let expected = {"destination":"embed", "site":"same-site"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(_ => resolve())
|
||||
.catch(e => reject(e));
|
||||
};
|
||||
|
||||
document.body.appendChild(e);
|
||||
})
|
||||
}, "Same-Site embed");
|
||||
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let key = "embed-cross-site";
|
||||
|
||||
let e = document.createElement('embed');
|
||||
e.src = "https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=" + key;
|
||||
e.onload = e => {
|
||||
let expected = {"destination":"embed", "site":"cross-site"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(_ => resolve())
|
||||
.catch(e => reject(e));
|
||||
};
|
||||
|
||||
document.body.appendChild(e);
|
||||
})
|
||||
}, "Cross-Site embed");
|
||||
</script>
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
assert_header_equals(j.header, {
|
||||
"cause": undefined,
|
||||
"destination": "",
|
||||
"target": "subresource",
|
||||
"site": "same-origin"
|
||||
});
|
||||
});
|
||||
|
|
@ -23,7 +22,6 @@
|
|||
assert_header_equals(j.header, {
|
||||
"cause": undefined,
|
||||
"destination": "",
|
||||
"target": "subresource",
|
||||
"site": "same-site"
|
||||
});
|
||||
});
|
||||
|
|
@ -36,7 +34,6 @@
|
|||
assert_header_equals(j.header, {
|
||||
"cause": undefined,
|
||||
"destination": "",
|
||||
"target": "subresource",
|
||||
"site": "cross-site"
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
<div id="test1">1</div>
|
||||
<div id="test2">2</div>
|
||||
<div id="test3">3</div>
|
||||
<!-- Same-Origin request -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: myFirstFont;
|
||||
src: url(https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=font-same-origin);
|
||||
}
|
||||
#test1 {
|
||||
font-family: myFirstFont;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Same-Site request -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: mySecondFont;
|
||||
src: url(https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=font-same-site);
|
||||
}
|
||||
#test2 {
|
||||
font-family: mySecondFont;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Cross-Site request -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: myThirdFont;
|
||||
src: url(https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=font-cross-site);
|
||||
}
|
||||
#test3 {
|
||||
font-family: myThirdFont;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
<script>
|
||||
document.fonts.ready.then(function () {
|
||||
test_same_origin();
|
||||
test_same_site();
|
||||
test_cross_site();
|
||||
});
|
||||
|
||||
function test_same_origin(){
|
||||
var same_origin_test = async_test("Same-Origin font");
|
||||
same_origin_test.step(function () {
|
||||
key = "font-same-origin";
|
||||
expected_same_origin = {"destination":"font", "site":"same-origin"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_origin_xhr = new XMLHttpRequest();
|
||||
same_origin_xhr.open("PUT", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_origin_xhr.onreadystatechange = same_origin_test.step_func(function () {
|
||||
verify_response(same_origin_xhr, same_origin_test, expected_same_origin)
|
||||
});
|
||||
same_origin_xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
function test_same_site(){
|
||||
var same_site_test = async_test("Same-Site font");
|
||||
same_site_test.step(function () {
|
||||
key = "font-same-site";
|
||||
expected_same_site = {"destination":"font", "site":"same-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_site_xhr = new XMLHttpRequest();
|
||||
same_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_site_xhr.onreadystatechange = same_site_test.step_func(function () {
|
||||
verify_response(same_site_xhr, same_site_test, expected_same_site)
|
||||
});
|
||||
same_site_xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
function test_cross_site(){
|
||||
var cross_site_test = async_test("Cross-Site font");
|
||||
cross_site_test.step(function () {
|
||||
key = "font-cross-site";
|
||||
expected_cross_site = {"destination":"font", "site":"cross-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
cross_site_xhr = new XMLHttpRequest();
|
||||
cross_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
cross_site_xhr.onreadystatechange = cross_site_test.step_func(function () {
|
||||
verify_response(cross_site_xhr, cross_site_test, expected_cross_site)
|
||||
});
|
||||
cross_site_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -13,8 +13,7 @@
|
|||
|
||||
assert_header_equals(e.data, {
|
||||
"cause": "forced",
|
||||
"destination": "document",
|
||||
"target": "nested",
|
||||
"destination": "nested-document",
|
||||
"site": "same-origin"
|
||||
});
|
||||
t.done();
|
||||
|
|
@ -32,8 +31,7 @@
|
|||
|
||||
assert_header_equals(e.data, {
|
||||
"cause": "forced",
|
||||
"destination": "document",
|
||||
"target": "nested",
|
||||
"destination": "nested-document",
|
||||
"site": "same-site"
|
||||
});
|
||||
t.done();
|
||||
|
|
@ -51,8 +49,7 @@
|
|||
|
||||
assert_header_equals(e.data, {
|
||||
"cause": "forced",
|
||||
"destination": "document",
|
||||
"target": "nested",
|
||||
"destination": "nested-document",
|
||||
"site": "cross-site"
|
||||
});
|
||||
t.done();
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
assert_header_equals(decodeImageData(extractImageData(img)).headers["sec-metadata"], {
|
||||
"cause": undefined,
|
||||
"destination": "image",
|
||||
"target": "subresource",
|
||||
"site": "same-origin"
|
||||
});
|
||||
}),
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
assert_header_equals(decodeImageData(extractImageData(img)).headers["sec-metadata"], {
|
||||
"cause": undefined,
|
||||
"destination": "image",
|
||||
"target": "subresource",
|
||||
"site": "same-site"
|
||||
});
|
||||
}),
|
||||
|
|
@ -44,7 +42,6 @@
|
|||
assert_header_equals(decodeImageData(extractImageData(img)).headers["sec-metadata"], {
|
||||
"cause": undefined,
|
||||
"destination": "image",
|
||||
"target": "subresource",
|
||||
"site": "cross-site"
|
||||
});
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
<script>
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let key = "object-same-origin";
|
||||
|
||||
let e = document.createElement('object');
|
||||
e.data = "https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=" + key;
|
||||
e.onload = e => {
|
||||
let expected = {"destination":"object", "site":"same-origin"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(_ => resolve())
|
||||
.catch(e => reject(e));
|
||||
};
|
||||
|
||||
document.body.appendChild(e);
|
||||
})
|
||||
}, "Same-Origin object");
|
||||
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let key = "object-same-site";
|
||||
|
||||
let e = document.createElement('object');
|
||||
e.data = "https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=" + key;
|
||||
e.onload = e => {
|
||||
let expected = {"destination":"object", "site":"same-site"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(_ => resolve())
|
||||
.catch(e => reject(e));
|
||||
};
|
||||
|
||||
document.body.appendChild(e);
|
||||
})
|
||||
}, "Same-Site object");
|
||||
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let key = "object-cross-site";
|
||||
|
||||
let e = document.createElement('object');
|
||||
e.data = "https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=" + key;
|
||||
e.onload = e => {
|
||||
let expected = {"destination":"object", "site":"cross-site"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(_ => resolve())
|
||||
.catch(e => reject(e));
|
||||
};
|
||||
|
||||
document.body.appendChild(e);
|
||||
})
|
||||
}, "Cross-Site object");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
<!-- redirect Cross-Site -> Cross-Site -->
|
||||
<img onload="test_cross_site()" onerror="test_cross_site()" src="https://{{hosts[alt][www]}}:{{ports[https][0]}}/xhr/resources/redirect.py?location=https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=redirect-cross-site-cross-site"></img>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_cross_site(){
|
||||
var cross_site_test = async_test("Cross-Site -> Cross-Site redirect");
|
||||
cross_site_test.step(function () {
|
||||
filename = "redirect-cross-site-cross-site";
|
||||
expected_cross_site = {"destination":"image", "site":"cross-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
cross_site_xhr = new XMLHttpRequest();
|
||||
cross_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + filename);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
cross_site_xhr.onreadystatechange = cross_site_test.step_func(function () {
|
||||
verify_response(cross_site_xhr, cross_site_test, expected_cross_site)
|
||||
});
|
||||
cross_site_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
|
||||
<!-- redirect Cross-Site -> Same-Origin -->
|
||||
<img onload="test_same_origin()" onerror="test_same_origin()" src="https://{{hosts[alt][www]}}:{{ports[https][0]}}/xhr/resources/redirect.py?location=https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=redirect-cross-site-same-origin"></img>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_same_origin(){
|
||||
var same_origin_test = async_test("Cross-Site -> Same-Origin redirect");
|
||||
same_origin_test.step(function () {
|
||||
filename = "redirect-cross-site-same-origin";
|
||||
expected_same_origin = {"destination":"image", "site":"cross-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_origin_xhr = new XMLHttpRequest();
|
||||
same_origin_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + filename);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_origin_xhr.onreadystatechange = same_origin_test.step_func(function () {
|
||||
verify_response(same_origin_xhr, same_origin_test, expected_same_origin)
|
||||
});
|
||||
same_origin_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
<!-- redirect Cross-Site -> Same-Site -->
|
||||
<img onload="test_same_site()" onerror="test_same_site()" src="https://{{hosts[alt][www]}}:{{ports[https][0]}}/xhr/resources/redirect.py?location=https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=redirect-cross-site-same-site"></img>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_same_site(){
|
||||
var same_site_test = async_test("Cross-Site -> Same-Site redirect");
|
||||
same_site_test.step(function () {
|
||||
filename = "redirect-cross-site-same-site";
|
||||
expected_same_site = {"destination":"image", "site":"cross-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_site_xhr = new XMLHttpRequest();
|
||||
same_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + filename);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_site_xhr.onreadystatechange = same_site_test.step_func(function () {
|
||||
verify_response(same_site_xhr, same_site_test, expected_same_site)
|
||||
});
|
||||
same_site_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
<!-- redirect Same-Origin -> Cross-Site -->
|
||||
<img onload="test_cross_site()" onerror="test_cross_site()" src="https://{{host}}:{{ports[https][0]}}/xhr/resources/redirect.py?location=https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=redirect-same-origin-cross-site"></img>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_cross_site(){
|
||||
var cross_site_test = async_test("Same-Origin -> Cross-Site redirect");
|
||||
cross_site_test.step(function () {
|
||||
filename = "redirect-same-origin-cross-site";
|
||||
expected_cross_site = {"destination":"image", "site":"same-origin"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
cross_site_xhr = new XMLHttpRequest();
|
||||
cross_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + filename);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
cross_site_xhr.onreadystatechange = cross_site_test.step_func(function () {
|
||||
verify_response(cross_site_xhr, cross_site_test, expected_cross_site)
|
||||
});
|
||||
cross_site_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
|
||||
<!-- redirect Same-Origin -> Same-Origin -->
|
||||
<img onload="test_same_origin()" onerror="test_same_origin()" src="https://{{host}}:{{ports[https][0]}}/xhr/resources/redirect.py?location=https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=redirect-same-origin-same-origin"></img>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_same_origin(){
|
||||
var same_origin_test = async_test("Same-Origin -> Same-Origin redirect");
|
||||
same_origin_test.step(function () {
|
||||
filename = "redirect-same-origin-same-origin";
|
||||
expected_same_origin = {"destination":"image", "site":"same-origin"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_origin_xhr = new XMLHttpRequest();
|
||||
same_origin_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + filename);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_origin_xhr.onreadystatechange = same_origin_test.step_func(function () {
|
||||
verify_response(same_origin_xhr, same_origin_test, expected_same_origin)
|
||||
});
|
||||
same_origin_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
|
||||
<!-- redirect Same-Origin -> Same-Site -->
|
||||
<img onload="test_same_site()" onerror="test_same_site()" src="https://{{host}}:{{ports[https][0]}}/xhr/resources/redirect.py?location=https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=redirect-same-origin-same-site"></img>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_same_site(){
|
||||
var same_site_test = async_test("Same-Origin -> Same-Site redirect");
|
||||
same_site_test.step(function () {
|
||||
filename = "redirect-same-origin-same-site";
|
||||
expected_same_site = {"destination":"image", "site":"same-origin"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_site_xhr = new XMLHttpRequest();
|
||||
same_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + filename);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_site_xhr.onreadystatechange = same_site_test.step_func(function () {
|
||||
verify_response(same_site_xhr, same_site_test, expected_same_site)
|
||||
});
|
||||
same_site_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
|
||||
<!-- redirect Same-Site -> Cross-Site -->
|
||||
<img onload="test_cross_site()" onerror="test_cross_site()" src="https://{{hosts[][www]}}:{{ports[https][0]}}/xhr/resources/redirect.py?location=https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=redirect-same-site-cross-site"></img>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_cross_site(){
|
||||
var cross_site_test = async_test("Same-Site -> Cross-Site redirect");
|
||||
cross_site_test.step(function () {
|
||||
key = "redirect-same-site-cross-site";
|
||||
expected_cross_site = {"destination":"image", "site":"same-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
cross_site_xhr = new XMLHttpRequest();
|
||||
cross_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
cross_site_xhr.onreadystatechange = cross_site_test.step_func(function () {
|
||||
verify_response(cross_site_xhr, cross_site_test, expected_cross_site)
|
||||
});
|
||||
cross_site_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
|
||||
<!-- redirect Same-Site -> Same-Origin -->
|
||||
<img onload="test_same_origin()" onerror="test_same_origin()" src="https://{{hosts[][www]}}:{{ports[https][0]}}/xhr/resources/redirect.py?location=https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=redirect-same-site-same-origin"></img>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_same_origin(){
|
||||
var same_origin_test = async_test("Same-Site -> Same-Origin redirect");
|
||||
same_origin_test.step(function () {
|
||||
key = "redirect-same-site-same-origin";
|
||||
expected_same_origin = {"destination":"image", "site":"same-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_origin_xhr = new XMLHttpRequest();
|
||||
same_origin_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_origin_xhr.onreadystatechange = same_origin_test.step_func(function () {
|
||||
verify_response(same_origin_xhr, same_origin_test, expected_same_origin)
|
||||
});
|
||||
same_origin_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
|
||||
<!-- redirect Same-Site -> Same-Site -->
|
||||
<img onload="test_same_site()" onerror="test_same_site()" src="https://{{hosts[][www]}}:{{ports[https][0]}}/xhr/resources/redirect.py?location=https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=redirect-same-site-same-site"></img>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_same_site(){
|
||||
var same_site_test = async_test("Same-Site -> Same-Site redirect");
|
||||
same_site_test.step(function () {
|
||||
key = "redirect-same-site-same-site";
|
||||
expected_same_site = {"destination":"image", "site":"same-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_site_xhr = new XMLHttpRequest();
|
||||
same_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_site_xhr.onreadystatechange = same_site_test.step_func(function () {
|
||||
verify_response(same_site_xhr, same_site_test, expected_same_site)
|
||||
});
|
||||
same_site_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<link id="style" href="https://foo.bar" rel="stylesheet">
|
||||
<body></body>
|
||||
<script>
|
||||
let counter = 0;
|
||||
document.addEventListener("securitypolicyviolation", (e) => {
|
||||
counter++;
|
||||
if (counter == 3) {
|
||||
promise_test(t => {
|
||||
expected = {"destination":"report", "site":"same-origin"};
|
||||
return fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=report-same-origin")
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected));
|
||||
}, "Same-Origin report");
|
||||
|
||||
promise_test(t => {
|
||||
expected = {"destination":"report", "site":"same-site"};
|
||||
return fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=report-same-site")
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected));
|
||||
}, "Same-site report");
|
||||
|
||||
promise_test(t => {
|
||||
expected = {"destination":"report", "site":"cross-site"};
|
||||
return fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=report-cross-site")
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected));
|
||||
}, "Cross-site report");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
Content-Security-Policy: style-src 'self' 'unsafe-inline'; report-uri /fetch/sec-metadata/resources/record-header.py?file=report-same-origin
|
||||
Content-Security-Policy: style-src 'self' 'unsafe-inline'; report-uri https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=report-same-site
|
||||
Content-Security-Policy: style-src 'self' 'unsafe-inline'; report-uri https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=report-cross-site
|
||||
|
|
@ -0,0 +1 @@
|
|||
self.postMessage("Loaded");
|
||||
|
|
@ -8,5 +8,5 @@ def main(request, response):
|
|||
headers.append(("Access-Control-Allow-Origin", request.headers["origin"]))
|
||||
|
||||
|
||||
body = json.dumps({ "header": request.headers["sec-metadata"] })
|
||||
body = json.dumps({ "header": request.headers.get("sec-metadata", "") })
|
||||
return headers, body
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ import json
|
|||
def main(request, response):
|
||||
headers = [("Content-Type", "text/javascript")]
|
||||
|
||||
body = "var header = %s;" % json.dumps(request.headers["sec-metadata"]);
|
||||
body = "var header = %s;" % json.dumps(request.headers.get("sec-metadata", ""));
|
||||
|
||||
return headers, body
|
||||
|
|
|
|||
|
|
@ -9,9 +9,18 @@ function parse_metadata(value) {
|
|||
}
|
||||
|
||||
function assert_header_equals(value, expected) {
|
||||
// check that the returned value is an object, not a String
|
||||
assert_not_equals(value, "", "Empty Sec-Metadata header.");
|
||||
let result = parse_metadata(value);
|
||||
assert_equals(result.cause, expected.cause, "cause");
|
||||
assert_equals(result.destination, expected.destination, "destination");
|
||||
assert_equals(result.target, expected.target, "target");
|
||||
assert_equals(result.site, expected.site, "site");
|
||||
}
|
||||
|
||||
function verify_response(xhr, test, expected){
|
||||
if (xhr.readyState === 4) {
|
||||
assert_header_equals(xhr.responseText, expected);
|
||||
test.done();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
import os
|
||||
import uuid
|
||||
import hashlib
|
||||
import time
|
||||
|
||||
resourcePath = os.getcwd() + "/fetch/sec-metadata/resources/"
|
||||
|
||||
def main(request, response):
|
||||
|
||||
## Get the query parameter (key) from URL ##
|
||||
## Tests will record POST requests (CSP Report) and GET (rest) ##
|
||||
if request.GET:
|
||||
key = request.GET['file']
|
||||
elif request.POST:
|
||||
key = request.POST['file']
|
||||
|
||||
## Convert the key from String to UUID valid String ##
|
||||
testId = hashlib.md5(key).hexdigest()
|
||||
|
||||
## Handle the header retrieval request ##
|
||||
if 'retrieve' in request.GET:
|
||||
response.writer.write_status(200)
|
||||
response.writer.end_headers()
|
||||
header_value = request.server.stash.take(testId)
|
||||
if header_value != None:
|
||||
response.writer.write(header_value)
|
||||
|
||||
response.close_connection = True
|
||||
|
||||
## Record incoming Sec-Metadata header value
|
||||
else:
|
||||
## Return empty string as a default value ##
|
||||
header = request.headers.get("Sec-Metadata", "")
|
||||
try:
|
||||
request.server.stash.put(testId, header)
|
||||
except KeyError:
|
||||
## The header is already recorded
|
||||
pass
|
||||
|
||||
## Prevent the browser from caching returned responses and allow CORS ##
|
||||
response.headers.set("Access-Control-Allow-Origin", "*")
|
||||
response.headers.set("Cache-Control", "no-cache, no-store, must-revalidate")
|
||||
response.headers.set("Pragma", "no-cache")
|
||||
response.headers.set("Expires", "0")
|
||||
|
||||
## Add a valid ServiceWorker Content-Type ##
|
||||
if key.startswith("serviceworker"):
|
||||
response.headers.set("Content-Type", "application/javascript")
|
||||
|
||||
## Return a valid .vtt content for the <track> tag ##
|
||||
if key.startswith("track"):
|
||||
return "WEBVTT"
|
||||
|
||||
## Return a valid SharedWorker ##
|
||||
if key.startswith("sharedworker"):
|
||||
response.headers.set("Content-Type", "application/javascript")
|
||||
file = open(resourcePath + "sharedWorker.js", "r")
|
||||
shared_worker = file.read()
|
||||
file.close()
|
||||
return shared_worker
|
||||
|
||||
## Return a valid font content and Content-Type ##
|
||||
if key.startswith("font"):
|
||||
file = open("fonts/Ahem.ttf", "r")
|
||||
font = file.read()
|
||||
file.close()
|
||||
return font
|
||||
|
||||
## Return a valid audio content and Content-Type ##
|
||||
if key.startswith("audio"):
|
||||
response.headers.set("Content-Type", "audio/mpeg")
|
||||
file = open("media/sound_5.mp3", "r")
|
||||
audio = file.read()
|
||||
file.close()
|
||||
return audio
|
||||
|
||||
## Return a valid video content and Content-Type ##
|
||||
if key.startswith("video"):
|
||||
response.headers.set("Content-Type", "video/mp4")
|
||||
file = open("media/A4.mp4", "r")
|
||||
video = file.read()
|
||||
file.close()
|
||||
return video
|
||||
|
||||
## Return a valid style content and Content-Type ##
|
||||
if key.startswith("style") or key.startswith("embed") or key.startswith("object"):
|
||||
response.headers.set("Content-Type", "text/html")
|
||||
return "<html>EMBED!</html>"
|
||||
|
||||
## Return a valid image content and Content-Type for redirect requests ##
|
||||
if key.startswith("redirect"):
|
||||
response.headers.set("Content-Type", "image/jpeg")
|
||||
file = open("media/1x1-green.png", "r")
|
||||
image = file.read()
|
||||
file.close()
|
||||
return image
|
||||
|
||||
## Return a valid dedicated worker
|
||||
if key.startswith("worker"):
|
||||
response.headers.set("Content-Type", "application/javascript")
|
||||
return "self.postMessage('loaded');"
|
||||
|
||||
## Return a valid XSLT
|
||||
if key.startswith("xslt"):
|
||||
response.headers.set("Content-Type", "text/xsl")
|
||||
return """<?xml version="1.0" encoding="UTF-8"?>
|
||||
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
|
||||
<xsl:template match="@*|node()">
|
||||
<xsl:copy>
|
||||
<xsl:apply-templates select="@*|node()"/>
|
||||
</xsl:copy>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>"""
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
onconnect = function(e) {
|
||||
var port = e.ports[0];
|
||||
|
||||
port.addEventListener('message', function(e) {
|
||||
port.postMessage("Ready");
|
||||
});
|
||||
|
||||
port.start();
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<?xml-stylesheet href="https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=xslt-same-origin" type="text/xsl" ?>
|
||||
<?xml-stylesheet href="https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=xslt-same-site" type="text/xsl" ?>
|
||||
<?xml-stylesheet href="https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=xslt-cross-site" type="text/xsl" ?>
|
||||
|
||||
<!-- postMessage parent back when the resources are loaded -->
|
||||
<script xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
|
||||
setTimeout(function(){
|
||||
if (window.opener)
|
||||
window.opener.postMessage("", "*");
|
||||
if (window.top != window)
|
||||
window.top.postMessage("", "*");}, 100);
|
||||
]]></script>
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
assert_header_equals(header, {
|
||||
"cause": undefined,
|
||||
"destination": "script",
|
||||
"target": "subresource",
|
||||
"site": "same-origin"
|
||||
});
|
||||
}, "Same-origin script");
|
||||
|
|
@ -27,7 +26,6 @@
|
|||
assert_header_equals(header, {
|
||||
"cause": undefined,
|
||||
"destination": "script",
|
||||
"target": "subresource",
|
||||
"site": "same-site"
|
||||
});
|
||||
}, "Same-site script");
|
||||
|
|
@ -42,7 +40,6 @@
|
|||
assert_header_equals(header, {
|
||||
"cause": undefined,
|
||||
"destination": "script",
|
||||
"target": "subresource",
|
||||
"site": "cross-site"
|
||||
});
|
||||
}, "Cross-site script");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', function() {
|
||||
navigator.serviceWorker.register('/fetch/sec-metadata/resources/record-header.py?file=serviceworker-same-origin').then(function(registration) {
|
||||
test_same_origin();
|
||||
|
||||
// uninstall the serviceworker after the test
|
||||
navigator.serviceWorker.getRegistrations().then(function(registrations) {
|
||||
for(let registration of registrations) {
|
||||
registration.unregister()
|
||||
}
|
||||
})
|
||||
}, function(err) {
|
||||
// registration failed
|
||||
});
|
||||
});
|
||||
}
|
||||
else {
|
||||
test(function () {
|
||||
done();
|
||||
}, "Browser does not support serviceworker");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function test_same_origin(){
|
||||
var same_origin_test = async_test("Same-Origin serviceworker");
|
||||
same_origin_test.step(function () {
|
||||
key = "serviceworker-same-origin";
|
||||
expected_same_origin = {"destination":"serviceworker", "site":"same-origin"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_origin_xhr = new XMLHttpRequest();
|
||||
same_origin_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_origin_xhr.onreadystatechange = same_origin_test.step_func(function () {
|
||||
verify_response(same_origin_xhr, same_origin_test, expected_same_origin)
|
||||
});
|
||||
same_origin_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<script>
|
||||
|
||||
// TESTS //
|
||||
if (window.Worker) {
|
||||
|
||||
// Same-Origin test
|
||||
var sharedWorker = new SharedWorker('/fetch/sec-metadata/resources/record-header.py?file=sharedworker-same-origin');
|
||||
sharedWorker.port.start();
|
||||
|
||||
sharedWorker.onerror = function(){
|
||||
test_same_origin();
|
||||
}
|
||||
sharedWorker.port.onmessage = function(e) {
|
||||
test_same_origin();
|
||||
}
|
||||
sharedWorker.port.postMessage("Ready");
|
||||
}
|
||||
|
||||
function test_same_origin(){
|
||||
var same_origin_test = async_test("Same-Origin sharedworker");
|
||||
same_origin_test.step(function () {
|
||||
key = "sharedworker-same-origin";
|
||||
expected_same_origin = {"destination":"sharedworker", "site":"same-origin"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_origin_xhr = new XMLHttpRequest();
|
||||
same_origin_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_origin_xhr.onreadystatechange = same_origin_test.step_func(function () {
|
||||
verify_response(same_origin_xhr, same_origin_test, expected_same_origin)
|
||||
});
|
||||
same_origin_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<body></body>
|
||||
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<script>
|
||||
function test_same_origin() {
|
||||
var same_origin_test = async_test("Same-Origin style");
|
||||
same_origin_test.step(function () {
|
||||
key = "style-same-origin";
|
||||
expected_same_origin = {"destination":"style", "site":"same-origin"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_origin_xhr = new XMLHttpRequest();
|
||||
same_origin_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_origin_xhr.onreadystatechange = same_origin_test.step_func(function () {
|
||||
verify_response(same_origin_xhr, same_origin_test, expected_same_origin)
|
||||
});
|
||||
same_origin_xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
function test_same_site() {
|
||||
var same_site_test = async_test("Same-Site style");
|
||||
same_site_test.step(function () {
|
||||
key = "style-same-site";
|
||||
expected_same_site = {"destination":"style", "site":"same-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
same_site_xhr = new XMLHttpRequest();
|
||||
same_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
same_site_xhr.onreadystatechange = same_site_test.step_func(function () {
|
||||
verify_response(same_site_xhr, same_site_test, expected_same_site)
|
||||
});
|
||||
same_site_xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
function test_cross_site() {
|
||||
var cross_site_test = async_test("Cross-Site style");
|
||||
cross_site_test.step(function () {
|
||||
key = "style-cross-site";
|
||||
expected_cross_site = {"destination":"style", "site":"cross-site"};
|
||||
|
||||
// Requests from the server the saved value of the Sec-Metadata header
|
||||
cross_site_xhr = new XMLHttpRequest();
|
||||
cross_site_xhr.open("GET", "/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key);
|
||||
|
||||
// Async test step triggered when the response is loaded
|
||||
cross_site_xhr.onreadystatechange = cross_site_test.step_func(function () {
|
||||
verify_response(cross_site_xhr, cross_site_test, expected_cross_site)
|
||||
});
|
||||
cross_site_xhr.send();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<body>
|
||||
<!-- Same-Origin request -->
|
||||
<link href="https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=style-same-origin"
|
||||
rel="stylesheet" onload="test_same_origin()" onerror="test_same_origin()">
|
||||
|
||||
<!-- Same-Site request -->
|
||||
<link href="https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=style-same-site"
|
||||
rel="stylesheet" onload="test_same_site()" onerror="test_same_site()">
|
||||
|
||||
<!-- Cross-Site request -->
|
||||
<link href="https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=style-cross-site"
|
||||
rel="stylesheet" onload="test_cross_site()" onerror="test_cross_site()">
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<body>
|
||||
</body>
|
||||
<script>
|
||||
function createVideoElement() {
|
||||
let el = document.createElement('video');
|
||||
el.src = "/media/movie_5.mp4";
|
||||
el.setAttribute("controls", "");
|
||||
el.setAttribute("crossorigin", "");
|
||||
return el;
|
||||
}
|
||||
|
||||
function createTrack() {
|
||||
let el = document.createElement("track");
|
||||
el.setAttribute("default", "");
|
||||
el.setAttribute("kind", "captions");
|
||||
el.setAttribute("srclang", "en");
|
||||
return el;
|
||||
}
|
||||
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let video = createVideoElement();
|
||||
let el = createTrack();
|
||||
el.src = "https://{{host}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=track-same-origin";
|
||||
el.onload = t.step_func(_ => {
|
||||
expected = {"destination":"track", "site":"same-origin"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=track-same-origin")
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(_ => resolve());
|
||||
});
|
||||
video.appendChild(el);
|
||||
document.body.appendChild(video);
|
||||
});
|
||||
}, "Same-Origin track");
|
||||
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let video = createVideoElement();
|
||||
let el = createTrack();
|
||||
el.src = "https://{{hosts[][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=track-same-site";
|
||||
el.onload = t.step_func(_ => {
|
||||
expected = {"destination":"track", "site":"same-site"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=track-same-site")
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(resolve)
|
||||
.catch(reject);
|
||||
|
||||
});
|
||||
video.appendChild(el);
|
||||
document.body.appendChild(video);
|
||||
});
|
||||
}, "Same-Site track");
|
||||
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let video = createVideoElement();
|
||||
let el = createTrack();
|
||||
el.src = "https://{{hosts[alt][www]}}:{{ports[https][0]}}/fetch/sec-metadata/resources/record-header.py?file=track-cross-site";
|
||||
el.onload = t.step_func(_ => {
|
||||
expected = {"destination":"track", "site":"cross-site"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=track-cross-site")
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(resolve)
|
||||
.catch(reject);
|
||||
});
|
||||
video.appendChild(el);
|
||||
document.body.appendChild(video);
|
||||
});
|
||||
}, "Cross-Site track");
|
||||
</script>
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
assert_header_equals(e.data, {
|
||||
"cause": "forced",
|
||||
"destination": "document",
|
||||
"target": "top-level",
|
||||
"site": "same-origin"
|
||||
});
|
||||
t.done();
|
||||
|
|
@ -34,7 +33,6 @@
|
|||
assert_header_equals(e.data, {
|
||||
"cause": "forced",
|
||||
"destination": "document",
|
||||
"target": "top-level",
|
||||
"site": "same-site"
|
||||
});
|
||||
t.done();
|
||||
|
|
@ -51,7 +49,6 @@
|
|||
assert_header_equals(e.data, {
|
||||
"cause": "forced",
|
||||
"destination": "document",
|
||||
"target": "top-level",
|
||||
"site": "cross-site"
|
||||
});
|
||||
t.done();
|
||||
|
|
@ -71,7 +68,6 @@
|
|||
assert_header_equals(e.data, {
|
||||
"cause": "user-activated",
|
||||
"destination": "document",
|
||||
"target": "top-level",
|
||||
"site": "same-origin"
|
||||
});
|
||||
t.done();
|
||||
|
|
@ -93,7 +89,6 @@
|
|||
assert_header_equals(e.data, {
|
||||
"cause": "user-activated",
|
||||
"destination": "document",
|
||||
"target": "top-level",
|
||||
"site": "same-site"
|
||||
});
|
||||
t.done();
|
||||
|
|
@ -115,7 +110,6 @@
|
|||
assert_header_equals(e.data, {
|
||||
"cause": "user-activated",
|
||||
"destination": "document",
|
||||
"target": "top-level",
|
||||
"site": "cross-site"
|
||||
});
|
||||
t.done();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<script>
|
||||
promise_test(t => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let key = "worker-same-origin";
|
||||
let w = new Worker("/fetch/sec-metadata/resources/record-header.py?file=" + key);
|
||||
w.onmessage = e => {
|
||||
let expected = {"destination":"worker", "site":"same-origin"};
|
||||
fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=" + key)
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected))
|
||||
.then(_ => resolve())
|
||||
.catch(e => reject(e));
|
||||
};
|
||||
});
|
||||
}, "Same-Origin worker");
|
||||
</script>
|
||||
<body></body>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<link rel="author" href="mtrzos@google.com" title="Maciek Trzos">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/fetch/sec-metadata/resources/helper.js></script>
|
||||
<script>
|
||||
// Open a window with XML document which loads resources via <?xml-stylesheet/> tag
|
||||
let w = window.open("resources/xslt-test.sub.xml");
|
||||
window.addEventListener('message', function(e) {
|
||||
if (e.source != w)
|
||||
return;
|
||||
|
||||
promise_test(t => {
|
||||
let expected = {"destination":"xslt", "site":"same-origin"};
|
||||
return fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=xslt-same-origin")
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected));
|
||||
}, "Same-Origin xslt");
|
||||
|
||||
promise_test(t => {
|
||||
let expected = {"destination":"xslt", "site":"same-site"};
|
||||
return fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=xslt-same-site")
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected));
|
||||
}, "Same-site xslt");
|
||||
|
||||
promise_test(t => {
|
||||
let expected = {"destination":"xslt", "site":"cross-site"};
|
||||
return fetch("/fetch/sec-metadata/resources/record-header.py?retrieve=true&file=xslt-cross-site")
|
||||
.then(response => response.text())
|
||||
.then(text => assert_header_equals(text, expected));
|
||||
}, "Cross-site xslt");
|
||||
|
||||
w.close();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -1,32 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-the-form-data-set">
|
||||
<link ref="help" href="https://xhr.spec.whatwg.org/#dom-formdata">
|
||||
<link rel="help" href="https://fetch.spec.whatwg.org/#concept-bodyinit-extract">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe name="frame1"></iframe>
|
||||
<form accept-charset="iso-8859-1" target="frame1" action="/common/blank.html">
|
||||
<input type="hidden" name="_charset_">
|
||||
<iframe name="frame1" id="frame1"></iframe>
|
||||
<form accept-charset="iso-8859-1" target="frame1" action="/common/blank.html" id="form1">
|
||||
<input type="hidden" name="_charset_">
|
||||
</form>
|
||||
|
||||
<iframe name="frame2" id="frame2"></iframe>
|
||||
<form target="frame2" action="/common/blank.html" id="form2">
|
||||
<input type="text" name="foo">
|
||||
<button type="close" name="close" value="true">close</button>
|
||||
<button type="button" name="button" value="true">button</button>
|
||||
<button type="reset" name="reset" value="true">reset</button>
|
||||
<button type="submit" name="submit" value="true">submit</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
|
||||
const form1 = document.getElementById('form1'),
|
||||
form2 = document.getElementById('form2'),
|
||||
frame1 = document.getElementById('frame1'),
|
||||
frame2 = document.getElementById('frame2');
|
||||
|
||||
test(() => {
|
||||
let formData = new FormData(document.querySelector('form'));
|
||||
const formData = new FormData(form1);
|
||||
assert_equals(formData.get('_charset_'), 'UTF-8');
|
||||
}, 'FormData constructor always produces UTF-8 _charset_ value.');
|
||||
|
||||
let t = async_test('_charset_ control sets the expected encoding name.');
|
||||
t.step(() => {
|
||||
let iframe = document.querySelector('iframe');
|
||||
iframe.onload = t.step_func_done(() => {
|
||||
assert_not_equals(iframe.contentDocument.URL.indexOf('_charset_=windows-1252'), -1);
|
||||
async_test(t => {
|
||||
frame1.onload = t.step_func_done(() => {
|
||||
assert_not_equals(frame1.contentDocument.URL.indexOf('_charset_=windows-1252'), -1);
|
||||
});
|
||||
document.querySelector('form').submit();
|
||||
});
|
||||
form1.submit();
|
||||
}, '_charset_ control sets the expected encoding name.');
|
||||
|
||||
async_test(t => {
|
||||
frame2.onload = t.step_func_done(() => {
|
||||
assert_equals(frame2.contentDocument.URL.split("?")[1], 'foo=&submit=true');
|
||||
});
|
||||
form2.submit.click();
|
||||
}, 'The button cannot be setted if it is not a submitter.');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,60 @@
|
|||
for (const ev of ["unload", "beforeunload", "pagehide"]) {
|
||||
for (const [ev, target] of [
|
||||
["beforeunload", iframe => iframe.contentWindow],
|
||||
["pagehide", iframe => iframe.contentWindow],
|
||||
["unload", iframe => iframe.contentWindow],
|
||||
["visibilitychange", iframe => iframe.contentDocument],
|
||||
]) {
|
||||
async_test(t => {
|
||||
const iframe = document.body.appendChild(document.createElement("iframe"));
|
||||
t.add_cleanup(() => iframe.remove());
|
||||
iframe.src = "/common/blank.html";
|
||||
iframe.onload = t.step_func(() => {
|
||||
iframe.contentWindow.addEventListener(ev, t.step_func_done(() => {
|
||||
target(iframe).addEventListener(ev, t.step_func_done(() => {
|
||||
assert_not_equals(iframe.contentDocument.childNodes.length, 0);
|
||||
assert_equals(iframe.contentDocument.open(), iframe.contentDocument);
|
||||
assert_not_equals(iframe.contentDocument.childNodes.length, 0);
|
||||
}));
|
||||
iframe.src = "about:blank";
|
||||
});
|
||||
}, `document.open should bail out when ignore-opens-during-unload is greater than 0 during ${ev} event`);
|
||||
}, `document.open should bail out when ignore-opens-during-unload is greater than 0 during ${ev} event (in top-level browsing context)`);
|
||||
|
||||
async_test(t => {
|
||||
const iframe = document.body.appendChild(document.createElement("iframe"));
|
||||
t.add_cleanup(() => iframe.remove());
|
||||
iframe.src = "/common/blank.html?1";
|
||||
iframe.onload = t.step_func(() => {
|
||||
const doc = iframe.contentDocument;
|
||||
const innerIframe = doc.body.appendChild(doc.createElement("iframe"));
|
||||
innerIframe.src = "/common/blank.html?2";
|
||||
innerIframe.onload = t.step_func(() => {
|
||||
// Navigate the parent, listen on the child, and open() the parent.
|
||||
target(innerIframe).addEventListener(ev, t.step_func_done(() => {
|
||||
assert_not_equals(iframe.contentDocument.childNodes.length, 0);
|
||||
iframe.contentDocument.open();
|
||||
assert_not_equals(iframe.contentDocument.childNodes.length, 0);
|
||||
}));
|
||||
iframe.src = "about:blank";
|
||||
});
|
||||
});
|
||||
}, `document.open should bail out when ignore-opens-during-unload is greater than 0 during ${ev} event (open(parent) while unloading parent and child)`);
|
||||
|
||||
async_test(t => {
|
||||
const iframe = document.body.appendChild(document.createElement("iframe"));
|
||||
t.add_cleanup(() => iframe.remove());
|
||||
iframe.src = "/common/blank.html?1";
|
||||
iframe.onload = t.step_func(() => {
|
||||
const doc = iframe.contentDocument;
|
||||
const innerIframe = doc.body.appendChild(doc.createElement("iframe"));
|
||||
innerIframe.src = "/common/blank.html?2";
|
||||
innerIframe.onload = t.step_func(() => {
|
||||
// Navigate the child, listen on the child, and open() the parent.
|
||||
target(innerIframe).addEventListener(ev, t.step_func_done(() => {
|
||||
assert_not_equals(iframe.contentDocument.childNodes.length, 0);
|
||||
iframe.contentDocument.open();
|
||||
assert_equals(iframe.contentDocument.childNodes.length, 0);
|
||||
}));
|
||||
innerIframe.src = "about:blank";
|
||||
});
|
||||
});
|
||||
}, `document.open should bail out when ignore-opens-during-unload is greater than 0 during ${ev} event (open(parent) while unloading child only)`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TestDriver bless method</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<script>
|
||||
promise_test(() => {
|
||||
return test_driver.bless('empty', () => {});
|
||||
}, 'functions in the absence of a `body` element');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// At the time of this writing, the only standard requirement for user
|
||||
// activation concerns the interaction between iframe elements and their parent
|
||||
// browsing contexts [1]. Because testdriver.js currently cannot operate within
|
||||
// an iframe, the standard requirement cannot be used to verify the correctness
|
||||
// of the `bless` method. Instead, rely on the non-standard restriction on
|
||||
// unattended media playback. Browsers which do not implement such a
|
||||
// restriction will pass this test spuriously.
|
||||
//
|
||||
// [1] https://html.spec.whatwg.org/multipage/origin.html#attr-iframe-sandbox-allow-top-navigation-by-user-activation
|
||||
promise_test(() => {
|
||||
const video = document.createElement('video');
|
||||
video.setAttribute('src', '/media/counting.ogv');
|
||||
document.body.appendChild(video);
|
||||
return test_driver.bless('start video playback', () => video.play())
|
||||
}, 'user activation');
|
||||
|
||||
promise_test(() => {
|
||||
return test_driver.bless('demonstrates return value without action')
|
||||
.then((value) => {
|
||||
assert_equals(value, undefined);
|
||||
});
|
||||
}, 'no action function provided');
|
||||
|
||||
promise_test(() => {
|
||||
const expectedValue = {};
|
||||
|
||||
return test_driver.bless('demonstrate a synchronous return value', () => {
|
||||
return expectedValue;
|
||||
}).then((actualValue) => {
|
||||
assert_equals(
|
||||
actualValue,
|
||||
expectedValue,
|
||||
'the promise should be fulfilled with the returned value'
|
||||
);
|
||||
});
|
||||
|
||||
}, 'synchronous return value');
|
||||
|
||||
promise_test(() => {
|
||||
const expectedError = new Error();
|
||||
|
||||
return test_driver.bless('demonstrates a synchronous error', () => {
|
||||
throw expectedError;
|
||||
})
|
||||
.then(() => {
|
||||
assert_unreached('the promise should be rejected');
|
||||
}, (actualError) => {
|
||||
assert_equals(
|
||||
actualError,
|
||||
expectedError,
|
||||
'the promise should be rejected with the thrown value'
|
||||
);
|
||||
});
|
||||
}, 'synchronous error');
|
||||
|
||||
promise_test(() => {
|
||||
const expectedValue = {};
|
||||
|
||||
return test_driver.bless('demonstrate an asynchronous return value', () => {
|
||||
return Promise.resolve(expectedValue);
|
||||
}).then((actualValue) => {
|
||||
assert_equals(
|
||||
actualValue,
|
||||
expectedValue,
|
||||
'the promise should be fulfilled with the fulfillment value'
|
||||
);
|
||||
});
|
||||
|
||||
}, 'asynchronous return value');
|
||||
|
||||
promise_test(() => {
|
||||
const expectedError = new Error();
|
||||
|
||||
return test_driver.bless('demonstrates an asynchronous error', () => {
|
||||
return Promise.reject(expectedError);
|
||||
})
|
||||
.then(() => {
|
||||
assert_unreached('the promise should be rejected');
|
||||
}, (actualError) => {
|
||||
assert_equals(
|
||||
actualError,
|
||||
expectedError,
|
||||
'the promise should be rejected with the rejected value'
|
||||
);
|
||||
});
|
||||
}, 'asynchronous error');
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
// GENERATED CONTENT - DO NOT EDIT
|
||||
// Content was automatically extracted by Reffy into reffy-reports
|
||||
// (https://github.com/tidoust/reffy-reports)
|
||||
// Source: Web Budget API (https://wicg.github.io/budget-api/)
|
||||
|
||||
[Exposed=Window]
|
||||
partial interface Navigator {
|
||||
[SameObject] readonly attribute BudgetService budget;
|
||||
};
|
||||
|
||||
[Exposed=Worker]
|
||||
partial interface WorkerNavigator {
|
||||
[SameObject] readonly attribute BudgetService budget;
|
||||
};
|
||||
|
||||
[Exposed=(Window,Worker)]
|
||||
interface BudgetService {
|
||||
Promise<double> getCost(OperationType operation);
|
||||
Promise<sequence<BudgetState>> getBudget();
|
||||
|
||||
Promise<boolean> reserve(OperationType operation);
|
||||
};
|
||||
|
||||
[Exposed=(Window,Worker)]
|
||||
interface BudgetState {
|
||||
readonly attribute double budgetAt;
|
||||
readonly attribute DOMTimeStamp time;
|
||||
};
|
||||
|
||||
enum OperationType {
|
||||
"silent-push"
|
||||
};
|
||||
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