Auto merge of #25631 - servo-wpt-sync:wpt_update_28-01-2020, r=servo-wpt-sync

Sync WPT with upstream (28-01-2020)

Automated downstream sync of changes from upstream as of 28-01-2020.
[no-wpt-sync]
r? @servo-wpt-sync
This commit is contained in:
bors-servo 2020-01-29 01:43:40 -05:00 committed by GitHub
commit 7e4d0534c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
159 changed files with 2809 additions and 967 deletions

File diff suppressed because it is too large Load diff

View file

@ -2,3 +2,6 @@
[Hit test intersecting scaled box]
expected: FAIL
[Hit test within unscaled box]
expected: FAIL

View file

@ -1,3 +0,0 @@
[transofrmed-preserve-3d-1.html]
type: reftest
disabled: https://github.com/servo/servo/issues/9087

View file

@ -312,18 +312,24 @@
[fetch(): separate response Content-Type: text/plain ]
expected: NOTRUN
[<iframe>: separate response Content-Type: text/html;" text/plain]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
expected: FAIL
[<iframe>: separate response Content-Type: text/plain */*]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;" \\" text/plain]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;x=" text/plain]
expected: FAIL
[<iframe>: combined response Content-Type: text/html;" text/plain]
expected: FAIL
[<iframe>: combined response Content-Type: */* text/html]
expected: FAIL
[<iframe>: separate response Content-Type: text/html */*;charset=gbk]
expected: FAIL
[<iframe>: separate response Content-Type: text/html */*]
expected: FAIL
[<iframe>: separate response Content-Type: text/html;" \\" text/plain]
expected: FAIL

View file

@ -11,12 +11,6 @@
[X-Content-Type-Options%3A%20nosniff%0C]
expected: FAIL
[X-Content-Type-Options%3A%20%22nosniFF%22]
expected: FAIL
[X-Content-Type-Options%3A%20no%0D%0AX-Content-Type-Options%3A%20nosniff]
expected: FAIL
[Content-Type-Options%3A%20nosniff]
[X-Content-Type-Options%3A%20%2Cnosniff]
expected: FAIL

View file

@ -8,7 +8,7 @@
expected: FAIL
[Embedded credentials are treated as network errors in new windows.]
expected: FAIL
expected: TIMEOUT
[Embedded credentials matching the top-level are treated as network errors for cross-origin URLs.]
expected: TIMEOUT

View file

@ -1,4 +1,4 @@
[traverse_the_history_5.html]
[traverse_the_history_2.html]
[Multiple history traversals, last would be aborted]
expected: FAIL

View file

@ -1,5 +1,5 @@
[embedded-opener-remove-frame.html]
expected: TIMEOUT
expected: CRASH
[opener and "removed" embedded documents]
expected: FAIL

View file

@ -1,5 +1,6 @@
[iframe_sandbox_popups_escaping-3.html]
type: testharness
expected: TIMEOUT
[Check that popups from a sandboxed iframe escape the sandbox if\n allow-popups-to-escape-sandbox is used]
expected: FAIL
expected: TIMEOUT

View file

@ -1,6 +1,5 @@
[iframe_sandbox_popups_nonescaping-1.html]
type: testharness
expected: TIMEOUT
[Check that popups from a sandboxed iframe do not escape the sandbox]
expected: NOTRUN
expected: FAIL

View file

@ -24,3 +24,6 @@
[[textarea\] The validity.customError must be true if the custom validity error message is not empty]
expected: FAIL
[[select\] The validity.customError must be false if the custom validity error message is empty]
expected: FAIL

View file

@ -1,5 +1,5 @@
[form-double-submit-3.html]
expected: ERROR
[<button> should have the same double-submit protection as <input type=submit>]
expected: FAIL
expected: TIMEOUT

View file

@ -1,8 +0,0 @@
[anchor-with-inline-element.html]
expected: TIMEOUT
[Clicking on anchor with embedded inline element should navigate instead of opening details]
expected: NOTRUN
[Expected <a> containing <i> to navigate]
expected: NOTRUN

View file

@ -0,0 +1,2 @@
[errorhandling.html]
expected: CRASH

View file

@ -10,3 +10,6 @@
[Verifies the resolution of entry.startTime is at least 20 microseconds.]
expected: TIMEOUT
[Verifies the resolution of performance.now() is at least 5 microseconds.]
expected: FAIL

View file

@ -1,5 +1,4 @@
[crossorigin-sandwich-TAO.sub.html]
expected: ERROR
[There should be one entry.]
expected: FAIL

View file

@ -0,0 +1,10 @@
[ar_hittest_subscription_states.https.html]
[Hit test subscription succeeds if the feature was requested]
expected: FAIL
[Hit test subscription fails if the feature was not requested]
expected: FAIL
[Hit test subscription fails if the feature was requested but the session already ended]
expected: FAIL

View file

@ -47,7 +47,7 @@ promise_test(async (t) => {
const bitmap = await createImageBitmap(image);
assert_throws_dom('DataCloneError',
() => worker.postMessage(bitmap, [bitmap]));
() => worker.postMessage(bitmap, [bitmap]));
}, 'Transferring a non-origin-clean ImageBitmap throws.');
</script>

View file

@ -37,7 +37,7 @@ function readBlobAsPromise(blob) {
{}
].forEach(value => test(t => {
assert_throws_js(TypeError, () => new Blob([], {endings: value}),
'Blob constructor should throw');
'Blob constructor should throw');
}, `Invalid "endings" value: ${JSON.stringify(value)}`));
test(t => {

View file

@ -465,7 +465,7 @@ test(function() {
].forEach(arg => {
test(t => {
assert_throws_js(TypeError, () => new Blob([], arg),
'Blob constructor should throw with invalid property bag');
'Blob constructor should throw with invalid property bag');
}, `Passing ${JSON.stringify(arg)} for options should throw`);
});

View file

@ -37,7 +37,7 @@ function readBlobAsPromise(blob) {
{}
].forEach(value => test(t => {
assert_throws_js(TypeError, () => new File([], "name", {endings: value}),
'File constructor should throw');
'File constructor should throw');
}, `Invalid "endings" value: ${JSON.stringify(value)}`));
test(t => {

View file

@ -15,9 +15,9 @@ test(function() {
test(t => {
assert_throws_js(TypeError, () => new File(),
'Bits argument is required');
'Bits argument is required');
assert_throws_js(TypeError, () => new File([]),
'Name argument is required');
'Name argument is required');
}, 'Required arguments');
function test_first_argument(arg1, expectedSize, testName) {
@ -65,13 +65,13 @@ test_first_argument({[Symbol.iterator]() {
].forEach(arg => {
test(t => {
assert_throws_js(TypeError, () => new File(arg, 'world.html'),
'Constructor should throw for invalid bits argument');
'Constructor should throw for invalid bits argument');
}, `Invalid bits argument: ${JSON.stringify(arg)}`);
});
test(t => {
assert_throws_js(Error, () => new File([to_string_throws], 'name.txt'),
'Constructor should propagate exceptions');
'Constructor should propagate exceptions');
}, 'Bits argument: object that throws');
@ -132,7 +132,7 @@ test(function() {
].forEach(arg => {
test(t => {
assert_throws_js(TypeError, () => new File(['bits'], 'name.txt', arg),
'Constructor should throw for invalid property bag type');
'Constructor should throw for invalid property bag type');
}, `Invalid property bag: ${JSON.stringify(arg)}`);
});
@ -151,8 +151,8 @@ test(function() {
test(t => {
assert_throws_js(Error,
() => new File(['bits'], 'name.txt', {type: to_string_throws}),
'Constructor should propagate exceptions');
() => new File(['bits'], 'name.txt', {type: to_string_throws}),
'Constructor should propagate exceptions');
}, 'Property bag propagates exceptions');
</script>

View file

@ -64,7 +64,7 @@ indexeddb_test(
const store = tx.objectStore('store');
const obj = new ProbeObject();
assert_throws_dom('DataError', () => { store.put(obj); },
'put() should throw if primary key cannot be injected');
'put() should throw if primary key cannot be injected');
assert_equals(
obj.invalid_id_count, 1,
'put() operation should access primary key property once');

View file

@ -24,8 +24,8 @@ indexeddb_test(
setTimeout(t.step_func(() => {
assert_throws_js(TypeError, () => { cursor.advance(0); },
'"zero" check (TypeError) should precede ' +
'"not active" check (TransactionInactiveError)');
'"zero" check (TypeError) should precede ' +
'"not active" check (TransactionInactiveError)');
t.done();
}), 0);
});
@ -49,8 +49,8 @@ indexeddb_test(
setTimeout(t.step_func(() => {
assert_throws_dom('TransactionInactiveError', () => { cursor.advance(1); },
'"not active" check (TransactionInactiveError) ' +
'should precede "deleted" check (InvalidStateError)');
'"not active" check (TransactionInactiveError) ' +
'should precede "deleted" check (InvalidStateError)');
t.done();
}), 0);
});
@ -78,8 +78,8 @@ indexeddb_test(
setTimeout(t.step_func(() => {
assert_throws_dom('TransactionInactiveError', () => { cursor.advance(1); },
'"not active" check (TransactionInactiveError) ' +
'should precede "got value" check (InvalidStateError)');
'"not active" check (TransactionInactiveError) ' +
'should precede "got value" check (InvalidStateError)');
t.done();
}), 0);
});

View file

@ -39,10 +39,10 @@ indexeddb_test(
// Second try
assert_throws_dom('InvalidStateError',
function() { cursor.advance(1); }, 'second advance');
function() { cursor.advance(1); }, 'second advance');
assert_throws_dom('InvalidStateError',
function() { cursor.advance(3); }, 'third advance');
function() { cursor.advance(3); }, 'third advance');
count++;
});
@ -60,19 +60,19 @@ indexeddb_test(
var cursor = e.target.result;
assert_throws_js(TypeError,
function() { cursor.advance(document); });
function() { cursor.advance(document); });
assert_throws_js(TypeError,
function() { cursor.advance({}); });
function() { cursor.advance({}); });
assert_throws_js(TypeError,
function() { cursor.advance([]); });
function() { cursor.advance([]); });
assert_throws_js(TypeError,
function() { cursor.advance(""); });
function() { cursor.advance(""); });
assert_throws_js(TypeError,
function() { cursor.advance("1 2"); });
function() { cursor.advance("1 2"); });
t.done();
});
@ -91,14 +91,14 @@ indexeddb_test(
var cursor = e.target.result;
assert_throws_js(TypeError,
function() { cursor.advance(null); });
function() { cursor.advance(null); });
assert_throws_js(TypeError,
function() { cursor.advance(undefined); });
function() { cursor.advance(undefined); });
var myvar = null;
assert_throws_js(TypeError,
function() { cursor.advance(myvar); });
function() { cursor.advance(myvar); });
t.done();
});
@ -117,7 +117,7 @@ indexeddb_test(
var cursor = e.target.result;
assert_throws_js(TypeError,
function() { cursor.advance(); });
function() { cursor.advance(); });
t.done();
});
@ -135,26 +135,26 @@ indexeddb_test(
var cursor = e.target.result;
assert_throws_js(TypeError,
function() { cursor.advance(-1); });
function() { cursor.advance(-1); });
assert_throws_js(TypeError,
function() { cursor.advance(NaN); });
function() { cursor.advance(NaN); });
assert_throws_js(TypeError,
function() { cursor.advance(0); });
function() { cursor.advance(0); });
assert_throws_js(TypeError,
function() { cursor.advance(-0); });
function() { cursor.advance(-0); });
assert_throws_js(TypeError,
function() { cursor.advance(Infinity); });
function() { cursor.advance(Infinity); });
assert_throws_js(TypeError,
function() { cursor.advance(-Infinity); });
function() { cursor.advance(-Infinity); });
var myvar = -999999;
assert_throws_js(TypeError,
function() { cursor.advance(myvar); });
function() { cursor.advance(myvar); });
t.done();
});
@ -179,7 +179,7 @@ indexeddb_test(
}
assert_throws_js(TypeError,
function() { cursor.advance(0); });
function() { cursor.advance(0); });
cursor.advance(1);
count++;

View file

@ -18,7 +18,7 @@ indexeddb_test(
const index = store.index('index');
[NaN, Infinity, -Infinity, -1, -Number.MAX_SAFE_INTEGER].forEach(count => {
assert_throws_js(TypeError, () => { index.getAll(null, count); },
`getAll with count ${count} count should throw TypeError`);
`getAll with count ${count} count should throw TypeError`);
});
t.done();
},

View file

@ -18,7 +18,7 @@ indexeddb_test(
const index = store.index('index');
[NaN, Infinity, -Infinity, -1, -Number.MAX_SAFE_INTEGER].forEach(count => {
assert_throws_js(TypeError, () => { index.getAllKeys(null, count); },
`getAllKeys with count ${count} count should throw TypeError`);
`getAllKeys with count ${count} count should throw TypeError`);
});
t.done();
},

View file

@ -16,7 +16,7 @@ indexeddb_test(
const store = tx.objectStore('store');
[NaN, Infinity, -Infinity, -1, -Number.MAX_SAFE_INTEGER].forEach(count => {
assert_throws_js(TypeError, () => { store.getAll(null, count); },
`getAll with count ${count} count should throw TypeError`);
`getAll with count ${count} count should throw TypeError`);
});
t.done();
},

View file

@ -16,7 +16,7 @@ indexeddb_test(
const store = tx.objectStore('store');
[NaN, Infinity, -Infinity, -1, -Number.MAX_SAFE_INTEGER].forEach(count => {
assert_throws_js(TypeError, () => { store.getAllKeys(null, count); },
`getAllKeys with count ${count} count should throw TypeError`);
`getAllKeys with count ${count} count should throw TypeError`);
});
t.done();
},

View file

@ -17,7 +17,7 @@ indexeddb_test(
const store = tx.objectStore('store');
tx.abort();
assert_throws_dom('InvalidStateError', () => store.index('index'),
'index() should throw if transaction is finished');
'index() should throw if transaction is finished');
t.done();
},
'IDBObjectStore index() behavior when transaction is finished'

View file

@ -18,7 +18,7 @@ async_test(t => {
assert_equals(request.readyState, 'pending');
assert_throws_dom('InvalidStateError', () => request.error,
'IDBRequest.error should throw if request is pending');
'IDBRequest.error should throw if request is pending');
t.done();
});
}, 'IDBRequest.error throws if ready state is pending');

View file

@ -18,7 +18,7 @@ async_test(t => {
assert_equals(request.readyState, 'pending');
assert_throws_dom('InvalidStateError', () => request.result,
'IDBRequest.result should throw if request is pending');
'IDBRequest.result should throw if request is pending');
t.done();
});
}, 'IDBRequest.result throws if ready state is pending');

View file

@ -15,8 +15,8 @@ indexeddb_test(
const tx = db.transaction('s');
tx.oncomplete = t.step_func(() => {
assert_throws_dom('InvalidStateError', () => { tx.objectStore('nope'); },
'"finished" check (InvalidStateError) should precede ' +
'"name in scope" check (NotFoundError)');
'"finished" check (InvalidStateError) should precede ' +
'"name in scope" check (NotFoundError)');
t.done();
});
},

View file

@ -15,7 +15,7 @@ indexeddb_test(
const tx = db.transaction('store');
tx.abort();
assert_throws_dom('InvalidStateError', () => tx.objectStore('store'),
'objectStore() should throw if transaction is finished');
'objectStore() should throw if transaction is finished');
t.done();
},
'IDBTransaction objectStore() behavior when transaction is finished'

View file

@ -4,19 +4,19 @@ importScripts("{{location[server]}}/content-security-policy/support/testharness-
test(t => {
self.a = false;
assert_throws_dom("NetworkError",
_ => importScripts("http://{{domains[www]}}:{{ports[http][1]}}/content-security-policy/support/var-a.js"),
"importScripts should throw `NetworkError`");
_ => importScripts("http://{{domains[www]}}:{{ports[http][1]}}/content-security-policy/support/var-a.js"),
"importScripts should throw `NetworkError`");
assert_false(self.a);
}, "Cross-origin `importScripts()` blocked in " + self.location.protocol + self.location.search);
test(t => {
assert_throws_js(EvalError,
_ => eval("1 + 1"),
"`eval()` should throw 'EvalError'.");
_ => eval("1 + 1"),
"`eval()` should throw 'EvalError'.");
assert_throws_js(EvalError,
_ => new Function("1 + 1"),
"`new Function()` should throw 'EvalError'.");
_ => new Function("1 + 1"),
"`new Function()` should throw 'EvalError'.");
}, "`eval()` blocked in " + self.location.protocol + self.location.search);
async_test(t => {

View file

@ -5,7 +5,7 @@
// basic tests.
test(function() {
assert_throws_js(TypeError,
function() { new SecurityPolicyViolationEvent(); });
function() { new SecurityPolicyViolationEvent(); });
}, "SecurityPolicyViolationEvent constructor should throw with no parameters");
test(function() {

View file

@ -35,19 +35,19 @@
test(function() {
assert_throws_dom("HIERARCHY_REQUEST_ERR",
function() {
grouping_rule.insertRule("@import url(foo.css);", 0);
},
"inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR");
function() {
grouping_rule.insertRule("@import url(foo.css);", 0);
},
"inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR");
},
"insert_import_throws");
test(function() {
assert_throws_dom("INDEX_SIZE_ERR",
function() {
grouping_rule.insertRule("p { color: green }", 1);
},
"inserting at a bad index throws INDEX_SIZE_ERR");
function() {
grouping_rule.insertRule("p { color: green }", 1);
},
"inserting at a bad index throws INDEX_SIZE_ERR");
},
"insert_index_throws1");
test(function() {
@ -61,10 +61,10 @@
assert_equals(grouping_rule.cssRules.length, 3,
"Modified cssRules.length of @media rule");
assert_throws_dom("INDEX_SIZE_ERR",
function() {
grouping_rule.insertRule("p { color: green }", 4);
},
"inserting at a bad index throws INDEX_SIZE_ERR");
function() {
grouping_rule.insertRule("p { color: green }", 4);
},
"inserting at a bad index throws INDEX_SIZE_ERR");
assert_equals(grouping_rule.cssRules.length, 3,
"Modified cssRules.length of @media rule");
},
@ -97,10 +97,10 @@
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("@media bad syntax;", 0);
},
"inserting syntactically invalid rule throws syntax error");
function() {
grouping_rule.insertRule("@media bad syntax;", 0);
},
"inserting syntactically invalid rule throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of @media rule");
},
@ -110,10 +110,10 @@
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("", 0);
},
"inserting empty rule throws syntax error");
function() {
grouping_rule.insertRule("", 0);
},
"inserting empty rule throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of @media rule");
},
@ -123,10 +123,10 @@
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("@media print {} foo", 0);
},
"inserting rule with garbage afterwards throws syntax error");
function() {
grouping_rule.insertRule("@media print {} foo", 0);
},
"inserting rule with garbage afterwards throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of @media rule");
},
@ -136,10 +136,10 @@
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("p { color: yellow } foo", 0);
},
"inserting rule with garbage afterwards throws syntax error");
function() {
grouping_rule.insertRule("p { color: yellow } foo", 0);
},
"inserting rule with garbage afterwards throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of @media rule");
},
@ -149,10 +149,10 @@
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("@media print {} @media print {}", 0);
},
"inserting multiple rules throws syntax error");
function() {
grouping_rule.insertRule("@media print {} @media print {}", 0);
},
"inserting multiple rules throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of @media rule");
},
@ -162,10 +162,10 @@
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("p { color: yellow } @media print {}", 0);
},
"inserting multiple rules throws syntax error");
function() {
grouping_rule.insertRule("p { color: yellow } @media print {}", 0);
},
"inserting multiple rules throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of @media rule");
},
@ -175,10 +175,10 @@
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("@media print {} p { color: yellow }", 0);
},
"inserting multiple rules throws syntax error");
function() {
grouping_rule.insertRule("@media print {} p { color: yellow }", 0);
},
"inserting multiple rules throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of @media rule");
},
@ -188,10 +188,10 @@
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("p { color: yellow } p { color: yellow }", 0);
},
"inserting multiple rules throws syntax error");
function() {
grouping_rule.insertRule("p { color: yellow } p { color: yellow }", 0);
},
"inserting multiple rules throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of @media rule");
},

View file

@ -27,30 +27,6 @@
height: 400px;
}
.thirdRowFirstColumn {
background-color: green;
grid-column: 1;
grid-row: 3;
}
.fourthRowFirstColumn {
background-color: deepskyblue;
grid-column: 1;
grid-row: 4;
}
.fourthRowSecondColumn {
background-color: maroon;
grid-column: 2;
grid-row: 4;
}
.thirdRowFirstColumn {
background-color: green;
grid-column: 1;
grid-row: 3;
}
.fourthRowFirstColumn {
background-color: deepskyblue;
grid-column: 1;

View file

@ -27,30 +27,6 @@
height: 400px;
}
.thirdRowFirstColumn {
background-color: green;
grid-column: 1;
grid-row: 3;
}
.fourthRowFirstColumn {
background-color: deepskyblue;
grid-column: 1;
grid-row: 4;
}
.fourthRowSecondColumn {
background-color: maroon;
grid-column: 2;
grid-row: 4;
}
.thirdRowFirstColumn {
background-color: green;
grid-column: 1;
grid-row: 3;
}
.fourthRowFirstColumn {
background-color: deepskyblue;
grid-column: 1;

View file

@ -22,30 +22,6 @@
grid-auto-rows: auto;
}
.thirdRowFirstColumn {
background-color: green;
grid-column: 1;
grid-row: 3;
}
.fourthRowFirstColumn {
background-color: deepskyblue;
grid-column: 1;
grid-row: 4;
}
.fourthRowSecondColumn {
background-color: maroon;
grid-column: 2;
grid-row: 4;
}
.thirdRowFirstColumn {
background-color: green;
grid-column: 1;
grid-row: 3;
}
.fourthRowFirstColumn {
background-color: deepskyblue;
grid-column: 1;

View file

@ -29,11 +29,7 @@
width: 50px;
height: 40px;
}
.thirdRowFirstColumn {
background-color: green;
grid-column: 1;
grid-row: 3;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-lr writing mode</title>
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-lr and horizontal-tb orthogonal flows">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.container {
position: relative;
}
.grid {
grid-template-columns: 100px 100px;
grid-template-rows: 150px 150px 150px;
font-size: 10px;
}
.item {
width: 50px;
height: 20px;
}
</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')">
<p>This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p>
<p>Direction: LTR vs LTR</p>
<div class="container">
<div class="grid fit-content verticalLR directionLTR">
<div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="100" data-offset-y="80">end</div>
<div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="50" data-offset-y="140">center</div>
<div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="150" data-offset-y="0">start</div>
<div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="180">s-end</div>
<div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="0">s-start</div>
<div class="item thirdRowSecondColumn horizontalTB" data-offset-x="300" data-offset-y="100">default</div>
</div>
</div>
<p>Direction: RTL vs LTR</p>
<div class="container">
<div class="grid fit-content verticalLR directionRTL">
<div class="item firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="100" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn directionLTR horizontalTB selfCenter" data-offset-x="50" data-offset-y="40">center</div>
<div class="item secondRowFirstColumn directionLTR horizontalTB selfStart" data-offset-x="150" data-offset-y="180">start</div>
<div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="80">s-end</div>
<div class="item thirdRowFirstColumn directionLTR horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="100">s-start</div>
<div class="item thirdRowSecondColumn directionLTR horizontalTB" data-offset-x="300" data-offset-y="80">default</div>
</div>
</div>
<p>Direction: LTR vs RTL</p>
<div class="container">
<div class="grid fit-content verticalLR directionLTR">
<div class="item firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="100" data-offset-y="80">end</div>
<div class="item firstRowSecondColumn directionRTL horizontalTB selfCenter" data-offset-x="50" data-offset-y="140">center</div>
<div class="item secondRowFirstColumn directionRTL horizontalTB selfStart" data-offset-x="150" data-offset-y="0">start</div>
<div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="180">s-end</div>
<div class="item thirdRowFirstColumn directionRTL horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="0">s-start</div>
<div class="item thirdRowSecondColumn directionRTL horizontalTB" data-offset-x="300" data-offset-y="100">default</div>
</div>
</div>
<p>Direction: RTL vs RTL</p>
<div class="container">
<div class="grid fit-content verticalLR directionRTL">
<div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="100" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="50" data-offset-y="40">center</div>
<div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="150" data-offset-y="180">start</div>
<div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="80">s-end</div>
<div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="100">s-start</div>
<div class="item thirdRowSecondColumn horizontalTB" data-offset-x="300" data-offset-y="80">default</div>
</div>
</div>
</body>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-rl writing mode</title>
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-rl and horizontal-tb orthogonal flows">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.container {
position: relative;
}
.grid {
grid-template-columns: 100px 100px;
grid-template-rows: 150px 150px 150px;
font-size: 10px;
}
.item {
width: 50px;
height: 20px;
}
</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')">
<p>This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.</p>
<p>Direction: LTR vs LTR</p>
<div class="container">
<div class="grid fit-content verticalRL directionLTR">
<div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="300" data-offset-y="80">end</div>
<div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="350" data-offset-y="140">center</div>
<div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="0">start</div>
<div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="180">s-end</div>
<div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="0">s-start</div>
<div class="item thirdRowSecondColumn horizontalTB" data-offset-x="100" data-offset-y="100">default</div>
</div>
</div>
<p>Direction: RTL vs LTR</p>
<div class="container">
<div class="grid fit-content verticalRL directionRTL">
<div class="item firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="300" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn directionLTR horizontalTB selfCenter" data-offset-x="350" data-offset-y="40">center</div>
<div class="item secondRowFirstColumn directionLTR horizontalTB selfStart" data-offset-x="250" data-offset-y="180">start</div>
<div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="80">s-end</div>
<div class="item thirdRowFirstColumn directionLTR horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="100">s-start</div>
<div class="item thirdRowSecondColumn directionLTR horizontalTB" data-offset-x="100" data-offset-y="80">default</div>
</div>
</div>
<p>Direction: LTR vs RTL</p>
<div class="container">
<div class="grid fit-content verticalRL directionLTR">
<div class="item firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="300" data-offset-y="80">end</div>
<div class="item firstRowSecondColumn directionRTL horizontalTB selfCenter" data-offset-x="350" data-offset-y="140">center</div>
<div class="item secondRowFirstColumn directionRTL horizontalTB selfStart" data-offset-x="250" data-offset-y="0">start</div>
<div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="180">s-end</div>
<div class="item thirdRowFirstColumn directionRTL horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="0">s-start</div>
<div class="item thirdRowSecondColumn directionRTL horizontalTB" data-offset-x="100" data-offset-y="100">default</div>
</div>
</div>
<p>Direction: RTL vs RTL</p>
<div class="container">
<div class="grid fit-content verticalRL directionRTL">
<div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="300" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="350" data-offset-y="40">center</div>
<div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="180">start</div>
<div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="80">s-end</div>
<div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="100">s-start</div>
<div class="item thirdRowSecondColumn horizontalTB" data-offset-x="100" data-offset-y="80">default</div>
</div>
</div>
</body>

View file

@ -0,0 +1,125 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout test: item alignment with orthogonal flows</title>
<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
<meta name="assert" content="This test checks that grid item alignment works as expected with horizontal-tb and vertical-rl/vertical-lr orthogonal flows">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.container {
position: relative;
}
.grid {
grid-template-columns: 100px 100px;
grid-template-rows: 150px 150px 150px;
font-size: 10px;
}
.item {
width: 20px;
height: 50px;
}
</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')">
<p>This test checks that grid items alignment works as expected with HORIZONTAL-TB vs VERTICAL-RL orthogonal flows.</p>
<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL</p>
<p>Direction: LTR vs LTR</p>
<div class="container">
<div class="grid fit-content directionLTR">
<div class="item firstRowFirstColumn verticalRL selfEnd" data-offset-x="80" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn verticalRL selfCenter" data-offset-x="140" data-offset-y="50">center</div>
<div class="item secondRowFirstColumn verticalRL selfStart" data-offset-x="0" data-offset-y="150">start</div>
<div class="item secondRowSecondColumn verticalRL selfSelfEnd" data-offset-x="100" data-offset-y="250">s-end</div>
<div class="item thirdRowFirstColumn verticalRL selfSelfStart" data-offset-x="80" data-offset-y="300">s-start</div>
<div class="item thirdRowSecondColumn verticalRL" data-offset-x= "100" data-offset-y="300">default</div>
</div>
</div>
<p>Direction: RTL vs LTR</p>
<div class="container">
<div class="grid fit-content directionRTL">
<div class="item firstRowFirstColumn directionLTR verticalRL selfEnd" data-offset-x="100" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn directionLTR verticalRL selfCenter" data-offset-x="40" data-offset-y="50">center</div>
<div class="item secondRowFirstColumn directionLTR verticalRL selfStart" data-offset-x="180" data-offset-y="150">start</div>
<div class="item secondRowSecondColumn directionLTR verticalRL selfSelfEnd" data-offset-x="0" data-offset-y="250">s-end</div>
<div class="item thirdRowFirstColumn directionLTR verticalRL selfSelfStart" data-offset-x="180" data-offset-y="300">s-start</div>
<div class="item thirdRowSecondColumn directionLTR verticalRL" data-offset-x="80" data-offset-y="300">default</div>
</div>
</div>
<p>Direction: LTR vs RTL</p>
<div class="container">
<div class="grid fit-content directionLTR">
<div class="item firstRowFirstColumn directionRTL verticalRL selfEnd" data-offset-x="80" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn directionRTL verticalRL selfCenter" data-offset-x="140" data-offset-y="50">center</div>
<div class="item secondRowFirstColumn directionRTL verticalRL selfStart" data-offset-x="0" data-offset-y="150">start</div>
<div class="item secondRowSecondColumn directionRTL verticalRL selfSelfEnd" data-offset-x="100" data-offset-y="150">s-end</div>
<div class="item thirdRowFirstColumn directionRTL verticalRL selfSelfStart" data-offset-x="80" data-offset-y="400">s-start</div>
<div class="item thirdRowSecondColumn directionRTL verticalRL" data-offset-x="100" data-offset-y="300">default</div>
</div>
</div>
<p>Direction: RTL vs RTL</p>
<div class="container">
<div class="grid fit-content directionRTL">
<div class="item firstRowFirstColumn verticalRL selfEnd" data-offset-x="100" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn verticalRL selfCenter" data-offset-x="40" data-offset-y="50">center</div>
<div class="item secondRowFirstColumn verticalRL selfStart" data-offset-x="180" data-offset-y="150">start</div>
<div class="item secondRowSecondColumn verticalRL selfSelfEnd" data-offset-x="0" data-offset-y="150">s-end</div>
<div class="item thirdRowFirstColumn verticalRL selfSelfStart" data-offset-x="180" data-offset-y="400">s-start</div>
<div class="item thirdRowSecondColumn verticalRL" data-offset-x="80" data-offset-y="300">default</div>
</div>
</div>
<!-- HORIZONTAL-TB vs VERTICAL-LR -->
<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR</p>
<p>Direction: LTR vs LTR</p>
<div class="container">
<div class="grid fit-content drectionLTR">
<div class="item firstRowFirstColumn verticalLR selfEnd" data-offset-x="80" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn verticalLR selfCenter" data-offset-x="140" data-offset-y="50">center</div>
<div class="item secondRowFirstColumn verticalLR selfStart" data-offset-x="0" data-offset-y="150">start</div>
<div class="item secondRowSecondColumn verticalLR selfSelfEnd" data-offset-x="180" data-offset-y="250">s-end</div>
<div class="item thirdRowFirstColumn verticalLR selfSelfStart" data-offset-x="0" data-offset-y="300">s-start</div>
<div class="item thirdRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="300">default</div>
</div>
</div>
<p>Direction: RTL vs LTR</p>
<div class="container">
<div class="grid fit-content directionRTL">
<div class="item firstRowFirstColumn directionLTR verticalLR selfEnd" data-offset-x="100" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn directionLTR verticalLR selfCenter" data-offset-x="40" data-offset-y="50">center</div>
<div class="item secondRowFirstColumn directionLTR verticalLR selfStart" data-offset-x="180" data-offset-y="150">start</div>
<div class="item secondRowSecondColumn directionLTR verticalLR selfSelfEnd" data-offset-x="80" data-offset-y="250">s-end</div>
<div class="item thirdRowFirstColumn directionLTR verticalLR selfSelfStart" data-offset-x="100" data-offset-y="300">s-start</div>
<div class="item thirdRowSecondColumn directionLTR verticalLR" data-offset-x="80" data-offset-y="300">default</div>
</div>
</div>
<p>Direction: RTL vs RTL</p>
<div class="container">
<div class="grid fit-content directionRTL">
<div class="item firstRowFirstColumn verticalLR selfEnd" data-offset-x="100" data-offset-y="100">end</div>
<div class="item firstRowSecondColumn verticalLR selfCenter" data-offset-x="40" data-offset-y="50">center</div>
<div class="item secondRowFirstColumn verticalLR selfStart" data-offset-x="180" data-offset-y="150">start</div>
<div class="item secondRowSecondColumn verticalLR selfSelfEnd" data-offset-x="80" data-offset-y="150">s-end</div>
<div class="item thirdRowFirstColumn verticalLR selfSelfStart" data-offset-x="100" data-offset-y="400">s-start</div>
<div class="item thirdRowSecondColumn verticalLR" data-offset-x="80" data-offset-y="300">default</div>
</div>
</div>
</body>

View file

@ -0,0 +1,22 @@
<!doctype html>
<title>Grid items only stretch if block-size computes to auto</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="help" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
<style>
#grid {
display: grid;
width: 100px;
height: 100px;
grid-template: 100% / 100%;
background: green;
}
#item {
height: max-content;
background: red;
}
</style>
<div id="grid">
<div id="item"></div>
</div>

View file

@ -0,0 +1,23 @@
<!doctype html>
<title>Grid items only stretch if block-size computes to auto</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="help" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
<style>
#grid {
writing-mode: vertical-lr;
display: grid;
width: 100px;
height: 100px;
grid-template: 100% / 100%;
background: green;
}
#item {
width: max-content;
background: red;
}
</style>
<div id="grid">
<div id="item"></div>
</div>

View file

@ -0,0 +1,22 @@
<!doctype html>
<title>Grid items only stretch if block-size computes to auto</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="help" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
<style>
#grid {
display: grid;
width: 100px;
height: 100px;
grid-template: 100% / 100%;
background: green;
}
#item {
height: min-content;
background: red;
}
</style>
<div id="grid">
<div id="item"></div>
</div>

View file

@ -0,0 +1,23 @@
<!doctype html>
<title>Grid items only stretch if block-size computes to auto</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="help" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
<style>
#grid {
writing-mode: vertical-lr;
display: grid;
width: 100px;
height: 100px;
grid-template: 100% / 100%;
background: green;
}
#item {
width: min-content;
background: red;
}
</style>
<div id="grid">
<div id="item"></div>
</div>

View file

@ -0,0 +1,10 @@
<!doctype html>
<title>CSS test reference</title>
<style>
#ref {
width: 100px;
height: 100px;
background: green;
}
</style>
<div id="ref"></div>

View file

@ -61,7 +61,7 @@ x {
<div class="grid">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div class="subgrid">
<x style="grid-column:3; right:33px">x</x>
<x style="grid-column:3; right:27px">x</x>
</div>
</div>
@ -117,7 +117,7 @@ x {
<div class="grid">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<div class="subgrid hr">
<x style="grid-column:auto/1; left:-33px">x</x>
<x style="grid-column:auto/1; left:-27px">x</x>
</div>
</div>

View file

@ -0,0 +1,233 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: subgrid margin/border/padding that overflow the edge track</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0;
}
.grid {
display: inline-grid;
grid: auto / 7px 30px 10px 20px 5px;
justify-content: space-around;
align-content: start;
border: 3px solid;
width: 80px;
}
.rtl { direction: rtl; }
.subgrid {
display: grid;
min-width: 0;
min-height: 30px;
background: pink;
border:1px solid;
margin: 0 4px 0 3px;
position: relative;
justify-content: space-between;
}
.c1 { width: 30px; grid-column: 2 / span 1; grid: auto / 26px; }
.rtl > .c1 { grid: auto / 25px; }
.c1.plr { padding-right: 100px; }
.rtl > .c1.plr { padding: 0 0 0 100px; }
.c2 { width: 33px; grid-column: 2 / span 2; grid: auto / 26px 5px; }
.rtl > .c2 { grid: auto / 25px 6px; }
.c2.plr { padding-right: 97px; }
.rtl > .c2.plr { padding: 0 0 0 97px; }
.c3 { width: 55px; grid-column: 2 / span 3; grid: auto / 26px 10px 15px; }
.rtl > .c3 { grid: auto / 25px 10px 16px; }
.c3.plr { padding-right: 75px; }
.rtl > .c3.plr { padding: 0 0 0 75px; }
y {
background: blue;
height: 10px;
}
y:nth-of-type(1) { grid-column: 2; }
y:nth-of-type(2) { grid-column: 4; }
x { background: silver; }
x:nth-of-type(2) { background: purple; }
x:nth-of-type(3) { background: magenta; }
a {
position: absolute;
grid-column-start: 1;
inset: 0;
top: 3px;
border-top: 2px solid grey;
}
a:nth-of-type(2) {
grid-column-start: 2;
top: 6px;
}
a:nth-of-type(3) {
grid-column-start: 3;
top: 9px;
}
b {
position: absolute;
grid-column-end: 1;
inset: 0;
top: 12px;
border-top: 2px solid grey;
}
b:nth-of-type(2) {
grid-column-end: 2;
top: 15px;
}
b:nth-of-type(3) {
grid-column-end: 3;
top: 18px;
}
.f { float:left; margin-left:80px; }
.z { height:0; }
.s2 { grid-column:2; }
.gl { left: -2px; }
.e2 { grid-column-end:2; }
.gr { right: -2px; }
</style>
</head>
<body>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 pl"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 plr"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 pr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 plr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 pr"><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 pl"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 plr"><a class="s2 gl"></a><b class="e2"></b><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c2 pr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c2 pl"><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c2 plr"><a class="s2 gr"></a><b class="e2"></b><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pr"><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pl"><a class="s2"></a><b class="e2"></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 plr"><a class="s2"></a><b class="e2"></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pr"><a class="s2"></a><b class="e2"></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pl"><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 plr"><a class="s2"></a><b class="e2"></b></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,222 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid margin/border/padding that overflow the edge track</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="subgrid-mbp-overflow-001-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0;
}
.grid {
display: inline-grid;
grid: auto / 7px 30px 10px 20px 5px;
justify-content: space-around;
align-content: start;
border: 3px solid;
width: 80px;
}
.rtl { direction: rtl; }
.subgrid {
display: grid;
grid: auto / subgrid;
min-width: 0;
min-height: 30px;
background: pink;
border:1px solid;
margin: 0 4px 0 3px;
position: relative;
}
.c1 { grid-column: 2 / span 1; }
.c2 { grid-column: 2 / span 2; }
.c3 { grid-column: 2 / span 3; }
.pr { padding-right: 30px; }
.pl { padding-left: 30px; }
.plr { padding: 0 50px 0 80px; }
y {
background: blue;
height: 10px;
}
y:nth-of-type(1) { grid-column: 2; }
y:nth-of-type(2) { grid-column: 4; }
x { background: silver; }
x:nth-of-type(2) { background: purple; }
x:nth-of-type(3) { background: magenta; }
a {
position: absolute;
grid-column-start: 1;
inset: 0;
top: 3px;
border-top: 2px solid grey;
}
a:nth-of-type(2) {
grid-column-start: 2;
top: 6px;
}
a:nth-of-type(3) {
grid-column-start: 3;
top: 9px;
}
b {
position: absolute;
grid-column-end: 1;
inset: 0;
top: 12px;
border-top: 2px solid grey;
}
b:nth-of-type(2) {
grid-column-end: 2;
top: 15px;
}
b:nth-of-type(3) {
grid-column-end: 3;
top: 18px;
}
.f { float:left; margin-left:80px; }
</style>
</head>
<body>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,224 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: orthogonal writing-mode subgrid margin/border/padding that overflow the edge track</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="subgrid-mbp-overflow-001-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0;
}
.grid {
display: inline-grid;
grid: auto / 7px 30px 10px 20px 5px;
justify-content: space-around;
align-content: start;
border: 3px solid;
width: 80px;
}
.rtl { direction: rtl; }
.subgrid {
display: grid;
grid: subgrid / auto;
min-width: 0;
min-height: 30px;
background: pink;
border:1px solid;
margin: 0 4px 0 3px;
position: relative;
writing-mode: vertical-lr;
}
.rtl > .subgrid { writing-mode: vertical-rl; }
.c1 { grid-column: 2 / span 1; }
.c2 { grid-column: 2 / span 2; }
.c3 { grid-column: 2 / span 3; }
.pr { padding-right: 30px; }
.pl { padding-left: 30px; }
.plr { padding: 0 50px 0 80px; }
y {
background: blue;
height: 10px;
}
y:nth-of-type(1) { grid-column: 2; }
y:nth-of-type(2) { grid-column: 4; }
x { background: silver; }
x:nth-of-type(2) { background: purple; }
x:nth-of-type(3) { background: magenta; }
a {
position: absolute;
grid-row-start: 1;
inset: 0;
top: 3px;
border-top: 2px solid grey;
}
a:nth-of-type(2) {
grid-row-start: 2;
top: 6px;
}
a:nth-of-type(3) {
grid-row-start: 3;
top: 9px;
}
b {
position: absolute;
grid-row-end: 1;
inset: 0;
top: 12px;
border-top: 2px solid grey;
}
b:nth-of-type(2) {
grid-row-end: 2;
top: 15px;
}
b:nth-of-type(3) {
grid-row-end: 3;
top: 18px;
}
.f { float:left; margin-left:80px; }
</style>
</head>
<body>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid">
<y></y><y></y>
<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,173 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: subgrid margin/border/padding that overflow the edge track</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0;
}
.grid {
display: inline-grid;
grid: auto / 7px 30px 10px 20px 5px;
justify-content: space-around;
align-content: start;
border: 3px solid;
width: 80px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.subgrid {
display: grid;
justify-content: space-between;
justify-self: self-start;
min-width: 0;
min-height: 30px;
background: pink;
border:1px solid;
margin: 0 4px 0 3px;
position: relative;
}
.c1 { grid-column: 4 / span 1; }
.c3 { grid-column: 2 / span 3; }
y {
background: blue;
height: 10px;
}
y:nth-of-type(1) { grid-column: 2; }
y:nth-of-type(2) { grid-column: 4; }
x { background: silver; border-inline-start: 2px solid lime; }
x:nth-of-type(2) { background: purple; }
x:nth-of-type(3) { background: magenta; }
a {
position: absolute;
grid-column-start: 1;
inset: 0;
top: 3px;
border-top: 2px solid grey;
}
a:nth-of-type(2) {
grid-column-start: 2;
top: 6px;
}
a:nth-of-type(3) {
grid-column-start: 3;
top: 9px;
}
b {
position: absolute;
grid-column-end: 1;
inset: 0;
top: 12px;
border-top: 2px solid grey;
}
b:nth-of-type(2) {
grid-column-end: 2;
top: 15px;
}
b:nth-of-type(3) {
grid-column-end: 3;
top: 18px;
}
.f { float:left; margin-left:10px; }
.c1 { width: 30px; }
.ltr.c1.pl > x, .rtl.c1.pr > x {
padding-inline-start: 15px;
border-inline: none;
border-inline-end: 2px solid lime;
background: pink;
}
.ltr.c1.pl > x { padding-inline-start: 16px; }
.rtl.c1.pr > a { width: 15px; margin-inline-start: 15px; }
.ltr.c1.pl > a { width: 14px; margin-inline-start: 16px;}
.rtl.c1.pr > b { width: 15px; }
.ltr.c1.pl > b { width: 16px; }
.c3 { width: 55px; grid: auto / 15px 10px 26px; }
.rtl.c3.pl { padding-inline-end: 4px; }
.ltr.c3.pr { padding-inline-end: 5px; }
.ltr.c3 { grid: auto / 16px 10px 25px; }
.rtl.c3.pr > a:nth-of-type(1) { width: 40px; right: 15px; }
.ltr.c3.pl > a:nth-of-type(1) { width: 39px; left: 16px; }
.rtl.c3.pr > b:nth-of-type(1),
.rtl.c3.pr > b:nth-of-type(2){ width: 15px; }
.ltr.c3.pl > b:nth-of-type(1),
.ltr.c3.pl > b:nth-of-type(2){ width: 16px; }
x.zero { background: pink; }
</style>
</head>
<body>
<div class=f>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c3 pr"><x class="zero" style="margin-right:15px"></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x class="zero"></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x class="zero"></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c3 pl"><x class="zero" style="margin-left:16px"></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c1 pl"><x></x><a></a><b></b></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,151 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: subgrid margin/border/padding that overflow the edge track</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2">
<link rel="match" href="subgrid-mbp-overflow-003-ref.html">
<style>
html,body {
color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0;
}
.grid {
display: inline-grid;
grid: auto / 7px 30px 10px 20px 5px;
justify-content: space-around;
align-content: start;
border: 3px solid;
width: 80px;
}
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.subgrid {
display: grid;
grid: auto / subgrid;
justify-self: self-start;
min-width: 0;
min-height: 30px;
background: pink;
border:1px solid;
margin: 0 4px 0 3px;
position: relative;
}
.c1 { grid-column: 4 / span 1; }
.c3 { grid-column: 2 / span 3; }
.pr { padding-right: 30px; }
.pl { padding-left: 30px; }
y {
background: blue;
height: 10px;
}
y:nth-of-type(1) { grid-column: 2; }
y:nth-of-type(2) { grid-column: 4; }
x { background: silver; border-inline-start: 2px solid lime; }
x:nth-of-type(2) { background: purple; }
x:nth-of-type(3) { background: magenta; }
a {
position: absolute;
grid-column-start: 1;
inset: 0;
top: 3px;
border-top: 2px solid grey;
}
a:nth-of-type(2) {
grid-column-start: 2;
top: 6px;
}
a:nth-of-type(3) {
grid-column-start: 3;
top: 9px;
}
b {
position: absolute;
grid-column-end: 1;
inset: 0;
top: 12px;
border-top: 2px solid grey;
}
b:nth-of-type(2) {
grid-column-end: 2;
top: 15px;
}
b:nth-of-type(3) {
grid-column-end: 3;
top: 18px;
}
.f { float:left; margin-left:10px; }
</style>
</head>
<body>
<div class=f>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>
</div>
<div class=f>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid ltr">
<y></y><y></y>
<div class="subgrid rtl c1 pl"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c1 pr"><x></x><a></a><b></b></div>
</div>
<br>
<div class="grid rtl">
<y></y><y></y>
<div class="subgrid ltr c1 pl"><x></x><a></a><b></b></div>
</div>
</div>
</body>
</html>

View file

@ -4,7 +4,7 @@
<title>CSS Transforms API Test: transform preserve-3d</title>
<link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="match" href="reference/transofrmed-preserve-3d-1-ref.html">
<link rel="match" href="reference/transformed-preserve-3d-1-ref.html">
<meta name="assert" content="The transformed div should establishe a 3D rendering context">
<style>
div {

View file

@ -4,7 +4,7 @@
<title>CSS Transforms API Test: transform rotateX</title>
<link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="match" href="reference/transofrmed-rotateX-3-ref.html">
<link rel="match" href="reference/transformed-rotateX-3-ref.html">
<meta name="assert" content="The transformed div should rotateX by 180 degrees">
<style>
div {

View file

@ -4,7 +4,7 @@
<title>CSS Transforms API Test: transform rotateY</title>
<link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="match" href="reference/transofrmed-rotateY-1-ref.html">
<link rel="match" href="reference/transformed-rotateY-1-ref.html">
<meta name="assert" content="The transformed div should rotate 90 degrees">
<style>
div {

View file

@ -139,6 +139,6 @@ test(function() {
test(function() {
var div = document.getElementById('test');
assert_throws_js(TypeError, () => getComputedStyle(div, "totallynotapseudo"),
"getComputedStyle with an unknown pseudo-element throws");
"getComputedStyle with an unknown pseudo-element throws");
}, "Unknown pseudo-elements throw");
</script>

View file

@ -86,6 +86,12 @@
grid-row: 2;
}
.thirdRowFirstColumn {
background-color: green;
grid-column: 1;
grid-row: 3;
}
.thirdRowSecondColumn {
background-color: red;
grid-column: 2;

View file

@ -15,13 +15,13 @@ test(() => {
assert_true(element.attachInternals() instanceof ElementInternals,
'New - 1st call');
assert_throws_dom('NotSupportedError', () => { element.attachInternals(); },
'New - 2nd call');
'New - 2nd call');
element = document.createElement('my-element1');
assert_true(element.attachInternals() instanceof ElementInternals,
'createElement - 1st call');
assert_throws_dom('NotSupportedError', () => { element.attachInternals(); },
'createElement - 2nd call');
'createElement - 2nd call');
container.innerHTML = '<my-element1></my-element1>';
assert_true(container.firstChild.attachInternals() instanceof ElementInternals,

View file

@ -179,8 +179,8 @@ test(function() {
// reset the counter.
getCount = 0;
assert_throws_js(TypeError,
function () { new countingProxy() },
"Should not be able to construct an HTMLElement named 'button'");
function () { new countingProxy() },
"Should not be able to construct an HTMLElement named 'button'");
assert_equals(getCount, 0, "Should never have gotten .prototype");
}, 'HTMLElement constructor must not get .prototype until it finishes its extends sanity checks, calling proxy constructor directly');
@ -201,8 +201,8 @@ test(function() {
// reset the counter.
getCount = 0;
assert_throws_js(TypeError,
function () { Reflect.construct(HTMLElement, [], countingProxy) },
"Should not be able to construct an HTMLElement named 'button'");
function () { Reflect.construct(HTMLElement, [], countingProxy) },
"Should not be able to construct an HTMLElement named 'button'");
assert_equals(getCount, 0, "Should never have gotten .prototype");
}, 'HTMLElement constructor must not get .prototype until it finishes its extends sanity checks, calling via Reflect');
@ -220,8 +220,8 @@ test(function() {
// Purposefully don't register it.
assert_throws_js(TypeError,
function () { new countingProxy() },
"Should not be able to construct an HTMLElement named 'button'");
function () { new countingProxy() },
"Should not be able to construct an HTMLElement named 'button'");
assert_equals(getCount, 0, "Should never have gotten .prototype");
}, 'HTMLElement constructor must not get .prototype until it finishes its registration sanity checks, calling proxy constructor directly');
@ -239,8 +239,8 @@ test(function() {
// Purposefully don't register it.
assert_throws_js(TypeError,
function () { Reflect.construct(HTMLElement, [], countingProxy) },
"Should not be able to construct an HTMLElement named 'button'");
function () { Reflect.construct(HTMLElement, [], countingProxy) },
"Should not be able to construct an HTMLElement named 'button'");
assert_equals(getCount, 0, "Should never have gotten .prototype");
}, 'HTMLElement constructor must not get .prototype until it finishes its registration sanity checks, calling via Reflect');
</script>

View file

@ -204,8 +204,8 @@ test_with_window(w => {
// reset the counter.
getCount = 0;
assert_throws_js(TypeError,
function () { new countingProxy() },
"Should not be able to construct an HTMLParagraphElement not named 'p'");
function () { new countingProxy() },
"Should not be able to construct an HTMLParagraphElement not named 'p'");
assert_equals(getCount, 0, "Should never have gotten .prototype");
}, 'HTMLParagraphElement constructor must not get .prototype until it finishes its extends sanity checks, calling proxy constructor directly');
@ -225,8 +225,8 @@ test_with_window(w => {
// reset the counter.
getCount = 0;
assert_throws_js(TypeError,
function () { Reflect.construct(HTMLParagraphElement, [], countingProxy) },
"Should not be able to construct an HTMLParagraphElement not named 'p'");
function () { Reflect.construct(HTMLParagraphElement, [], countingProxy) },
"Should not be able to construct an HTMLParagraphElement not named 'p'");
assert_equals(getCount, 0, "Should never have gotten .prototype");
}, 'HTMLParagraphElement constructor must not get .prototype until it finishes its extends sanity checks, calling via Reflect');
</script>

View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<title>Test advertised required document policy</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> </head>
<body>
<h1>Test advertised required document policy</h1>
<script>
// The top-level document has a document policy, as well as a required document
// policy (for subframes) which is stricter. This test should load (the required
// policy should not block this page,) but the requirements should be applied to
// nested content.
callbacks = {};
window.addEventListener('message', ev => {
var id = ev.data.id;
if (id && callbacks[id]) {
callbacks[id](ev.data.requiredPolicy || null);
}
});
async_test(t => {
var iframe = document.createElement('iframe');
iframe.src = "/document-policy/echo-policy.py?id=1";
callbacks["1"] = t.step_func_done(result => {
assert_equals(result, "unoptimized-lossless-images;bpp=1.0");
});
document.body.appendChild(iframe);
}, "Child frame with no explicit policy should have the same required policy as its parent.");
async_test(t => {
var iframe = document.createElement('iframe');
iframe.src = "/document-policy/echo-policy.py?id=2";
iframe.policy = "unoptimized-lossless-images;bpp=4";
callbacks["2"] = t.step_func_done(result => {
assert_equals(result, "unoptimized-lossless-images;bpp=1.0");
});
document.body.appendChild(iframe);
}, "Child frame with a less strict required policy should have the stricter value from the parent's policy applied.");
async_test(t => {
var iframe = document.createElement('iframe');
iframe.src = "/document-policy/echo-policy.py?id=3";
iframe.policy = "unoptimized-lossless-images;bpp=0.9";
callbacks["3"] = t.step_func_done(result => {
assert_equals(result, "unoptimized-lossless-images;bpp=0.9");
});
document.body.appendChild(iframe);
}, "Child frame may have a stricter policy than the parent.");
async_test(t => {
var iframe = document.createElement('iframe');
iframe.src = "/document-policy/echo-policy.py?id=4";
iframe.policy = "no-font-display-late-swap";
callbacks["4"] = t.step_func_done(result => {
assert_equals(result, "no-font-display-late-swap, unoptimized-lossless-images;bpp=1.0");
});
document.body.appendChild(iframe);
}, "Any unrelated policy directives should combine with the parent's required policy.");
</script>
</body>
</html>

View file

@ -0,0 +1,2 @@
Document-Policy: unoptimized-lossless-images;bpp=1.1
Require-Document-Policy: unoptimized-lossless-images;bpp=1.0

View file

@ -47,7 +47,7 @@ test(function() {
})
test(function() {
assert_throws_js(TypeError, function() { Event("test") },
'Calling Event constructor without "new" must throw');
'Calling Event constructor without "new" must throw');
})
test(function() {
var ev = new Event("I am an event", { bubbles: true, cancelable: false})

View file

@ -147,7 +147,7 @@ invalid.forEach(function(arg) {
testObj.step(function() {
var doc = getWin(desc).document;
assert_throws_dom("InvalidCharacterError",
function() { doc.createElement(arg) })
function() { doc.createElement(arg) })
});
testObj.done();
});

View file

@ -232,7 +232,7 @@ test(function() {
var el = document.createElement("foo")
for (var i = 0, il = invalid_names.length; i < il; ++i) {
assert_throws_dom("INVALID_CHARACTER_ERR",
function() { el.setAttributeNS("a", invalid_names[i], "fail") })
function() { el.setAttributeNS("a", invalid_names[i], "fail") })
}
}, "When qualifiedName does not match the Name production, an " +
"INVALID_CHARACTER_ERR exception is to be thrown. (setAttributeNS)")
@ -253,8 +253,8 @@ test(function() {
var el = document.createElement("foo")
for (var i = 0, il = invalid_qnames.length; i < il; ++i) {
assert_throws_dom("INVALID_CHARACTER_ERR",
function() { el.setAttributeNS("a", invalid_qnames[i], "fail") },
"Expected exception for " + invalid_qnames[i] + ".")
function() { el.setAttributeNS("a", invalid_qnames[i], "fail") },
"Expected exception for " + invalid_qnames[i] + ".")
}
}, "When qualifiedName does not match the QName production, an " +
"INVALID_CHARACTER_ERR exception is to be thrown.")
@ -272,16 +272,16 @@ test(function() {
test(function() {
var el = document.createElement("foo")
assert_throws_dom("NAMESPACE_ERR",
function() { el.setAttributeNS("", "aa:bb", "fail") })
function() { el.setAttributeNS("", "aa:bb", "fail") })
assert_throws_dom("NAMESPACE_ERR",
function() { el.setAttributeNS(null, "aa:bb", "fail") })
function() { el.setAttributeNS(null, "aa:bb", "fail") })
}, "A namespace is required to use a prefix.")
// Step 5
test(function() {
var el = document.createElement("foo")
assert_throws_dom("NAMESPACE_ERR",
function() { el.setAttributeNS("a", "xml:bb", "fail") })
function() { el.setAttributeNS("a", "xml:bb", "fail") })
}, "The xml prefix should not be allowed for arbitrary namespaces")
test(function() {
var el = document.createElement("foo")
@ -294,12 +294,12 @@ test(function() {
test(function() {
var el = document.createElement("foo")
assert_throws_dom("NAMESPACE_ERR",
function() { el.setAttributeNS("a", "xmlns:bb", "fail") })
function() { el.setAttributeNS("a", "xmlns:bb", "fail") })
}, "The xmlns prefix should not be allowed for arbitrary namespaces")
test(function() {
var el = document.createElement("foo")
assert_throws_dom("NAMESPACE_ERR",
function() { el.setAttributeNS("a", "xmlns", "fail") })
function() { el.setAttributeNS("a", "xmlns", "fail") })
}, "The xmlns qualified name should not be allowed for arbitrary namespaces")
test(function() {
var el = document.createElement("foo")
@ -312,9 +312,9 @@ test(function() {
test(function() {
var el = document.createElement("foo")
assert_throws_dom("NAMESPACE_ERR",
function() { el.setAttributeNS(XMLNS, "a:xmlns", "fail") })
function() { el.setAttributeNS(XMLNS, "a:xmlns", "fail") })
assert_throws_dom("NAMESPACE_ERR",
function() { el.setAttributeNS(XMLNS, "b:foo", "fail") })
function() { el.setAttributeNS(XMLNS, "b:foo", "fail") })
}, "The XMLNS namespace should require xmlns as prefix or qualified name")
test(function() {
var el = document.createElement("foo")

View file

@ -47,7 +47,7 @@ for (const trueValue of [true, 1, {}, [], 'yes']) {
test(() => {
assert_throws_js(RangeError, () => new TextDecoderStream(''),
'the constructor should throw');
'the constructor should throw');
}, 'constructing with an invalid encoding should throw');
test(() => {
@ -58,14 +58,14 @@ test(() => {
test(() => {
assert_throws_js(Error,
() => new TextDecoderStream('utf-8', {
get fatal() { throw new Error(); }
}), 'the constructor should throw');
() => new TextDecoderStream('utf-8', {
get fatal() { throw new Error(); }
}), 'the constructor should throw');
}, 'a throwing fatal member should cause the constructor to throw');
test(() => {
assert_throws_js(Error,
() => new TextDecoderStream('utf-8', {
get ignoreBOM() { throw new Error(); }
}), 'the constructor should throw');
() => new TextDecoderStream('utf-8', {
get ignoreBOM() { throw new Error(); }
}), 'the constructor should throw');
}, 'a throwing ignoreBOM member should cause the constructor to throw');

View file

@ -72,8 +72,8 @@ test(() => {
'♥',
'decode() should decode full sequence');
assert_throws_js(TypeError,
() => decoder.decode(new DataView(bytes.buffer, 0, 2)),
'decode() should throw on incomplete sequence');
() => decoder.decode(new DataView(bytes.buffer, 0, 2)),
'decode() should throw on incomplete sequence');
assert_equals(decoder.decode(new DataView(bytes.buffer, 0, 3)),
'♥',
'decode() should not throw on subsequent call');

View file

@ -12,9 +12,7 @@
let firstInputSeen = false;
let eventSeen = false;
async_test(t => {
if (!window.PerformanceEventTiming)
assert_unreached("PerformanceEventTiming is not supported");
assert_precondition(window.PerformanceEventTiming, 'Event Timing is not supported.');
const validateEntry = t.step_func(entry => {
if (entry.entryType === 'first-input')
firstInputSeen = true;

View file

@ -21,9 +21,7 @@
let timeAfterSecondClick;
let observedEntries = [];
async_test(function(t) {
if (!window.PerformanceEventTiming)
assert_unreached("PerformanceEventTiming is not supported");
assert_precondition(window.PerformanceEventTiming, 'Event Timing is not supported.');
new PerformanceObserver(t.step_func(entryList => {
observedEntries = observedEntries.concat(entryList.getEntries().filter(
entry => entry.name === 'mousedown'));

View file

@ -47,10 +47,8 @@
clickTimeMin.");
}
async_test(async function(t) {
assert_precondition(window.PerformanceEventTiming,
"PerformanceEventTiming is not supported");
promise_test(async t => {
assert_precondition(window.PerformanceEventTiming, "Event Timing is not supported");
clickTimeMin = performance.now();
let observedEntries = false;
const observerPromise = new Promise(resolve => {
@ -84,7 +82,6 @@
t.step(() => {
validateChildFrameEntries(childFrameData);
});
t.done();
}, "Event Timing: entries should only be observable by its own frame.");
</script>

View file

@ -20,9 +20,7 @@
PerformanceObserver should observe one and only one entry.
*/
async_test(function(t) {
if (!window.PerformanceEventTiming)
assert_unreached("PerformanceEventTiming is not supported");
assert_precondition(window.PerformanceEventTiming, 'Event Timing is not supported.');
let hasObservedFirstInput = false;
new PerformanceObserver(t.step_func((entryList) => {
assert_false(hasObservedFirstInput);

View file

@ -18,9 +18,7 @@
delayCalled = true;
}
async_test(function(t) {
if (!window.PerformanceEventTiming)
assert_unreached("PerformanceEventTiming is not supported");
assert_precondition(window.PerformanceEventTiming, 'Event Timing is not supported.');
const observer = new PerformanceObserver(t.step_func_done((entryList) => {
const entries = entryList.getEntries().filter(e => e.name === 'mousedown');
// There must only be one click entry: from the clickAndBlockMain() call.

View file

@ -30,9 +30,7 @@
Validate entries
*/
async_test(function(t) {
if (!window.PerformanceEventTiming) {
assert_unreached('PerformanceEventTiming is not implemented');
}
assert_precondition(window.PerformanceEventTiming, 'Event Timing is not supported.');
new PerformanceObserver(t.step_func_done(() => {
validateEntries();
t.done();

View file

@ -12,9 +12,7 @@
<script>
async_test(function(t) {
if (!window.PerformanceEventTiming)
assert_unreached("PerformanceEventTiming is not supported");
assert_precondition(window.PerformanceEventTiming, 'Event Timing is not supported.');
function testEntries() {
// First callback is not ensured to have the entry.
if (performance.getEntriesByType('first-input').length === 0) {

View file

@ -1,6 +1,7 @@
test(() => {
if (typeof PerformanceObserver.supportedEntryTypes === "undefined")
assert_unreached("supportedEntryTypes is not supported.");
assert_precondition(window.PerformanceEventTiming, 'Event Timing is not supported.');
assert_precondition(typeof PerformanceObserver.supportedEntryTypes !== "undefined",
'supportedEntryTypes is not supported');
const types = PerformanceObserver.supportedEntryTypes;
assert_true(types.includes("first-input"),
"There should be 'first-input' in PerformanceObserver.supportedEntryTypes");

View file

@ -35,9 +35,7 @@
}
async_test(function(t) {
if (!window.PerformanceEventTiming)
assert_unreached("PerformanceEventTiming is not supported");
assert_precondition(window.PerformanceEventTiming, 'Event Timing is not supported.');
new PerformanceObserver(t.step_func_done(entryList => {
const observerCallbackTime = performance.now();
const entries = entryList.getEntries().filter(

View file

@ -10,9 +10,7 @@
<button id='button'>Generate a 'click' event</button>
<script>
async_test(function (t) {
if (!window.PerformanceEventTiming) {
assert_unreached("PerformanceEventTiming is not implemented");
}
assert_precondition(window.PerformanceEventTiming, 'Event Timing is not supported.');
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
const entry = entryList.getEntries()[0];

View file

@ -257,7 +257,7 @@ test(function() {
// Returning duplicate keys from ownKeys() throws a TypeError.
assert_throws_js(TypeError,
function() { var h = new Headers(proxy); });
function() { var h = new Headers(proxy); });
assert_equals(log.length, 2);
// The first thing is the [[Get]] of Symbol.iterator to figure out whether
@ -280,7 +280,7 @@ test(function() {
c: "d" };
var proxy = new Proxy(record, loggingHandler);
assert_throws_js(TypeError,
function() { var h = new Headers(proxy); });
function() { var h = new Headers(proxy); });
assert_equals(log.length, 7);
// The first thing is the [[Get]] of Symbol.iterator to figure out whether

View file

@ -487,8 +487,8 @@ function runGenericSensorTests(sensorName,
];
invalidFreqs.map(freq => {
assert_throws_js(TypeError,
() => { new sensorType({frequency: freq}) },
`when freq is ${freq}`);
() => { new sensorType({frequency: freq}) },
`when freq is ${freq}`);
});
}, `${sensorName}: throw 'TypeError' if frequency is invalid.`);
@ -539,8 +539,8 @@ function runGenericSensorTests(sensorName,
];
invalidRefFrames.map(refFrame => {
assert_throws_js(TypeError,
() => { new sensorType({referenceFrame: refFrame}) },
`when refFrame is ${refFrame}`);
() => { new sensorType({referenceFrame: refFrame}) },
`when refFrame is ${refFrame}`);
});
}, `${sensorName}: throw 'TypeError' if referenceFrame is not one of\
enumeration values.`);

View file

@ -223,9 +223,9 @@ addTest(function(win) {
} else {
assert_throws_dom("SecurityError", function() { win[prop]; }, "Should throw when accessing " + String(prop) + " on Window");
assert_throws_dom("SecurityError", function() { Object.getOwnPropertyDescriptor(win, prop); },
"Should throw when accessing property descriptor for " + prop + " on Window");
"Should throw when accessing property descriptor for " + prop + " on Window");
assert_throws_dom("SecurityError", function() { Object.prototype.hasOwnProperty.call(win, prop); },
"Should throw when invoking hasOwnProperty for " + prop + " on Window");
"Should throw when invoking hasOwnProperty for " + prop + " on Window");
}
if (prop != 'location')
assert_throws_dom("SecurityError", function() { win[prop] = undefined; }, "Should throw when writing to " + prop + " on Window");
@ -246,14 +246,14 @@ addTest(function(win) {
Object.getOwnPropertyDescriptor(win.location, prop); // Shouldn't throw.
assert_true(Object.prototype.hasOwnProperty.call(win.location, prop), "hasOwnProperty for " + prop);
assert_throws_dom("SecurityError", function() { win.location[prop] },
"Should throw reading href on Location");
"Should throw reading href on Location");
}
else {
assert_throws_dom("SecurityError", function() { win.location[prop]; }, "Should throw when accessing " + prop + " on Location");
assert_throws_dom("SecurityError", function() { Object.getOwnPropertyDescriptor(win.location, prop); },
"Should throw when accessing property descriptor for " + prop + " on Location");
"Should throw when accessing property descriptor for " + prop + " on Location");
assert_throws_dom("SecurityError", function() { Object.prototype.hasOwnProperty.call(win.location, prop); },
"Should throw when invoking hasOwnProperty for " + prop + " on Location");
"Should throw when invoking hasOwnProperty for " + prop + " on Location");
assert_throws_dom("SecurityError", function() { win.location[prop] = undefined; }, "Should throw when writing to " + prop + " on Location");
}
}
@ -279,7 +279,7 @@ addPromiseTest(async function(win, test_obj) {
} else if (!allowedlists.methods.includes(prop)) {
for (let args of methodArgs.get(prop) || [[]]) {
assert_throws_dom("SecurityError", desc.value.bind(otherObj, ...args),
`Should throw when calling ${objName}.${prop} with cross-origin this object`);
`Should throw when calling ${objName}.${prop} with cross-origin this object`);
}
} else {
@ -294,7 +294,7 @@ addPromiseTest(async function(win, test_obj) {
desc.get.call(otherObj); // Shouldn't throw.
} else {
assert_throws_dom("SecurityError", desc.get.bind(otherObj),
`Should throw when calling ${objName}.${prop} getter with cross-origin this object`);
`Should throw when calling ${objName}.${prop} getter with cross-origin this object`);
}
}
if (desc.set) {
@ -302,7 +302,7 @@ addPromiseTest(async function(win, test_obj) {
desc.set.call(otherObj, "javascript:undefined"); // Shouldn't throw.
} else {
assert_throws_dom("SecurityError", desc.set.bind(otherObj, "foo"),
`Should throw when calling ${objName}.${prop} setter with cross-origin this object`);
`Should throw when calling ${objName}.${prop} setter with cross-origin this object`);
}
}
}
@ -376,9 +376,9 @@ addTest(function(win) {
*/
addTest(function(win) {
assert_throws_js(TypeError, function() { Object.preventExtensions(win) },
"preventExtensions on cross-origin Window should throw");
"preventExtensions on cross-origin Window should throw");
assert_throws_js(TypeError, function() { Object.preventExtensions(win.location) },
"preventExtensions on cross-origin Location should throw");
"preventExtensions on cross-origin Location should throw");
}, "[[PreventExtensions]] should throw for cross-origin objects");
/*

View file

@ -37,7 +37,7 @@ dsl_test(['a', 'b', 'c'], (t, dsl) => {
assert_equals(dsl.item(3), null, 'item method out of range');
assert_equals(dsl.item(-1), null, 'item method out of range');
assert_throws_js(TypeError, () => dsl.item(),
'item method should throw if called without enough args');
'item method should throw if called without enough args');
}, 'DOMStringList: item() method');
dsl_test(['a', 'b', 'c'], (t, dsl) => {

View file

@ -31,7 +31,7 @@ var testElements = [
types: [],
testData: [
{conditions: {message: "My custom error"}, expected: true, name: "[target] The validity.customError must be true if the custom validity error message is not empty"},
{conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false i the custom validity error message is empty"}
{conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false if the custom validity error message is empty"}
]
},
{

View file

@ -1,77 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>summary element: clicking on anchor containing inline element</title>
<link rel="author" title="Yu Han" href="mailto:yuzhehan@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/C/#the-summary-element">
<link rel="help" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<details id="details_i">
<summary>Anchor text is wrapped with &lt;i&gt; tag <a href="#with_i_tag"><i id="with_i">permalink</i></a></summary>
<p>asdf</p>
</details>
<details id="details_span">
<summary>This one uses &lt;span&gt;. <a href="#with_span_tag"><span id="with_span">permalink</span></a></summary>
<p>asdf</p>
</details>
<details id="details_svg">
<summary>
<svg style="width: 100px;" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<a href="#inside_svg_w_circle">
<circle id="svg_circle" cx="50" cy="40" r="35"/>
</a>
<a href="#inside_svg_w_text">
<text id="svg_text" x="50" y="90" text-anchor="middle">
&lt;circle&gt;
</text>
</a>
</svg>
</summary>
<p>asdf</p>
</details>
<script>
function testClickingOnInlineElement(detailsId, targetId, expected, testName) {
const details = document.getElementById(detailsId);
const target = document.getElementById(targetId);
const test = async_test(testName);
const promise = new Promise((resolve, reject) => {
window.onhashchange = test.step_func_done(() => {
assert_false(details.open);
assert_true(location.hash === expected);
resolve();
});
});
if (target.click) {
target.click();
}
else {
// svg element don't have click method
target.dispatchEvent(new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
}));
}
return promise;
};
async function testAll() {
try {
await testClickingOnInlineElement("details_i", "with_i", "#with_i_tag", "Expected <a> containing <i> to navigate");
await testClickingOnInlineElement("details_span", "with_span", "#with_span_tag", "Expected <a> containing <span> to navigate");
await testClickingOnInlineElement("details_svg", "svg_circle", "#inside_svg_w_circle", "Expected <a>, inside svg, containing <circle> to navigate");
await testClickingOnInlineElement("details_svg", "svg_text", "#inside_svg_w_text", "Expected <a>, inside svg, containing <text> to navigate");
} catch (exception) {
assert_unreached("should NOT-THROW exception");
}
};
var allTests = async_test("Clicking on anchor with embedded inline element should navigate instead of opening details");
testAll().then(()=>{ allTests.done(); });
</script>

View file

@ -17,10 +17,10 @@ test(function() {
// No promise is passed.
assert_throws_js(TypeError,
function() {
new PromiseRejectionEvent('eventType', { bubbles: false });
},
'Cannot construct PromiseRejectionEventInit without promise');
function() {
new PromiseRejectionEvent('eventType', { bubbles: false });
},
'Cannot construct PromiseRejectionEventInit without promise');
// bubbles is passed.
assert_equals(new PromiseRejectionEvent('eventType', { bubbles: false, promise: p }).bubbles, false);

View file

@ -229,7 +229,8 @@ interface RTCPeerConnectionIceErrorEvent : Event {
};
dictionary RTCPeerConnectionIceErrorEventInit : EventInit {
DOMString hostCandidate;
DOMString? address;
unsigned short? port;
DOMString url;
required unsigned short errorCode;
USVString statusText;

View file

@ -10,32 +10,35 @@
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
async_test(async function(t) {
assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
promise_test(async t => {
assert_precondition(window.LayoutShift, 'Layout Instability is not supported.');
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
const startTime = performance.now();
new PerformanceObserver(t.step_func_done(list => {
const endTime = performance.now();
assert_equals(list.getEntries().length, 1);
const entry = list.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime);
assert_less_than_equal(entry.startTime, endTime);
assert_equals(entry.duration, 0.0);
// The layout shift value should be:
// 300 * (100 + 60) * (60 / maxDimension) / viewport size.
assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
return new Promise(resolve => {
new PerformanceObserver(t.step_func(list => {
const endTime = performance.now();
assert_equals(list.getEntries().length, 1);
const entry = list.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime);
assert_less_than_equal(entry.startTime, endTime);
assert_equals(entry.duration, 0.0);
// The layout shift value should be:
// 300 * (100 + 60) * (60 / maxDimension) / viewport size.
assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
// The entry should not be available via getEntries* methods.
assert_equals(performance.getEntriesByType('layout-shift').length, 0, 'getEntriesByType should have no layout-shift entries');
assert_equals(performance.getEntriesByName('', 'layout-shift').length, 0, 'getEntriesByName should have no layout-shift entries');
assert_equals(performance.getEntries().filter(e => e.entryType === 'layout-shift').length, 0, 'getEntries should have no layout-shift entries');
})).observe({type: 'layout-shift'});
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
// The entry should not be available via getEntries* methods.
assert_equals(performance.getEntriesByType('layout-shift').length, 0, 'getEntriesByType should have no layout-shift entries');
assert_equals(performance.getEntriesByName('', 'layout-shift').length, 0, 'getEntriesByName should have no layout-shift entries');
assert_equals(performance.getEntries().filter(e => e.entryType === 'layout-shift').length, 0, 'getEntries should have no layout-shift entries');
resolve();
})).observe({type: 'layout-shift'});
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
});
}, 'Layout shift before onload is not buffered into the performance timeline.');
</script>

View file

@ -10,29 +10,32 @@
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
async_test(async function(t) {
assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
promise_test(async t => {
assert_precondition(window.LayoutShift, 'Layout Instability is not supported.');
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
const startTime = performance.now();
// First observer creates second in callback to ensure the entry has been dispatched by the time
// the second observer begins observing.
new PerformanceObserver(() => {
const endTime = performance.now();
// Second observer requires 'buffered: true' to see entries.
new PerformanceObserver(t.step_func_done(list => {
assert_equals(list.getEntries().length, 1);
const entry = list.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_greater_than_equal(entry.startTime, startTime);
assert_less_than_equal(entry.startTime, endTime);
assert_equals(entry.duration, 0.0);
assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
})).observe({'type': 'layout-shift', buffered: true});
}).observe({type: 'layout-shift'});
// Modify the position of the div to cause a layout-shift entry.
document.getElementById('myDiv').style = "top: 60px";
return new Promise(resolve => {
// First observer creates second in callback to ensure the entry has been dispatched by the time
// the second observer begins observing.
new PerformanceObserver(() => {
const endTime = performance.now();
// Second observer requires 'buffered: true' to see entries.
new PerformanceObserver(t.step_func(list => {
assert_equals(list.getEntries().length, 1);
const entry = list.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_greater_than_equal(entry.startTime, startTime);
assert_less_than_equal(entry.startTime, endTime);
assert_equals(entry.duration, 0.0);
assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
resolve();
})).observe({'type': 'layout-shift', buffered: true});
}).observe({type: 'layout-shift'});
// Modify the position of the div to cause a layout-shift entry.
document.getElementById('myDiv').style = "top: 60px";
});
}, 'PerformanceObserver with buffered flag sees previous layout-shift entry.');
</script>
</body>

View file

@ -21,36 +21,39 @@
<script>
let timeAfterClick;
async_test(async function(t) {
assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
promise_test(async t => {
assert_precondition(window.LayoutShift, 'Layout Instability is not supported.');
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
const startTime = performance.now();
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
const endTime = performance.now();
assert_equals(entryList.getEntries().length, 1);
const entry = entryList.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime);
assert_less_than_equal(entry.startTime, endTime);
assert_equals(entry.duration, 0.0);
// The layout shift value should be:
// 300 * (100 + 60) * (60 / maxDimension) / viewport size.
assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
// We should see that there was a click input entry.
assert_equals(entry.hadRecentInput, true);
assert_greater_than_equal(timeAfterClick, entry.lastInputTime);
})
);
observer.observe({entryTypes: ['layout-shift']});
// User input event
clickAndBlockMain('button').then(() => {
timeAfterClick = performance.now();
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
return new Promise(resolve => {
const observer = new PerformanceObserver(
t.step_func(entryList => {
const endTime = performance.now();
assert_equals(entryList.getEntries().length, 1);
const entry = entryList.getEntries()[0];
assert_equals(entry.entryType, "layout-shift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime);
assert_less_than_equal(entry.startTime, endTime);
assert_equals(entry.duration, 0.0);
// The layout shift value should be:
// 300 * (100 + 60) * (60 / maxDimension) / viewport size.
assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
// We should see that there was a click input entry.
assert_equals(entry.hadRecentInput, true);
assert_greater_than_equal(timeAfterClick, entry.lastInputTime);
resolve();
})
);
observer.observe({entryTypes: ['layout-shift']});
// User input event
clickAndBlockMain('button').then(() => {
timeAfterClick = performance.now();
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
});
});
}, 'Layout shift right after user input is observable via PerformanceObserver.');
</script>

View file

@ -7,8 +7,9 @@
<script src="/resources/testharnessreport.js"></script>
<script>
test(() => {
if (typeof PerformanceObserver.supportedEntryTypes === "undefined")
assert_unreached("supportedEntryTypes is not supported.");
assert_precondition(window.LayoutShift, 'Layout Instability is not supported.');
assert_precondition(typeof PerformanceObserver.supportedEntryTypes !== "undefined",
'supportedEntryTypes is not supported.');
assert_greater_than(PerformanceObserver.supportedEntryTypes.indexOf("layout-shift"), -1,
"There should be an entry 'layout-shift' in PerformanceObserver.supportedEntryTypes");
}, "supportedEntryTypes contains 'layoutShift'.");

View file

@ -10,36 +10,39 @@
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
async_test(async function(t) {
assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
promise_test(async t => {
assert_precondition(window.LayoutShift, 'Layout Instability is not supported.');
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
const entry = entryList.getEntries()[0];
assert_equals(typeof(entry.toJSON), 'function');
const json = entry.toJSON();
assert_equals(typeof(json), 'object');
const keys = [
// PerformanceEntry
'name',
'entryType',
'startTime',
'duration',
// LayoutShift
'value',
'hadRecentInput',
'lastInputTime',
];
for (const key of keys) {
assert_equals(json[key], entry[key],
'LayoutShift ${key} entry does not match its toJSON value');
}
})
);
observer.observe({type: 'layout-shift'});
document.getElementById('myDiv').style = "top: 60px";
return new Promise(resolve => {
const observer = new PerformanceObserver(
t.step_func(entryList => {
const entry = entryList.getEntries()[0];
assert_equals(typeof(entry.toJSON), 'function');
const json = entry.toJSON();
assert_equals(typeof(json), 'object');
const keys = [
// PerformanceEntry
'name',
'entryType',
'startTime',
'duration',
// LayoutShift
'value',
'hadRecentInput',
'lastInputTime',
];
for (const key of keys) {
assert_equals(json[key], entry[key],
`LayoutShift ${key} entry does not match its toJSON value`);
}
resolve();
})
);
observer.observe({type: 'layout-shift'});
document.getElementById('myDiv').style = "top: 60px";
});
}, 'Test toJSON() in LayoutShift.');
</script>
</body>

View file

@ -33,10 +33,10 @@ function mediaTest(mime) {
var sourceBuffer = mediaSource.addSourceBuffer(mime);
mediaSource.removeSourceBuffer(sourceBuffer);
assert_throws_dom('InvalidStateError',
function() {
sourceBuffer.abort();
},
'SourceBuffer#abort() after removing the SourceBuffer object');
function() {
sourceBuffer.abort();
},
'SourceBuffer#abort() after removing the SourceBuffer object');
}), false);
var video = document.createElement('video');
video.src = window.URL.createObjectURL(mediaSource);

View file

@ -33,10 +33,10 @@ function mediaTest(mime) {
var sourceBuffer = mediaSource.addSourceBuffer(mime);
assert_equals(sourceBuffer.updating, false, "SourceBuffer.updating is false");
assert_throws_js(TypeError,
function() {
sourceBuffer.mode = "segments";
},
'SourceBuffer#mode with generate timestamps flag true');
function() {
sourceBuffer.mode = "segments";
},
'SourceBuffer#mode with generate timestamps flag true');
}), false);
var video = document.createElement('video');
video.src = window.URL.createObjectURL(mediaSource);

View file

@ -44,8 +44,8 @@
{
mediaSource.removeSourceBuffer(sourceBuffer);
assert_throws_dom("InvalidStateError",
function() { sourceBuffer.trackDefaults = new TrackDefaultList([]); },
"Exception thrown when setting trackDefaults on SourceBuffer that is removed from MediaSource");
function() { sourceBuffer.trackDefaults = new TrackDefaultList([]); },
"Exception thrown when setting trackDefaults on SourceBuffer that is removed from MediaSource");
test.done();
}, "Test setting trackDefaults on an already-removed SourceBuffer");
@ -57,8 +57,8 @@
assert_true(sourceBuffer.updating, "SourceBuffer is updating");
assert_throws_dom("InvalidStateError",
function() { sourceBuffer.trackDefaults = new TrackDefaultList([]); },
"Exception thrown when setting trackDefaults on SourceBuffer that is updating");
function() { sourceBuffer.trackDefaults = new TrackDefaultList([]); },
"Exception thrown when setting trackDefaults on SourceBuffer that is updating");
test.waitForExpectedEvents(function()
{

View file

@ -62,10 +62,10 @@ var testAudio = async_test(function() {
assert_equals(stream.getAudioTracks().length, 1);
assert_equals(stream.getVideoTracks().length, 0);
assert_throws_dom("NotSupportedError",
function() {
var capturer = new ImageCapture(stream.getAudioTracks()[0]);
},
'an ImageCapturer can only be created from a video track');
function() {
var capturer = new ImageCapture(stream.getAudioTracks()[0]);
},
'an ImageCapturer can only be created from a video track');
this.done();
}))
@ -83,12 +83,12 @@ var testParameter = test(function() {
true
];
assert_throws_js(TypeError,
function() { var capturer = new ImageCapture(); },
'an ImageCapturer can not be created with no parameter');
function() { var capturer = new ImageCapture(); },
'an ImageCapturer cannot be created with no parameter');
invalidParameters.map(parameter => {
assert_throws_js(TypeError,
function() { var capturer = new ImageCapture(parameter); },
`an ImageCapturer can not be created with a ${parameter} parameter`);
function() { var capturer = new ImageCapture(parameter); },
`an ImageCapturer cannot be created with a ${parameter} parameter`);
});
}, 'throw "TypeError" if parameter is not MediaStreamTrack.');

Some files were not shown because too many files have changed in this diff Show more