Update web-platform-tests to revision 936827a6527f1c53051d3bc5bc79304c88c0737f

This commit is contained in:
WPT Sync Bot 2019-08-16 10:23:22 +00:00
parent c585f4fff5
commit 02a68a38f0
338 changed files with 14862 additions and 2933 deletions

View file

@ -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.

View file

@ -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');

View file

@ -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);
})();

View file

@ -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');

View file

@ -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);
})();

View file

@ -15,6 +15,7 @@
font: 3.75em/0.4 serif;
margin-left: 1em;
text-decoration: underline;
text-decoration-skip-ink: none;
}
span

View file

@ -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>

View file

@ -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");

View file

@ -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");

View file

@ -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");

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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 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>

View file

@ -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>

View file

@ -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>

View 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 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,7 @@
<!doctype html>
<title>CSS Test Reference</title>
<ol>
<li value=2>two
<div></div>
<li value=0>zero
</ol>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<title>CSS Test Reference</title>
<body style="margin:0">PASS</body>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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: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>

View file

@ -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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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');

View file

@ -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");

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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';

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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>

View 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>

View file

@ -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>

View file

@ -0,0 +1 @@
See `../cross-origin-opener-policy/README.md`.

View file

@ -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>

View file

@ -0,0 +1 @@
Cross-Origin-Embedder-Policy: require-corp

View file

@ -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>

View file

@ -0,0 +1 @@
Cross-Origin-Embedder-Policy: require-corp

View file

@ -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>

View file

@ -0,0 +1 @@
Cross-Origin-Embedder-Policy: require-corp

View file

@ -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>

View file

@ -0,0 +1 @@
Cross-Origin-Embedder-Policy: unknown-should-be-parsed-as-null

View file

@ -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>

View file

@ -0,0 +1 @@
Cross-Origin-Embedder-Policy: require-corp

View file

@ -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>

View file

@ -0,0 +1,2 @@
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Resource-Policy: cross-origin

View file

@ -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