mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
Update web-platform-tests to revision 936827a6527f1c53051d3bc5bc79304c88c0737f
This commit is contained in:
parent
c585f4fff5
commit
02a68a38f0
338 changed files with 14862 additions and 2933 deletions
|
@ -1,6 +1,7 @@
|
|||
# This is the configuration file for Azure Pipelines, used to run tests on
|
||||
# macOS. Documentation to help understand this setup:
|
||||
# https://docs.microsoft.com/en-us/azure/devops/pipelines/yaml-schema
|
||||
# https://docs.microsoft.com/en-us/azure/devops/pipelines/build/triggers
|
||||
# https://docs.microsoft.com/en-us/azure/devops/pipelines/process/multiple-phases
|
||||
# https://docs.microsoft.com/en-us/azure/devops/pipelines/process/templates
|
||||
# https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables
|
||||
|
@ -10,13 +11,20 @@
|
|||
# project is required:
|
||||
# - The "Build pull requests from forks of this repository" setting must be
|
||||
# enabled: https://docs.microsoft.com/en-us/azure/devops/pipelines/repos/github#validate-contributions-from-forks
|
||||
# - A scheduled build needs to be set up for one of the epochs/* branches.
|
||||
# - Self-hosted agents for Windows 10 are used:
|
||||
# - 'Hosted Windows Client' is the latest Windows 10
|
||||
# - 'Hosted Windows Client Next' is Windows 10 Insider Preview
|
||||
# Documention for the setup of these agents:
|
||||
# https://docs.microsoft.com/en-us/azure/devops/pipelines/agents/v2-windows
|
||||
|
||||
schedules:
|
||||
- cron: "15 */6 * * *"
|
||||
displayName: Every six hours
|
||||
branches:
|
||||
include:
|
||||
- epochs/six_hourly
|
||||
always: true
|
||||
|
||||
jobs:
|
||||
# The affected tests jobs are unconditional for speed, as most PRs have one or
|
||||
# more affected tests: https://github.com/web-platform-tests/wpt/issues/13936.
|
||||
|
|
|
@ -19,23 +19,25 @@ self.addEventListener('install', (event) => {
|
|||
});
|
||||
|
||||
// Resolves when the service worker receives the 'activate' event.
|
||||
const kServiceWorkerActivatedPromise = new Promise(resolve => {
|
||||
const kServiceWorkerActivatedPromise = new Promise((resolve) => {
|
||||
self.addEventListener('activate', event => { resolve(); });
|
||||
});
|
||||
|
||||
const kCookieChangeReceivedPromise = new Promise((resolve) => {
|
||||
self.addEventListener('cookiechange', (event) => {
|
||||
resolve(event);
|
||||
});
|
||||
});
|
||||
|
||||
promise_test(async testCase => {
|
||||
await kServiceWorkerActivatedPromise;
|
||||
|
||||
const cookie_change_received_promise = new Promise((resolve) => {
|
||||
self.oncookiechange = (event) => { resolve(event); };
|
||||
});
|
||||
|
||||
await cookieStore.set('cookie-name', 'cookie-value');
|
||||
testCase.add_cleanup(async () => {
|
||||
await cookieStore.delete('cookie-name');
|
||||
});
|
||||
|
||||
const event = await cookie_change_received_promise;
|
||||
const event = await kCookieChangeReceivedPromise;
|
||||
assert_equals(event.type, 'cookiechange');
|
||||
assert_equals(event.changed.length, 1);
|
||||
assert_equals(event.changed[0].name, 'cookie-name');
|
||||
|
|
|
@ -11,11 +11,11 @@
|
|||
(async () => {
|
||||
const scope = 'scope';
|
||||
|
||||
let registration = await navigator.serviceWorker.getRegistration(scope);
|
||||
if (registration)
|
||||
await registration.unregister();
|
||||
registration = await navigator.serviceWorker.register(
|
||||
const registration = await navigator.serviceWorker.register(
|
||||
'serviceworker_cookieStore_subscriptions_eventhandler_attribute.js', {scope});
|
||||
add_completion_callback(() => {
|
||||
registration.unregister();
|
||||
});
|
||||
|
||||
fetch_tests_from_worker(registration.installing);
|
||||
})();
|
||||
|
|
|
@ -19,19 +19,19 @@ self.addEventListener('install', (event) => {
|
|||
});
|
||||
|
||||
// Resolves when the service worker receives the 'activate' event.
|
||||
const kServiceWorkerActivatedPromise = new Promise(resolve => {
|
||||
const kServiceWorkerActivatedPromise = new Promise((resolve) => {
|
||||
self.addEventListener('activate', event => { resolve(); });
|
||||
});
|
||||
|
||||
const kCookieChangeReceivedPromise = new Promise((resolve) => {
|
||||
self.addEventListener('cookiechange', (event) => {
|
||||
resolve(event);
|
||||
});
|
||||
});
|
||||
|
||||
promise_test(async testCase => {
|
||||
await kServiceWorkerActivatedPromise;
|
||||
|
||||
const cookie_change_received_promise = new Promise((resolve) => {
|
||||
self.addEventListener('cookiechange', (event) => {
|
||||
resolve(event);
|
||||
});
|
||||
});
|
||||
|
||||
await cookieStore.set('another-cookie-name', 'cookie-value');
|
||||
testCase.add_cleanup(async () => {
|
||||
await cookieStore.delete('another-cookie-name');
|
||||
|
@ -41,7 +41,7 @@ promise_test(async testCase => {
|
|||
await cookieStore.delete('cookie-name');
|
||||
});
|
||||
|
||||
const event = await cookie_change_received_promise;
|
||||
const event = await kCookieChangeReceivedPromise;
|
||||
assert_equals(event.type, 'cookiechange');
|
||||
assert_equals(event.changed.length, 1);
|
||||
assert_equals(event.changed[0].name, 'cookie-name');
|
||||
|
|
|
@ -10,11 +10,11 @@
|
|||
(async () => {
|
||||
const scope = 'scope';
|
||||
|
||||
let registration = await navigator.serviceWorker.getRegistration(scope);
|
||||
if (registration)
|
||||
await registration.unregister();
|
||||
registration = await navigator.serviceWorker.register(
|
||||
const registration = await navigator.serviceWorker.register(
|
||||
'serviceworker_cookieStore_subscriptions_mismatch.js', {scope});
|
||||
add_completion_callback(() => {
|
||||
registration.unregister();
|
||||
});
|
||||
|
||||
fetch_tests_from_worker(registration.installing);
|
||||
})();
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
font: 3.75em/0.4 serif;
|
||||
margin-left: 1em;
|
||||
text-decoration: underline;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
span
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
font: 3.75em/0.4 serif;
|
||||
margin-left: 1em;
|
||||
text-decoration: underline;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
span#wrapper
|
||||
|
@ -49,4 +50,4 @@
|
|||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
test(
|
||||
function(){
|
||||
var target = document.getElementById("target");
|
||||
assert_equals(getComputedStyle(target).gap, "50px 50px");
|
||||
assert_equals(getComputedStyle(target).gap, "50px");
|
||||
assert_equals(getComputedStyle(target).rowGap, "50px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "50px");
|
||||
}, "gap is interpolable");
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
test(
|
||||
function(){
|
||||
var target = document.getElementById("target");
|
||||
assert_equals(getComputedStyle(target).gap, "100px 100px");
|
||||
assert_equals(getComputedStyle(target).gap, "100px");
|
||||
assert_equals(getComputedStyle(target).rowGap, "100px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "100px");
|
||||
}, "gap: normal is not interpolable");
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
test(
|
||||
function(){
|
||||
var target = document.getElementById("target");
|
||||
assert_equals(getComputedStyle(target).gap, "100px 100px");
|
||||
assert_equals(getComputedStyle(target).gap, "100px");
|
||||
assert_equals(getComputedStyle(target).rowGap, "100px");
|
||||
assert_equals(getComputedStyle(target).columnGap, "100px");
|
||||
}, "Default gap is not interpolable");
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Box Alignment Level 3: getComputedStyle().gap</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap">
|
||||
<meta name="assert" content="gap computed value is a pair of keyword or <length-percentage> values.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("gap", "normal");
|
||||
test_computed_value("gap", "10px");
|
||||
test_computed_value("gap", "20%");
|
||||
test_computed_value("gap", "calc(20% + 10px)");
|
||||
test_computed_value("gap", "calc(-0.5em + 10px)", "0px");
|
||||
test_computed_value("gap", "calc(0.5em + 10px)", "30px");
|
||||
|
||||
test_computed_value("gap", "normal 10px");
|
||||
test_computed_value("gap", "10px 20%");
|
||||
test_computed_value("gap", "20% calc(20% + 10px)");
|
||||
test_computed_value("gap", "calc(20% + 10px) normal");
|
||||
|
||||
test_computed_value("gap", "calc(-0.5em + 10px) calc(0.5em + 10px)", "0px 30px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Box Alignment Level 3: parsing gap with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap">
|
||||
<meta name="assert" content="gap supports only the grammar '<row-gap> <column-gap>?'.">
|
||||
<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("gap", "auto");
|
||||
test_invalid_value("gap", "-10px");
|
||||
|
||||
test_invalid_value("gap", "10px 20% 30px");
|
||||
test_invalid_value("gap", "normal 10px normal");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Box Alignment Level 3: parsing gap with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-gap">
|
||||
<meta name="assert" content="row-gap supports the full grammar '<row-gap> <column-gap>?'.">
|
||||
<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("gap", "normal normal", "normal");
|
||||
test_valid_value("gap", "10px 10px", "10px");
|
||||
test_valid_value("gap", "20% 20%", "20%");
|
||||
test_valid_value("gap", "calc(20% + 10px) calc(20% + 10px)", "calc(20% + 10px)");
|
||||
|
||||
test_valid_value("gap", "normal 10px");
|
||||
test_valid_value("gap", "10px 20%");
|
||||
test_valid_value("gap", "20% calc(20% + 10px)");
|
||||
test_valid_value("gap", "calc(20% + 10px) 0px");
|
||||
test_valid_value("gap", "0px normal");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -3,9 +3,9 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS basic box model: parsing padding with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-box-3/#propdef-padding">
|
||||
<meta name="assert" content="padding supports only the grammar '<length>{1,4}'.">
|
||||
<meta name="assert" content="padding supports only the grammar '<length-percentage>{1,4}'.">
|
||||
<meta name="assert" content="Negative values are invalid.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
|
@ -23,12 +23,7 @@ test_invalid_value("padding-bottom", "10px 20px calc(2em + 3ex) auto");
|
|||
test_invalid_value("padding-bottom-left", "10px 20px");
|
||||
|
||||
test_invalid_value("padding-top", "-10px");
|
||||
|
||||
// The following are not yet rejected by browsers:
|
||||
test_invalid_value("padding", "20%");
|
||||
test_invalid_value("padding", "10px 20% 30% 40px");
|
||||
test_invalid_value("padding-right", "20%");
|
||||
test_invalid_value("padding-right", "calc(2em + 3%)");
|
||||
test_invalid_value("padding-right", "-20%");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -3,9 +3,8 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS basic box model: parsing padding with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-box-3/#propdef-padding">
|
||||
<meta name="assert" content="padding supports the full grammar '<length>{1,4}'.">
|
||||
<meta name="assert" content="padding supports the full grammar '<length-percentage>{1,4}'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
|
@ -20,6 +19,11 @@ test_valid_value("padding-top", "10px");
|
|||
test_valid_value("padding-right", "20px");
|
||||
test_valid_value("padding-bottom", "30px");
|
||||
test_valid_value("padding-left", "40px");
|
||||
|
||||
test_valid_value("padding", "20%");
|
||||
test_valid_value("padding", "10px 20% 30% 40px");
|
||||
test_valid_value("padding-right", "20%");
|
||||
test_valid_value("padding-right", "calc(2em + 3%)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -16,6 +16,60 @@
|
|||
<script>
|
||||
test_invalid_value("display", "grid inline-grid");
|
||||
test_invalid_value("display", "none grid");
|
||||
test_invalid_value("display", "none flow");
|
||||
test_invalid_value("display", "none ruby");
|
||||
test_invalid_value("display", "none flow-root");
|
||||
test_invalid_value("display", "none list-item");
|
||||
test_invalid_value("display", "contents list-item");
|
||||
test_invalid_value("display", "list-item contents");
|
||||
test_invalid_value("display", "flow flow");
|
||||
test_invalid_value("display", "block block");
|
||||
test_invalid_value("display", "flow flow-root");
|
||||
test_invalid_value("display", "flow-root flow-root");
|
||||
test_invalid_value("display", "block inline");
|
||||
test_invalid_value("display", "flex ruby");
|
||||
test_invalid_value("display", "ruby flex");
|
||||
test_invalid_value("display", "inline inline");
|
||||
test_invalid_value("display", "flex flex");
|
||||
test_invalid_value("display", "grid flex");
|
||||
test_invalid_value("display", "ruby grid");
|
||||
test_invalid_value("display", "flex grid");
|
||||
test_invalid_value("display", "grid table");
|
||||
test_invalid_value("display", "table flex");
|
||||
test_invalid_value("display", "flex table");
|
||||
test_invalid_value("display", "ruby table");
|
||||
test_invalid_value("display", "table table");
|
||||
test_invalid_value("display", "table flow-root");
|
||||
test_invalid_value("display", "flow-root ruby");
|
||||
test_invalid_value("display", "list-item list-item");
|
||||
test_invalid_value("display", "list-item table");
|
||||
test_invalid_value("display", "flex list-item");
|
||||
test_invalid_value("display", "list-item grid");
|
||||
test_invalid_value("display", "flow flow list-item");
|
||||
test_invalid_value("display", "grid flow list-item");
|
||||
test_invalid_value("display", "flow list-item flow");
|
||||
test_invalid_value("display", "block list-item block");
|
||||
test_invalid_value("display", "list-item flow-root flow");
|
||||
test_invalid_value("display", "list-item block block");
|
||||
test_invalid_value("display", "list-item block list-item");
|
||||
test_invalid_value("display", "list-item flow-root list-item");
|
||||
test_invalid_value("display", "list-item flow-root block list-item");
|
||||
test_invalid_value("display", "list-item block flow-root list-item");
|
||||
test_invalid_value("display", "block list-item flow-root list-item");
|
||||
test_invalid_value("display", "flow-root list-item block list-item");
|
||||
test_invalid_value("display", "list-item ruby");
|
||||
test_invalid_value("display", "ruby list-item");
|
||||
test_invalid_value("display", "ruby ruby");
|
||||
test_invalid_value("display", "ruby flow");
|
||||
test_invalid_value("display", "flow ruby");
|
||||
test_invalid_value("display", "ruby flow-root");
|
||||
test_invalid_value("display", "grid ruby");
|
||||
test_invalid_value("display", "table ruby");
|
||||
test_invalid_value("display", "table-row flow");
|
||||
test_invalid_value("display", "flow table-row");
|
||||
test_invalid_value("display", "table-row-group flow-root");
|
||||
test_invalid_value("display", "flex table-row-group");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -35,6 +35,99 @@ test_valid_value("display", "table-column");
|
|||
test_valid_value("display", "table-cell");
|
||||
test_valid_value("display", "table-caption");
|
||||
test_valid_value("display", "none");
|
||||
|
||||
// https://drafts.csswg.org/css-display/#the-display-properties
|
||||
test_valid_value("display", "run-in");
|
||||
test_valid_value("display", "flow", "block");
|
||||
test_valid_value("display", "flow-root");
|
||||
test_valid_value("display", "ruby");
|
||||
|
||||
test_valid_value("display", "flow list-item", "list-item");
|
||||
test_valid_value("display", "list-item flow", "list-item");
|
||||
test_valid_value("display", "flow-root list-item", "flow-root list-item");
|
||||
test_valid_value("display", "list-item flow-root", "flow-root list-item");
|
||||
|
||||
test_valid_value("display", "block flow", "block");
|
||||
test_valid_value("display", "flow block", "block");
|
||||
test_valid_value("display", "flow-root block", "flow-root");
|
||||
test_valid_value("display", "block flow-root", "flow-root");
|
||||
test_valid_value("display", "flex block", "flex");
|
||||
test_valid_value("display", "block flex", "flex");
|
||||
test_valid_value("display", "grid block", "grid");
|
||||
test_valid_value("display", "block grid", "grid");
|
||||
test_valid_value("display", "table block", "table");
|
||||
test_valid_value("display", "block table", "table");
|
||||
test_valid_value("display", "block ruby", "block ruby");
|
||||
test_valid_value("display", "ruby block", "block ruby");
|
||||
test_valid_value("display", "block list-item", "list-item");
|
||||
test_valid_value("display", "list-item block", "list-item");
|
||||
test_valid_value("display", "flow block list-item", "list-item");
|
||||
test_valid_value("display", "block flow list-item", "list-item");
|
||||
test_valid_value("display", "flow list-item block", "list-item");
|
||||
test_valid_value("display", "block list-item flow", "list-item");
|
||||
test_valid_value("display", "list-item block flow", "list-item");
|
||||
test_valid_value("display", "list-item flow block", "list-item");
|
||||
test_valid_value("display", "flow-root block list-item", "flow-root list-item");
|
||||
test_valid_value("display", "block flow-root list-item", "flow-root list-item");
|
||||
test_valid_value("display", "flow-root list-item block", "flow-root list-item");
|
||||
test_valid_value("display", "block list-item flow-root", "flow-root list-item");
|
||||
test_valid_value("display", "list-item block flow-root", "flow-root list-item");
|
||||
test_valid_value("display", "list-item flow-root block", "flow-root list-item");
|
||||
|
||||
test_valid_value("display", "inline flow", "inline");
|
||||
test_valid_value("display", "flow inline", "inline");
|
||||
test_valid_value("display", "flow-root inline", "inline-block");
|
||||
test_valid_value("display", "inline flow-root", "inline-block");
|
||||
test_valid_value("display", "flex inline", "inline-flex");
|
||||
test_valid_value("display", "inline flex", "inline-flex");
|
||||
test_valid_value("display", "grid inline", "inline-grid");
|
||||
test_valid_value("display", "inline grid", "inline-grid");
|
||||
test_valid_value("display", "table inline", "inline-table");
|
||||
test_valid_value("display", "inline table", "inline-table");
|
||||
test_valid_value("display", "inline ruby", "ruby");
|
||||
test_valid_value("display", "ruby inline", "ruby");
|
||||
test_valid_value("display", "inline list-item", "inline list-item");
|
||||
test_valid_value("display", "list-item inline", "inline list-item");
|
||||
test_valid_value("display", "flow inline list-item", "inline list-item");
|
||||
test_valid_value("display", "inline flow list-item", "inline list-item");
|
||||
test_valid_value("display", "flow list-item inline", "inline list-item");
|
||||
test_valid_value("display", "inline list-item flow", "inline list-item");
|
||||
test_valid_value("display", "list-item inline flow", "inline list-item");
|
||||
test_valid_value("display", "list-item flow inline", "inline list-item");
|
||||
test_valid_value("display", "flow-root inline list-item", "inline flow-root list-item");
|
||||
test_valid_value("display", "inline flow-root list-item", "inline flow-root list-item");
|
||||
test_valid_value("display", "flow-root list-item inline", "inline flow-root list-item");
|
||||
test_valid_value("display", "inline list-item flow-root", "inline flow-root list-item");
|
||||
test_valid_value("display", "list-item inline flow-root", "inline flow-root list-item");
|
||||
test_valid_value("display", "list-item flow-root inline", "inline flow-root list-item");
|
||||
|
||||
test_valid_value("display", "run-in flow", "run-in");
|
||||
test_valid_value("display", "flow run-in", "run-in");
|
||||
test_valid_value("display", "flow-root run-in", "run-in flow-root");
|
||||
test_valid_value("display", "run-in flow-root", "run-in flow-root");
|
||||
test_valid_value("display", "flex run-in", "run-in flex");
|
||||
test_valid_value("display", "run-in flex", "run-in flex");
|
||||
test_valid_value("display", "grid run-in", "run-in grid");
|
||||
test_valid_value("display", "run-in grid", "run-in grid");
|
||||
test_valid_value("display", "table run-in", "run-in table");
|
||||
test_valid_value("display", "run-in table", "run-in table");
|
||||
test_valid_value("display", "run-in ruby", "run-in ruby");
|
||||
test_valid_value("display", "ruby run-in", "run-in ruby");
|
||||
test_valid_value("display", "run-in list-item", "run-in list-item");
|
||||
test_valid_value("display", "list-item run-in", "run-in list-item");
|
||||
test_valid_value("display", "flow run-in list-item", "run-in list-item");
|
||||
test_valid_value("display", "run-in flow list-item", "run-in list-item");
|
||||
test_valid_value("display", "flow list-item run-in", "run-in list-item");
|
||||
test_valid_value("display", "run-in list-item flow", "run-in list-item");
|
||||
test_valid_value("display", "list-item run-in flow", "run-in list-item");
|
||||
test_valid_value("display", "list-item flow run-in", "run-in list-item");
|
||||
test_valid_value("display", "flow-root run-in list-item", "run-in flow-root list-item");
|
||||
test_valid_value("display", "run-in flow-root list-item", "run-in flow-root list-item");
|
||||
test_valid_value("display", "flow-root list-item run-in", "run-in flow-root list-item");
|
||||
test_valid_value("display", "run-in list-item flow-root", "run-in flow-root list-item");
|
||||
test_valid_value("display", "list-item run-in flow-root", "run-in flow-root list-item");
|
||||
test_valid_value("display", "list-item flow-root run-in", "run-in flow-root list-item");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexbox Layout Test: Atomic inline Flexible Box with height: min-content</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#valdef-width-min-content">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<meta name=assert content="This test checks that height: min-content computes to 'auto' for atomic inline level flexible box.">
|
||||
<style>
|
||||
#flexbox {
|
||||
background-color: green;
|
||||
display: inline-flex;
|
||||
height: min-content;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="flexbox">
|
||||
<div id="item">
|
||||
<div style="width:100px; height:100px;"></div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference: inline flow-root list-item with ::marker</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
ol,ul,li { margin:0; padding:0; }
|
||||
body { margin-left: 40px; }
|
||||
|
||||
li { border: 1px solid; display: list-item; }
|
||||
li::marker { content: counters(list-item, ".") " "; }
|
||||
|
||||
.wrap { width: 22ch; }
|
||||
.m { width: -webkit-min-content; width: min-content; }
|
||||
ib { display:inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li class=m>B</li>
|
||||
|
||||
<ol>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<ib><li class=m>B</li></ib>
|
||||
<ib><li class=m>C</li></ib>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<ib><li>A A A A A A A A A A A A A A A A A A A A </li></ib>
|
||||
<ib><li class=m>B</li></ib>
|
||||
<ib><li class=m>C</li></ib>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol>
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li class=m>b</li>
|
||||
</ol></li>
|
||||
<li class=m>C</li>
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol style="display:inline">
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li class=m>b</li>
|
||||
</ol></li>
|
||||
<li class=m>C</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: inline flow-root list-item with ::marker</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-pseudo">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868">
|
||||
<link rel="match" href="inline-block-list-marker-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
ol,ul,li { margin:0; padding:0; }
|
||||
body { margin-left: 40px; }
|
||||
|
||||
li { display: inline flow-root list-item; border: 1px solid; }
|
||||
li::marker { content: counters(list-item, ".") " "; }
|
||||
.wrap { width: 22ch; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
|
||||
<ol>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol>
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li>b</li>
|
||||
</ol></li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol style="display:inline">
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li>b</li>
|
||||
</ol></li>
|
||||
<li>C</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference: inline flow-root list-item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
ol,ul,li { margin:0; padding:0; }
|
||||
body { margin-left: 40px; }
|
||||
|
||||
li { border: 1px solid; display: list-item; }
|
||||
|
||||
.wrap { width: 22ch; }
|
||||
.m { width: -webkit-min-content; width: min-content; }
|
||||
ib { display:inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li class=m>B</li>
|
||||
|
||||
<ol>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<ib><li class=m>B</li></ib>
|
||||
<ib><li class=m>C</li></ib>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<ib><li>A A A A A A A A A A A A A A A A A A A A </li></ib>
|
||||
<ib><li class=m>B</li></ib>
|
||||
<ib><li class=m>C</li></ib>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol>
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li class=m>b</li>
|
||||
</ol></li>
|
||||
<li class=m>C</li>
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol style="display:inline">
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li class=m>b</li>
|
||||
</ol></li>
|
||||
<li class=m>C</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: inline flow-root list-item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#declaring-a-list-item">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868">
|
||||
<link rel="match" href="inline-block-list-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
ol,ul,li { margin:0; padding:0; }
|
||||
body { margin-left: 40px; }
|
||||
|
||||
li { border: 1px solid; display: inline flow-root list-item; }
|
||||
.wrap { width: 22ch; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
|
||||
<ol>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol>
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li>b</li>
|
||||
</ol></li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol style="display:inline">
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li>b</li>
|
||||
</ol></li>
|
||||
<li>C</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference: inline list-item with ::marker</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
ol,ul,li { margin:0; padding:0; }
|
||||
body { margin-left: 40px; }
|
||||
|
||||
span { border: 1px solid; }
|
||||
.wrap { width: 22ch; }
|
||||
ib { display:inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B</span>
|
||||
|
||||
<ol>
|
||||
<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B</span>
|
||||
<span>3 C</span>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B</span>
|
||||
<span>3 C</span>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B<ol>
|
||||
<span>2.1 a a a a a a a a a a a a a a a a a a a a </span><span>2.2 b</span>
|
||||
</ol></span>
|
||||
<span>3 C</span>
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<span>1 A A A A A A A A A A A A A A A A A A A A </span><span>2 B
|
||||
<ol style="display:inline"><span>2.1 a a a a a a a a a a a a a a a a a a a a </span><span>2.2 b</span>
|
||||
</ol></span><span>3 C</span>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: inline list-item with ::marker</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-pseudo">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868">
|
||||
<link rel="match" href="inline-list-marker-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
ol,ul,li { margin:0; padding:0; }
|
||||
body { margin-left: 40px; }
|
||||
|
||||
li { display: inline list-item; border: 1px solid; }
|
||||
li::marker { content: counters(list-item, ".") " "; }
|
||||
.wrap { width: 22ch; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
|
||||
<ol>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol>
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li>b</li>
|
||||
</ol></li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol style="display:inline">
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li>b</li>
|
||||
</ol></li>
|
||||
<li>C</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference: inline list-item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
ol,ul,li { margin:0; padding:0; }
|
||||
body { margin-left: 40px; }
|
||||
|
||||
span { border: 1px solid; }
|
||||
li { display: list-item; list-style-position: inside; }
|
||||
|
||||
.wrap { width: 22ch; }
|
||||
ib { display:inline-block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span><ib><li value=2></li></ib>B</span>
|
||||
|
||||
<ol>
|
||||
<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span><ib><li>B</li></ib></span>
|
||||
<span><ib><li>C</li></ib></span>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span><ib><li>B</li></ib></span>
|
||||
<span><ib><li>C</li></ib></span></ol><ol style="display:inline">
|
||||
<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span><ib><li></li></ib>B<ol>
|
||||
<span><ib><li>a</li></ib> a a a a a a a a a a a a a a a a a a a </span><span><ib><li>b</li></ib></span>
|
||||
</ol></li></ib></span>
|
||||
<span><ib><li>C</li></ib></span>
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<span><ib><li>A</li></ib> A A A A A A A A A A A A A A A A A A A </span><span><ib><li></li></ib><br>B <ol style="display:inline"><span><ib><li>a</li></ib> a a a a a a a a a a a a a a a a a a a </span><span><ib><li>b</li></ib></span>
|
||||
</ol></span><span><ib><li>C</li></ib></span>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference: table boxes inside inline list-items</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace;
|
||||
}
|
||||
|
||||
.l1 { display: inline list-item; }
|
||||
.l2 { display: inline flow-root list-item; }
|
||||
|
||||
span {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
div { background: blue; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
A<span class="l1">B<div style="display:inline-table">T</div>C</span>
|
||||
A<span class="l1">B<div style="display:inline-table">T</div>C</span>
|
||||
A<span class="l1">B<div style="display:inline-table">T</div>C</span>
|
||||
A<span class="l1">B<x><div style="display:inline-table">T</div></x>C</span>
|
||||
A<span class="l1">B<x style="display:block"><div style="display:inline-table">T</div></x>C</span>
|
||||
|
||||
A<span class="l2">B<div style="display:table">T</div>C</span>
|
||||
A<span class="l2">B<div style="display:table">T</div>C</span>
|
||||
A<span class="l2">B<div style="display:table">T</div>C</span>
|
||||
A<span class="l2">B<x><div style="display:inline-table">T</div></x>C</span>
|
||||
A<span class="l2">B<x style="display:block"><div style="display:table">T</div></x>C</span>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: table boxes inside inline list-items</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#ref-for-inline-table②">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868">
|
||||
<link rel="match" href="inline-list-with-table-child-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace;
|
||||
}
|
||||
|
||||
.l1 { display: inline list-item; }
|
||||
.l2 { display: inline flow-root list-item; }
|
||||
|
||||
span {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
div { background: blue; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
A<span class="l1">B<div style="display:table-cell">T</div>C</span>
|
||||
A<span class="l1">B<div style="display:table-row">T</div>C</span>
|
||||
A<span class="l1">B<div style="display:table-row-group">T</div>C</span>
|
||||
A<span class="l1">B<div style="display:inline-table">T</div>C</span>
|
||||
A<span class="l1">B<div style="display:table">T</div>C</span>
|
||||
|
||||
A<span class="l2">B<div style="display:table-cell">T</div>C</span>
|
||||
A<span class="l2">B<div style="display:table-row">T</div>C</span>
|
||||
A<span class="l2">B<div style="display:table-row-group">T</div>C</span>
|
||||
A<span class="l2">B<div style="display:inline-table">T</div>C</span>
|
||||
A<span class="l2">B<div style="display:table">T</div>C</span>
|
||||
|
||||
</body>
|
||||
</html>
|
62
tests/wpt/web-platform-tests/css/css-lists/inline-list.html
Normal file
62
tests/wpt/web-platform-tests/css/css-lists/inline-list.html
Normal file
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: inline list-item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-lists-3/#declaring-a-list-item">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105868">
|
||||
<link rel="match" href="inline-list-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
ol,ul,li { margin:0; padding:0; }
|
||||
body { margin-left: 40px; }
|
||||
|
||||
li { border: 1px solid; display: inline list-item; }
|
||||
.wrap { width: 22ch; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
|
||||
<ol>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ol style="display:inline">
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol>
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li>b</li>
|
||||
</ol></li>
|
||||
<li>C</li>
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<li>A A A A A A A A A A A A A A A A A A A A </li>
|
||||
<li>B<ol style="display:inline">
|
||||
<li>a a a a a a a a a a a a a a a a a a a a </li>
|
||||
<li>b</li>
|
||||
</ol></li>
|
||||
<li>C</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
|
@ -0,0 +1,7 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<ol>
|
||||
<li value=3>three
|
||||
<li value=6>six
|
||||
<li value=5>five
|
||||
</ol>
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<title>Interaction of ol reversed and list-item value</title>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value">
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="match" href="li-value-reversed-001-ref.html">
|
||||
<ol reversed>
|
||||
<li>three
|
||||
<li value=6>six
|
||||
<li>five
|
||||
</ol>
|
|
@ -0,0 +1,10 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<ol>
|
||||
<li value=6>six
|
||||
<li value=5>five
|
||||
<li value=7>seven
|
||||
<li value=6>six
|
||||
<li value=10>ten
|
||||
<li value=9>nine
|
||||
</ol>
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<title>Interaction of ol reversed and list-item value</title>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value">
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="match" href="li-value-reversed-002-ref.html">
|
||||
<ol reversed>
|
||||
<li>six
|
||||
<li>five
|
||||
<li value=7>seven
|
||||
<li>six
|
||||
<li value=10>ten
|
||||
<li>nine
|
||||
</ol>
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<title>Interaction of ol reversed and list-item value</title>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="match" href="li-value-reversed-002-ref.html">
|
||||
<ol reversed>
|
||||
<li>six
|
||||
<li>five
|
||||
<li style="counter-set: list-item 7">seven
|
||||
<li style="counter-increment: list-item -1">six
|
||||
<li style="counter-set: list-item 10; counter-increment: list-item 1">ten
|
||||
<li>nine
|
||||
</ol>
|
|
@ -0,0 +1,7 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<ol>
|
||||
<li value=2>two
|
||||
<div></div>
|
||||
<li value=0>zero
|
||||
</ol>
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<title>Non-list items with explicit list-item counter increments don't increment the ol reversed start value</title>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="match" href="li-value-reversed-004-ref.html">
|
||||
<ol reversed>
|
||||
<li>two
|
||||
<div style="counter-increment: list-item -1"></div>
|
||||
<li>zero
|
||||
</ol>
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<title>Non-list items with explicit list-item counter increments don't increment the ol reversed start value</title>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1573907">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#attr-ol-reversed">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#ordinal-value">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="match" href="li-value-reversed-004-ref.html">
|
||||
<ol reversed>
|
||||
<li>two
|
||||
<div style="counter-increment: list-item 1; counter-set: list-item 1"></div>
|
||||
<li>zero
|
||||
</ol>
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>CSS Test Reference: breaking of a multicolumn</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org/">
|
||||
<style>
|
||||
|
||||
.outer {
|
||||
height: 125px;
|
||||
width: 800px;
|
||||
background: rgba(0, 0, 255, 0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: 100px;
|
||||
width: 86px;
|
||||
font: 16px/1.25 sans-serif;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
height: 25px;
|
||||
width: 188px;
|
||||
background: green;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.lefthalf {
|
||||
border-right: 2px solid fuchsia;
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.righthalf {
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="outer">
|
||||
<div class="inner lefthalf" style="left: 0">
|
||||
AAAAA<br>
|
||||
BBBBB<br>
|
||||
CCCCC<br>
|
||||
DDDDD<br>
|
||||
EEEEE
|
||||
</div>
|
||||
<div class="inner righthalf" style="left: 95px">
|
||||
FFFFF<br>
|
||||
GGGGG<br>
|
||||
HHHHH<br>
|
||||
IIIII<br>
|
||||
JJJJJ
|
||||
</div>
|
||||
<div class="border-bottom" style="left: 0"></div>
|
||||
<div class="inner lefthalf" style="left: 204px">
|
||||
KKKKK<br>
|
||||
LLLLL<br>
|
||||
MMMMM<br>
|
||||
NNNNN
|
||||
</div>
|
||||
<div class="inner righthalf" style="left: 299px">
|
||||
OOOOO<br>
|
||||
PPPPP<br>
|
||||
QQQQQ<br>
|
||||
</div>
|
||||
<div class="border-bottom" style="left: 204px;"></div>
|
||||
<div class="border-bottom" style="left: 408px"></div>
|
||||
</div>
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>CSS Test: breaking of a multicolumn</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration">
|
||||
<link rel="match" href="multicol-breaking-nobackground-004-ref.html">
|
||||
<style>
|
||||
|
||||
.outer {
|
||||
height: 125px;
|
||||
column-fill: auto;
|
||||
width: 800px;
|
||||
column-count: 4;
|
||||
column-gap: 16px;
|
||||
background: rgba(0, 0, 255, 0.3);
|
||||
}
|
||||
|
||||
.inner {
|
||||
column-count: 2;
|
||||
column-rule: 2px solid fuchsia;
|
||||
column-gap: 16px;
|
||||
font: 16px/1.25 sans-serif;
|
||||
border: solid green;
|
||||
border-width: 0 0 25px 0;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="outer">
|
||||
<div class="inner" style="height: 300px">
|
||||
AAAAA<br>
|
||||
BBBBB<br>
|
||||
CCCCC<br>
|
||||
DDDDD<br>
|
||||
EEEEE<br>
|
||||
FFFFF<br>
|
||||
GGGGG<br>
|
||||
HHHHH<br>
|
||||
IIIII<br>
|
||||
JJJJJ<br>
|
||||
KKKKK<br>
|
||||
LLLLL<br>
|
||||
MMMMM<br>
|
||||
NNNNN<br>
|
||||
OOOOO<br>
|
||||
PPPPP<br>
|
||||
QQQQQ
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: Test the column rules' block-size with nested balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
.outer {
|
||||
column-count: 2;
|
||||
column-rule: 6px solid black;
|
||||
column-fill: auto;
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
.inner {
|
||||
column-count: 2;
|
||||
column-rule: 3px solid gray;
|
||||
column-fill: auto;
|
||||
height: 200px;
|
||||
}
|
||||
.inner-block {
|
||||
background-color: lightblue;
|
||||
height: 400px;
|
||||
}
|
||||
.space {
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article class="outer">
|
||||
<article class="inner">
|
||||
<div class="inner-block"></div>
|
||||
</article>
|
||||
<div class="space"></div>
|
||||
<article class="inner">
|
||||
<div class="inner-block"></div>
|
||||
</article>
|
||||
<div class="space"></div>
|
||||
</article>
|
||||
</html>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test the column rules' block-size with nested balancing multicol container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cf">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
|
||||
<link rel="match" href="multicol-rule-nested-balancing-003-ref.html">
|
||||
<meta name="assert" content="This test verifies that the column-rules are extended to the content block-end edges of their corresponding inner and outer multicol container.">
|
||||
|
||||
<style>
|
||||
.outer {
|
||||
column-count: 2;
|
||||
column-rule: 6px solid black;
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
.inner {
|
||||
column-count: 2;
|
||||
column-rule: 3px solid gray;
|
||||
height: 400px;
|
||||
}
|
||||
.inner-block {
|
||||
background-color: lightblue;
|
||||
height: 800px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<article class="outer">
|
||||
<article class="inner">
|
||||
<div class="inner-block"></div>
|
||||
</article>
|
||||
</article>
|
||||
</html>
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
|
||||
<link rel="match" href="one-custom-property-animation-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
animation: expand 5s;
|
||||
}
|
||||
@keyframes expand {
|
||||
0% { --foo: 0; }
|
||||
0.01% { --foo: 50; }
|
||||
99% { --foo: 50; }
|
||||
100% { --foo: 100; }
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-color: blue;
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() { return ['--foo']; }
|
||||
paint(ctx, geom, properties) {
|
||||
let fooValue = parseFloat(properties.get('--foo').toString());
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(0, 0, fooValue, fooValue);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
CSS.registerProperty({
|
||||
name: '--foo',
|
||||
syntax: '<number>',
|
||||
initialValue: '0',
|
||||
inherits: false
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// The test is designed to make sure that when the custom property animation is
|
||||
// running on the compositor thread, we are getting the right value.
|
||||
// The "importWorkletAndTerminateTestAfterAsyncPaint" has the logic to rAF
|
||||
// two frames before taking a screenshot. So the animation is designed to
|
||||
// be stable after two frames. That is, the 0.01% of 5s is much less than
|
||||
// two frames, and thus after two frames, the value of --foo should be stable.
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="canvas" width="100" height="100"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.fillStyle = 'blue';
|
||||
context.fillRect(0, 0, 100, 100);
|
||||
context.fillStyle = 'green';
|
||||
context.fillRect(0, 0, 50, 50);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
|
||||
<link rel="match" href="one-custom-property-animation-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
animation: expand 5s;
|
||||
/* TODO(crbug.com/987969): the will-change: transform should not be needed. */
|
||||
will-change: transform;
|
||||
}
|
||||
@keyframes expand {
|
||||
0% { --foo: 0; }
|
||||
0.01% { --foo: 50; }
|
||||
99% { --foo: 50; }
|
||||
100% { --foo: 100; }
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-color: blue;
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() { return ['--foo']; }
|
||||
paint(ctx, geom, properties) {
|
||||
let fooValue = parseFloat(properties.get('--foo').toString());
|
||||
ctx.fillStyle = 'green';
|
||||
ctx.fillRect(0, 0, fooValue, fooValue);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
CSS.registerProperty({
|
||||
name: '--foo',
|
||||
syntax: '<number>',
|
||||
initialValue: '0',
|
||||
inherits: false
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// The test is designed to make sure that when the custom property animation is
|
||||
// running on the compositor thread, we are getting the right value.
|
||||
// The "importWorkletAndTerminateTestAfterAsyncPaint" has the logic to rAF
|
||||
// two frames before taking a screenshot. So the animation is designed to
|
||||
// be stable after two frames. That is, the 0.01% of 5s is much less than
|
||||
// two frames, and thus after two frames, the value of --foo should be stable.
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id ="canvas" width="100" height="100"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext("2d");
|
||||
context.fillStyle = 'blue';
|
||||
context.fillRect(0, 0, 100, 100);
|
||||
context.fillStyle = '#9876c8';
|
||||
context.fillRect(0, 0, 50, 50);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
|
||||
<link rel="match" href="two-custom-property-animation-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
animation: expand 5s, clr 5s;
|
||||
/* TODO(crbug.com/987969): the will-change: transform should not be needed. */
|
||||
will-change: transform;
|
||||
}
|
||||
@keyframes expand {
|
||||
0% { --foo: 0; }
|
||||
0.01% { --foo: 50; }
|
||||
99% { --foo: 50; }
|
||||
100% { --foo: 100; }
|
||||
}
|
||||
@keyframes clr {
|
||||
0% { --bar: 0; }
|
||||
0.01% { --bar: 200; }
|
||||
99% { --bar: 200; }
|
||||
100% { --bar: 255; }
|
||||
}
|
||||
|
||||
#canvas-geometry {
|
||||
background-color: blue;
|
||||
background-image: paint(geometry);
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<body>
|
||||
<div id="canvas-geometry" class="container"></div>
|
||||
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() { return ['--foo', '--bar']; }
|
||||
paint(ctx, geom, properties) {
|
||||
let fooValue = parseFloat(properties.get('--foo').toString());
|
||||
let barValue = parseFloat(properties.get('--bar').toString());
|
||||
let barString = barValue.toString(16);
|
||||
if (barString.length == 1)
|
||||
barString = '0' + barString;
|
||||
ctx.fillStyle = '#9876' + barString;
|
||||
ctx.fillRect(0, 0, fooValue, fooValue);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
CSS.registerProperty({
|
||||
name: '--foo',
|
||||
syntax: '<number>',
|
||||
initialValue: '0',
|
||||
inherits: false
|
||||
});
|
||||
CSS.registerProperty({
|
||||
name: '--bar',
|
||||
syntax: '<number>',
|
||||
initialValue: '0',
|
||||
inherits: false
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// The test is designed to make sure that when the custom property animation is
|
||||
// running on the compositor thread, we are getting the right value.
|
||||
// The "importWorkletAndTerminateTestAfterAsyncPaint" has the logic to rAF
|
||||
// two frames before taking a screenshot. So the animation is designed to
|
||||
// be stable after two frames. That is, the 0.01% of 5s is much less than
|
||||
// two frames, and thus after two frames, the value of --foo should be stable.
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,3 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test Reference</title>
|
||||
<body style="margin:0">PASS</body>
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: ::first-letter of html root element crash in combination with removal of body</title>
|
||||
<link rel="help" href="https://crbug.com/993764">
|
||||
<link rel="match" href="first-letter-of-html-root-crash-ref.html">
|
||||
<style id="sheet">
|
||||
html::first-letter { font-size: initial }
|
||||
</style>FAIL
|
||||
<script>
|
||||
const sel = window.getSelection();
|
||||
sel.selectAllChildren(document.documentElement);
|
||||
const range = sel.getRangeAt(0);
|
||||
document.body.remove();
|
||||
document.documentElement.appendChild(document.createTextNode("PASS"));
|
||||
document.documentElement.offsetTop;
|
||||
range.surroundContents(sheet);
|
||||
</script>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Rhythmic Sizing: getComputedStyle().lineHeightStep</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm/#propdef-line-height-step">
|
||||
<meta name="assert" content="line-height-step computed value is an absolute length.">
|
||||
<meta name="assert" content="line-height-step is not negative.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("line-height-step", "calc(10px + 0.5em)", "30px");
|
||||
test_computed_value("line-height-step", "calc(10px - 0.5em)", "0px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Rhythmic Sizing: parsing line-height-step with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm/#propdef-line-height-step">
|
||||
<meta name="assert" content="line-height-step supports only the grammar '<length>'.">
|
||||
<meta name="assert" content="line-height-step rejects negative lengths.">
|
||||
<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("line-height-step", "auto");
|
||||
test_invalid_value("line-height-step", "normal");
|
||||
|
||||
test_invalid_value("line-height-step", "10");
|
||||
test_invalid_value("line-height-step", "10px 20px");
|
||||
test_invalid_value("line-height-step", "-1px");
|
||||
test_invalid_value("line-height-step", "4%");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Rhythmic Sizing: parsing line-height-step with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm/#propdef-line-height-step">
|
||||
<meta name="assert" content="line-height-step supports the full grammar '<length>'.">
|
||||
<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("line-height-step", "0", "0px");
|
||||
test_valid_value("line-height-step", "1px");
|
||||
test_valid_value("line-height-step", "calc(2em + 3ex)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Ruby Reference: basic 'block ruby' layout.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
.b { background: lightblue; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
.columns {
|
||||
columns: 3 auto;
|
||||
column-rule: 1px;
|
||||
background: lightgrey;
|
||||
height: 2em;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
.w { white-space: nowrap; width:2.5em; }
|
||||
</style>
|
||||
A<div class=b><ruby>べ<rt>る</rt></ruby></div>B
|
||||
A<div class="mbp b"><ruby>べ<rt>る</rt></ruby></div>B
|
||||
<div class=columns>A<div class="mbp b"><ruby>べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt></ruby></div>B</div>
|
||||
<div style="width:2.5em; border:1px solid; text-align: center">
|
||||
<p><div class="w b"><ruby><rb>一<rb>二<rb>三<rb>四<rb>五<rb>六<rb>七<rb>八</ruby></div></p>
|
||||
<p><div class="w b"><ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby></div></p>
|
||||
</div>
|
||||
</html>
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Ruby Test: basic 'block ruby' layout.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
|
||||
<link rel="match" href="block-ruby-001-ref.html">
|
||||
<style>
|
||||
ruby { display: block ruby; background: lightblue; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
.columns {
|
||||
columns: 3 auto;
|
||||
column-rule: 1px;
|
||||
background: lightgrey;
|
||||
height: 2em;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
</style>
|
||||
A<ruby>べ<rt>る</rt></ruby>B
|
||||
A<ruby class=mbp>べ<rt>る</rt></ruby>B
|
||||
<div class=columns>A<ruby class=mbp>べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt> べ<rt>る</rt></ruby>B</div>
|
||||
<div style="width:2.5em; border:1px solid; text-align: center">
|
||||
<p><ruby><rb>一<rb>二<rb>三<rb>四<rb>五<rb>六<rb>七<rb>八</ruby></p>
|
||||
<p><ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby></p>
|
||||
</div>
|
||||
</html>
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: blockification/inlinification of 'display:ruby/block ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
div,span { background: lightblue; }
|
||||
ruby { display: ruby; }
|
||||
rbb { display: ruby; background: lightblue; }
|
||||
grid { display: grid; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
</style>
|
||||
<grid>A<div><ruby>べ<rt>る</rt></ruby></div>B</grid>
|
||||
<grid>A<div class=mbp><ruby>べ<rt>る</rt></ruby></div>B</grid>
|
||||
<grid>A
|
||||
<div><ruby>べ<rt>る</rt></ruby></div>
|
||||
<div><ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby></div>
|
||||
B
|
||||
</grid>
|
||||
<span><ruby>べ<rt><rbb>る</rbb></rt></ruby></span>
|
||||
<span><ruby>べ<rbc><rbb>る</rbb></rbc></ruby></span>
|
||||
<span><ruby>べ<rtc><rbb>る</rbb></rtc></ruby></span>
|
||||
<span><ruby>べ<rbb>る</rbb></ruby></span>
|
||||
|
||||
<pre>block ruby, block ruby, block ruby, block ruby, ruby, ruby, ruby, ruby, ruby, ruby, ruby, ruby, </pre>
|
||||
</html>
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Ruby Test: blockification/inlinification of 'display:ruby/block ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
|
||||
<link rel="match" href="block-ruby-002-ref.html">
|
||||
<style>
|
||||
ruby { display: ruby; background: lightblue; }
|
||||
rbb { display: block ruby; background: lightblue; }
|
||||
grid { display: grid; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
</style>
|
||||
<grid>A<ruby>べ<rt>る</rt></ruby>B</grid>
|
||||
<grid>A<ruby class=mbp>べ<rt>る</rt></ruby>B</grid>
|
||||
<grid>A
|
||||
<ruby>べ<rt>る</rt></ruby>
|
||||
<ruby><rbc>一</rbc><rbc>二</rbc><rbc>三</rbc><rbc>四</rbc><rbc>五</rbc><rbc>六</rbc><rbc>七</rbc><rbc>八</rbc></ruby>
|
||||
B
|
||||
</grid>
|
||||
<ruby>べ<rt><rbb>る</rbb></rt></ruby>
|
||||
<ruby>べ<rbc><rbb>る</rbb></rbc></ruby>
|
||||
<ruby>べ<rtc><rbb>る</rbb></rtc></ruby>
|
||||
<ruby>べ<rbb>る</rbb></ruby>
|
||||
|
||||
<pre></pre>
|
||||
<script>
|
||||
let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
|
||||
let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, "");
|
||||
document.querySelector('pre').appendChild(document.createTextNode(result));
|
||||
</script>
|
||||
</html>
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Text node insertion in 'display:ruby/block ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
ruby { display: ruby; background: lightblue; }
|
||||
rbb { display: block ruby; background: lightblue; }
|
||||
grid { display: grid; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ruby class=mbp>X<rt>る</rt></ruby>
|
||||
<grid>A<ruby class=mbp>X<rt>る</rt></ruby>B</grid>
|
||||
<grid>A<ruby class=mbp>X<rt>る</rt></ruby>B</grid>
|
||||
<grid>A<ruby>X<rt>る</rt></ruby><ruby>X<rbc></rbc></ruby>B</grid>
|
||||
<grid>A<ruby>X</ruby><ruby>X<rbc><rt>る</rt></rbc></ruby>B</grid>
|
||||
<ruby>X<rt><rbb>Xる</rbb></rt></ruby>
|
||||
<ruby>X<rbc><rbb>Xる</rbb></rbc></ruby>
|
||||
<ruby>X<rtc><rbb>Xる</rbb></rtc></ruby>
|
||||
<rbb class=mbp>X</rbb>
|
||||
<rbb class=mbp>X<rt>る</rt></rbb>
|
||||
<rbb class=mbp>X<rb>X</rb></rbb>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Ruby Test: Text node insertion in 'display:ruby/block ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
|
||||
<link rel="match" href="block-ruby-003-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
ruby { display: ruby; background: lightblue; }
|
||||
rbb { display: block ruby; background: lightblue; }
|
||||
grid { display: grid; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ruby class=mbp><rt>る</rt></ruby>
|
||||
<grid>A<ruby class=mbp><rt>る</rt></ruby>B</grid>
|
||||
<grid>A<ruby class=mbp><rt>る</rt></ruby>B</grid>
|
||||
<grid>A<ruby><rt>る</rt></ruby><ruby><rbc></rbc></ruby>B</grid>
|
||||
<grid>A<ruby></ruby><ruby><rbc><rt>る</rt></rbc></ruby>B</grid>
|
||||
<ruby><rt><rbb>る</rbb></rt></ruby>
|
||||
<ruby><rbc><rbb>る</rbb></rbc></ruby>
|
||||
<ruby><rtc><rbb>る</rbb></rtc></ruby>
|
||||
<rbb class=mbp></rbb>
|
||||
<rbb class=mbp><rt>る</rt></rbb>
|
||||
<rbb class=mbp><rb>X</rb></rbb>
|
||||
|
||||
<script>
|
||||
document.body.getClientRects();
|
||||
let s = "X";
|
||||
let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
|
||||
ruby.forEach(function(e){ e.insertBefore(document.createTextNode(s),e.firstChild); e.offsetHeight;});
|
||||
</script>
|
||||
</html>
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: RT append in 'display:ruby/block ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
ruby { display: ruby; background: lightblue; }
|
||||
rbb { display: block ruby; background: lightblue; }
|
||||
grid { display: grid; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
font-size: 200%;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
unicode-bidi: isolate;
|
||||
ruby-position: under;
|
||||
}
|
||||
</style>
|
||||
|
||||
<rt>る</rt>
|
||||
<ruby class=mbp>X<rt>る</rt></ruby>
|
||||
<grid>A<ruby class=mbp><rt>る</rt></ruby>B</grid>
|
||||
<grid>A<ruby class=mbp>X<rt>る</rt></ruby>B</grid>
|
||||
<grid>A<ruby>X<rt>る</rt></ruby><ruby><rbc></rbc><rt>る</rt></ruby>B</grid>
|
||||
<grid>A<ruby><rt>る</rt></ruby><ruby><rbc>X</rbc><rt>る</rt></ruby>B</grid>
|
||||
<ruby><rt><rbb>X<rt>る</rt></rbb></rt><rt>る</rt></ruby>
|
||||
<ruby><rbc><rbb>X<rt>る</rt></rbb></rbc><rt>る</rt></ruby>
|
||||
<ruby><rtc><rbb>X<rt>る</rt></rbb></rtc><rt>る</rt></ruby>
|
||||
<rbb class=mbp><rt>る</rt></rbb>
|
||||
<rbb class=mbp>X<rt>る</rt></rbb>
|
||||
<rbb class=mbp><rb>X</rb><rt>る</rt></rbb>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Ruby Test: RT append in 'display:ruby/block ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
|
||||
<link rel="match" href="block-ruby-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
ruby { display: ruby; background: lightblue; }
|
||||
rbb { display: block ruby; background: lightblue; }
|
||||
rbbr { display: block ruby; background: lightblue; }
|
||||
grid { display: grid; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
font-size: 200%;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
unicode-bidi: isolate;
|
||||
ruby-position: under;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<rt>る</rt>
|
||||
<ruby class=mbp>X</ruby>
|
||||
<grid>A<ruby class=mbp></ruby>B</grid>
|
||||
<grid>A<ruby class=mbp>X</ruby>B</grid>
|
||||
<grid>A<ruby>X</ruby><ruby><rbc></rbc></ruby>B</grid>
|
||||
<grid>A<ruby></ruby><ruby><rbc>X</rbc></ruby>B</grid>
|
||||
<ruby><rt><rbb>X</rbb></rt></ruby>
|
||||
<ruby><rbc><rbb>X</rbb></rbc></ruby>
|
||||
<ruby><rtc><rbb>X</rbb></rtc></ruby>
|
||||
<rbb class=mbp></rbb>
|
||||
<rbb class=mbp>X</rbb>
|
||||
<rbb class=mbp><rb>X</rb></rbb>
|
||||
|
||||
<script>
|
||||
document.body.getClientRects();
|
||||
let rt = document.querySelector('rt');
|
||||
let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
|
||||
ruby.forEach(function(e){ let n = rt.cloneNode(true); e.appendChild(n); e.offsetHeight;});
|
||||
</script>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: DIV append in 'display:ruby/block ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
rbb, ruby { background:lightblue; text-overflow:ellipses; }
|
||||
ruby { display: ruby; }
|
||||
rbb { display: block ruby; }
|
||||
grid { display: grid; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
font-size: 200%;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
unicode-bidi: isolate;
|
||||
ruby-position: under;
|
||||
}
|
||||
x { display:block; width:3em; overflow:hidden; background:lightblue; }
|
||||
</style>
|
||||
|
||||
<div>zzzzzzzzzzzz</div>
|
||||
<ruby class=mbp>X<div>zzzzzzzzzzzz</div></ruby>
|
||||
<grid>A<x class=mbp><rbb><div>zzzzzzzzzzzz</div></rbb></x>B</grid>
|
||||
<grid>A<x class=mbp><rbb>X<div>zzzzzzzzzzzz</div></rbb></x>B</grid>
|
||||
<grid>A<x><rbb>X<div>zzzzzzzzzzzz</div></rbb></x><x><rbb><rbc></rbc><div>zzzzzzzzzzzz</div></rbb></x>B</grid>
|
||||
<grid>A<x><rbb><div>zzzzzzzzzzzz</div></rbb></x><x><rbb><rbc>X</rbc><div>zzzzzzzzzzzz</div></rbb></x>B</grid>
|
||||
<ruby><rt><ruby>X<div>zzzzzzzzzzzz</div></ruby></rt><div>zzzzzzzzzzzz</div></ruby>
|
||||
<ruby><rbc><ruby>X<div>zzzzzzzzzzzz</div></ruby></rbc><div>zzzzzzzzzzzz</div></ruby>
|
||||
<ruby><rtc><ruby>X<div>zzzzzzzzzzzz</div></ruby></rtc><div>zzzzzzzzzzzz</div></ruby>
|
||||
<x class=mbp><rbb><div>zzzzzzzzzzzz</div></rbb></x>
|
||||
<x class=mbp><rbb>X<div>zzzzzzzzzzzz</div></rbb></x>
|
||||
<x class=mbp><rbb><rt>X</rt><div>zzzzzzzzzzzz</div></rbb></x>
|
||||
<x class=mbp><rbb><rb>X</rb><div>zzzzzzzzzzzz</div></rbb></x>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Ruby Test: DIV append in 'display:ruby/block ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify">
|
||||
<link rel="match" href="block-ruby-005-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
rbb, ruby { background:lightblue; text-overflow:ellipses; overflow:hidden; width:3em; }
|
||||
ruby { display: ruby; }
|
||||
rbb { display: block ruby; }
|
||||
grid { display: grid; }
|
||||
.mbp {
|
||||
margin: 1px 3px 5px 7px;
|
||||
padding: 3px 5px 7px 1px;
|
||||
border-width: 3px 1px 7px 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
unicode-bidi: isolate;
|
||||
font-size: 200%;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
unicode-bidi: isolate;
|
||||
ruby-position: under;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>zzzzzzzzzzzz</div>
|
||||
<ruby class=mbp>X</ruby>
|
||||
<grid>A<ruby class=mbp></ruby>B</grid>
|
||||
<grid>A<ruby class=mbp>X</ruby>B</grid>
|
||||
<grid>A<ruby>X</ruby><ruby><rbc></rbc></ruby>B</grid>
|
||||
<grid>A<ruby></ruby><ruby><rbc>X</rbc></ruby>B</grid>
|
||||
<ruby><rt><rbb>X</rbb></rt></ruby>
|
||||
<ruby><rbc><rbb>X</rbb></rbc></ruby>
|
||||
<ruby><rtc><rbb>X</rbb></rtc></ruby>
|
||||
<rbb class=mbp></rbb>
|
||||
<rbb class=mbp>X</rbb>
|
||||
<rbb class=mbp><rt>X</rt></rbb>
|
||||
<rbb class=mbp><rb>X</rb></rbb>
|
||||
|
||||
<script>
|
||||
document.body.getClientRects();
|
||||
let div = document.querySelector('div');
|
||||
let ruby = Array.prototype.slice.call(document.querySelectorAll('ruby,rbb'));
|
||||
ruby.forEach(function(e){ let n = div.cloneNode(true); e.appendChild(n); e.offsetHeight;});
|
||||
</script>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS Ruby Test: :root element with 'display:block ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"/>
|
||||
<link rel="match" href="root-ruby-ref.xhtml"/>
|
||||
<style>
|
||||
:root { display: block ruby; }
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
}
|
||||
</style>
|
||||
べ
|
||||
<rtc>
|
||||
<rt>る</rt>
|
||||
</rtc>
|
||||
<rbc>
|
||||
<rb>A</rb>
|
||||
<rb>B</rb>
|
||||
</rbc>
|
||||
|
||||
<pre></pre>
|
||||
<script>
|
||||
let ruby = Array.prototype.slice.call(document.querySelectorAll(':root'));
|
||||
let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, "");
|
||||
document.querySelector('pre').appendChild(document.createTextNode(result));
|
||||
</script>
|
||||
</html>
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<meta charset="utf-8"/>
|
||||
<title>Reference: :root element with 'display:ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/>
|
||||
<style>
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
}
|
||||
</style>
|
||||
<ruby>べ
|
||||
<rtc>
|
||||
<rt>る</rt>
|
||||
</rtc>
|
||||
<rbc>
|
||||
<rb>A</rb>
|
||||
<rb>B</rb>
|
||||
</rbc>
|
||||
|
||||
<pre>block ruby, </pre>
|
||||
</ruby></html>
|
38
tests/wpt/web-platform-tests/css/css-ruby/root-ruby.xhtml
Normal file
38
tests/wpt/web-platform-tests/css/css-ruby/root-ruby.xhtml
Normal file
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS Ruby Test: :root element with 'display:ruby'.</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#propdef-display"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#box-fixup"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#inlinify"/>
|
||||
<link rel="match" href="root-ruby-ref.xhtml"/>
|
||||
<style>
|
||||
:root { display: ruby; }
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
}
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
}
|
||||
</style>
|
||||
べ
|
||||
<rtc>
|
||||
<rt>る</rt>
|
||||
</rtc>
|
||||
<rbc>
|
||||
<rb>A</rb>
|
||||
<rb>B</rb>
|
||||
</rbc>
|
||||
|
||||
<pre></pre>
|
||||
<script>
|
||||
let ruby = Array.prototype.slice.call(document.querySelectorAll(':root'));
|
||||
let result = ruby.map(e => window.getComputedStyle(e).display + ', ').reduce((s, t) => s + t, "");
|
||||
document.querySelector('pre').appendChild(document.createTextNode(result));
|
||||
</script>
|
||||
</html>
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="width: 100px; height: 100px; border: solid;">
|
||||
<div style="display: table-cell; max-width: 100px; height: 100px; background: green; overflow-x: scroll; vertical-align: top;">
|
||||
<div style="width: 120px; height: 50px; background: hotpink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div style="width: 100px; height: 100px; border: solid;">
|
||||
<div style="display: table-cell; max-width: 100px; height: 100px; background: green; overflow-x: scroll; vertical-align: middle;">
|
||||
<div style="width: 120px; height: 50px; background: hotpink;"></div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout">
|
||||
<link rel="match" href="table-cell-overflow-auto-ref.html">
|
||||
<meta name="assert" content="horizontal scrollbars show up on table-cells with overflowing content and overflow:auto, vertical-align: middle/top" />
|
||||
<div style="width: 100px; height: 100px; border: solid;">
|
||||
<div style="display: table-cell; max-width: 100px; height: 100px; background: green; overflow-x: auto; vertical-align: top;">
|
||||
<div style="width: 120px; height: 50px; background: hotpink;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div style="width: 100px; height: 100px; border: solid;">
|
||||
<div style="display: table-cell; max-width: 100px; height: 100px; background: green; overflow-x: auto; vertical-align: middle;">
|
||||
<div style="width: 120px; height: 50px; background: hotpink;"></div>
|
||||
</div>
|
||||
</div>
|
|
@ -26,7 +26,7 @@ assert_not_inherited('text-decoration-line', 'none', 'line-through');
|
|||
assert_not_inherited('text-decoration-style', 'solid', 'dashed');
|
||||
assert_inherited('text-emphasis-color', 'rgba(2, 3, 4, 0.5)', 'rgba(42, 53, 64, 0.75)');
|
||||
assert_inherited('text-emphasis-position', 'over right', 'under left');
|
||||
assert_inherited('text-emphasis-style', 'none', 'filled triangle');
|
||||
assert_inherited('text-emphasis-style', 'none', 'triangle');
|
||||
assert_inherited('text-shadow', 'none', 'rgba(42, 53, 64, 0.75) 10px 20px 0px');
|
||||
assert_inherited('text-underline-position', 'auto', 'under');
|
||||
|
||||
|
|
|
@ -7,9 +7,6 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<script>
|
||||
test_invalid_value("text-decoration", "auto");
|
||||
test_invalid_value("text-decoration", "1px");
|
||||
|
||||
test_invalid_value("text-decoration", "double overline underline dotted");
|
||||
test_invalid_value("text-decoration", "red line-through green");
|
||||
test_invalid_value("text-decoration", "overline blue underline");
|
||||
|
|
|
@ -9,12 +9,18 @@
|
|||
<script>
|
||||
test_valid_value("text-decoration", "none");
|
||||
test_valid_value("text-decoration", "line-through");
|
||||
test_valid_value("text-decoration", "solid");
|
||||
test_valid_value("text-decoration", "currentcolor");
|
||||
test_valid_value("text-decoration", "solid", "none");
|
||||
test_valid_value("text-decoration", "currentcolor", "none");
|
||||
test_valid_value("text-decoration", "auto", "none");
|
||||
test_valid_value("text-decoration", "from-font");
|
||||
test_valid_value("text-decoration", "10px");
|
||||
|
||||
test_valid_value("text-decoration", "double overline underline", "underline overline double");
|
||||
test_valid_value("text-decoration", "underline overline line-through red");
|
||||
test_valid_value("text-decoration", "rgba(10, 20, 30, 0.4) dotted", "dotted rgba(10, 20, 30, 0.4)");
|
||||
|
||||
test_valid_value("text-decoration", "overline green from-font");
|
||||
test_valid_value("text-decoration", "underline dashed green");
|
||||
test_valid_value("text-decoration", "underline auto", "underline");
|
||||
test_valid_value("text-decoration", "line-through 20px");
|
||||
test_valid_value("text-decoration", "overline 3em");
|
||||
</script>
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Decoration Test: getComputedStyle().textShadow</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
|
||||
<meta name="assert" content="text-shadow computed value is none or a list, each item a color and lengths.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
const red = 'rgb(255, 0, 0)';
|
||||
const lime = 'rgb(0, 255, 0)';
|
||||
const currentColor = 'rgb(0, 0, 255)';
|
||||
|
||||
test_computed_value("text-shadow", "none");
|
||||
|
||||
test_computed_value("text-shadow", "10px 20px", currentColor + " 10px 20px 0px");
|
||||
test_computed_value("text-shadow", "red 10px 20px 30px", red + " 10px 20px 30px");
|
||||
test_computed_value("text-shadow", "calc(0.5em + 10px) calc(0.5em + 10px) calc(0.5em + 10px)", currentColor + " 30px 30px 30px");
|
||||
test_computed_value("text-shadow", "calc(-0.5em + 10px) calc(-0.5em + 10px) calc(-0.5em + 10px)", currentColor + " -10px -10px 0px");
|
||||
|
||||
test_computed_value("text-shadow", "10px 20px, 30px 40px", currentColor + " 10px 20px 0px, " + currentColor + " 30px 40px 0px");
|
||||
test_computed_value("text-shadow", "lime 10px 20px 30px, red 40px 50px", lime + " 10px 20px 30px, " + red + " 40px 50px 0px");
|
||||
</script>
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Decoration Test: Parsing text-shadow with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
|
||||
<meta name="assert" content="text-shadow supports only the grammar 'none | [ <color>? && <length>{2,3} ]#'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<script>
|
||||
test_invalid_value("text-shadow", "auto");
|
||||
|
||||
test_invalid_value("text-shadow", "10px 20px -30px");
|
||||
|
||||
test_invalid_value("text-shadow", "10px");
|
||||
test_invalid_value("text-shadow", "10px 20px 30px 40px");
|
||||
test_invalid_value("text-shadow", "red 10px 20px blue");
|
||||
test_invalid_value("text-shadow", "10% 20px");
|
||||
test_invalid_value("text-shadow", "10px 20% 30px");
|
||||
test_invalid_value("text-shadow", "lime 10px 20px 30%");
|
||||
</script>
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Decoration Test: Parsing text-shadow with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
|
||||
<meta name="assert" content="text-shadow supports the full grammar 'none | [ <color>? && <length>{2,3} ]#'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<script>
|
||||
test_valid_value("text-shadow", "none");
|
||||
|
||||
test_valid_value("text-shadow", "10px 20px");
|
||||
test_valid_value("text-shadow", "10px 20px 30px");
|
||||
test_valid_value("text-shadow", "calc(1em + 2px) calc(3em + 4px) calc(5em + 6px)");
|
||||
test_valid_value("text-shadow", "-10px 20px 30px");
|
||||
test_valid_value("text-shadow", "10px -20px 30px");
|
||||
test_valid_value("text-shadow", "rgb(255, 0, 0) 10px 20px");
|
||||
test_valid_value("text-shadow", "10px 20px 30px lime", "lime 10px 20px 30px");
|
||||
|
||||
test_valid_value("text-shadow", "10px 20px, 30px 40px");
|
||||
test_valid_value("text-shadow", "lime 10px 20px 30px, blue 40px 50px");
|
||||
</script>
|
|
@ -9,7 +9,7 @@
|
|||
src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
|
||||
}
|
||||
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
|
||||
.styled { text-decoration: underline; }
|
||||
.styled { text-decoration: underline; text-decoration-skip-ink: none; }
|
||||
</style>
|
||||
<link rel=mismatch href="shaping-014-sanity-ref.html">
|
||||
</head>
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
|
||||
/* the CSS above is not part of the test */
|
||||
.styled { text-decoration: underline; }
|
||||
.styled { text-decoration: underline; text-decoration-skip-ink: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Composition of transform animations</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#combining-transform-lists">
|
||||
<meta name="assert" content="transform animations should composite correctly">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="target"><div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
var anim1 = target.animate(
|
||||
{ transform: [ 'translateX(0)', 'translateX(100px)' ]},
|
||||
1000
|
||||
);
|
||||
var anim2 = target.animate(
|
||||
{ transform: [ 'translateY(0)', 'translateY(100px)' ]},
|
||||
{duration: 1000, composite: 'add'}
|
||||
);
|
||||
|
||||
anim1.pause();
|
||||
anim2.pause();
|
||||
|
||||
anim1.currentTime = 200;
|
||||
anim2.currentTime = 800;
|
||||
|
||||
// The computation here should be:
|
||||
// underlying_value = 'translateX(0)' --> 'translateX(100px)' @ 0.2
|
||||
// = 'translateX(20px)'
|
||||
// final_value = 0.2 * ('translateX(20px) translateY(0)') +
|
||||
// 0.8 * ('translateX(20px) translateY(100px)')
|
||||
// = 'translateX(20px) translateY(80px)'
|
||||
// = 'matrix(1, 0, 0, 1, 20, 80)'
|
||||
assert_equals(getComputedStyle(target).transform, 'matrix(1, 0, 0, 1, 20, 80)')
|
||||
}, 'An additive transform animation on-top of a replace transform animation ' +
|
||||
'should composite correctly');
|
||||
</script>
|
|
@ -10,6 +10,12 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
function singleFrame() {
|
||||
return new Promise((resolve, reject) => {
|
||||
requestAnimationFrame(resolve);
|
||||
});
|
||||
}
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
|
@ -87,6 +93,38 @@ promise_test(async t => {
|
|||
assert_equals(getComputedStyle(div).left, '0px');
|
||||
}, 'After setting a transition\'s effect to null, a new transition can be started');
|
||||
|
||||
// This is a regression test for https://crbug.com/992668, where Chromium would
|
||||
// crash if the running transition's effect was set to null and the transition
|
||||
// was interrupted before it could finish due to the null effect.
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
|
||||
div.style.transition = 'left 100s';
|
||||
getComputedStyle(div).left;
|
||||
div.style.left = '100px';
|
||||
|
||||
assert_equals(div.getAnimations().length, 1);
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
// The transition needs to have a non-zero currentTime for the interruption
|
||||
// reversal logic to apply.
|
||||
await singleFrame();
|
||||
assert_not_equals(transition.currentTime, 0);
|
||||
assert_not_equals(getComputedStyle(div).left, '0px');
|
||||
|
||||
// Without yielding to the rendering loop, set the current transition's
|
||||
// effect to null and interrupt the transition. This should work correctly.
|
||||
transition.effect = null;
|
||||
div.style.left = '0px';
|
||||
|
||||
// Yield to the rendering loop. This should not crash.
|
||||
await singleFrame();
|
||||
}, 'After setting a transition\'s effect to null, it should be possible to '
|
||||
+ 'interrupt that transition');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
|
|
|
@ -27,4 +27,14 @@ test(() => {
|
|||
assert_style_value_equals(new CSSUnitValue(1, 'px'), CSSNumericValue.parse(' 1px '));
|
||||
}, 'Parsing ignores surrounding spaces');
|
||||
|
||||
test(() => {
|
||||
const expected = new CSSMathMin(CSS.px(10), CSS.percent(10));
|
||||
assert_style_value_equals(expected, CSSNumericValue.parse('min(10px, 10%)'));
|
||||
}, 'Parsing min() is successful');
|
||||
|
||||
test(() => {
|
||||
const expected = new CSSMathMax(CSS.px(10), CSS.percent(10));
|
||||
assert_style_value_equals(expected, CSSNumericValue.parse('max(10px, 10%)'));
|
||||
}, 'Parsing max() is successful');
|
||||
|
||||
</script>
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-typed-om-1/#stylevalue-subclasses">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<meta name="assert" content="'width' can be set with a CSSMathMax object.">
|
||||
<style>
|
||||
#target { font-size: 10px; background-color: green; height: 100px; }
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id=target></div>
|
||||
<script>
|
||||
const width = new CSSMathMax(CSS.em(10), CSS.px(90));
|
||||
const target = document.querySelector('#target');
|
||||
target.attributeStyleMap.set('width', width);
|
||||
</script>
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-typed-om-1/#stylevalue-subclasses">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<meta name="assert" content="'width' can be set with a CSSMathMin object.">
|
||||
<style>
|
||||
#target { font-size: 10px; background-color: green; height: 100px; }
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id=target></div>
|
||||
<script>
|
||||
const width = new CSSMathMin(CSS.em(10), CSS.px(110));
|
||||
const target = document.querySelector('#target');
|
||||
target.attributeStyleMap.set('width', width);
|
||||
</script>
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS values: max() between pixel and percentage values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<link rel="match" href="reference/200-200-green.html">
|
||||
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
|
||||
<style>
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
#parent { width: 400px; }
|
||||
#target {
|
||||
width: max(100px, 25% + 100px, 150px + 10%);
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id=parent>
|
||||
<div id=target></div>
|
||||
</div>
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS values: min() between pixel and percentage values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
||||
<link rel="match" href="reference/200-200-green.html">
|
||||
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
|
||||
<style>
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
#parent { width: 400px; }
|
||||
#target {
|
||||
width: min(300px, 25% + 100px, 50px + 50%);
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id=parent>
|
||||
<div id=target></div>
|
||||
</div>
|
47
tests/wpt/web-platform-tests/element-timing/toJSON.html
Normal file
47
tests/wpt/web-platform-tests/element-timing/toJSON.html
Normal file
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset=utf-8>
|
||||
<title>Element Timing: toJSON</title>
|
||||
<body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/element-timing-helpers.js"></script>
|
||||
<img elementtiming='img' src="resources/square100.png"/>
|
||||
<script>
|
||||
async_test(function (t) {
|
||||
if (!window.PerformanceElementTiming) {
|
||||
assert_unreached("PerformanceElementTiming is not implemented");
|
||||
}
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done(function(entryList) {
|
||||
assert_equals(entryList.getEntries().length, 1);
|
||||
const entry = entryList.getEntries()[0];
|
||||
assert_equals(typeof(entry.toJSON), 'function');
|
||||
const json = entry.toJSON();
|
||||
assert_equals(typeof(json), 'object');
|
||||
const keys = [
|
||||
// PerformanceEntry
|
||||
'name',
|
||||
'entryType',
|
||||
'startTime',
|
||||
'duration',
|
||||
// PerformanceElementTiming
|
||||
'renderTime',
|
||||
'loadTime',
|
||||
'intersectionRect',
|
||||
'identifier',
|
||||
'naturalWidth',
|
||||
'naturalHeight',
|
||||
'id',
|
||||
'element',
|
||||
'url',
|
||||
];
|
||||
for (const key of keys) {
|
||||
assert_equals(json[key], entry[key],
|
||||
'PerformanceElementTiming ${key} entry does not match its toJSON value');
|
||||
}
|
||||
})
|
||||
);
|
||||
observer.observe({type: 'element', buffered: true});
|
||||
}, 'Test toJSON() in PerformanceElementTiming.');
|
||||
</script>
|
||||
</body>
|
43
tests/wpt/web-platform-tests/event-timing/toJSON.html
Normal file
43
tests/wpt/web-platform-tests/event-timing/toJSON.html
Normal file
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset=utf-8>
|
||||
<title>Event Timing: toJSON</title>
|
||||
<body>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/resources/testdriver.js></script>
|
||||
<script src=/resources/testdriver-vendor.js></script>
|
||||
<script src=resources/event-timing-test-utils.js></script>
|
||||
<button id='button'>Generate a 'click' event</button>
|
||||
<script>
|
||||
async_test(function (t) {
|
||||
if (!window.PerformanceEventTiming) {
|
||||
assert_unreached("PerformanceEventTiming is not implemented");
|
||||
}
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func_done(function(entryList) {
|
||||
const entry = entryList.getEntries()[0];
|
||||
assert_equals(typeof(entry.toJSON), 'function');
|
||||
const json = entry.toJSON();
|
||||
assert_equals(typeof(json), 'object');
|
||||
const keys = [
|
||||
// PerformanceEntry
|
||||
'name',
|
||||
'entryType',
|
||||
'startTime',
|
||||
'duration',
|
||||
// PerformanceEventTiming
|
||||
'processingStart',
|
||||
'processingEnd',
|
||||
'cancelable',
|
||||
];
|
||||
for (const key of keys) {
|
||||
assert_equals(json[key], entry[key],
|
||||
'PerformanceEventTiming ${key} entry does not match its toJSON value');
|
||||
}
|
||||
})
|
||||
);
|
||||
observer.observe({type: 'event'});
|
||||
clickAndBlockMain('button');
|
||||
}, 'Test toJSON() in PerformanceEventTiming.');
|
||||
</script>
|
||||
</body>
|
|
@ -11,57 +11,63 @@
|
|||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<iframe></iframe>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// The test does the following navigation steps for iframe
|
||||
// 1. load page-with-fragment.html#fragment
|
||||
// 2. load blank1
|
||||
// 3. go back to page-with-fragment.html
|
||||
async_test(function(t) {
|
||||
var iframe = document.querySelector('iframe');
|
||||
var hostInfo = get_host_info();
|
||||
var basePath = location.pathname.substring(0, location.pathname.lastIndexOf('/'));
|
||||
var localURL = hostInfo.HTTP_ORIGIN + basePath + '/resources/page-with-fragment.html#fragment';
|
||||
var remoteURL = hostInfo.HTTP_REMOTE_ORIGIN + basePath + "/resources/blank1.html"
|
||||
var next;
|
||||
function frameOnload() {
|
||||
if (next) {
|
||||
next();
|
||||
dump("next \n");
|
||||
} else {
|
||||
dump("no next \n");
|
||||
// The test does the following navigation steps for iframe
|
||||
// 1. load page-with-fragment.html#fragment
|
||||
// 2. load blank1
|
||||
// 3. go back to page-with-fragment.html
|
||||
async_test(function(t) {
|
||||
var iframe = document.querySelector('iframe');
|
||||
var hostInfo = get_host_info();
|
||||
var basePath = location.pathname.substring(0, location.pathname.lastIndexOf('/'));
|
||||
var localURL = hostInfo.HTTP_ORIGIN + basePath + '/resources/page-with-fragment.html#fragment';
|
||||
var remoteURL = hostInfo.HTTP_REMOTE_ORIGIN + basePath + "/resources/blank1.html"
|
||||
|
||||
var steps = [
|
||||
function() {
|
||||
iframe.src = 'resources/page-with-fragment.html#fragment';
|
||||
}, function() {
|
||||
assert_equals(iframe.contentWindow.location.href, localURL, 'should be on page-with-fragment page');
|
||||
// wait one animation frame to ensure layout is run and fragment scrolling is complete
|
||||
iframe.contentWindow.requestAnimationFrame(function() {
|
||||
assert_equals(iframe.contentWindow.scrollY, 800, 'should scroll to fragment');
|
||||
var steps = [
|
||||
function() {
|
||||
assert_equals(iframe.contentWindow.location.href, localURL, 'should be on page-with-fragment page');
|
||||
// wait one animation frame to ensure layout is run and fragment scrolling is complete
|
||||
iframe.contentWindow.requestAnimationFrame(function() {
|
||||
assert_approx_equals(iframe.contentWindow.scrollY, 800, 5, 'should scroll to fragment');
|
||||
|
||||
iframe.contentWindow.history.scrollRestoration = 'manual';
|
||||
assert_equals(iframe.contentWindow.history.scrollRestoration, 'manual');
|
||||
setTimeout(next, 0);
|
||||
iframe.contentWindow.history.scrollRestoration = 'manual';
|
||||
assert_equals(iframe.contentWindow.history.scrollRestoration, 'manual');
|
||||
setTimeout(next, 0);
|
||||
});
|
||||
}, function() {
|
||||
// navigate to a new page from a different origin
|
||||
iframe.src = remoteURL;
|
||||
}, function() {
|
||||
// going back causes the iframe to traverse back
|
||||
history.back();
|
||||
}, function() {
|
||||
// coming back from history, scrollRestoration should be set to manual and respected
|
||||
assert_equals(iframe.contentWindow.location.href, localURL, 'should be back on page-with-fragment page');
|
||||
iframe.contentWindow.requestAnimationFrame(t.step_func_done(function() {
|
||||
assert_equals(iframe.contentWindow.history.scrollRestoration, 'manual', 'navigating back should retain scrollRestoration value');
|
||||
assert_equals(iframe.contentWindow.scrollX, 0, 'should not scroll to fragment');
|
||||
assert_equals(iframe.contentWindow.scrollY, 0, 'should not scroll to fragment');
|
||||
}));
|
||||
}
|
||||
];
|
||||
|
||||
var stepCount = 0;
|
||||
next = t.step_func(function() {
|
||||
steps[stepCount++]();
|
||||
});
|
||||
}, function() {
|
||||
// navigate to a new page from a different origin
|
||||
iframe.src = remoteURL;
|
||||
}, function() {
|
||||
// going back causes the iframe to traverse back
|
||||
history.back();
|
||||
}, function() {
|
||||
// coming back from history, scrollRestoration should be set to manual and respected
|
||||
assert_equals(iframe.contentWindow.location.href, localURL, 'should be back on page-with-fragment page');
|
||||
iframe.contentWindow.requestAnimationFrame(t.step_func_done(function() {
|
||||
assert_equals(iframe.contentWindow.history.scrollRestoration, 'manual', 'navigating back should retain scrollRestoration value');
|
||||
assert_equals(iframe.contentWindow.scrollX, 0, 'should not scroll to fragment');
|
||||
assert_equals(iframe.contentWindow.scrollY, 0, 'should not scroll to fragment');
|
||||
}));
|
||||
}
|
||||
];
|
||||
|
||||
var stepCount = 0;
|
||||
var next = t.step_func(function() {
|
||||
steps[stepCount++]();
|
||||
});
|
||||
|
||||
iframe.onload = next;
|
||||
next();
|
||||
}, 'Manual scroll restoration should take precedent over scrolling to fragment in cross origin navigation');
|
||||
next();
|
||||
}, 'Manual scroll restoration should take precedent over scrolling to fragment in cross origin navigation');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<iframe src="resources/page-with-fragment.html#fragment" onload="frameOnload()"></iframe>
|
||||
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
See `../cross-origin-opener-policy/README.md`.
|
|
@ -0,0 +1,44 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/get-host-info.sub.js"></script>
|
||||
<script src="/common/utils.js"></script>
|
||||
<div id=log></div>
|
||||
<script>
|
||||
const origins = get_host_info();
|
||||
[
|
||||
{
|
||||
"origin": origins.HTTPS_ORIGIN,
|
||||
"crossOrigin": origins.HTTPS_REMOTE_ORIGIN
|
||||
},
|
||||
{
|
||||
"origin": origins.HTTPS_REMOTE_ORIGIN,
|
||||
"crossOrigin": origins.HTTPS_NOTSAMESITE_ORIGIN
|
||||
},
|
||||
{
|
||||
"origin": origins.HTTPS_NOTSAMESITE_ORIGIN,
|
||||
"crossOrigin": origins.HTTPS_ORIGIN
|
||||
}
|
||||
].forEach(({ origin, crossOrigin }) => {
|
||||
["subframe", "navigate"].forEach(variant => {
|
||||
async_test(t => {
|
||||
const id = token();
|
||||
const frame = document.createElement("iframe");
|
||||
t.add_cleanup(() => { frame.remove(); });
|
||||
const path = new URL("resources/blob-url-factory.html", window.location).pathname;
|
||||
frame.src = `${origin}${path}?id=${id}&variant=${variant}&crossOrigin=${crossOrigin}`;
|
||||
window.addEventListener("message", t.step_func(({ data }) => {
|
||||
if (data.id !== id) {
|
||||
return;
|
||||
}
|
||||
assert_equals(data.origin, origin);
|
||||
assert_true(data.sameOriginNoCORPSuccess, "Same-origin without CORP did not succeed");
|
||||
assert_true(data.crossOriginNoCORPFailure, "Cross-origin without CORP did not fail");
|
||||
t.done();
|
||||
}));
|
||||
document.body.append(frame);
|
||||
}, `Cross-Origin-Embedder-Policy and blob: URL from ${origin} in subframe via ${variant}`);
|
||||
});
|
||||
});
|
||||
</script>
|
|
@ -0,0 +1 @@
|
|||
Cross-Origin-Embedder-Policy: require-corp
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/script-factory.js"></script>
|
||||
<div id=log></div>
|
||||
<script>
|
||||
async_test(t => {
|
||||
window.addEventListener("message", t.step_func_done(({ data }) => {
|
||||
assert_equals(data.id, "");
|
||||
assert_equals(data.origin, "null");
|
||||
assert_false(data.sameOriginNoCORPSuccess); // This is effectively a no-op for this test
|
||||
assert_true(data.crossOriginNoCORPFailure, "Cross-origin without CORP did not fail");
|
||||
}));
|
||||
const frame = document.createElement("iframe");
|
||||
t.add_cleanup(() => frame.remove());
|
||||
frame.src = `data:text/html,${createScript("null", window.origin)}`;
|
||||
document.body.append(frame);
|
||||
}, "Cross-Origin-Embedder-Policy and data: URLs");
|
||||
</script>
|
|
@ -0,0 +1 @@
|
|||
Cross-Origin-Embedder-Policy: require-corp
|
|
@ -0,0 +1,21 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id=log></div>
|
||||
<script>
|
||||
async_test(t => {
|
||||
const frame = document.createElement("iframe");
|
||||
t.add_cleanup(() => frame.remove());
|
||||
let i = 0;
|
||||
frame.onload = t.step_func(() => {
|
||||
i++;
|
||||
assert_equals(frame.contentDocument.URL, "about:blank");
|
||||
frame.src = "about:blank";
|
||||
if (i == 2) {
|
||||
t.done();
|
||||
}
|
||||
});
|
||||
document.body.append(frame);
|
||||
}, "Cross-Origin-Embedder-Policy and about:blank");
|
||||
</script>
|
|
@ -0,0 +1 @@
|
|||
Cross-Origin-Embedder-Policy: require-corp
|
|
@ -0,0 +1,79 @@
|
|||
<!doctype html>
|
||||
<meta name="timeout" content="long">
|
||||
<title>Cross-Origin-Embedder-Policy header and nested navigable resource without such header</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src=/common/utils.js></script> <!-- Use token() to allow running tests in parallel -->
|
||||
<div id=log></div>
|
||||
<script>
|
||||
async_test(t => {
|
||||
const frame = document.createElement("iframe");
|
||||
t.add_cleanup(() => frame.remove());
|
||||
frame.onload = t.step_func_done(() => {
|
||||
assert_not_equals(frame.contentDocument, null);
|
||||
});
|
||||
frame.src = "/common/blank.html";
|
||||
document.body.append(frame);
|
||||
assert_equals(frame.contentDocument.body.localName, "body");
|
||||
}, `"none" top-level: navigating a frame to "none" should succeed`);
|
||||
|
||||
async_test(t => {
|
||||
const frame = document.createElement("iframe");
|
||||
t.add_cleanup(() => frame.remove());
|
||||
const blank = "/common/blank.html";
|
||||
let firstNavOk = false;
|
||||
frame.onload = t.step_func(() => {
|
||||
if (!firstNavOk) {
|
||||
assert_not_equals(frame.contentDocument, null);
|
||||
firstNavOk = true;
|
||||
} else {
|
||||
assert_not_equals(frame.contentDocument, null);
|
||||
assert_equals(frame.contentWindow.location.pathname, blank);
|
||||
t.done();
|
||||
}
|
||||
});
|
||||
frame.src = `resources/navigate-require-corp.sub.html?to=${blank}`;
|
||||
document.body.append(frame);
|
||||
assert_equals(frame.contentDocument.body.localName, "body");
|
||||
}, `"none" top-level: navigating a frame from "require-corp" to "none" should succeed`);
|
||||
|
||||
async_test(t => {
|
||||
const w = window.open(`resources/navigate-none.sub.html?to=navigate-require-corp.sub.html`, "window_name");
|
||||
t.add_cleanup(() => w.close());
|
||||
|
||||
t.step_timeout(() => {
|
||||
w.history.back();
|
||||
t.step_timeout(() => {
|
||||
assert_not_equals(w.document, null);
|
||||
t.done();
|
||||
}, 500);
|
||||
}, 500);
|
||||
}, `"none" top-level: navigating a frame back from "require-corp" should succeed`);
|
||||
|
||||
async_test(t => {
|
||||
let pageLoaded = false;
|
||||
const bc = new BroadcastChannel(token());
|
||||
let finished = false;
|
||||
bc.onmessage = t.step_func((event) => {
|
||||
pageLoaded = true;
|
||||
let payload = event.data;
|
||||
assert_equals(payload, "loaded");
|
||||
});
|
||||
|
||||
const bc2 = new BroadcastChannel(token());
|
||||
bc2.onmessage = t.step_func((event) => {
|
||||
finished = true;
|
||||
let payload = event.data;
|
||||
assert_equals(payload, "loaded");
|
||||
});
|
||||
|
||||
const win = window.open(`resources/navigate-require-corp.sub.html?channelName=${bc.name}&to=navigate-none.sub.html?channelName=${bc2.name}`, "_blank", "noopener");
|
||||
assert_equals(win, null);
|
||||
|
||||
t.step_timeout(() => {
|
||||
assert_true(pageLoaded);
|
||||
assert_true(finished);
|
||||
t.done();
|
||||
}, 500);
|
||||
}, `"require-corp" top-level noopener popup: navigating to "none" should succeed`);
|
||||
</script>
|
|
@ -0,0 +1 @@
|
|||
Cross-Origin-Embedder-Policy: unknown-should-be-parsed-as-null
|
|
@ -0,0 +1,138 @@
|
|||
<!doctype html>
|
||||
<meta name="timeout" content="long">
|
||||
<title>Cross-Origin-Embedder-Policy header and nested navigable resource without such header</title>
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src="/common/get-host-info.sub.js"></script>
|
||||
<script src="/common/utils.js"></script> <!-- Use token() to allow running tests in parallel -->
|
||||
<div id=log></div>
|
||||
<script>
|
||||
async_test(t => {
|
||||
const frame = document.createElement("iframe");
|
||||
t.add_cleanup(() => frame.remove());
|
||||
t.step_timeout(() => {
|
||||
// Make sure the iframe didn't load. See https://github.com/whatwg/html/issues/125 for why a
|
||||
// timeout is used here. Long term all network error handling should be similar and have a
|
||||
// reliable event.
|
||||
assert_equals(frame.contentDocument, null);
|
||||
t.done();
|
||||
}, 500);
|
||||
frame.src = "/common/blank.html";
|
||||
document.body.append(frame);
|
||||
assert_equals(frame.contentDocument.body.localName, "body");
|
||||
}, `"require-corp" top-level: navigating a frame to "none" should fail`);
|
||||
|
||||
async_test(t => {
|
||||
const frame = document.createElement("iframe");
|
||||
t.add_cleanup(() => frame.remove());
|
||||
const bc = new BroadcastChannel(token());
|
||||
bc.onmessage = t.step_func((event) => {
|
||||
assert_not_equals(frame.contentDocument, null);
|
||||
let payload = event.data;
|
||||
assert_equals(payload, "loaded");
|
||||
t.step_timeout(() => {
|
||||
assert_equals(frame.contentDocument, null);
|
||||
t.done();
|
||||
}, 500);
|
||||
});
|
||||
frame.src = `resources/navigate-require-corp.sub.html?channelName=${bc.name}&to=/common/blank.html`;
|
||||
document.body.append(frame);
|
||||
assert_equals(frame.contentDocument.body.localName, "body");
|
||||
}, `"require-corp" top-level: navigating a frame from "require-corp" to "none" should fail`);
|
||||
|
||||
async_test(t => {
|
||||
let pageLoaded = false;
|
||||
const bc = new BroadcastChannel(token());
|
||||
let finished = false;
|
||||
bc.onmessage = t.step_func((event) => {
|
||||
let payload = event.data;
|
||||
assert_equals(payload, "loaded");
|
||||
pageLoaded = true;
|
||||
});
|
||||
|
||||
const bc2 = new BroadcastChannel(token());
|
||||
bc2.onmessage = t.step_func_done((event) => {
|
||||
let payload = event.data;
|
||||
assert_equals(payload, "loaded");
|
||||
assert_equals(pageLoaded, true);
|
||||
});
|
||||
|
||||
const win = window.open(`resources/navigate-none.sub.html?channelName=${bc.name}&to=navigate-none.sub.html?channelName=${bc2.name}`, "_blank", "noopener");
|
||||
assert_equals(win, null);
|
||||
}, `"require-corp" top-level: creating a noopener "none" popup should succeed`);
|
||||
|
||||
async_test(t => {
|
||||
let pageLoaded = false;
|
||||
const bc = new BroadcastChannel(token());
|
||||
bc.onmessage = t.step_func_done((event) => {
|
||||
pageLoaded = true;
|
||||
let payload = event.data;
|
||||
assert_equals(payload, "loaded");
|
||||
});
|
||||
|
||||
const win = window.open(`resources/navigate-none.sub.html?channelName=${bc.name}&to=/common/blank.html`, "_blank");
|
||||
t.add_cleanup(() => win.close());
|
||||
t.step_timeout(() => {
|
||||
assert_equals(pageLoaded, true);
|
||||
t.done();
|
||||
}, 500);
|
||||
}, `"require-corp" top-level: creating a "none" popup should succeed.`);
|
||||
|
||||
[
|
||||
{
|
||||
"name": "",
|
||||
"title": "as popup"
|
||||
},
|
||||
{
|
||||
"name": "noopener",
|
||||
"title": "as noopener popup"
|
||||
},
|
||||
{
|
||||
"name": "clear opener",
|
||||
"title": "as popup with opener set to null"
|
||||
}
|
||||
].forEach(({name, title}) => {
|
||||
async_test(t => {
|
||||
let pageLoaded = false;
|
||||
const bc = new BroadcastChannel(token());
|
||||
bc.onmessage = t.step_func(event => {
|
||||
pageLoaded = true;
|
||||
const payload = event.data;
|
||||
assert_equals(payload, "loaded");
|
||||
});
|
||||
|
||||
const bc2 = new BroadcastChannel(token());
|
||||
bc2.onmessage = t.step_func_done(event => {
|
||||
const payload = event.data;
|
||||
assert_equals(payload, "loaded");
|
||||
assert_equals(pageLoaded, true);
|
||||
});
|
||||
|
||||
let clearOpener = "";
|
||||
if (name === "clear opener") {
|
||||
clearOpener = "&clearOpener=true"
|
||||
}
|
||||
|
||||
let noopener = undefined;
|
||||
if (name === "noopener") {
|
||||
noopener = "noopener"
|
||||
}
|
||||
|
||||
const win = window.open(`resources/navigate-require-corp.sub.html?channelName=${bc.name}${clearOpener}&to=navigate-none.sub.html?channelName=${bc2.name}`, "_blank", noopener);
|
||||
if (name === "noopener") {
|
||||
assert_equals(win, null);
|
||||
} else {
|
||||
t.add_cleanup(() => win.close());
|
||||
}
|
||||
}, `"require-corp" top-level (${title}): navigating to "none" should succeed`);
|
||||
});
|
||||
|
||||
promise_test(async t => {
|
||||
const response = await fetch(get_host_info().HTTPS_REMOTE_ORIGIN+"/html/cross-origin-embedder-policy/resources/nothing-cross-origin-corp.txt", {mode: "no-cors"});
|
||||
assert_equals(response.type, "opaque");
|
||||
}, `"require-corp" top-level: fetch() to CORP: cross-origin response should succeed`);
|
||||
|
||||
promise_test(t => {
|
||||
return promise_rejects(t, new TypeError(), fetch(get_host_info().HTTPS_REMOTE_ORIGIN+"/common/blank.html", {mode: "no-cors"}));
|
||||
}, `"require-corp" top-level: fetch() to response without CORP should fail`);
|
||||
</script>
|
|
@ -0,0 +1 @@
|
|||
Cross-Origin-Embedder-Policy: require-corp
|
|
@ -0,0 +1,17 @@
|
|||
<body>
|
||||
<script src="script-factory.js"></script>
|
||||
<script>
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
const id = query.get("id");
|
||||
const variant = query.get("variant");
|
||||
const parent = (variant === "subframe") ? "parent.parent" : "parent";
|
||||
const blob = new Blob([createScript(window.origin, query.get("crossOrigin"), parent, id)], { type: "text/html" });
|
||||
const blobURL = URL.createObjectURL(blob);
|
||||
if (variant === "subframe") {
|
||||
const frame = document.createElement("iframe");
|
||||
frame.src = blobURL;
|
||||
document.body.append(frame);
|
||||
} else {
|
||||
window.location = blobURL;
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,2 @@
|
|||
Cross-Origin-Embedder-Policy: require-corp
|
||||
Cross-Origin-Resource-Policy: cross-origin
|
|
@ -0,0 +1 @@
|
|||
Cross-Origin-Embedder-Policy: require-corp
|
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