mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +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]
|
||||
expected: FAIL
|
||||
|
||||
[outline-width end]
|
||||
expected: FAIL
|
||||
|
||||
[border-bottom-width end]
|
||||
expected: FAIL
|
||||
|
||||
[bottom intermediate]
|
||||
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]
|
||||
type: testharness
|
||||
expected: TIMEOUT
|
||||
[adoption is from appendChild]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
[non-active-document.html]
|
||||
type: testharness
|
||||
expected: CRASH
|
||||
[DOMParser]
|
||||
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]
|
||||
expected: FAIL
|
||||
|
||||
[async document.open() after parser is aborted]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -5,35 +5,29 @@
|
|||
[response.formData() with input: a&b&c]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: a=b&c=d]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: &&&a=b&&&&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: a=b&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a=b&c=d]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: &&&a=b&&&&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a=b&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
|
||||
[urlencoded-parser.any.worker.html]
|
||||
[response.formData() with input: a&b&c]
|
||||
expected: FAIL
|
||||
|
||||
[response.formData() with input: a=b&c=d]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a=b&c=d&]
|
||||
expected: FAIL
|
||||
|
||||
[request.formData() with input: a&b&c]
|
||||
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]
|
||||
type: testharness
|
||||
expected: ERROR
|
||||
[dedicated worker in shared worker in dedicated worker]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
"property",
|
||||
"name",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
],
|
||||
"AXAPI" : [
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
"property",
|
||||
"AXDescription",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
],
|
||||
"IAccessible2" : [
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
"property",
|
||||
"accName",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
],
|
||||
"UIA" : [
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
"property",
|
||||
"Name",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
"property",
|
||||
"name",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
],
|
||||
"AXAPI" : [
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
"property",
|
||||
"AXDescription",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
],
|
||||
"IAccessible2" : [
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
"property",
|
||||
"accName",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
],
|
||||
"UIA" : [
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
"property",
|
||||
"Name",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
"property",
|
||||
"name",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
],
|
||||
"AXAPI" : [
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
"property",
|
||||
"AXDescription",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
],
|
||||
"IAccessible2" : [
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
"property",
|
||||
"accName",
|
||||
"is",
|
||||
"foo bar baz"
|
||||
"foo baz"
|
||||
]
|
||||
],
|
||||
"UIA" : [
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
"property",
|
||||
"Name",
|
||||
"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>
|
||||
<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-013-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.">
|
||||
<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 inline blocks.">
|
||||
<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: 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>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
</span>
|
||||
</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>
|
||||
<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-013-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.">
|
||||
<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 inline blocks.">
|
||||
<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: 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>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
</span>
|
||||
</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="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 class="container relative">
|
||||
<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 class="container relative">
|
||||
<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>
|
||||
|
||||
|
|
@ -77,19 +77,19 @@
|
|||
|
||||
<div class="container relative">
|
||||
<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 class="container relative">
|
||||
<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 class="container relative">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
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");
|
||||
testElem.style.setProperty("margin-top", "initial", "important");
|
||||
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.");
|
||||
|
||||
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>
|
||||
</body>
|
||||
</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>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 42px;
|
||||
width: 26px;
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
@ -33,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
@ -33,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 42px;
|
||||
height: 26px;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
.big .alignStart { margin-left: 24px; }
|
||||
.big .alignCenter { margin-left: 11px; }
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
@ -33,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -20,12 +21,12 @@
|
|||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
|
|
@ -33,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
== descriptor-prefix.html descriptor-prefix-ref.html
|
||||
== descriptor-suffix.html descriptor-suffix-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-symbols.html descriptor-symbols-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
|
||||
|
||||
# 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-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
|
||||
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.
|
||||
|
||||
* **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);
|
||||
|
||||
// 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>
|
||||
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({
|
||||
left: window.screenX,
|
||||
top: window.screenY,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
});
|
||||
});
|
||||
}
|
||||
window.addEventListener('load', sendCoordinates);
|
||||
</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>
|
||||
<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>
|
||||
fieldset, legend { margin: 0; padding: 0; }
|
||||
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