mirror of
https://github.com/servo/servo.git
synced 2025-08-04 13:10:20 +01:00
Update web-platform-tests to revision 1aaada4bbc936024441fe7995b77c21a2c554da1
This commit is contained in:
WPT Sync Bot
parent
1e1eca07ed
commit
5e9d150c07
140 changed files with 3413 additions and 553 deletions
File diff suppressed because it is too large
Load diff
49
tests/wpt/metadata/css/css-animations/inheritance.html.ini
Normal file
49
tests/wpt/metadata/css/css-animations/inheritance.html.ini
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
[inheritance.html]
|
||||||
|
[Property animation-name has initial value none]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-name does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-direction has initial value normal]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-duration does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-play-state has initial value running]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-fill-mode has initial value none]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-delay has initial value 0s]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-timing-function does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-direction does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-duration has initial value 0s]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-delay does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-iteration-count does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-fill-mode does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-timing-function has initial value ease]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-play-state does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property animation-iteration-count has initial value 1]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
25
tests/wpt/metadata/css/css-transitions/inheritance.html.ini
Normal file
25
tests/wpt/metadata/css/css-transitions/inheritance.html.ini
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
[inheritance.html]
|
||||||
|
[Property transition-delay does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property transition-property has initial value all]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property transition-timing-function has initial value ease]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property transition-duration has initial value 0s]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property transition-duration does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property transition-delay has initial value 0s]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property transition-timing-function does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Property transition-property does not inherit]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -68,12 +68,6 @@
|
||||||
[outline-width intermediate]
|
[outline-width intermediate]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[outline-width end]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[border-bottom-width end]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[bottom intermediate]
|
[bottom intermediate]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[getComputedStyle-insets-absolute.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[getComputedStyle-insets-fixed.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[getComputedStyle-insets-nobox.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[getComputedStyle-insets-relative.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[getComputedStyle-insets-static.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[getComputedStyle-insets-sticky.html]
|
||||||
|
expected: TIMEOUT
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[parser-custom-element-in-foreign-content.html]
|
||||||
|
[HTML parser should not create custom elements in non-HTML namespaces]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[traverse_the_history_1.html]
|
||||||
|
[Multiple history traversals from the same task]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[fieldset-border-gap-negative-margin.html]
|
||||||
|
expected: FAIL
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[fieldset-border-gap-position-relative.html]
|
||||||
|
expected: FAIL
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
[adoption.html]
|
[adoption.html]
|
||||||
type: testharness
|
type: testharness
|
||||||
expected: TIMEOUT
|
|
||||||
[adoption is from appendChild]
|
[adoption is from appendChild]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
[non-active-document.html]
|
[non-active-document.html]
|
||||||
type: testharness
|
type: testharness
|
||||||
expected: CRASH
|
|
||||||
[DOMParser]
|
[DOMParser]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
[toggleEvent.html]
|
||||||
|
[Calling open twice on 'details' fires only one toggle event]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[Setting open=true to opened 'details' element should not fire a toggle event at the 'details' element]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
[DOMContentLoaded-defer.html]
|
||||||
|
[The end: DOMContentLoaded and defer scripts]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
@ -2,6 +2,3 @@
|
||||||
[document.open() after parser is aborted]
|
[document.open() after parser is aborted]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[async document.open() after parser is aborted]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,35 +5,29 @@
|
||||||
[response.formData() with input: a&b&c]
|
[response.formData() with input: a&b&c]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[response.formData() with input: a=b&c=d]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[request.formData() with input: &&&a=b&&&&c=d&]
|
[request.formData() with input: &&&a=b&&&&c=d&]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[response.formData() with input: a=b&c=d&]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[request.formData() with input: a=b&c=d]
|
[request.formData() with input: a=b&c=d]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[response.formData() with input: &&&a=b&&&&c=d&]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[request.formData() with input: a=b&c=d&]
|
[request.formData() with input: a=b&c=d&]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
||||||
[urlencoded-parser.any.worker.html]
|
[urlencoded-parser.any.worker.html]
|
||||||
[response.formData() with input: a&b&c]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[response.formData() with input: a=b&c=d]
|
[response.formData() with input: a=b&c=d]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
[request.formData() with input: a=b&c=d&]
|
|
||||||
expected: FAIL
|
|
||||||
|
|
||||||
[request.formData() with input: a&b&c]
|
[request.formData() with input: a&b&c]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
[request.formData() with input: _charset_=windows-1252&test=%C2x]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[response.formData() with input: a=b&c=d&]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
[response.formData() with input: &&&a=b&&&&c=d&]
|
||||||
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
[005.html]
|
[005.html]
|
||||||
type: testharness
|
type: testharness
|
||||||
|
expected: ERROR
|
||||||
[dedicated worker in shared worker in dedicated worker]
|
[dedicated worker in shared worker in dedicated worker]
|
||||||
expected: FAIL
|
expected: FAIL
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
"property",
|
"property",
|
||||||
"name",
|
"name",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"AXAPI" : [
|
"AXAPI" : [
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
"property",
|
"property",
|
||||||
"AXDescription",
|
"AXDescription",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"IAccessible2" : [
|
"IAccessible2" : [
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
"property",
|
"property",
|
||||||
"accName",
|
"accName",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"UIA" : [
|
"UIA" : [
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
"property",
|
"property",
|
||||||
"Name",
|
"Name",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
"property",
|
"property",
|
||||||
"name",
|
"name",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"AXAPI" : [
|
"AXAPI" : [
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
"property",
|
"property",
|
||||||
"AXDescription",
|
"AXDescription",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"IAccessible2" : [
|
"IAccessible2" : [
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
"property",
|
"property",
|
||||||
"accName",
|
"accName",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"UIA" : [
|
"UIA" : [
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
"property",
|
"property",
|
||||||
"Name",
|
"Name",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
"property",
|
"property",
|
||||||
"name",
|
"name",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"AXAPI" : [
|
"AXAPI" : [
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
"property",
|
"property",
|
||||||
"AXDescription",
|
"AXDescription",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"IAccessible2" : [
|
"IAccessible2" : [
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
"property",
|
"property",
|
||||||
"accName",
|
"accName",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
"UIA" : [
|
"UIA" : [
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
"property",
|
"property",
|
||||||
"Name",
|
"Name",
|
||||||
"is",
|
"is",
|
||||||
"foo bar baz"
|
"foo baz"
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset='utf-8'>
|
||||||
|
<title>Async Cookies: cookieStore basic API across frames</title>
|
||||||
|
<link rel='help' href='https://github.com/WICG/cookie-store'>
|
||||||
|
<link rel='author' href='jarrydg@chromium.org' title='Jarryd Goodman'>
|
||||||
|
<script src='/resources/testharness.js'></script>
|
||||||
|
<script src='/resources/testharnessreport.js'></script>
|
||||||
|
<style>iframe { display: none; }</style>
|
||||||
|
<iframe id='iframe'></iframe>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
promise_test(async t => {
|
||||||
|
const iframe = document.getElementById('iframe');
|
||||||
|
const frameCookieStore = iframe.contentWindow.cookieStore;
|
||||||
|
|
||||||
|
const oldCookie = await frameCookieStore.get('cookie-name');
|
||||||
|
assert_equals(oldCookie, null);
|
||||||
|
|
||||||
|
await cookieStore.set('cookie-name', 'cookie-value');
|
||||||
|
t.add_cleanup(() => cookieStore.delete('cookie-name'));
|
||||||
|
|
||||||
|
const frameCookie = await frameCookieStore.get('cookie-name');
|
||||||
|
assert_equals(frameCookie.value, 'cookie-value');
|
||||||
|
}, 'cookieStore.get() sees cookieStore.set() in frame');
|
||||||
|
|
||||||
|
promise_test(async t => {
|
||||||
|
const iframe = document.getElementById('iframe');
|
||||||
|
const frameCookieStore = iframe.contentWindow.cookieStore;
|
||||||
|
|
||||||
|
const oldCookie = await frameCookieStore.get('cookie-name');
|
||||||
|
assert_equals(oldCookie, null);
|
||||||
|
|
||||||
|
await frameCookieStore.set('cookie-name', 'cookie-value');
|
||||||
|
t.add_cleanup(() => frameCookieStore.delete('cookie-name'));
|
||||||
|
|
||||||
|
const cookie = await cookieStore.get('cookie-name');
|
||||||
|
assert_equals(cookie.value, 'cookie-value');
|
||||||
|
}, 'cookieStore.get() in frame sees cookieStore.set()')
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset='utf-8'>
|
||||||
|
<title>Async Cookies: cookieStore basic API across origins</title>
|
||||||
|
<link rel='help' href='https://github.com/WICG/cookie-store'>
|
||||||
|
<link rel='author' href='jarrydg@chromium.org' title='Jarryd Goodman'>
|
||||||
|
<script src='/resources/testharness.js'></script>
|
||||||
|
<script src='/resources/testharnessreport.js'></script>
|
||||||
|
<script src='resources/helpers.js'></script>
|
||||||
|
<style>iframe { display: none; }</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const kPath = '/cookie-store/resources/helper_iframe.sub.html';
|
||||||
|
const kCorsBase = `https://{{domains[www1]}}:{{ports[https][0]}}`;
|
||||||
|
const kCorsUrl = `${kCorsBase}${kPath}`;
|
||||||
|
|
||||||
|
promise_test(async t => {
|
||||||
|
const iframe = await createIframe(kCorsUrl, t);
|
||||||
|
assert_true(iframe != null);
|
||||||
|
|
||||||
|
iframe.contentWindow.postMessage({
|
||||||
|
opname: 'set-cookie',
|
||||||
|
name: 'cookie-name',
|
||||||
|
value: 'cookie-value',
|
||||||
|
}, kCorsBase);
|
||||||
|
t.add_cleanup(() => {
|
||||||
|
cookieStore.delete('cookie-name');
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitForMessage();
|
||||||
|
|
||||||
|
const cookies = await cookieStore.getAll();
|
||||||
|
assert_equals(cookies.length, 1);
|
||||||
|
assert_equals(cookies[0].name, 'cookie-name');
|
||||||
|
assert_equals(cookies[0].value, 'cookie-value');
|
||||||
|
}, 'cookieStore.get() sees cookieStore.set() in cross-origin frame');
|
||||||
|
|
||||||
|
promise_test(async t => {
|
||||||
|
const iframe = await createIframe(kCorsUrl, t);
|
||||||
|
assert_true(iframe != null);
|
||||||
|
|
||||||
|
await cookieStore.set('cookie-name', 'cookie-value');
|
||||||
|
|
||||||
|
const cookie = await cookieStore.get('cookie-name');
|
||||||
|
assert_equals(cookie.value, 'cookie-value');
|
||||||
|
|
||||||
|
iframe.contentWindow.postMessage({
|
||||||
|
opname: 'get-cookie',
|
||||||
|
name: 'cookie-name',
|
||||||
|
}, kCorsBase);
|
||||||
|
t.add_cleanup(() => {
|
||||||
|
cookieStore.delete('cookie-name');
|
||||||
|
})
|
||||||
|
|
||||||
|
const message = await waitForMessage();
|
||||||
|
|
||||||
|
const { frameCookie } = message;
|
||||||
|
assert_not_equals(frameCookie, null);
|
||||||
|
assert_equals(frameCookie.name, 'cookie-name');
|
||||||
|
assert_equals(frameCookie.value, 'cookie-value');
|
||||||
|
}, 'cookieStore.get() in cross-origin frame sees cookieStore.set()');
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset='utf-8'>
|
||||||
|
<link rel='author' href='jarrydg@chromium.org' title='Jarryd Goodman'>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Writing a cookie:
|
||||||
|
// Input: { cookieToSet: { name: 'cookie-name', value: 'cookie-value' } }
|
||||||
|
// Response: "Cookie has been set"
|
||||||
|
//
|
||||||
|
// Read a cookie.
|
||||||
|
// Command: { existingCookieName: 'cookie-name' }
|
||||||
|
// Response: Result of cookieStore.get():
|
||||||
|
// { frameCookie: { name: 'cookie-name', value: 'cookie-value' } }
|
||||||
|
window.addEventListener('message', async function (event) {
|
||||||
|
const { opname } = event.data;
|
||||||
|
if (opname === 'set-cookie') {
|
||||||
|
const { name, value } = event.data
|
||||||
|
await cookieStore.set({
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
domain: '{{host}}',
|
||||||
|
});
|
||||||
|
event.source.postMessage('Cookie has been set', event.origin);
|
||||||
|
} else if (opname === 'get-cookie') {
|
||||||
|
const { name } = event.data
|
||||||
|
const frameCookie = await cookieStore.get(name);
|
||||||
|
event.source.postMessage({frameCookie}, event.origin);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
/**
|
||||||
|
* Promise based helper function who's return promise will resolve
|
||||||
|
* once the iframe src has been loaded
|
||||||
|
* @param {string} url the url to set the iframe src
|
||||||
|
* @param {test} t a test object to add a cleanup function to
|
||||||
|
* @return {Promise} when resolved, will return the iframe
|
||||||
|
*/
|
||||||
|
self.createIframe = (url, t) => new Promise(resolve => {
|
||||||
|
const iframe = document.createElement('iframe');
|
||||||
|
iframe.addEventListener('load', () => {resolve(iframe);}, {once: true});
|
||||||
|
iframe.src = url;
|
||||||
|
document.documentElement.appendChild(iframe);
|
||||||
|
t.add_cleanup(() => iframe.remove());
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function that will return a promise that resolves when a message event
|
||||||
|
* is fired. Returns a promise that resolves to the message that was received
|
||||||
|
*/
|
||||||
|
self.waitForMessage = () => new Promise(resolve => {
|
||||||
|
window.addEventListener('message', event => {
|
||||||
|
resolve(event.data);
|
||||||
|
}, {once: true});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Inheritance of CSS Animations properties</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-animations/#property-index">
|
||||||
|
<meta name="assert" content="Properties inherit or not according to the spec.">
|
||||||
|
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/inheritance-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="target"></div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
assert_not_inherited('animation-delay', '0s', '2s');
|
||||||
|
assert_not_inherited('animation-direction', 'normal', 'reverse');
|
||||||
|
assert_not_inherited('animation-duration', '0s', '3s');
|
||||||
|
assert_not_inherited('animation-fill-mode', 'none', 'forwards');
|
||||||
|
assert_not_inherited('animation-iteration-count', '1', '4');
|
||||||
|
assert_not_inherited('animation-name', 'none', 'spinner');
|
||||||
|
assert_not_inherited('animation-play-state', 'running', 'paused');
|
||||||
|
assert_not_inherited('animation-timing-function', 'ease', 'linear');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Containment Test: Layout containment independent formatting context</title>
|
||||||
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||||
|
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
|
||||||
|
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to blocks.">
|
||||||
|
<style>
|
||||||
|
.wrapper {
|
||||||
|
border: solid thick;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>Test passes if it has the same output than the reference.</p>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div style="margin: 1em 0; contain: layout;">
|
||||||
|
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -3,27 +3,17 @@
|
||||||
<title>CSS Containment Test: Layout containment independent formatting context</title>
|
<title>CSS Containment Test: Layout containment independent formatting context</title>
|
||||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||||
<link rel="match" href="reference/contain-paint-013-ref.html">
|
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
|
||||||
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to blocks and inline blocks, but it doesn't apply to inline elements.">
|
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to inline blocks.">
|
||||||
<style>
|
<style>
|
||||||
.wrapper {
|
.wrapper {
|
||||||
border: solid thick;
|
border: solid thick;
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<p>Test passes if on the first two boxes the top and bottom margins of the text line are double size than on the last box.</p>
|
<p>Test passes if it has the same output than the reference.</p>
|
||||||
<div class="wrapper">
|
|
||||||
<div style="margin: 1em 0; contain: layout;">
|
|
||||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<span style="display: inline-block; margin: 1em 0; contain: layout;">
|
<span style="display: inline-block; margin: 1em 0; contain: layout;">
|
||||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="wrapper">
|
|
||||||
<span style="margin: 1em 0; contain: layout;">
|
|
||||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Containment Test: Layout containment independent formatting context</title>
|
||||||
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||||
|
<link rel="match" href="reference/contain-paint-independent-formatting-context-003-ref.html">
|
||||||
|
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.">
|
||||||
|
<style>
|
||||||
|
.wrapper {
|
||||||
|
border: solid thick;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>Test passes if it has the same output than the reference.</p>
|
||||||
|
<div class="wrapper">
|
||||||
|
<span style="margin: 1em 0; contain: layout;">
|
||||||
|
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Containment Test: Paint containment independent formatting context</title>
|
||||||
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||||
|
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
|
||||||
|
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to blocks.">
|
||||||
|
<style>
|
||||||
|
.wrapper {
|
||||||
|
border: solid thick;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>Test passes if it has the same output than the reference.</p>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div style="margin: 1em 0; contain: paint;">
|
||||||
|
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -3,27 +3,17 @@
|
||||||
<title>CSS Containment Test: Paint containment independent formatting context</title>
|
<title>CSS Containment Test: Paint containment independent formatting context</title>
|
||||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||||
<link rel="match" href="reference/contain-paint-013-ref.html">
|
<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">
|
||||||
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to blocks and inline blocks, but it doesn't apply to inline elements.">
|
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to inline blocks.">
|
||||||
<style>
|
<style>
|
||||||
.wrapper {
|
.wrapper {
|
||||||
border: solid thick;
|
border: solid thick;
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<p>Test passes if on the first two boxes the top and bottom margins of the text line are double size than on the last box.</p>
|
<p>Test passes if it has the same output than the reference.</p>
|
||||||
<div class="wrapper">
|
|
||||||
<div style="margin: 1em 0; contain: paint;">
|
|
||||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<span style="display: inline-block; margin: 1em 0; contain: paint;">
|
<span style="display: inline-block; margin: 1em 0; contain: paint;">
|
||||||
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="wrapper">
|
|
||||||
<span style="margin: 1em 0; contain: paint;">
|
|
||||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Containment Test: Paint containment independent formatting context</title>
|
||||||
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||||
|
<link rel="match" href="reference/contain-paint-independent-formatting-context-003-ref.html">
|
||||||
|
<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.">
|
||||||
|
<style>
|
||||||
|
.wrapper {
|
||||||
|
border: solid thick;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>Test passes if it has the same output than the reference.</p>
|
||||||
|
<div class="wrapper">
|
||||||
|
<span style="margin: 1em 0; contain: paint;">
|
||||||
|
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>CSS Containment Test: Reference file</title>
|
|
||||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
|
||||||
<style>
|
|
||||||
.wrapper {
|
|
||||||
border: solid thick;
|
|
||||||
margin: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<p>Test passes if on the first two boxes the top and bottom margins of the text line are double size than on the last box.</p>
|
|
||||||
<div class="wrapper">
|
|
||||||
<div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
|
||||||
</div>
|
|
||||||
<div class="wrapper">
|
|
||||||
<div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
|
||||||
</div>
|
|
||||||
<div class="wrapper">
|
|
||||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Containment Test: Reference file</title>
|
||||||
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||||
|
<style>
|
||||||
|
.wrapper {
|
||||||
|
border: solid thick;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>Test passes if it has the same output than the reference.</p>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Containment Test: Reference file</title>
|
||||||
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||||
|
<style>
|
||||||
|
.wrapper {
|
||||||
|
border: solid thick;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>Test passes if it has the same output than the reference.</p>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-basis with invalid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis">
|
||||||
|
<meta name="assert" content="flex-basis supports only the grammar 'content | <‘width’>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_invalid_value("flex-basis", "none");
|
||||||
|
test_invalid_value("flex-basis", "auto content");
|
||||||
|
test_invalid_value("flex-basis", "-1px");
|
||||||
|
test_invalid_value("flex-basis", "-2%");
|
||||||
|
test_invalid_value("flex-basis", "3px 4%");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-basis with valid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis">
|
||||||
|
<meta name="assert" content="flex-basis supports the full grammar 'content | <‘width’>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_valid_value("flex-basis", "1px");
|
||||||
|
test_valid_value("flex-basis", "calc(2em + 3ex)");
|
||||||
|
test_valid_value("flex-basis", "400%");
|
||||||
|
test_valid_value("flex-basis", "auto");
|
||||||
|
|
||||||
|
// The following is not yet supported by browsers:
|
||||||
|
// test_valid_value("flex-basis", "content");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-direction with invalid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">
|
||||||
|
<meta name="assert" content="flex-direction supports only the grammar 'row | row-reverse | column | column-reverse'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_invalid_value("flex-direction", "auto");
|
||||||
|
test_invalid_value("flex-direction", "column row-reverse");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-direction with valid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">
|
||||||
|
<meta name="assert" content="flex-direction supports the full grammar 'row | row-reverse | column | column-reverse'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_valid_value("flex-direction", "row");
|
||||||
|
test_valid_value("flex-direction", "row-reverse");
|
||||||
|
test_valid_value("flex-direction", "column");
|
||||||
|
test_valid_value("flex-direction", "column-reverse");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-flow with invalid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
|
||||||
|
<meta name="assert" content="flex-flow supports only the grammar '<flex-direction> || <flex-wrap>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_invalid_value("flex-flow", "nowrap row nowrap");
|
||||||
|
test_invalid_value("flex-flow", "column wrap column");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-flow with valid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
|
||||||
|
<meta name="assert" content="flex-flow supports the full grammar '<flex-direction> || <flex-wrap>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_valid_value("flex-flow", "column nowrap");
|
||||||
|
test_valid_value("flex-flow", "nowrap column", "column nowrap");
|
||||||
|
test_valid_value("flex-flow", "wrap row-reverse", "row-reverse wrap");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-grow with invalid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow">
|
||||||
|
<meta name="assert" content="flex-grow supports only the grammar '<number>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_invalid_value("flex-grow", "2e3.4");
|
||||||
|
test_invalid_value("flex-grow", "-+5");
|
||||||
|
test_invalid_value("flex-grow", "6 7");
|
||||||
|
|
||||||
|
test_invalid_value("flex-grow", "1."); // Accepted by Edge.
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-grow with valid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow">
|
||||||
|
<meta name="assert" content="flex-grow supports the full grammar '<number>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_valid_value("flex-grow", "1");
|
||||||
|
test_valid_value("flex-grow", "23.4e5", ["2.34e+06", "2.34e+006", "2340000"]);
|
||||||
|
test_valid_value("flex-grow", "+.678E9", ["6.78e+08", "6.78e+008", "678000000"]);
|
||||||
|
test_valid_value("flex-grow", ".0", "0");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex with invalid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex">
|
||||||
|
<meta name="assert" content="flex supports only the grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_invalid_value("flex", "none 1");
|
||||||
|
test_invalid_value("flex", "2 3 4");
|
||||||
|
test_invalid_value("flex", "5px 7%");
|
||||||
|
test_invalid_value("flex", "9 none");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-shrink with invalid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink">
|
||||||
|
<meta name="assert" content="flex-shrink supports only the grammar '<number>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_invalid_value("flex-shrink", "2e3.4");
|
||||||
|
test_invalid_value("flex-shrink", "-+5");
|
||||||
|
test_invalid_value("flex-shrink", "6 7");
|
||||||
|
|
||||||
|
test_invalid_value("flex-shrink", "1."); // Accepted by Edge.
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-shrink with valid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink">
|
||||||
|
<meta name="assert" content="flex-shrink supports the full grammar '<number>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_valid_value("flex-shrink", "1");
|
||||||
|
test_valid_value("flex-shrink", "23.4e5", ["2.34e+06", "2.34e+006", "2340000"]);
|
||||||
|
test_valid_value("flex-shrink", "+.678E9", ["6.78e+08", "6.78e+008", "678000000"]);
|
||||||
|
test_valid_value("flex-shrink", ".0", "0");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex with valid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex">
|
||||||
|
<meta name="assert" content="flex supports the full grammar 'none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_valid_value("flex", "none", "0 0 auto");
|
||||||
|
test_valid_value("flex", "1", "1 1 0%");
|
||||||
|
test_valid_value("flex", "2 3", "2 3 0%");
|
||||||
|
test_valid_value("flex", "4 5 6px");
|
||||||
|
test_valid_value("flex", "7% 8", "8 1 7%");
|
||||||
|
test_valid_value("flex", "8 auto", "8 1 auto");
|
||||||
|
|
||||||
|
// The following is not yet supported by browsers:
|
||||||
|
// test_valid_value("flex", "content");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-wrap with invalid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">
|
||||||
|
<meta name="assert" content="flex-wrap supports only the grammar 'nowrap | wrap | wrap-reverse'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_invalid_value("flex-wrap", "auto");
|
||||||
|
test_invalid_value("flex-wrap", "nowrap wrap");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing flex-wrap with valid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">
|
||||||
|
<meta name="assert" content="flex-wrap supports the full grammar 'nowrap | wrap | wrap-reverse'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_valid_value("flex-wrap", "nowrap");
|
||||||
|
test_valid_value("flex-wrap", "wrap");
|
||||||
|
test_valid_value("flex-wrap", "wrap-reverse");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing order with invalid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order">
|
||||||
|
<meta name="assert" content="order supports only the grammar '<integer>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_invalid_value("order", "auto");
|
||||||
|
test_invalid_value("order", "123.45");
|
||||||
|
test_invalid_value("order", "123 45");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexible Box Layout Module Level 1: parsing order with valid values</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-order">
|
||||||
|
<meta name="assert" content="order supports the full grammar '<integer>'.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/parsing-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_valid_value("order", "0");
|
||||||
|
test_valid_value("order", "123");
|
||||||
|
test_valid_value("order", "-45");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -41,19 +41,19 @@
|
||||||
|
|
||||||
<div class="container relative">
|
<div class="container relative">
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="35" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
<div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container relative">
|
<div class="container relative">
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="35" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
<div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container relative">
|
<div class="container relative">
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="35" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
<div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -77,19 +77,19 @@
|
||||||
|
|
||||||
<div class="container relative">
|
<div class="container relative">
|
||||||
<div class="grid directionRTL">
|
<div class="grid directionRTL">
|
||||||
<div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-135" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
<div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container relative">
|
<div class="container relative">
|
||||||
<div class="grid directionRTL">
|
<div class="grid directionRTL">
|
||||||
<div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-135" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
<div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container relative">
|
<div class="container relative">
|
||||||
<div class="grid directionRTL">
|
<div class="grid directionRTL">
|
||||||
<div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-135" data-offset-y="5" data-expected-width="500" data-expected-height="400"></div>
|
<div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
4
tests/wpt/web-platform-tests/css/css-inline/META.yml
Normal file
4
tests/wpt/web-platform-tests/css/css-inline/META.yml
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
spec: https://drafts.csswg.org/css-fonts/
|
||||||
|
suggested_reviewers:
|
||||||
|
- dauwhe
|
||||||
|
- fantasai
|
||||||
29
tests/wpt/web-platform-tests/css/css-inline/inheritance.html
Normal file
29
tests/wpt/web-platform-tests/css/css-inline/inheritance.html
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Inheritance of CSS Inline Layout properties</title>
|
||||||
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#property-index">
|
||||||
|
<meta name="assert" content="Properties inherit or not according to the spec.">
|
||||||
|
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/inheritance-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="target"></div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
assert_not_inherited('alignment-baseline', 'baseline', 'central');
|
||||||
|
assert_not_inherited('baseline-shift', '0px', '10px');
|
||||||
|
assert_inherited('dominant-baseline', 'normal', 'central');
|
||||||
|
assert_not_inherited('initial-letters', 'normal', '2 3');
|
||||||
|
assert_inherited('initial-letters-align', 'alphabetic', 'hanging');
|
||||||
|
assert_inherited('initial-letters-wrap', 'none', 'grid');
|
||||||
|
assert_not_inherited('initial-sizing', 'normal', 'stretch');
|
||||||
|
assert_not_inherited('vertical-align', 'baseline', '10px');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables-3/">
|
||||||
|
<meta name="assert" content="This test checks that table cell children, in quirks mode, don't apply the percentage height quirk to their children." />
|
||||||
|
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
<p style="margin-top: 1em;">Test passes if there is a filled green square.</p>
|
||||||
|
<div style="display:table-cell; height:100px; background:green;">
|
||||||
|
<div style="width:100px;">
|
||||||
|
<div style="height:100%; background:red;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-tables-3/">
|
||||||
|
<meta name="assert" content="This test checks that table cell children, in quirks mode, pass the correct percentage resolution size to their children." />
|
||||||
|
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||||
|
<p style="margin-top: 1em;">Test passes if there is a filled green square.</p>
|
||||||
|
<div style="display:table-cell; height:100px; background:red;">
|
||||||
|
<div style="width:100px; height: 100%;">
|
||||||
|
<div style="height:100%; background:green;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Text Test: no automatic hyphenation without language tagging</title>
|
||||||
|
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
|
||||||
|
<meta name="flags" content="">
|
||||||
|
<link rel="match" href="reference/hyphens-auto-001-ref.html">
|
||||||
|
<meta name="assert" content="automatic hyphenation must not work without language tagging">
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 4ch;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if none of the words below are hyphenated.
|
||||||
|
<div>implementation
|
||||||
|
initialization
|
||||||
|
realization
|
||||||
|
hyphenation
|
||||||
|
anticonstitutionnellement
|
||||||
|
intergouvernementalisation
|
||||||
|
dichlorodiphényltrichloroéthane
|
||||||
|
honorificabilitudinitatibus
|
||||||
|
Wiedervereinigung
|
||||||
|
Rechtsschutzversicherungsgesellschaften</div>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Text Test Reference</title>
|
||||||
|
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||||
|
<style>
|
||||||
|
div { white-space: pre; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>Test passes if none of the words below are hyphenated.
|
||||||
|
<div>implementation
|
||||||
|
initialization
|
||||||
|
realization
|
||||||
|
hyphenation
|
||||||
|
anticonstitutionnellement
|
||||||
|
intergouvernementalisation
|
||||||
|
dichlorodiphényltrichloroéthane
|
||||||
|
honorificabilitudinitatibus
|
||||||
|
Wiedervereinigung
|
||||||
|
Rechtsschutzversicherungsgesellschaften</div>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<title>Historical CSS Transition features must be removed</title>
|
||||||
|
<link rel="help" href="http://www.w3.org/TR/css3-transitions">
|
||||||
|
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script>
|
||||||
|
function isInterfaceNuked(name) {
|
||||||
|
test(function() {
|
||||||
|
assert_equals(window[name], undefined)
|
||||||
|
}, "Historical CSS features must be removed: " + name)
|
||||||
|
}
|
||||||
|
var nukedInterfaces = [
|
||||||
|
"WebKitTransitionEvent", // Replaced by unprefixed TransitionEvent
|
||||||
|
];
|
||||||
|
nukedInterfaces.forEach(isInterfaceNuked);
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Inheritance of CSS Transitions properties</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-transitions/#property-index">
|
||||||
|
<meta name="assert" content="Properties inherit or not according to the spec.">
|
||||||
|
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/css/support/inheritance-testcommon.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="target"></div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
assert_not_inherited('transition-delay', '0s', '2s');
|
||||||
|
assert_not_inherited('transition-duration', '0s', '3s');
|
||||||
|
assert_not_inherited('transition-property', 'all', 'opacity');
|
||||||
|
assert_not_inherited('transition-timing-function', 'ease', 'linear');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSSOM: resolved values of the inset properties for absolute positioning</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||||
|
<script src=/resources/testharness.js></script>
|
||||||
|
<script src=/resources/testharnessreport.js></script>
|
||||||
|
<script type="module">
|
||||||
|
import {runTests, containerForAbspos} from "./support/getComputedStyle-insets.js";
|
||||||
|
runTests({
|
||||||
|
style: "position: absolute",
|
||||||
|
containingBlockElement: containerForAbspos,
|
||||||
|
containingBlockArea: "padding",
|
||||||
|
preservesPercentages: false,
|
||||||
|
preservesAuto: false,
|
||||||
|
canStretchAutoSize: true,
|
||||||
|
staticPositionY: 1 + 2 + 4 + 8,
|
||||||
|
staticPositionX: 2 + 4 + 8 + 16,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSSOM: resolved values of the inset properties for fixed positioning</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||||
|
<script src=/resources/testharness.js></script>
|
||||||
|
<script src=/resources/testharnessreport.js></script>
|
||||||
|
<script type="module">
|
||||||
|
import {runTests, containerForFixed} from "./support/getComputedStyle-insets.js";
|
||||||
|
runTests({
|
||||||
|
style: "position: fixed",
|
||||||
|
containingBlockElement: containerForFixed,
|
||||||
|
containingBlockArea: "padding",
|
||||||
|
preservesPercentages: false,
|
||||||
|
preservesAuto: false,
|
||||||
|
canStretchAutoSize: true,
|
||||||
|
staticPositionY: 1 + 2 + 4 + 8 + 16 + 32 + 64,
|
||||||
|
staticPositionX: 2 + 4 + 8 + 16 + 32 + 64 + 128,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSSOM: resolved values of the inset properties when the element generates no box</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||||
|
<script src=/resources/testharness.js></script>
|
||||||
|
<script src=/resources/testharnessreport.js></script>
|
||||||
|
<script type="module">
|
||||||
|
import {runTests} from "./support/getComputedStyle-insets.js";
|
||||||
|
runTests({
|
||||||
|
style: "display: none",
|
||||||
|
containingBlockElement: null,
|
||||||
|
preservesPercentages: true,
|
||||||
|
preservesAuto: true,
|
||||||
|
canStretchAutoSize: false,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSSOM: resolved values of the inset properties for relative positioning</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||||
|
<script src=/resources/testharness.js></script>
|
||||||
|
<script src=/resources/testharnessreport.js></script>
|
||||||
|
<script type="module">
|
||||||
|
import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js";
|
||||||
|
runTests({
|
||||||
|
style: "position: relative",
|
||||||
|
containingBlockElement: containerForInflow,
|
||||||
|
containingBlockArea: "content",
|
||||||
|
preservesPercentages: false,
|
||||||
|
preservesAuto: false,
|
||||||
|
canStretchAutoSize: false,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSSOM: resolved values of the inset properties for static positioning</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||||
|
<script src=/resources/testharness.js></script>
|
||||||
|
<script src=/resources/testharnessreport.js></script>
|
||||||
|
<script type="module">
|
||||||
|
import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js";
|
||||||
|
runTests({
|
||||||
|
style: "position: static",
|
||||||
|
containingBlockElement: containerForInflow,
|
||||||
|
containingBlockArea: "content",
|
||||||
|
preservesPercentages: true,
|
||||||
|
preservesAuto: true,
|
||||||
|
canStretchAutoSize: false,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSSOM: resolved values of the inset properties for sticky positioning</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-position/#pos-sch">
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@crisal.io">
|
||||||
|
<script src=/resources/testharness.js></script>
|
||||||
|
<script src=/resources/testharnessreport.js></script>
|
||||||
|
<script type="module">
|
||||||
|
import {runTests, containerForInflow} from "./support/getComputedStyle-insets.js";
|
||||||
|
runTests({
|
||||||
|
style: "position: sticky; position: -webkit-sticky",
|
||||||
|
containingBlockElement: containerForInflow,
|
||||||
|
containingBlockArea: "content",
|
||||||
|
preservesPercentages: false,
|
||||||
|
preservesAuto: true,
|
||||||
|
canStretchAutoSize: false,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -70,8 +70,17 @@
|
||||||
const testElem = document.getElementById("test");
|
const testElem = document.getElementById("test");
|
||||||
testElem.style.setProperty("margin-top", "initial", "important");
|
testElem.style.setProperty("margin-top", "initial", "important");
|
||||||
assert_equals(testElem.style.margin, "");
|
assert_equals(testElem.style.margin, "");
|
||||||
assert_equals(testElem.style.cssText, "margin-top: initial !important; margin-right: initial; margin-bottom: initial; margin-left: initial;");
|
|
||||||
}, "Shorthand serialization with 'initial' value, one longhand with important flag.");
|
}, "Shorthand serialization with 'initial' value, one longhand with important flag.");
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
const testElem = document.getElementById("test");
|
||||||
|
testElem.style.cssText = "";
|
||||||
|
testElem.style.setProperty("margin-top", "initial");
|
||||||
|
testElem.style.setProperty("margin-right", "initial");
|
||||||
|
testElem.style.setProperty("margin-bottom", "initial");
|
||||||
|
testElem.style.setProperty("margin-left", "initial", "important");
|
||||||
|
assert_equals(testElem.style.margin, "");
|
||||||
|
}, "Shorthand serialization with 'initial' value, longhands set individually, one with important flag.");
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,376 @@
|
||||||
|
export const testEl = document.createElement("div");
|
||||||
|
export const containerForInflow = document.createElement("div");
|
||||||
|
export const containerForAbspos = document.createElement("div");
|
||||||
|
export const containerForFixed = document.createElement("div");
|
||||||
|
|
||||||
|
testEl.id = "test";
|
||||||
|
containerForInflow.id = "container-for-inflow";
|
||||||
|
containerForAbspos.id = "container-for-abspos";
|
||||||
|
containerForFixed.id = "container-for-fixed";
|
||||||
|
|
||||||
|
containerForInflow.appendChild(testEl);
|
||||||
|
containerForAbspos.appendChild(containerForInflow);
|
||||||
|
containerForFixed.appendChild(containerForAbspos);
|
||||||
|
document.body.appendChild(containerForFixed);
|
||||||
|
|
||||||
|
const stylesheet = document.createElement("style");
|
||||||
|
stylesheet.textContent = `
|
||||||
|
#container-for-inflow {
|
||||||
|
/* Content area: 100px tall, 200px wide */
|
||||||
|
height: 100px;
|
||||||
|
width: 200px;
|
||||||
|
padding: 1px 2px;
|
||||||
|
border-width: 2px 4px;
|
||||||
|
margin: 4px 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#container-for-abspos {
|
||||||
|
/* Padding area: 200px tall, 400px wide */
|
||||||
|
height: 184px;
|
||||||
|
width: 368px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-width: 16px 32px;
|
||||||
|
margin: 32px 64px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#container-for-fixed {
|
||||||
|
/* Padding area: 300px tall, 600px wide */
|
||||||
|
height: 172px;
|
||||||
|
width: 344px;
|
||||||
|
padding: 64px 128px;
|
||||||
|
border-width: 128px 256px;
|
||||||
|
margin: 256px 512px;
|
||||||
|
position: absolute;
|
||||||
|
transform: scale(1);
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
[id ^= container] {
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(stylesheet);
|
||||||
|
|
||||||
|
function runTestsWithWM(data, testWM, cbWM) {
|
||||||
|
const {
|
||||||
|
style,
|
||||||
|
containingBlockElement,
|
||||||
|
containingBlockArea,
|
||||||
|
preservesPercentages,
|
||||||
|
preservesAuto,
|
||||||
|
canStretchAutoSize,
|
||||||
|
staticPositionX,
|
||||||
|
staticPositionY,
|
||||||
|
} = data;
|
||||||
|
|
||||||
|
let cbHeight = containingBlockElement ? containingBlockElement.clientHeight : NaN;
|
||||||
|
let cbWidth = containingBlockElement ? containingBlockElement.clientWidth : NaN;
|
||||||
|
if (containingBlockElement && containingBlockArea == "content") {
|
||||||
|
const cs = getComputedStyle(containingBlockElement);
|
||||||
|
cbHeight -= parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
|
||||||
|
cbWidth -= parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
|
||||||
|
}
|
||||||
|
|
||||||
|
const staticPositionTop = cbWM.blockStart == "top" || cbWM.inlineStart == "top"
|
||||||
|
? staticPositionY : cbHeight - staticPositionY;
|
||||||
|
const staticPositionLeft = cbWM.blockStart == "left" || cbWM.inlineStart == "left"
|
||||||
|
? staticPositionX : cbWidth - staticPositionX;
|
||||||
|
const staticPositionBottom = cbWM.blockStart == "bottom" || cbWM.inlineStart == "bottom"
|
||||||
|
? staticPositionY : cbHeight - staticPositionY;
|
||||||
|
const staticPositionRight = cbWM.blockStart == "right" || cbWM.inlineStart == "right"
|
||||||
|
? staticPositionX : cbWidth - staticPositionX;
|
||||||
|
|
||||||
|
function serialize(declarations) {
|
||||||
|
return Object.entries(declarations).map(([p, v]) => `${p}: ${v}; `).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function wmName(wm) {
|
||||||
|
return Object.values(wm.style).join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkStyle(declarations, expected, msg) {
|
||||||
|
test(function() {
|
||||||
|
testEl.style.cssText = style + "; " + serialize({...declarations, ...testWM.style});
|
||||||
|
if (containingBlockElement) {
|
||||||
|
containingBlockElement.style.cssText = serialize({...cbWM.style});
|
||||||
|
}
|
||||||
|
const cs = getComputedStyle(testEl);
|
||||||
|
for (let [prop, value] of Object.entries(expected)) {
|
||||||
|
assert_equals(cs[prop], value, `'${prop}'`);
|
||||||
|
}
|
||||||
|
}, `${wmName(testWM)} inside ${wmName(cbWM)} - ${msg}`);
|
||||||
|
|
||||||
|
testEl.style.cssText = "";
|
||||||
|
if (containingBlockElement) {
|
||||||
|
containingBlockElement.style.cssText = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
}, {
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
}, "Pixels resolve as-is");
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "1em",
|
||||||
|
left: "2em",
|
||||||
|
bottom: "3em",
|
||||||
|
right: "4em",
|
||||||
|
"font-size": "10px",
|
||||||
|
}, {
|
||||||
|
top: "10px",
|
||||||
|
left: "20px",
|
||||||
|
bottom: "30px",
|
||||||
|
right: "40px",
|
||||||
|
}, "Relative lengths are absolutized into pixels");
|
||||||
|
|
||||||
|
if (preservesPercentages) {
|
||||||
|
checkStyle({
|
||||||
|
top: "10%",
|
||||||
|
left: "25%",
|
||||||
|
bottom: "50%",
|
||||||
|
right: "75%",
|
||||||
|
}, {
|
||||||
|
top: "10%",
|
||||||
|
left: "25%",
|
||||||
|
bottom: "50%",
|
||||||
|
right: "75%",
|
||||||
|
}, "Percentages resolve as-is");
|
||||||
|
} else {
|
||||||
|
checkStyle({
|
||||||
|
top: "10%",
|
||||||
|
left: "25%",
|
||||||
|
bottom: "50%",
|
||||||
|
right: "75%",
|
||||||
|
}, {
|
||||||
|
top: .1 * cbHeight + "px",
|
||||||
|
left: .25 * cbWidth + "px",
|
||||||
|
bottom: .5 * cbHeight + "px",
|
||||||
|
right: .75 * cbWidth + "px",
|
||||||
|
}, "Percentages are absolutized into pixels");
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "calc(10% - 1px)",
|
||||||
|
left: "calc(25% - 2px)",
|
||||||
|
bottom: "calc(50% - 3px)",
|
||||||
|
right: "calc(75% - 4px)",
|
||||||
|
}, {
|
||||||
|
top: .1 * cbHeight - 1 + "px",
|
||||||
|
left: .25 * cbWidth - 2 + "px",
|
||||||
|
bottom: .5 * cbHeight - 3 + "px",
|
||||||
|
right: .75 * cbWidth - 4 + "px",
|
||||||
|
}, "calc() is absolutized into pixels");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (canStretchAutoSize) {
|
||||||
|
// Force overconstraintment by setting size or with insets that would result in
|
||||||
|
// negative size. Then the resolved value should be the computed one according to
|
||||||
|
// https://drafts.csswg.org/cssom/#resolved-value-special-case-property-like-top
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
height: "0px",
|
||||||
|
width: "0px",
|
||||||
|
}, {
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
}, "Pixels resolve as-is when overconstrained");
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "100%",
|
||||||
|
left: "100%",
|
||||||
|
bottom: "100%",
|
||||||
|
right: "100%",
|
||||||
|
}, {
|
||||||
|
top: cbHeight + "px",
|
||||||
|
left: cbWidth + "px",
|
||||||
|
bottom: cbHeight + "px",
|
||||||
|
right: cbWidth + "px",
|
||||||
|
}, "Percentages absolutize the computed value when overconstrained");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (preservesAuto) {
|
||||||
|
checkStyle({
|
||||||
|
top: "auto",
|
||||||
|
left: "auto",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
}, {
|
||||||
|
top: "auto",
|
||||||
|
left: "auto",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
}, "If start side is 'auto' and end side is not, 'auto' resolves as-is");
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: "auto",
|
||||||
|
right: "auto",
|
||||||
|
}, {
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: "auto",
|
||||||
|
right: "auto",
|
||||||
|
}, "If end side is 'auto' and start side is not, 'auto' resolves as-is");
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "auto",
|
||||||
|
left: "auto",
|
||||||
|
bottom: "auto",
|
||||||
|
right: "auto",
|
||||||
|
}, {
|
||||||
|
top: "auto",
|
||||||
|
left: "auto",
|
||||||
|
bottom: "auto",
|
||||||
|
right: "auto",
|
||||||
|
}, "If opposite sides are 'auto', they resolve as-is");
|
||||||
|
} else if (canStretchAutoSize) {
|
||||||
|
checkStyle({
|
||||||
|
top: "auto",
|
||||||
|
left: "auto",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
}, {
|
||||||
|
top: cbHeight - 3 + "px",
|
||||||
|
left: cbWidth - 4 + "px",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
}, "If start side is 'auto' and end side is not, 'auto' resolves to used value");
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: "auto",
|
||||||
|
right: "auto",
|
||||||
|
}, {
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: cbHeight - 1 + "px",
|
||||||
|
right: cbWidth - 2 + "px",
|
||||||
|
}, "If end side is 'auto' and start side is not, 'auto' resolves to used value");
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "auto",
|
||||||
|
left: "auto",
|
||||||
|
bottom: "auto",
|
||||||
|
right: "auto",
|
||||||
|
}, {
|
||||||
|
top: staticPositionTop + "px",
|
||||||
|
left: staticPositionLeft + "px",
|
||||||
|
bottom: staticPositionBottom + "px",
|
||||||
|
right: staticPositionRight + "px",
|
||||||
|
}, "If opposite sides are 'auto', they resolve to used value");
|
||||||
|
} else {
|
||||||
|
checkStyle({
|
||||||
|
top: "auto",
|
||||||
|
left: "auto",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
}, {
|
||||||
|
top: "-3px",
|
||||||
|
left: "-4px",
|
||||||
|
bottom: "3px",
|
||||||
|
right: "4px",
|
||||||
|
}, "If start side is 'auto' and end side is not, 'auto' resolves to used value");
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: "auto",
|
||||||
|
right: "auto",
|
||||||
|
}, {
|
||||||
|
top: "1px",
|
||||||
|
left: "2px",
|
||||||
|
bottom: "-1px",
|
||||||
|
right: "-2px",
|
||||||
|
}, "If end side is 'auto' and start side is not, 'auto' resolves to used value");
|
||||||
|
|
||||||
|
checkStyle({
|
||||||
|
top: "auto",
|
||||||
|
left: "auto",
|
||||||
|
bottom: "auto",
|
||||||
|
right: "auto",
|
||||||
|
}, {
|
||||||
|
top: "0px",
|
||||||
|
left: "0px",
|
||||||
|
bottom: "0px",
|
||||||
|
right: "0px",
|
||||||
|
}, "If opposite sides are 'auto', they resolve to used value");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const writingModes = [{
|
||||||
|
style: {
|
||||||
|
"writing-mode": "horizontal-tb",
|
||||||
|
"direction": "ltr",
|
||||||
|
},
|
||||||
|
blockStart: "top",
|
||||||
|
blockEnd: "bottom",
|
||||||
|
inlineStart: "left",
|
||||||
|
inlineEnd: "right",
|
||||||
|
}, {
|
||||||
|
style: {
|
||||||
|
"writing-mode": "horizontal-tb",
|
||||||
|
"direction": "rtl",
|
||||||
|
},
|
||||||
|
blockStart: "top",
|
||||||
|
blockEnd: "bottom",
|
||||||
|
inlineStart: "right",
|
||||||
|
inlineEnd: "left",
|
||||||
|
}, {
|
||||||
|
style: {
|
||||||
|
"writing-mode": "vertical-lr",
|
||||||
|
"direction": "ltr",
|
||||||
|
},
|
||||||
|
blockStart: "left",
|
||||||
|
blockEnd: "right",
|
||||||
|
inlineStart: "top",
|
||||||
|
inlineEnd: "bottom",
|
||||||
|
}, {
|
||||||
|
style: {
|
||||||
|
"writing-mode": "vertical-lr",
|
||||||
|
"direction": "rtl",
|
||||||
|
},
|
||||||
|
blockStart: "left",
|
||||||
|
blockEnd: "right",
|
||||||
|
inlineStart: "bottom",
|
||||||
|
inlineEnd: "top",
|
||||||
|
}, {
|
||||||
|
style: {
|
||||||
|
"writing-mode": "vertical-rl",
|
||||||
|
"direction": "ltr",
|
||||||
|
},
|
||||||
|
blockStart: "right",
|
||||||
|
blockEnd: "left",
|
||||||
|
inlineStart: "top",
|
||||||
|
inlineEnd: "bottom",
|
||||||
|
}, {
|
||||||
|
style: {
|
||||||
|
"writing-mode": "vertical-rl",
|
||||||
|
"direction": "rtl",
|
||||||
|
},
|
||||||
|
blockStart: "right",
|
||||||
|
blockEnd: "left",
|
||||||
|
inlineStart: "bottom",
|
||||||
|
inlineEnd: "top",
|
||||||
|
}];
|
||||||
|
|
||||||
|
export function runTests(data) {
|
||||||
|
for (let testWM of writingModes) {
|
||||||
|
for (let cbWM of writingModes) {
|
||||||
|
runTestsWithWM(data, testWM, cbWM);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function assert_initial(property, initial) {
|
||||||
|
test(() => {
|
||||||
|
if (!getComputedStyle(target)[property])
|
||||||
|
return;
|
||||||
|
target.style[property] = 'initial';
|
||||||
|
assert_equals(getComputedStyle(target)[property], initial);
|
||||||
|
target.style[property] = '';
|
||||||
|
}, 'Property ' + property + ' has initial value ' + initial);
|
||||||
|
}
|
||||||
|
|
||||||
|
function assert_inherited(property, initial, other) {
|
||||||
|
assert_initial(property, initial);
|
||||||
|
|
||||||
|
test(() => {
|
||||||
|
if (!getComputedStyle(target)[property])
|
||||||
|
return;
|
||||||
|
container.style[property] = 'initial';
|
||||||
|
target.style[property] = 'unset';
|
||||||
|
assert_not_equals(getComputedStyle(container)[property], other);
|
||||||
|
assert_not_equals(getComputedStyle(target)[property], other);
|
||||||
|
container.style[property] = other;
|
||||||
|
assert_equals(getComputedStyle(container)[property], other);
|
||||||
|
assert_equals(getComputedStyle(target)[property], other);
|
||||||
|
target.style[property] = 'initial';
|
||||||
|
assert_not_equals(getComputedStyle(container)[property], other);
|
||||||
|
assert_not_equals(getComputedStyle(target)[property], other);
|
||||||
|
target.style[property] = 'inherit';
|
||||||
|
assert_equals(getComputedStyle(container)[property], other);
|
||||||
|
container.style[property] = '';
|
||||||
|
target.style[property] = '';
|
||||||
|
}, 'Property ' + property + ' inherits');
|
||||||
|
}
|
||||||
|
|
||||||
|
function assert_not_inherited(property, initial, other) {
|
||||||
|
assert_initial(property, initial);
|
||||||
|
|
||||||
|
test(() => {
|
||||||
|
if (!getComputedStyle(target)[property])
|
||||||
|
return;
|
||||||
|
container.style[property] = 'initial';
|
||||||
|
target.style[property] = 'unset';
|
||||||
|
assert_not_equals(getComputedStyle(container)[property], other);
|
||||||
|
assert_not_equals(getComputedStyle(target)[property], other);
|
||||||
|
container.style[property] = other;
|
||||||
|
assert_equals(getComputedStyle(container)[property], other);
|
||||||
|
assert_not_equals(getComputedStyle(target)[property], other);
|
||||||
|
target.style[property] = 'inherit';
|
||||||
|
assert_equals(getComputedStyle(target)[property], other);
|
||||||
|
container.style[property] = '';
|
||||||
|
target.style[property] = '';
|
||||||
|
}, 'Property ' + property + ' does not inherit');
|
||||||
|
}
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 1px 2px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
height: 32px;
|
height: 30px;
|
||||||
width: 26px;
|
width: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
height: 4px;
|
height: 2px;
|
||||||
width: 8px;
|
width: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > * {
|
.container > * {
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 1px 2px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
height: 42px;
|
height: 40px;
|
||||||
width: 26px;
|
width: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
height: 4px;
|
height: 2px;
|
||||||
width: 8px;
|
width: 4px;
|
||||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 1px 2px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
height: 32px;
|
height: 30px;
|
||||||
width: 26px;
|
width: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
height: 4px;
|
height: 2px;
|
||||||
width: 8px;
|
width: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > * {
|
.container > * {
|
||||||
|
|
@ -33,8 +34,8 @@
|
||||||
height: 6px;
|
height: 6px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
.big > .container > * { margin-left: 18px; }
|
.big > .container > * { margin-left: 14px; }
|
||||||
.small > .container > * { margin-left: 0px; }
|
.small > .container > * { margin-left: -4px; }
|
||||||
|
|
||||||
.big .alignStart { margin-top: 0px; }
|
.big .alignStart { margin-top: 0px; }
|
||||||
.big .alignCenter { margin-top: 13px; }
|
.big .alignCenter { margin-top: 13px; }
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 1px 2px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
height: 32px;
|
height: 30px;
|
||||||
width: 26px;
|
width: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
height: 4px;
|
height: 2px;
|
||||||
width: 8px;
|
width: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > * {
|
.container > * {
|
||||||
|
|
@ -33,8 +34,8 @@
|
||||||
height: 6px;
|
height: 6px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
.big > .container > * { margin-left: 18px; }
|
.big > .container > * { margin-left: 14px; }
|
||||||
.small > .container > * { margin-left: 0px; }
|
.small > .container > * { margin-left: -4px; }
|
||||||
|
|
||||||
.big .alignStart { margin-top: 0px; }
|
.big .alignStart { margin-top: 0px; }
|
||||||
.big .alignCenter { margin-top: 13px; }
|
.big .alignCenter { margin-top: 13px; }
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 2px 1px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
width: 32px;
|
width: 30px;
|
||||||
height: 26px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
width: 4px;
|
width: 2px;
|
||||||
height: 8px;
|
height: 4px;
|
||||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -34,12 +35,12 @@
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.big .alignStart { margin-left: 26px; }
|
.big .alignStart { margin-left: 24px; }
|
||||||
.big .alignCenter { margin-left: 13px; }
|
.big .alignCenter { margin-left: 11px; }
|
||||||
.big .alignEnd { margin-left: 0px; }
|
.big .alignEnd { margin-left: -2px; }
|
||||||
.small .alignStart { margin-left: -2px; }
|
.small .alignStart { margin-left: -4px; }
|
||||||
.small .alignCenter { margin-left: -1px; }
|
.small .alignCenter { margin-left: -3px; }
|
||||||
.small .alignEnd { margin-left: 0px; }
|
.small .alignEnd { margin-left: -2px; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 2px 1px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
width: 32px;
|
width: 30px;
|
||||||
height: 26px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
width: 4px;
|
width: 2px;
|
||||||
height: 8px;
|
height: 4px;
|
||||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -34,12 +35,12 @@
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.big .alignStart { margin-left: 26px; }
|
.big .alignStart { margin-left: 24px; }
|
||||||
.big .alignCenter { margin-left: 13px; }
|
.big .alignCenter { margin-left: 11px; }
|
||||||
.big .alignEnd { margin-left: 0px; }
|
.big .alignEnd { margin-left: -2px; }
|
||||||
.small .alignStart { margin-left: -2px; }
|
.small .alignStart { margin-left: -4px; }
|
||||||
.small .alignCenter { margin-left: -1px; }
|
.small .alignCenter { margin-left: -3px; }
|
||||||
.small .alignEnd { margin-left: 0px; }
|
.small .alignEnd { margin-left: -2px; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 2px 1px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
width: 32px;
|
width: 30px;
|
||||||
height: 26px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
width: 4px;
|
width: 2px;
|
||||||
height: 8px;
|
height: 4px;
|
||||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 2px 1px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
width: 42px;
|
width: 40px;
|
||||||
height: 26px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
width: 4px;
|
width: 2px;
|
||||||
height: 8px;
|
height: 4px;
|
||||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 2px 1px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
width: 32px;
|
width: 30px;
|
||||||
height: 26px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
width: 4px;
|
width: 2px;
|
||||||
height: 8px;
|
height: 4px;
|
||||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -34,12 +35,12 @@
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.big .alignStart { margin-left: 26px; }
|
.big .alignStart { margin-left: 24px; }
|
||||||
.big .alignCenter { margin-left: 13px; }
|
.big .alignCenter { margin-left: 11px; }
|
||||||
.big .alignEnd { margin-left: 0px; }
|
.big .alignEnd { margin-left: -2px; }
|
||||||
.small .alignStart { margin-left: -2px; }
|
.small .alignStart { margin-left: -4px; }
|
||||||
.small .alignCenter { margin-left: -1px; }
|
.small .alignCenter { margin-left: -3px; }
|
||||||
.small .alignEnd { margin-left: 0px; }
|
.small .alignEnd { margin-left: -2px; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 2px 1px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
width: 32px;
|
width: 30px;
|
||||||
height: 26px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
width: 4px;
|
width: 2px;
|
||||||
height: 8px;
|
height: 4px;
|
||||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -34,12 +35,12 @@
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.big .alignStart { margin-left: 26px; }
|
.big .alignStart { margin-left: 24px; }
|
||||||
.big .alignCenter { margin-left: 13px; }
|
.big .alignCenter { margin-left: 11px; }
|
||||||
.big .alignEnd { margin-left: 0px; }
|
.big .alignEnd { margin-left: -2px; }
|
||||||
.small .alignStart { margin-left: -2px; }
|
.small .alignStart { margin-left: -4px; }
|
||||||
.small .alignCenter { margin-left: -1px; }
|
.small .alignCenter { margin-left: -3px; }
|
||||||
.small .alignEnd { margin-left: 0px; }
|
.small .alignEnd { margin-left: -2px; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 1px 2px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
height: 32px;
|
height: 30px;
|
||||||
width: 26px;
|
width: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
height: 4px;
|
height: 2px;
|
||||||
width: 8px;
|
width: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > * {
|
.container > * {
|
||||||
|
|
@ -33,8 +34,8 @@
|
||||||
height: 6px;
|
height: 6px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
.big > .container > * { margin-left: 18px; }
|
.big > .container > * { margin-left: 14px; }
|
||||||
.small > .container > * { margin-left: 0px; }
|
.small > .container > * { margin-left: -4px; }
|
||||||
|
|
||||||
.big .alignStart { margin-top: 0px; }
|
.big .alignStart { margin-top: 0px; }
|
||||||
.big .alignCenter { margin-top: 13px; }
|
.big .alignCenter { margin-top: 13px; }
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding: 1px 2px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
background: yellow;
|
background: yellow;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -20,12 +21,12 @@
|
||||||
br { clear: both }
|
br { clear: both }
|
||||||
|
|
||||||
.big > .container {
|
.big > .container {
|
||||||
height: 32px;
|
height: 30px;
|
||||||
width: 26px;
|
width: 22px;
|
||||||
}
|
}
|
||||||
.small > .container {
|
.small > .container {
|
||||||
height: 4px;
|
height: 2px;
|
||||||
width: 8px;
|
width: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > * {
|
.container > * {
|
||||||
|
|
@ -33,8 +34,8 @@
|
||||||
height: 6px;
|
height: 6px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
.big > .container > * { margin-left: 18px; }
|
.big > .container > * { margin-left: 14px; }
|
||||||
.small > .container > * { margin-left: 0px; }
|
.small > .container > * { margin-left: -4px; }
|
||||||
|
|
||||||
.big .alignStart { margin-top: 0px; }
|
.big .alignStart { margin-top: 0px; }
|
||||||
.big .alignCenter { margin-top: 13px; }
|
.big .alignCenter { margin-top: 13px; }
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
== descriptor-prefix.html descriptor-prefix-ref.html
|
== descriptor-prefix.html descriptor-prefix-ref.html
|
||||||
== descriptor-suffix.html descriptor-suffix-ref.html
|
== descriptor-suffix.html descriptor-suffix-ref.html
|
||||||
== descriptor-range.html descriptor-range-ref.html
|
== descriptor-range.html descriptor-range-ref.html
|
||||||
== descriptor-pad.html descriptor-pad-ref.html
|
== descriptor-pad.html descriptor-pad-ref.html
|
||||||
== descriptor-fallback.html descriptor-fallback-ref.html
|
== descriptor-fallback.html descriptor-fallback-ref.html
|
||||||
== descriptor-symbols.html descriptor-symbols-ref.html
|
== descriptor-symbols.html descriptor-symbols-ref.html
|
||||||
== descriptor-negative-invalid.html descriptor-negative-invalid-ref.html
|
== descriptor-negative-invalid.html descriptor-negative-invalid-ref.html
|
||||||
|
|
|
||||||
|
|
@ -191,4 +191,4 @@
|
||||||
== object-position-svg-002p.html object-position-svg-002-ref.html
|
== object-position-svg-002p.html object-position-svg-002-ref.html
|
||||||
|
|
||||||
# Tests for gradient color stops with 'currentcolor'
|
# Tests for gradient color stops with 'currentcolor'
|
||||||
== color-stop-currentcolor.html color-stop-currentcolor-ref.html
|
== color-stop-currentcolor.html color-stop-currentcolor-ref.html
|
||||||
|
|
|
||||||
|
|
@ -132,4 +132,4 @@
|
||||||
== text-emphasis-line-height-001z.html text-emphasis-line-height-001-ref.html
|
== text-emphasis-line-height-001z.html text-emphasis-line-height-001-ref.html
|
||||||
|
|
||||||
# text-shadow 'currentcolor' test cases
|
# text-shadow 'currentcolor' test cases
|
||||||
== text-shadow-currentcolor.html text-shadow-currentcolor-ref.html
|
== text-shadow-currentcolor.html text-shadow-currentcolor-ref.html
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>Custom Elements: Custom element in foreign content</title>
|
||||||
|
<meta name="assert" content="HTML parser should not create non-HTML namespace custom elements">
|
||||||
|
<link rel="help" href="https://html.spec.whatwg.org/#create-an-element-for-the-token">
|
||||||
|
<link rel="help" href="https://dom.spec.whatwg.org/#concept-create-element">
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script>
|
||||||
|
class ThrowsException extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
throw 'Bad';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
customElements.define('throws-exception', ThrowsException);
|
||||||
|
</script>
|
||||||
|
<svg>
|
||||||
|
<throws-exception/>
|
||||||
|
</svg>
|
||||||
|
<script>
|
||||||
|
test(function () {
|
||||||
|
var instance = document.querySelector('throws-exception');
|
||||||
|
assert_false(instance instanceof ThrowsException,
|
||||||
|
'The HTML parser must NOT instantiate a custom element in non-HTML namespaces');
|
||||||
|
assert_false(instance instanceof HTMLUnknownElement, 'The HTML parser should not fallback');
|
||||||
|
assert_true(instance instanceof SVGElement,
|
||||||
|
'The element created by the HTML parser must be an instance of SVGElement');
|
||||||
|
}, 'HTML parser should not create custom elements in non-HTML namespaces');
|
||||||
|
</script>
|
||||||
|
|
@ -58,7 +58,7 @@ below to fix all errors reported.
|
||||||
element whose `content` attribute has a malformed value; **fix**: ensure
|
element whose `content` attribute has a malformed value; **fix**: ensure
|
||||||
the value of the `content` attribute starts with `?` or `#` or is empty.
|
the value of the `content` attribute starts with `?` or `#` or is empty.
|
||||||
|
|
||||||
* **MISSING-LINK**: CSS test file is missing a link to a spec. **fix**: Ensure that there is a `<link rel="help" src="[url]">` for the spec.
|
* **MISSING-LINK**: CSS test file is missing a link to a spec. **fix**: Ensure that there is a `<link rel="help" href="[url]">` for the spec.
|
||||||
* Note: `MISSING-LINK` is designed to ensure that the CSS build tool can find the tests. Note that the CSS build system is primarily used by [test.csswg.org/](http://test.csswg.org/), which doesn't use `wptserve`, so `*.any.js` and similar tests won't work there; stick with the `.html` equivalent.
|
* Note: `MISSING-LINK` is designed to ensure that the CSS build tool can find the tests. Note that the CSS build system is primarily used by [test.csswg.org/](http://test.csswg.org/), which doesn't use `wptserve`, so `*.any.js` and similar tests won't work there; stick with the `.html` equivalent.
|
||||||
|
|
||||||
* **MISSING-TESTHARNESSREPORT**: Test file is missing an instance of
|
* **MISSING-TESTHARNESSREPORT**: Test file is missing an instance of
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/feature-policy/experimental-features/resources/common.js"></script>
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
width: 100%;
|
||||||
|
height: 300%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
<script>
|
||||||
|
let cross_origin_url =
|
||||||
|
"http://{{hosts[alt][www]}}:{{ports[http][0]}}/" +
|
||||||
|
"feature-policy/experimental-features/resources/lazyload-contents.html";
|
||||||
|
|
||||||
|
let load_timeout = 400; // ms
|
||||||
|
let expected_timeout_msg = false;
|
||||||
|
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
|
||||||
|
// Sanity-check: Make sure lazyload='on' works as intended.
|
||||||
|
promise_test(async(t) => {
|
||||||
|
// Add a frame with lazyload="on".
|
||||||
|
let frame_on = createIframe(document.body, {
|
||||||
|
id: "ON",
|
||||||
|
lazyload: "on",
|
||||||
|
src: `${cross_origin_url}?id=ON`
|
||||||
|
});
|
||||||
|
// Sanity-check: The frame is not visible.
|
||||||
|
assert_greater_than(
|
||||||
|
frame_on.getBoundingClientRect().top,
|
||||||
|
window.innerHeight * 2,
|
||||||
|
"Unexpected position for <iframe> with ID 'ON'.");
|
||||||
|
let msg_or_timeout_attr_on =
|
||||||
|
await waitForMessageOrTimeout(t, "ON", load_timeout);
|
||||||
|
assert_equals(msg_or_timeout_attr_on,
|
||||||
|
expected_timeout_msg,
|
||||||
|
"With lazyload='on', the frame should not load.");
|
||||||
|
}, "Sanity-check: Contents do not load immediately (no eager-loading) " +
|
||||||
|
"when the lazyload attribute is 'on' and frame is in viewport.");
|
||||||
|
|
||||||
|
|
||||||
|
// Verify that when 'lazyload' policy is disabled, lazyload='off' and
|
||||||
|
// lazyload='auto' behave the same.
|
||||||
|
promise_test(async(t) => {
|
||||||
|
// Add a frame with lazyload="off".
|
||||||
|
let frame_on = createIframe(document.body, {
|
||||||
|
id: "OFF",
|
||||||
|
lazyload: "off",
|
||||||
|
src: `${cross_origin_url}?id=OFF`
|
||||||
|
});
|
||||||
|
// Sanity-check: The frame is not visible.
|
||||||
|
assert_greater_than(
|
||||||
|
frame_on.getBoundingClientRect().top,
|
||||||
|
window.innerHeight * 2,
|
||||||
|
"Unexpected position for <iframe> with ID 'OFF'.");
|
||||||
|
let msg_or_timeout_attr_off =
|
||||||
|
await waitForMessageOrTimeout(t, "OFF", load_timeout);
|
||||||
|
|
||||||
|
// Now do the same for lazyload='auto'.
|
||||||
|
let frame_auto = createIframe(document.body, {
|
||||||
|
id: "AUTO",
|
||||||
|
lazyload: "auto",
|
||||||
|
src: `${cross_origin_url}?id=AUTO`
|
||||||
|
});
|
||||||
|
// Sanity-check: The frame is not visible.
|
||||||
|
assert_greater_than(
|
||||||
|
frame_on.getBoundingClientRect().top,
|
||||||
|
window.innerHeight * 2,
|
||||||
|
"Unexpected position for <iframe> with ID 'AUTO'.");
|
||||||
|
let msg_or_timeout_attr_auto =
|
||||||
|
await waitForMessageOrTimeout(t, "AUTO", load_timeout);
|
||||||
|
|
||||||
|
// The result should be the same.
|
||||||
|
assert_equals(
|
||||||
|
msg_or_timeout_attr_off,
|
||||||
|
msg_or_timeout_attr_auto,
|
||||||
|
"lazyload='off' not treated as 'auto'.");
|
||||||
|
}, "When 'lazyload' feature is disabled, a frame cannot avoid lazyloading " +
|
||||||
|
"by setting 'lazyload' attribute to 'off'");
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
Feature-Policy: lazyload 'none'
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/feature-policy/experimental-features/resources/common.js"></script>
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
width: 100%;
|
||||||
|
height: 300%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
<script>
|
||||||
|
let cross_origin_url =
|
||||||
|
"http://{{hosts[alt][www]}}:{{ports[http][0]}}/" +
|
||||||
|
"feature-policy/experimental-features/resources/lazyload-contents.html";
|
||||||
|
|
||||||
|
let load_timeout = 400; // ms
|
||||||
|
let expected_timeout_msg = false;
|
||||||
|
let expected_load_msg = "This page is lazyloaded.";
|
||||||
|
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
|
||||||
|
// Sanity-check: Make sure lazyload='on' works as intended.
|
||||||
|
promise_test(async(t) => {
|
||||||
|
// Add a frame with lazyload="on".
|
||||||
|
let frame_on = createIframe(document.body, {
|
||||||
|
id: "ON",
|
||||||
|
lazyload: "on",
|
||||||
|
src: `${cross_origin_url}?id=ON`
|
||||||
|
});
|
||||||
|
// Sanity-check: The frame is not visible.
|
||||||
|
assert_greater_than(
|
||||||
|
frame_on.getBoundingClientRect().top,
|
||||||
|
window.innerHeight * 2,
|
||||||
|
"Unexpected position for <iframe> with ID 'ON'.");
|
||||||
|
let msg_or_timeout_attr_on =
|
||||||
|
await waitForMessageOrTimeout(t, "ON", load_timeout);
|
||||||
|
assert_equals(msg_or_timeout_attr_on,
|
||||||
|
expected_timeout_msg,
|
||||||
|
"With lazyload='on', the frame should not load.");
|
||||||
|
}, "Sanity-check: Contents do not load immediately (no eager-loading) " +
|
||||||
|
"when the lazyload attribute is 'on' and frame is in viewport.");
|
||||||
|
|
||||||
|
// When feature is enabled, a frame can turn off lazy loading by setting the
|
||||||
|
// attribute to 'off'.
|
||||||
|
promise_test(async(t) => {
|
||||||
|
// Add a frame with lazyload="off".
|
||||||
|
let frame_off = createIframe(document.body, {
|
||||||
|
id: "OFF",
|
||||||
|
lazyload: "off",
|
||||||
|
src: `${cross_origin_url}?id=OFF`
|
||||||
|
});
|
||||||
|
// Sanity-check: The frame is not visible.
|
||||||
|
assert_greater_than(
|
||||||
|
frame_off.getBoundingClientRect().top,
|
||||||
|
window.innerHeight * 2,
|
||||||
|
"Unexpected position for <iframe> with ID 'OFF'.");
|
||||||
|
let msg_or_timeout_attr_off =
|
||||||
|
await waitForMessageOrTimeout(t, "OFF", load_timeout);
|
||||||
|
|
||||||
|
assert_equals(msg_or_timeout_attr_off,
|
||||||
|
expected_load_msg,
|
||||||
|
"With lazyload='off', the frame should load.");
|
||||||
|
}, "When 'lazyload' feature is enabled, a frame can avoid lazyloading by " +
|
||||||
|
"setting 'lazyload' attribute to 'off'");
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
Feature-Policy: lazyload *
|
||||||
|
|
@ -32,3 +32,29 @@ function onMessage(e) {
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener("message", onMessage);
|
window.addEventListener("message", onMessage);
|
||||||
|
|
||||||
|
// Waits for |load_timeout| before resolving the promise. It will resolve the
|
||||||
|
// promise sooner if a message event with |e.data.id| of |id| is received.
|
||||||
|
// In such a case the response is the contents of the message |e.data.contents|.
|
||||||
|
// Otherwise, returns false (when timeout occurs).
|
||||||
|
function waitForMessageOrTimeout(t, id, load_timeout) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
window.addEventListener(
|
||||||
|
"message",
|
||||||
|
(e) => {
|
||||||
|
if (!e.data || e.data.id !== id)
|
||||||
|
return;
|
||||||
|
resolve(e.data.contents);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
t.step_timeout(() => { resolve(false); }, load_timeout);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createIframe(container, attributes) {
|
||||||
|
var new_iframe = document.createElement("iframe");
|
||||||
|
for (attr_name in attributes)
|
||||||
|
new_iframe.setAttribute(attr_name, attributes[attr_name]);
|
||||||
|
container.appendChild(new_iframe);
|
||||||
|
return new_iframe;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<body>
|
||||||
|
<p>This page is lazyloaded.</p>
|
||||||
|
<script>
|
||||||
|
let query_index = window.location.href.indexOf("?id=");
|
||||||
|
let id = window.location.href.substr(query_index + 4);
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
let p = document.querySelector("p");
|
||||||
|
let contents = p ? p.innerHTML : "null";
|
||||||
|
window.parent.postMessage({"id": id, "contents": contents}, "*");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
@ -1,12 +1,22 @@
|
||||||
<script src="/common/PrefixedPostMessage.js"></script>
|
<script src="/common/PrefixedPostMessage.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var prefixedMessage = new PrefixedMessageResource();
|
var prefixedMessage = new PrefixedMessageResource();
|
||||||
window.addEventListener('load', () => {
|
var max = 50, attempts = 0;
|
||||||
|
function sendCoordinates() {
|
||||||
|
// Certain windowing systems position windows asynchronously.
|
||||||
|
// As a result, the window may not be positioned yet when the
|
||||||
|
// load event fires. To accommodate this, allow waiting up to
|
||||||
|
// 5 seconds for positioning to take place.
|
||||||
|
if (!window.screenX && !window.screenY && ++attempts < max) {
|
||||||
|
setTimeout(sendCoordinates, 100);
|
||||||
|
return;
|
||||||
|
}
|
||||||
prefixedMessage.postToOpener({
|
prefixedMessage.postToOpener({
|
||||||
left: window.screenX,
|
left: window.screenX,
|
||||||
top: window.screenY,
|
top: window.screenY,
|
||||||
width: window.innerWidth,
|
width: window.innerWidth,
|
||||||
height: window.innerHeight
|
height: window.innerHeight
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
|
window.addEventListener('load', sendCoordinates);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<title>fieldset border gap with negative margin</title>
|
||||||
|
<link rel=match href=no-red-ref.html>
|
||||||
|
<style>
|
||||||
|
fieldset { border:none; border-left: 100px solid red; margin: 0; padding: 0; height:100px; }
|
||||||
|
legend { padding: 0; margin-left: -100px; width: 100px; height: 100px; transform: rotate(45deg); }
|
||||||
|
</style>
|
||||||
|
<p>There should be no red.</p>
|
||||||
|
<fieldset>
|
||||||
|
<legend></legend>
|
||||||
|
</fieldset>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<title>fieldset border gap</title>
|
<title>fieldset border gap</title>
|
||||||
<link rel=match href=fieldset-border-gap-ref.html>
|
<link rel=match href=fieldset-border-gap-position-relative-ref.html>
|
||||||
<style>
|
<style>
|
||||||
fieldset, legend { margin: 0; padding: 0; }
|
fieldset, legend { margin: 0; padding: 0; }
|
||||||
fieldset { border: none; border-top: 100px solid red; width: 100px; }
|
fieldset { border: none; border-top: 100px solid red; width: 100px; }
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<!doctype html>
|
||||||
|
<title>Reference there should be no red</title>
|
||||||
|
<p>There should be no red.</p>
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue