Update web-platform-tests to revision 527a9287825118957bb7d94c098c448cef9d6982

This commit is contained in:
WPT Sync Bot 2020-01-08 08:23:30 +00:00
parent b876168721
commit ed25f52f43
289 changed files with 4880 additions and 2539 deletions

View file

@ -7,7 +7,7 @@
expected: FAIL
[Opening a blob URL in a new window immediately before revoking it works.]
expected: FAIL
expected: TIMEOUT
[Opening a blob URL in a noopener about:blank window immediately before revoking it works.]
expected: FAIL

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,6 @@
[historical.any.html]
[historical.any.worker.html]
[historical.any.sharedworker.html]
expected: ERROR

View file

@ -0,0 +1,2 @@
[text-decoration-subelements-001.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[text-decoration-subelements-002.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[resize-change-margin.html]
expected: TIMEOUT

View file

@ -1,4 +0,0 @@
[CaretPosition-001.html]
[Element at (400, 100)]
expected: FAIL

View file

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

View file

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

View file

@ -16,3 +16,6 @@
[Embedded credentials matching the top-level are not treated as network errors for relative URLs.]
expected: TIMEOUT
[Embedded credentials matching the top-level are not treated as network errors for same-origin URLs.]
expected: TIMEOUT

View file

@ -0,0 +1,4 @@
[traverse_the_history_1.html]
[Multiple history traversals from the same task]
expected: FAIL

View file

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

View file

@ -0,0 +1,8 @@
[structured-cloning-error-extra.html]
expected: ERROR
[Throwing name getter fails serialization]
expected: FAIL
[Errors sent across realms should preserve their type]
expected: TIMEOUT

View file

@ -48,3 +48,6 @@
[SyntaxError objects can be cloned]
expected: FAIL
[URIError objects from other realms are treated as URIError]
expected: FAIL

View file

@ -1,20 +1,16 @@
[supported-elements.html]
expected: TIMEOUT
[Contenteditable element should support autofocus]
expected: FAIL
[Element with tabindex should support autofocus]
expected: TIMEOUT
expected: FAIL
[Host element with delegatesFocus including no focusable descendants should be skipped]
expected: NOTRUN
expected: FAIL
[Area element should support autofocus]
expected: NOTRUN
expected: FAIL
[Host element with delegatesFocus should support autofocus]
expected: NOTRUN
[Non-HTMLElement should not support autofocus]
expected: NOTRUN
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

@ -108,3 +108,87 @@
[[INPUT in URL status\] The value attribute mismatches the pattern attribute even when a subset matches]
expected: FAIL
[[INPUT in PASSWORD status\] The pattern attribute uses Unicode features]
expected: FAIL
[[INPUT in URL status\] The pattern attribute tries to escape a group]
expected: FAIL
[[INPUT in TEXT status\] Invalid regular expression gets ignored]
expected: FAIL
[[INPUT in TEXT status\] The pattern attribute uses Unicode features]
expected: FAIL
[[INPUT in EMAIL status\] The value attribute mismatches the pattern attribute, if multiple is present]
expected: FAIL
[[INPUT in EMAIL status\] The pattern attribute tries to escape a group]
expected: FAIL
[[INPUT in EMAIL status\] Commas should be stripped from regex input, if multiple is present]
expected: FAIL
[[INPUT in EMAIL status\] The pattern attribute is not set, if multiple is present]
expected: FAIL
[[INPUT in PASSWORD status\] Invalid regular expression gets ignored]
expected: FAIL
[[INPUT in SEARCH status\] The pattern attribute tries to escape a group]
expected: FAIL
[[INPUT in EMAIL status\] The pattern attribute uses Unicode features, if multiple is present]
expected: FAIL
[[INPUT in TEL status\] Invalid regular expression gets ignored]
expected: FAIL
[[INPUT in EMAIL status\] Invalid regular expression gets ignored, if multiple is present]
expected: FAIL
[[INPUT in TEXT status\] The pattern attribute tries to escape a group]
expected: FAIL
[[INPUT in EMAIL status\] The value attibute is empty string, if multiple is present]
expected: FAIL
[[INPUT in TEL status\] The pattern attribute uses Unicode features]
expected: FAIL
[[INPUT in EMAIL status\] The value attribute mismatches the pattern attribute even when a subset matches, if multiple is present]
expected: FAIL
[[INPUT in TEL status\] The pattern attribute tries to escape a group]
expected: FAIL
[[INPUT in SEARCH status\] Invalid regular expression gets ignored]
expected: FAIL
[[INPUT in SEARCH status\] The pattern attribute uses Unicode features]
expected: FAIL
[[INPUT in PASSWORD status\] The pattern attribute tries to escape a group]
expected: FAIL
[[INPUT in URL status\] Invalid regular expression gets ignored]
expected: FAIL
[[INPUT in EMAIL status\] The value(ABC) in unicode attribute matches the pattern attribute, if multiple is present]
expected: FAIL
[[INPUT in URL status\] The pattern attribute uses Unicode features]
expected: FAIL
[[INPUT in EMAIL status\] Invalid regular expression gets ignored]
expected: FAIL
[[INPUT in EMAIL status\] The pattern attribute tries to escape a group, if multiple is present]
expected: FAIL
[[INPUT in EMAIL status\] The value attribute matches the pattern attribute, if multiple is present]
expected: FAIL
[[INPUT in EMAIL status\] The pattern attribute uses Unicode features]
expected: FAIL

View file

@ -285,3 +285,12 @@
[[select\] Must be barred from the constraint validation]
expected: FAIL
[[INPUT in COLOR status\] Must be not barred from the constraint validation even if it is readonly]
expected: FAIL
[[INPUT in FILE status\] Must be not barred from the constraint validation even if it is readonly]
expected: FAIL
[[INPUT in SUBMIT status\] Must be not barred from the constraint validation even if it is readonly]
expected: FAIL

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,4 +1,5 @@
[crossorigin-sandwich-TAO.sub.html]
expected: ERROR
[There should be one entry.]
expected: FAIL

View file

@ -1,4 +1,5 @@
[005.html]
expected: ERROR
[dedicated worker in shared worker in dedicated worker]
expected: FAIL

View file

@ -0,0 +1,18 @@
// META: global=window,dedicatedworker,sharedworker
//
// Do not run this in a service worker as that's always in a secure context
test(() => {
assert_equals(self.crypto.subtle, undefined);
assert_false("subtle" in self.crypto);
}, "Non-secure context window does not have access to crypto.subtle");
test(() => {
assert_equals(self.SubtleCrypto, undefined);
assert_false("SubtleCrypto" in self);
}, "Non-secure context window does not have access to SubtleCrypto")
test(() => {
assert_equals(self.CryptoKey, undefined);
assert_false("CryptoKey" in self);
}, "Non-secure context window does not have access to CryptoKey")

View file

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<script>
async_test(function(t) {
assert_true(typeof crypto.subtle === 'undefined');
t.done();
}, "Non-secure context window does not have access to crypto.subtle");
async_test(function(t) {
var w = new Worker('../util/worker-report-crypto-subtle-presence.js');
w.onmessage = t.step_func(function (e) {
if (e.data.msg_type == 'subtle_crypto_found') {
assert_equals(e.data.msg_value, false);
t.done();
}
});
}, "Non-secure context worker does not have access to crypto.subtle");
</script>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/cookies/resources/cookie-helper.sub.js"></script>
</head>
<body>
<script>
//
// Set-Cookie: a=b; Path=/; Domain=.{{host}}
// Set-Cookie: a=c; Path=/; Domain={{host}}
//
test(t => {
assert_dom_cookie("a", "c", true);
}, "Domain=.{{host}} => Second value available via `document.cookie`");
async_test(t => {
fetch("/cookies/resources/list.py", { credentials: "include" })
.then(t.step_func(r => r.json()))
.then(t.step_func_done(r => {
assert_equals(r["a"], "c");
}))
.catch(_ => assert_unreached);
}, "Domain=.{{host}} => Second value sent with same-origin requests.");
async_test(t => {
fetch(`${SECURE_SUBDOMAIN_ORIGIN}/cookies/resources/list.py`, { credentials: "include" })
.then(t.step_func(r => r.json()))
.then(t.step_func_done(r => {
assert_equals(r["a"], "c");
}))
.catch(_ => assert_unreached);
}, "Domain=.{{host}} => Second value sent with subdomain requests.");
</script>
</body>

View file

@ -0,0 +1,2 @@
Set-Cookie: a=b; Path=/; Domain=.{{host}}
Set-Cookie: a=c; Path=/; Domain={{host}}

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/cookies/resources/cookie-helper.sub.js"></script>
</head>
<body>
<script>
//
// Set-Cookie: a=b; Path=/; Domain=.{{host}}
//
test(t => {
assert_dom_cookie("a", "b", true);
}, "Domain=.{{host}} => available via `document.cookie`");
async_test(t => {
fetch("/cookies/resources/list.py", { credentials: "include" })
.then(t.step_func(r => r.json()))
.then(t.step_func_done(r => {
assert_equals(r["a"], "b");
}))
.catch(_ => assert_unreached);
}, "Domain=.{{host}} => sent with same-origin requests.");
async_test(t => {
fetch(`${SECURE_SUBDOMAIN_ORIGIN}/cookies/resources/list.py`, { credentials: "include" })
.then(t.step_func(r => r.json()))
.then(t.step_func_done(r => {
assert_equals(r["a"], "b");
}))
.catch(_ => assert_unreached);
}, "Domain=.{{host}} => sent with subdomain requests.");
</script>
</body>

View file

@ -0,0 +1 @@
Set-Cookie: a=b; Path=/; Domain=.{{host}}

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/cookies/resources/cookie-helper.sub.js"></script>
</head>
<body>
<script>
//
// Set-Cookie: a=b; Path=/; Domain={{host}}
//
test(t => {
assert_dom_cookie("a", "b", true);
}, "Domain={{host}} => available via `document.cookie`");
async_test(t => {
fetch("/cookies/resources/list.py", { credentials: "include" })
.then(t.step_func(r => r.json()))
.then(t.step_func_done(r => {
assert_equals(r["a"], "b");
}))
.catch(_ => assert_unreached);
}, "Domain={{host}} => sent with same-origin requests.");
async_test(t => {
fetch(`${SECURE_SUBDOMAIN_ORIGIN}/cookies/resources/list.py`, { credentials: "include" })
.then(t.step_func(r => r.json()))
.then(t.step_func_done(r => {
assert_equals(r["a"], "b");
}))
.catch(_ => assert_unreached);
}, "Domain={{host}} => sent with subdomain requests.");
</script>
</body>

View file

@ -0,0 +1 @@
Set-Cookie: a=b; Path=/; Domain={{host}}

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/cookies/resources/cookie-helper.sub.js"></script>
</head>
<body>
<script>
//
// Set-Cookie: a=b; Path=/
//
test(t => {
assert_dom_cookie("a", "b", true);
}, "No domain attribute => available via `document.cookie`");
async_test(t => {
fetch("/cookies/resources/list.py", { credentials: "include" })
.then(t.step_func(r => r.json()))
.then(t.step_func_done(r => {
assert_equals(r["a"], "b");
}))
.catch(_ => assert_unreached);
}, "No domain attribute => sent with same-origin requests.");
async_test(t => {
fetch(`${SECURE_SUBDOMAIN_ORIGIN}/cookies/resources/list.py`, { credentials: "include" })
.then(t.step_func(r => r.json()))
.then(t.step_func_done(r => {
assert_equals(r["a"], undefined);
}))
.catch(_ => assert_unreached);
}, "No domain attribute => not sent with subdomain requests.");
</script>
</body>

View file

@ -0,0 +1 @@
Set-Cookie: a=b; Path=/

View file

@ -0,0 +1,15 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: initial computed value of content for elements is not none</title>
<link rel="help" href="https://drafts.csswg.org/css-content/#content-property">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1605803">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(function() {
assert_equals(getComputedStyle(document.documentElement, "::before").content, "none");
assert_not_equals(getComputedStyle(document.documentElement).content, "none");
}, "initial computed value of content for elements is not none");
</script>

View file

@ -85,21 +85,21 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
done();
});
</script>

View file

@ -31,7 +31,7 @@ setup({explicit_done: true});
document.fonts.ready.then(()=> {
// Single values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
@ -77,13 +77,13 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
done();
});
</script>

View file

@ -77,47 +77,47 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "none", "none");
done();
});
</script>

View file

@ -65,19 +65,19 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
done();
});
</script>

View file

@ -4,7 +4,7 @@
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values">
<meta name="flags" content="ahem dom">
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid.">
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' don't include implicitly created tracks in an inline grid.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
@ -17,6 +17,7 @@
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
position: relative;
}
.fifthColumn {
@ -58,50 +59,218 @@
</div>
<script>
function testSizeAndPositionOfItems(gridId, expectedItemData) {
let grid = document.getElementById(gridId);
assert_equals(grid.childElementCount, expectedItemData.length, "childElementCount");
let props = ["offsetWidth", "offsetTop", "offsetHeight"];
for (let i = 0; i < expectedItemData.length; ++i)
for (let prop of props)
assert_equals(grid.children[i][prop], expectedItemData[i][prop], "children[" + i + "]." + prop);
}
function testGrid(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, expectedItemData) {
TestingUtils.testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue);
test(function() {
testSizeAndPositionOfItems(gridId, expectedItemData);
}, "Children of '" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";");
}
setup({explicit_done: true});
document.fonts.ready.then(()=> {
// Valid values.
TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
testGrid("grid", "", "", "none", "none", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 20},
]);
testGrid("grid", "auto auto", "", "100px 110px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 10, offsetHeight: 20},
]);
testGrid("grid", "60px", "", "60px", "none", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 40, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "", "100px 60px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 20, offsetHeight: 20},
]);
testGrid("grid", "", "50px", "none", "50px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
]);
testGrid("grid", "", "50px 30px", "none", "50px 30px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 20},
]);
testGrid("grid", "60px", "50px", "60px", "50px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 70, offsetHeight: 20},
]);
testGrid("grid", "60px", "50px 30px", "60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "50px", "100px 60px", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
]);
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
testGrid("gridItemsPositions", "", "", "none", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 30, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px", "", "60px", "none", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px 50px", "", "60px 50px", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "", "60px", "none", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "", "60px 50px", "none", "60px 50px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 110, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 50},
]);
testGrid("gridItemsPositions", "60px", "60px", "60px", "60px", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px", "60px 50px", "60px", "60px 50px", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
]);
testGrid("gridItemsPositions", "60px 50px", "60px", "60px 50px", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px 50px", "60px 50px", "60px 50px", "60px 50px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
testGrid("gridAutoFlowColumn", "", "", "none", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "", "auto auto", "none", "20px 10px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "60px", "", "60px", "none", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "", "100px 60px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "", "50px", "none", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "", "50px 30px", "none", "50px 30px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "60px", "50px", "60px", "50px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "60px", "50px 30px", "60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
testGrid("gridAutoFlowColumnItemsPositions", "", "", "none", "none", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "", "60px", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "", "60px 70px", "none", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "", "60px", "none", "60px", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "", "60px 70px", "none", "60px 70px", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 130, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px", "60px", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", "60px", "60px 70px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", "60px 70px", "60px", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", "60px 70px", "60px 70px", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
]);
done();
});
</script>

View file

@ -85,21 +85,21 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
done();
});
</script>

View file

@ -31,7 +31,7 @@ setup({explicit_done: true});
document.fonts.ready.then(()=> {
// Single values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
@ -77,13 +77,13 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
done();
});
</script>

View file

@ -77,47 +77,47 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "none", "none");
done();
});
</script>

View file

@ -65,19 +65,19 @@ document.fonts.ready.then(()=> {
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
done();
});
</script>

View file

@ -4,7 +4,7 @@
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values">
<meta name="flags" content="ahem dom">
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created.">
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' don't include implicitly created tracks.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/testing-utils.js"></script>
@ -17,6 +17,7 @@
font: 10px/1 Ahem;
justify-content: start;
align-content: start;
position: relative;
}
.fifthColumn {
@ -58,50 +59,218 @@
</div>
<script>
function testSizeAndPositionOfItems(gridId, expectedItemData) {
let grid = document.getElementById(gridId);
assert_equals(grid.childElementCount, expectedItemData.length, "childElementCount");
let props = ["offsetWidth", "offsetTop", "offsetHeight"];
for (let i = 0; i < expectedItemData.length; ++i)
for (let prop of props)
assert_equals(grid.children[i][prop], expectedItemData[i][prop], "children[" + i + "]." + prop);
}
function testGrid(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, expectedItemData) {
TestingUtils.testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue);
test(function() {
testSizeAndPositionOfItems(gridId, expectedItemData);
}, "Children of '" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";");
}
setup({explicit_done: true});
document.fonts.ready.then(()=> {
// Valid values.
TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
testGrid("grid", "", "", "none", "none", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 20},
]);
testGrid("grid", "auto auto", "", "100px 110px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 10, offsetHeight: 20},
]);
testGrid("grid", "60px", "", "60px", "none", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 40, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "", "100px 60px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 20, offsetHeight: 20},
]);
testGrid("grid", "", "50px", "none", "50px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
]);
testGrid("grid", "", "50px 30px", "none", "50px 30px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 20},
]);
testGrid("grid", "60px", "50px", "60px", "50px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 70, offsetHeight: 20},
]);
testGrid("grid", "60px", "50px 30px", "60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "50px", "100px 60px", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 20},
]);
testGrid("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
]);
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
testGrid("gridItemsPositions", "", "", "none", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 30, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px", "", "60px", "none", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px 50px", "", "60px 50px", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "", "60px", "none", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "", "60px 50px", "none", "60px 50px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 110, offsetHeight: 10},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 50},
]);
testGrid("gridItemsPositions", "60px", "60px", "60px", "60px", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px", "60px 50px", "60px", "60px 50px", [
{offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
]);
testGrid("gridItemsPositions", "60px 50px", "60px", "60px 50px", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
]);
testGrid("gridItemsPositions", "60px 50px", "60px 50px", "60px 50px", "60px 50px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
testGrid("gridAutoFlowColumn", "", "", "none", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "", "auto auto", "none", "20px 10px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "60px", "", "60px", "none", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "", "100px 60px", "none", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumn", "", "50px", "none", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "", "50px 30px", "none", "50px 30px", [
{offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "60px", "50px", "60px", "50px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "60px", "50px 30px", "60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px", "50px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
]);
testGrid("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
{offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
{offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
{offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
testGrid("gridAutoFlowColumnItemsPositions", "", "", "none", "none", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "", "60px", "none", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "", "60px 70px", "none", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 20},
]);
testGrid("gridAutoFlowColumnItemsPositions", "", "60px", "none", "60px", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "", "60px 70px", "none", "60px 70px", [
{offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 110, offsetTop: 130, offsetHeight: 10},
{offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px", "60px", "60px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", "60px", "60px 70px", [
{offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", "60px 70px", "60px", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
]);
testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", "60px 70px", "60px 70px", [
{offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
{offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
{offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
]);
done();
});
</script>

View file

@ -11,9 +11,15 @@
<style>
.grid {
display: inline-grid;
grid-template-rows: auto;
grid-template-columns: auto;
font: 25px/1 Ahem;
}
.grid2rows {
grid-template-rows: auto auto;
}
.constrainedGrid {
width: 10px;
height: 10px;
@ -126,32 +132,32 @@
<!-- Grids with a 50x50 image as grid item and a 100x25 text grid item. -->
<div id="grid-7" class="grid">
<div id="grid-7" class="grid grid2rows">
<img id="img-7" class="width200px" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-8" class="grid constrainedGrid">
<div id="grid-8" class="grid grid2rows constrainedGrid">
<img id="img-8" class="width200px" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-9" class="grid width200px">
<div id="grid-9" class="grid grid2rows width200px">
<img id="img-9" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-10" class="grid width200px constrainedGrid">
<div id="grid-10" class="grid grid2rows width200px constrainedGrid">
<img id="img-10" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-11" class="grid width200px justifyContentStart">
<div id="grid-11" class="grid grid2rows width200px justifyContentStart">
<img id="img-11" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-12" class="grid width200px constrainedGrid justifyContentStart">
<div id="grid-12" class="grid grid2rows width200px constrainedGrid justifyContentStart">
<img id="img-12" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
@ -184,32 +190,32 @@
<!-- Grids with a 500x500 image as grid item and a 100x25 text grid item. -->
<div id="grid-19" class="grid">
<div id="grid-19" class="grid grid2rows">
<img id="img-19" class="width200px" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-20" class="grid constrainedGrid">
<div id="grid-20" class="grid grid2rows constrainedGrid">
<img id="img-20" class="width200px" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-21" class="grid width200px">
<div id="grid-21" class="grid grid2rows width200px">
<img id="img-21" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-22" class="grid width200px constrainedGrid">
<div id="grid-22" class="grid grid2rows width200px constrainedGrid">
<img id="img-22" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-23" class="grid width200px justifyContentStart">
<div id="grid-23" class="grid grid2rows width200px justifyContentStart">
<img id="img-23" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-24" class="grid width200px constrainedGrid justifyContentStart">
<div id="grid-24" class="grid grid2rows width200px constrainedGrid justifyContentStart">
<img id="img-24" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>

View file

@ -36,7 +36,7 @@
</div>
</div>
<script>
test_computed_value("grid-template-columns", 'none', '300px'); // "none" without #child
test_computed_value("grid-template-columns", 'none', 'none'); // "none" without #child
// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width

View file

@ -36,7 +36,7 @@
</div>
</div>
<script>
test_computed_value("grid-template-rows", 'none', '600px'); // "none" without #child
test_computed_value("grid-template-rows", 'none', 'none'); // "none" without #child
// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
test_computed_value("grid-template-rows", '20%', '120px'); // 20% * height

View file

@ -13,14 +13,26 @@
.content::marker {
content: "content";
}
.before, .after {
display: contents;
}
.before::before, .after::after {
content: "item";
display: list-item;
list-style-type: "nested";
}
</style>
<ol class="outside">
<li class="decimal">item</li>
<li class="string">item</li>
<li class="content">item</li>
<li class="before"></li>
<li class="after"></li>
</ol>
<ol class="inside">
<li class="decimal">item</li>
<li class="string">item</li>
<li class="content">item</li>
<li class="before"></li>
<li class="after"></li>
</ol>

View file

@ -17,16 +17,28 @@
.content::marker {
content: "content";
}
.before, .after {
display: contents;
}
.before::before, .after::after {
content: "item";
display: list-item;
list-style-type: "nested";
}
</style>
<ol class="inside">
<li class="decimal">item</li>
<li class="string">item</li>
<li class="content">item</li>
<li class="before"></li>
<li class="after"></li>
</ol>
<ol class="outside">
<li class="decimal">item</li>
<li class="string">item</li>
<li class="content">item</li>
<li class="before"></li>
<li class="after"></li>
</ol>
<script src="/common/reftest-wait.js"></script>
<script>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Non-reference case for text-decoration with subelements</title>
<style>
p {
margin: 0;
padding: 1em;
}
div.wrapper {
font-size: 2em;
}
span, sub, sup {
text-decoration: underline;
}
</style>
</head>
<body>
<p>Test passes if there is a single uniform underline for all the text in each line,
<i>not</i> a separate underline for the superscripts:
</p>
<div class=wrapper>
<p><span>Einstein said that <i>e = mc<sup>2</sup></i>.</span></p>
<p><span>Is <i>a<sup>n</sup> + b<sup>n</sup> = c<sup>n</sup></i> ever true for <i>n</i> &gt; 2?</span></p>
</div>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reference case for text-decoration with subelements</title>
<style>
div.wrapper {
font-size: 2em;
position: relative;
}
sup.baseline {
vertical-align: baseline;
}
.hide {
color: transparent;
}
div {
white-space: nowrap;
}
</style>
</head>
<body>
<p>Test passes if there is a single uniform underline for all the text in each line,
<i>not</i> a separate underline for the superscripts:
</p>
<div class=wrapper>
<div style="position: absolute; top: 1em;">
<!-- We use position:absolute and overflow:hidden so that this element will be
shrink-wrapped to fit the width of its content, and clip the underline of
the descendant span to the width of this text. -->
<div style="position: absolute; overflow: hidden;">Einstein said that <i>e = mc<sup>2</sup></i>.
<div style="position: absolute; top: 0;">
<!-- Generate a single continuous underline with the appropriate style
by underlining a span of transparent text; it will be too wide for the
actual test text, as we're not matching its mixture of font styles,
but then will be clipped to the shrink-wrap width of the abs-pos
containing block. -->
<span style="text-decoration: underline;">
<span class=hide>Einstein said that e = mc2......</span></span>
<span class=hide><sup>2</sup></span><!-- to ensure baseline is consistent with testcase -->
</div>
</div>
</div>
<div style="position: absolute; top: 3em;">
<div style="position: absolute; overflow: hidden;">Is <i>a<sup>n</sup> + b<sup>n</sup> = c<sup>n</sup></i> ever true for <i>n</i> &gt; 2.
<div style="position: absolute; top: 0;">
<span style="text-decoration: underline;">
<span class=hide>Is an + bn = cn ever true for n &gt; 2......</span></span>
<span class=hide><sup>n</sup></span><!-- to ensure baseline is consistent with testcase -->
</div>
</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reference case for text-decoration with subelements</title>
<style>
p {
margin: 0;
padding: 1em;
}
div.wrapper {
font-size: 2em;
}
div p {
position: absolute;
}
span.blue {
text-decoration: underline;
text-decoration: underline blue;
}
.hide {
color: transparent;
text-decoration: none;
}
sup.hide {
vertical-align: baseline;
}
sup.unhide {
color: initial;
text-decoration: underline;
text-decoration: underline green;
}
sup.strut {
color: transparent;
}
</style>
</head>
<body>
<p>Test passes if all the text below has a continuous blue underline,
and the raised word “underlined” has an <i>extra</i> green underline.</p>
<div class=wrapper>
<p style="position: absolute;"><span class=blue>All this text should be <sup class=hide>underlined</sup>.</span><sup class=strut>x</sup></p>
<p class=hide style="position: absolute;">All this text should be <sup class=unhide>underlined</sup>.</p>
</div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration with subelements</title>
<meta name="assert" content="for underlines and overlines the UA must use a single thickness and position on each line for the decorations deriving from a single decorating box">
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-underline-position-property">
<link rel="mismatch" href="reference/text-decoration-subelements-001-notref.html">
<style>
p {
margin: 0;
padding: 1em;
}
div.wrapper {
font-size: 2em;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Test passes if there is a single uniform underline for all the text in each line,
<i>not</i> a separate underline for the superscripts:
</p>
<div class=wrapper>
<p>Einstein said that <i>e = mc<sup>2</sup></i>.<br></p>
<p>Is <i>a<sup>n</sup> + b<sup>n</sup> = c<sup>n</sup></i> ever true for <i>n</i> &gt; 2?</p>
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration with subelements</title>
<meta name="assert" content="for underlines and overlines the UA must use a single thickness and position on each line for the decorations deriving from a single decorating box">
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-underline-position-property">
<link rel="match" href="reference/text-decoration-subelements-002-ref.html">
<style>
div.wrapper {
font-size: 2em;
position: relative;
}
div.test {
text-decoration: underline;
position: absolute;
white-space: nowrap;
}
</style>
</head>
<body>
<p>Test passes if there is a single uniform underline for all the text in each line,
<i>not</i> a separate underline for the superscripts:
</p>
<div class=wrapper>
<div style="position: absolute; top: 1em;">
<div class=test>Einstein said that <i>e = mc<sup>2</sup></i>.</div>
</div>
<div style="position: absolute; top: 3em;">
<div class=test>Is <i>a<sup>n</sup> + b<sup>n</sup> = c<sup>n</sup></i> ever true for <i>n</i> &gt; 2.</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test case for text-decoration with subelements</title>
<meta name="assert" content="line decorations, if any, are added to the element">
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-underline-position-property">
<link rel="match" href="reference/text-decoration-subelements-003-ref.html">
<style>
p {
margin: 0;
padding: 1em;
}
div.wrapper {
font-size: 2em;
text-decoration: underline; /* so browsers that don't accept the color will still show something */
text-decoration: underline blue;
}
sup.test {
text-decoration: underline;
text-decoration: underline green;
}
</style>
</head>
<body>
<p>Test passes if all the text below has a continuous blue underline,
and the raised word “underlined” has an <i>extra</i> green underline.</p>
<div class=wrapper>
<p>All this text should be <sup class=test>underlined</sup>.</p>
</div>
</body>
</html>

View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<style>body { margin: 0 }</style>
<div style="height: 40px"></div>
<div style="width: 100px; height: 100px; resize: both; overflow: auto; border: 1px solid blue"></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#resize">
<link rel="match" href="resize-change-margin-ref.html">
<style>body { margin: 0 }</style>
<div id="target" style="width: 100px; height: 100px; resize: both; overflow: auto; border: 1px solid blue"></div>
<script>
requestAnimationFrame(() => {
requestAnimationFrame(() => {
target.style.marginTop = "40px";
document.documentElement.classList.remove("reftest-wait");
});
});
</script>

View file

@ -66,7 +66,7 @@ test(() => {
assert_equals(sheet.cssRules[0].cssText, redStyleTexts[1]);
const sheet2 = new CSSStyleSheet({});
assert_equals(sheet2.title, "")
assert_equals(sheet2.title, null);
assert_equals(sheet2.ownerNode, null);
assert_equals(sheet2.ownerRule, null);
assert_equals(sheet2.media.length, 0);
@ -80,8 +80,8 @@ test(() => {
sheet2.deleteRule(0);
assert_equals(sheet2.cssRules.length, 0);
const sheet3 = new CSSStyleSheet();
assert_equals(sheet3.title, "")
const sheet3 = new CSSStyleSheet();
assert_equals(sheet3.title, null);
assert_equals(sheet3.ownerNode, null);
assert_equals(sheet3.ownerRule, null);
assert_equals(sheet3.media.length, 0);

View file

@ -1,16 +1,15 @@
<!DOCTYPE html>
<title>Historical DOM features must be removed</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id=log></div>
<script>
function isInterfaceNuked(name) {
function isInterfaceRemoved(name) {
test(function() {
assert_equals(window[name], undefined)
}, "Historical DOM features must be removed: " + name)
}
var nukedInterfaces = [
var removedInterfaces = [
"DOMConfiguration",
"DOMCursor",
"DOMError",
@ -31,16 +30,16 @@ var nukedInterfaces = [
"UserDataHandler",
"RangeException" // DOM Range
]
nukedInterfaces.forEach(isInterfaceNuked)
removedInterfaces.forEach(isInterfaceRemoved)
function isNukedFromDocument(name) {
function isRemovedFromDocument(name) {
test(function() {
var doc = document.implementation.createDocument(null,null,null)
assert_equals(document[name], undefined)
assert_equals(doc[name], undefined)
}, "Historical DOM features must be removed: " + name)
}
var documentNuked = [
var documentRemoved = [
"createEntityReference",
"xmlEncoding",
"xmlStandalone",
@ -58,8 +57,10 @@ var documentNuked = [
"cssElementMap",
// https://github.com/whatwg/html/commit/e236f46820b93d6fe2e2caae0363331075c6c4fb
"async",
// https://github.com/whatwg/dom/pull/815
"origin",
]
documentNuked.forEach(isNukedFromDocument)
documentRemoved.forEach(isRemovedFromDocument)
test(function() {
// https://github.com/whatwg/html/commit/e236f46820b93d6fe2e2caae0363331075c6c4fb
@ -74,61 +75,61 @@ test(function() {
test(function() {
assert_equals(document.implementation["getFeature"], undefined)
}, "DOMImplementation.getFeature() must be nuked.")
}, "DOMImplementation.getFeature() must be removed.")
function isNukedFromElement(name) {
function isRemovedFromElement(name) {
test(function() {
var ele = document.createElementNS("test", "test")
assert_equals(document.body[name], undefined)
assert_equals(ele[name], undefined)
}, "Historical DOM features must be removed: " + name)
}
var elementNuked = [
var elementRemoved = [
"schemaTypeInfo",
"setIdAttribute",
"setIdAttributeNS",
"setIdAttributeNode"
]
elementNuked.forEach(isNukedFromElement)
elementRemoved.forEach(isRemovedFromElement)
function isNukedFromAttr(name) {
function isRemovedFromAttr(name) {
test(function() {
var attr = document.createAttribute("test")
assert_equals(attr[name], undefined)
}, "Attr member must be nuked: " + name)
}, "Attr member must be removed: " + name)
}
var attrNuked = [
var attrRemoved = [
"schemaTypeInfo",
"isId"
]
attrNuked.forEach(isNukedFromAttr)
attrRemoved.forEach(isRemovedFromAttr)
function isNukedFromDoctype(name) {
function isRemovedFromDoctype(name) {
test(function() {
var doctype = document.implementation.createDocumentType("test", "", "")
assert_equals(doctype[name], undefined)
}, "DocumentType member must be nuked: " + name)
}, "DocumentType member must be removed: " + name)
}
var doctypeNuked = [
var doctypeRemoved = [
"entities",
"notations",
"internalSubset"
]
doctypeNuked.forEach(isNukedFromDoctype)
doctypeRemoved.forEach(isRemovedFromDoctype)
function isNukedFromText(name) {
function isRemovedFromText(name) {
test(function() {
var text = document.createTextNode("test")
assert_equals(text[name], undefined)
}, "Text member must be nuked: " + name)
}, "Text member must be removed: " + name)
}
var textNuked = [
var textRemoved = [
"isElementContentWhitespace",
"replaceWholeText"
]
textNuked.forEach(isNukedFromText)
textRemoved.forEach(isRemovedFromText)
function isNukedFromNode(name) {
function isRemovedFromNode(name) {
test(function() {
var doc = document.implementation.createDocument(null,null,null)
var doctype = document.implementation.createDocumentType("test", "", "")
@ -136,9 +137,9 @@ function isNukedFromNode(name) {
assert_equals(doc[name], undefined)
assert_equals(doctype[name], undefined)
assert_equals(text[name], undefined)
}, "Node member must be nuked: " + name)
}, "Node member must be removed: " + name)
}
var nodeNuked = [
var nodeRemoved = [
"hasAttributes",
"attributes",
"namespaceURI",
@ -150,17 +151,17 @@ var nodeNuked = [
"setUserData",
"rootNode",
]
nodeNuked.forEach(isNukedFromNode)
nodeRemoved.forEach(isRemovedFromNode)
function isNukedFromWindow(name) {
function isRemovedFromWindow(name) {
test(function() {
assert_equals(window[name], undefined)
}, "Window member must be nuked: " + name)
}, "Window member must be removed: " + name)
}
var windowNuked = [
var windowRemoved = [
"attachEvent"
]
windowNuked.forEach(isNukedFromWindow)
windowRemoved.forEach(isRemovedFromWindow)
function isRemovedFromEvent(name) {
test(() => {

View file

@ -32,7 +32,6 @@ test(function() {
assert_equals(doc.compatMode, "CSS1Compat");
assert_equals(doc.characterSet, "UTF-8");
assert_equals(doc.contentType, "application/xml");
assert_equals(doc.origin, document.origin);
assert_equals(doc.createElement("DIV").localName, "DIV");
}, "new Document(): metadata")

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

View file

@ -35,7 +35,6 @@ test(function() {
assert_equals(doc.compatMode, "CSS1Compat");
assert_equals(doc.characterSet, "UTF-8");
assert_equals(doc.contentType, "application/xml");
assert_equals(doc.origin, document.origin);
assert_equals(doc.createElement("DIV").localName, "DIV");
}, "new Document(): metadata")

View file

@ -34,7 +34,6 @@ test(function() {
assert_equals(doc.compatMode, "CSS1Compat");
assert_equals(doc.characterSet, "UTF-8");
assert_equals(doc.contentType, "application/xml");
assert_equals(doc.origin, document.origin);
assert_equals(doc.createElement("DIV").localName, "DIV");
assert_equals(doc.createElement("a").constructor, Element);
}, "new Document(): metadata")

View file

@ -143,17 +143,14 @@ var someNonCreateableEvents = [
"XULCommandEvent",
];
someNonCreateableEvents.forEach(function (eventInterface) {
// SVGEvents is allowed, but not SVGEvent. Make sure we only test if it's
// not whitelisted.
if (!(eventInterface in aliases)) {
test(function () {
assert_throws("NOT_SUPPORTED_ERR", function () {
var evt = document.createEvent(eventInterface);
});
}, 'Should throw NOT_SUPPORTED_ERR for non-legacy event interface "' + eventInterface + '"');
}
if (!(eventInterface + "s" in aliases)) {
// SVGEvents is allowed, other plurals are not
if (eventInterface !== "SVGEvent") {
test(function () {
assert_throws("NOT_SUPPORTED_ERR", function () {
var evt = document.createEvent(eventInterface + "s");

View file

@ -0,0 +1,27 @@
const results = [];
test(() => {
class Script1 extends HTMLScriptElement {
constructor() {
super();
}
connectedCallback() {
results.push("ce connected s1");
}
}
class Script2 extends HTMLScriptElement {
constructor() {
super();
}
connectedCallback() {
results.push("ce connected s2");
}
}
customElements.define("script-1", Script1, { extends: "script" });
customElements.define("script-2", Script2, { extends: "script" });
const s1 = new Script1();
s1.textContent = "results.push('s1')";
const s2 = new Script2();
s2.textContent = "results.push('s2')";
document.body.append(s1, s2);
assert_array_equals(results, ["s1", "s2", "ce connected s1", "ce connected s2"]);
}, "Custom element reactions follow script execution");

View file

@ -240,7 +240,6 @@ test(function() {
assert_equals(doc.contentType, copy.contentType, "contentType equality");
assert_equals(doc.URL, "about:blank", "URL value")
assert_equals(doc.URL, copy.URL, "URL equality");
assert_equals(doc.origin, copy.origin, "origin equality");
assert_equals(doc.compatMode, "CSS1Compat", "compatMode value");
assert_equals(doc.compatMode, copy.compatMode, "compatMode equality");
}, "implementation.createDocument");

View file

@ -40,7 +40,6 @@
}, "Check that new document nodes extant, empty");
test(function () {
assert_equals(doc.origin, document.origin, "The document's origin should be its creator document's origin");
assert_equals(doc.referrer, document.URL, "The document's referrer should be its creator document's address.");
assert_equals(iframe.contentWindow.parent.document, document);
}, "Check the document properties corresponding to the creator browsing context");

View file

@ -41,13 +41,13 @@ async_test(t => {
const w = window.open(`resources/navigate-none.sub.html?to=navigate-require-corp.sub.html`, "window_name");
t.add_cleanup(() => w.close());
t.step_timeout(() => {
w.onload = t.step_func(() => {
w.history.back();
t.step_timeout(() => {
assert_not_equals(w.document, null);
t.done();
}, 500);
}, 500);
}, 1500);
});
}, `"none" top-level: navigating a frame back from "require-corp" should succeed`);
async_test(t => {

View file

@ -118,9 +118,6 @@ test(() => {
var w = window.open("about:blank#\uD800");
assert_equals(w.document.URL, 'about:blank#%EF%BF%BD');
assert_equals(w.document.documentURI, 'about:blank#%EF%BF%BD');
// TODO(gyuyoung): How to test document.origin? When opening a URL with an
// unpaired surrogate codepoint, invalid URL exception happens.
// e.g) var w = window.open("http://test.com\uDB89");
}, "Document URLs: unpaired surrogate codepoint should be replaced with U+FFFD")
promise_test(t => {

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Helper that posts its parent a TypeError</title>
<script>
window.doIt = () => {
parent.postMessage(new TypeError("!!"), "*");
};
</script>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Structured cloning of Error objects: extra tests</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Most tests are in the general framework in structuredclone_0.html.
This contains specialty tests that don't fit into that framework. -->
<body>
<script>
"use strict";
test(t => {
const exceptionToThrow = new Error("throw me!");
const badError = new Error();
Object.defineProperty(badError, "name", { get() { throw exceptionToThrow; } });
const worker = new Worker("./resources/echo-worker.js");
t.add_cleanup(() => worker.terminate());
assert_throws_exactly(exceptionToThrow, () => {
worker.postMessage(badError);
});
}, "Throwing name getter fails serialization");
// https://bugs.chromium.org/p/chromium/issues/detail?id=1030086
// https://github.com/whatwg/html/pull/5150
async_test(t => {
window.onmessage = t.step_func_done(e => {
assert_equals(e.data.name, "TypeError");
});
const iframe = document.createElement("iframe");
iframe.onload = () => {
if (iframe.contentWindow.location === "about:blank") {
return;
}
iframe.contentWindow.doIt();
};
iframe.src = "resources/post-parent-type-error.html";
document.body.append(iframe);
}, "Errors sent across realms should preserve their type");
</script>

View file

@ -498,12 +498,12 @@
});
},
function() {
var t = async_test("URIError objects from other realms are treated as Error");
var t = async_test("URIError objects from other realms are treated as URIError");
t.id = 35;
worker.onmessage = t.step_func_done(function(e) {
assert_equals(Object.getPrototypeOf(e.data), Error.prototype, "Checking prototype");
assert_equals(e.data.constructor, Error, "Checking constructor");
assert_equals(e.data.name, "Error", "Checking name");
assert_equals(Object.getPrototypeOf(e.data), URIError.prototype, "Checking prototype");
assert_equals(e.data.constructor, URIError, "Checking constructor");
assert_equals(e.data.name, "URIError", "Checking name");
assert_equals(e.data.message, "some message", "Checking message");
assert_equals(e.data.foo, undefined, "Checking custom property");
});
@ -520,9 +520,9 @@
var t = async_test("Cloning a modified Error");
t.id = 36;
worker.onmessage = t.step_func_done(function(e) {
assert_equals(Object.getPrototypeOf(e.data), SyntaxError.prototype, "Checking prototype");
assert_equals(e.data.constructor, SyntaxError, "Checking constructor");
assert_equals(e.data.name, "SyntaxError", "Checking name");
assert_equals(Object.getPrototypeOf(e.data), TypeError.prototype, "Checking prototype");
assert_equals(e.data.constructor, TypeError, "Checking constructor");
assert_equals(e.data.name, "TypeError", "Checking name");
assert_equals(e.data.message, "another message", "Checking message");
assert_equals(e.data.foo, undefined, "Checking custom property");
});

View file

@ -19,7 +19,26 @@
{conditions: {pattern: "[A-Z]{1}", value: "A"}, expected: false, name: "[target] The value attribute matches the pattern attribute"},
{conditions: {pattern: "[A-Z]+", value: "\u0041\u0042\u0043"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute"},
{conditions: {pattern: "[a-z]{3,}", value: "ABCD"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute"},
{conditions: {pattern: "[A-Z]+", value: "ABC123"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute even when a subset matches"}
{conditions: {pattern: "[A-Z]+", value: "ABC123"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute even when a subset matches"},
{conditions: {pattern: "(abc", value: "de"}, expected: false, name: "[target] Invalid regular expression gets ignored"},
{conditions: {pattern: "a)(b", value: "de"}, expected: false, name: "[target] The pattern attribute tries to escape a group"},
{conditions: {pattern: "a\\u{10FFFF}", value: "a\u{10FFFF}"}, expected: false, name: "[target] The pattern attribute uses Unicode features"},
]
},
{
tag: "input",
types: ["email"],
testData: [
{conditions: {multiple: true, pattern: null, value: "abc,abc"}, expected: false, name: "[target] The pattern attribute is not set, if multiple is present"},
{conditions: {multiple: true, pattern: "[A-Z]+", value: ""}, expected: false, name: "[target] The value attibute is empty string, if multiple is present"},
{conditions: {multiple: true, pattern: "[A-Z]{1}", value: "A,A"}, expected: false, name: "[target] The value attribute matches the pattern attribute, if multiple is present"},
{conditions: {multiple: true, pattern: "[A-Z]+", value: "\u0041\u0042\u0043,\u0041\u0042\u0043"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute, if multiple is present"},
{conditions: {multiple: true, pattern: "[a-z]{3,}", value: "abcd,ABCD"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute, if multiple is present"},
{conditions: {multiple: true, pattern: "[A-Z]+", value: "ABCD,ABC123"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute even when a subset matches, if multiple is present"},
{conditions: {multiple: true, pattern: "(abc", value: "de,de"}, expected: false, name: "[target] Invalid regular expression gets ignored, if multiple is present"},
{conditions: {multiple: true, pattern: "a)(b", value: "de,de"}, expected: false, name: "[target] The pattern attribute tries to escape a group, if multiple is present"},
{conditions: {multiple: true, pattern: "a\\u{10FFFF}", value: "a\u{10FFFF},a\u{10FFFF}"}, expected: false, name: "[target] The pattern attribute uses Unicode features, if multiple is present"},
{conditions: {multiple: true, pattern: "a,", value: "a,"}, expected: true, name: "[target] Commas should be stripped from regex input, if multiple is present"},
]
}
];

View file

@ -41,10 +41,11 @@
},
//If an element is disabled, it is barred from constraint validation.
//The willValidate attribute must be true if an element is mutable
//If the readonly attribute is specified on an INPUT element, the element is barred from constraint validation.
//If the readonly attribute is specified on an INPUT element, the element is barred from constraint validation
//(with the assumption that the readonly attribute applies).
{
tag: "input",
types: ["text", "search", "tel", "url", "email", "password", "datetime-local", "date", "month", "week", "time", "color", "file", "submit"],
types: ["text", "search", "tel", "url", "email", "password", "datetime-local", "date", "month", "week", "time"],
testData: [
{conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is disabled"},
{conditions: {disabled: false, readOnly: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
@ -52,6 +53,17 @@
{conditions: {disabled: false, readOnly: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"},
]
},
//In the following cases, the readonly attribute does not apply.
{
tag: "input",
types: ["color", "file", "submit"],
testData: [
{conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is disabled"},
{conditions: {disabled: false, readOnly: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
{conditions: {readOnly: true}, expected: true, name: "[target] Must be not barred from the constraint validation even if it is readonly"},
{conditions: {disabled: false, readOnly: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"},
]
},
{
tag: "button",
types: ["submit"],

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-2">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<iframe name=frame1 id=frame1></iframe>
<form id=form1 target=frame1 action="does_not_exist.html">
<button id=submitbutton type=submit>
<span id=outerchild>
<span id=innerchild>submit</span>
</span>
</button>
</form>
<script>
async_test(t => {
window.addEventListener('load', () => {
const frame1 = document.getElementById('frame1');
frame1.addEventListener('load', t.step_func_done(() => {}));
const submitButton = document.getElementById('submitbutton');
submitButton.addEventListener('click', event => {
document.getElementById('outerchild').remove();
document.getElementById('form1').submit();
});
document.getElementById('innerchild').click();
});
}, 'This test will pass if a form navigation successfully occurs when clicking a child element of a <button type=submit> element with a onclick event handler which removes the button\'s child and then calls form.submit().');
</script>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-2">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<iframe name=frame1 id=frame1></iframe>
<form id=form1 target=frame1 action="does_not_exist.html">
<button id=submitbutton type=submit>
<span id=outerchild>
<span id=innerchild>submit</span>
</span>
</button>
</form>
<script>
async_test(t => {
window.addEventListener('load', () => {
const frame1 = document.getElementById('frame1');
frame1.addEventListener('load', t.step_func_done(() => {}));
const submitButton = document.getElementById('submitbutton');
submitButton.addEventListener('click', event => {
document.getElementById('outerchild').remove();
});
document.getElementById('innerchild').click();
});
}, 'This test will pass if a form navigation successfully occurs when clicking a child element of a <button type=submit> element with a onclick event handler which removes the button\'s child.');
</script>

View file

@ -5,19 +5,18 @@
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#the-imagebitmap-rendering-context">
<script>
var width = 10;
var height = 10;
test(function() {
var width = 10;
var height = 10;
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('bitmaprenderer');
var dstCanvas = ctx.canvas;
assert_true("canvas" in ctx);
assert_object_equals(canvas, ctx.canvas);
assert_equals(dstCanvas, ctx.canvas);
assert_equals(canvas, ctx.canvas);
assert_equals(dstCanvas.width, width);
assert_equals(dstCanvas.height, height);
}, "Test that ctx.canvas on a ImageBitmapRenderingContext returns the original canvas");
</script>

View file

@ -263,7 +263,6 @@ interface Document : Node {
[SameObject] readonly attribute DOMImplementation implementation;
readonly attribute USVString URL;
readonly attribute USVString documentURI;
readonly attribute USVString origin;
readonly attribute DOMString compatMode;
readonly attribute DOMString characterSet;
readonly attribute DOMString charset; // historical alias of .characterSet

View file

@ -6,3 +6,13 @@
partial interface MediaStreamTrack {
attribute DOMString contentHint;
};
enum RTCDegradationPreference {
"maintain-framerate",
"maintain-resolution",
"balanced"
};
partial dictionary RTCRtpSendParameters {
RTCDegradationPreference degradationPreference;
};

View file

@ -11,8 +11,10 @@ partial interface Window {
dictionary IdleRequestOptions {
unsigned long timeout;
};
[Exposed=Window] interface IdleDeadline {
DOMHighResTimeStamp timeRemaining();
readonly attribute boolean didTimeout;
};
callback IdleRequestCallback = void (IdleDeadline deadline);

View file

@ -3,7 +3,7 @@
// (https://github.com/tidoust/reffy-reports)
// Source: Web NFC (https://w3c.github.io/web-nfc/)
[Exposed=Window]
[SecureContext, Exposed=Window]
interface NDEFMessage {
constructor(NDEFMessageInit messageInit);
readonly attribute FrozenArray<NDEFRecord> records;
@ -15,7 +15,7 @@ dictionary NDEFMessageInit {
typedef (DOMString or BufferSource or NDEFMessageInit) NDEFRecordDataSource;
[Exposed=Window]
[SecureContext, Exposed=Window]
interface NDEFRecord {
constructor(NDEFRecordInit recordInit);
@ -27,7 +27,7 @@ interface NDEFRecord {
readonly attribute USVString? encoding;
readonly attribute USVString? lang;
sequence<NDEFRecord> toRecords();
sequence<NDEFRecord>? toRecords();
};
dictionary NDEFRecordInit {
@ -89,6 +89,6 @@ enum NDEFPushTarget {
dictionary NDEFScanOptions {
USVString id;
USVString recordType;
USVString mediaType = "";
USVString mediaType;
AbortSignal? signal;
};

View file

@ -19,6 +19,7 @@ enum RTCIceCredentialType {
dictionary RTCIceServer {
required (DOMString or sequence<DOMString>) urls;
DOMString username;
DOMString credential;
RTCIceCredentialType credentialType = "password";
};

View file

@ -691,6 +691,10 @@ WEB-PLATFORM.TEST:signed-exchange/resources/*.sxg
WEB-PLATFORM.TEST:signed-exchange/appcache/resources/*.sxg
WEB-PLATFORM.TEST:signed-exchange/resources/generate-test-sxgs.sh
# Web Bundle files have hard-coded URLs
WEB-PLATFORM.TEST:web-bundle/resources/generate-test-wbns.sh
WEB-PLATFORM.TEST:web-bundle/resources/wbn/*.wbn
# Tests that depend on resources in /gen/ in Chromium:
# https://github.com/web-platform-tests/wpt/issues/16455
# Please consult with ecosystem-infra@chromium.org before adding more.

View file

@ -32,7 +32,6 @@
assert_equals(video.getVideoTracks().length, 1, "video mediastream starts with one track");
recorder.start();
assert_equals(recorder.state, "recording", "MediaRecorder has been started successfully");
video.getVideoTracks()[0].stop();
assert_equals(recorder.state, "recording", "MediaRecorder state should be recording immediately following last track ending");
let event = await new Promise(r => recorder.onstop = r);
@ -43,13 +42,6 @@
assert_array_equals(events, ["start", "dataavailable", "stop"],
"Should have gotten expected events");
recorder.stop();
await Promise.race([
new Promise((_, reject) => recorder.onstop =
_ => reject(new Error("stop() is idempotent"))),
new Promise(r => t.step_timeout(r, 0))
]);
}, "MediaRecorder will stop recording and fire a stop event when all tracks are ended");
promise_test(async t => {
@ -59,7 +51,6 @@
["start", "stop", "dataavailable", "pause", "resume", "error"]);
recorder.start();
assert_equals(recorder.state, "recording", "MediaRecorder has been started successfully");
recorder.stop();
assert_equals(recorder.state, "inactive", "MediaRecorder state should be inactive immediately following stop() call");
@ -70,14 +61,42 @@
assert_array_equals(events, ["start", "dataavailable", "stop"],
"Should have gotten expected events");
}, "MediaRecorder will stop recording and fire a stop event when stop() is called");
recorder.stop();
promise_test(async t => {
const recorder = new MediaRecorder(createVideoStream());
assert_throws("InvalidStateError", () => { recorder.stop(); });
await Promise.race([
new Promise((_, reject) => recorder.onstop =
_ => reject(new Error("stop() is idempotent"))),
new Promise(r => t.step_timeout(r, 0))
]);
}, "MediaRecorder will stop recording and fire a stop event when stop() is called");
_ => reject(new Error("onstop should never have been called"))),
new Promise(r => t.step_timeout(r, 0))]);
}, "MediaRecorder will fire an exception when stopped after creation");
promise_test(async t => {
const recorder = new MediaRecorder(createVideoStream());
recorder.start();
recorder.stop();
let event = await new Promise(r => recorder.onstop = r);
assert_throws("InvalidStateError", () => { recorder.stop(); });
await Promise.race([
new Promise((_, reject) => recorder.onstop =
_ => reject(new Error("onstop should never have been called"))),
new Promise(r => t.step_timeout(r, 0))]);
}, "MediaRecorder will fire an exception when stopped after having just been stopped");
promise_test(async t => {
const stream = createVideoStream();
const recorder = new MediaRecorder(stream);
recorder.start();
stream.getVideoTracks()[0].stop();
let event = await new Promise(r => recorder.onstop = r);
assert_throws("InvalidStateError", () => { recorder.stop(); });
await Promise.race([
new Promise((_, reject) => recorder.onstop =
_ => reject(new Error("onstop should never have been called"))),
new Promise(r => t.step_timeout(r, 0))]);
}, "MediaRecorder will fire an exception when stopped after having just been spontaneously stopped");
</script>
</body>
</html>

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 255,255,0,191, "50,25", "255,255,0,191", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -29,12 +29,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 255,255,0,191, "50,25", "255,255,0,191", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 128,255,128,191, "50,25", "128,255,128,191", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -29,12 +29,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 128,255,128,191, "50,25", "128,255,128,191", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 0,255,255,96, "50,25", "0,255,255,96", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -29,12 +29,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 0,255,255,96, "50,25", "0,255,255,96", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 0,255,255,32, "50,25", "0,255,255,32", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -29,12 +29,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 0,255,255,32, "50,25", "0,255,255,32", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 109,255,146,223, "50,25", "109,255,146,223", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -29,12 +29,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 109,255,146,223, "50,25", "109,255,146,223", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'lighter';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 191,255,128,255, "50,25", "191,255,128,255", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -29,12 +29,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'lighter';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 191,255,128,255, "50,25", "191,255,128,255", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 191,255,64,128, "50,25", "191,255,64,128", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -29,12 +29,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 191,255,64,128, "50,25", "191,255,64,128", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 255,255,0,96, "50,25", "255,255,0,96", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -29,12 +29,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 255,255,0,96, "50,25", "255,255,0,96", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 255,255,0,96, "50,25", "255,255,0,96", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -29,12 +29,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 255,255,0,96, "50,25", "255,255,0,96", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

View file

@ -33,12 +33,14 @@ var promise = new Promise(function(resolve, reject) {
};
});
promise.then(function(response) {
ctx2.drawImage(response, 0, 0);
createImageBitmap(response).then(bitmap => {
ctx2.drawImage(bitmap, 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(offscreenCanvas2, 0, 0);
_assertPixelApprox(offscreenCanvas, 50,25, 219,255,36,223, "50,25", "219,255,36,223", 5);
}, t_fail);
}).then(t_pass, t_fail);
});

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