mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision 04cd5eb8e5c47e4fe341f2fb541d39fa2346f464
This commit is contained in:
WPT Sync Bot
parent
0ab2c3f8a3
commit
1d0624b343
226 changed files with 4495 additions and 903 deletions
|
|
@ -149,12 +149,9 @@ tasks:
|
|||
${browser.name}
|
||||
${browser.channel};
|
||||
cd ~/web-platform-tests;
|
||||
result=0;
|
||||
./tools/ci/taskcluster-run.py
|
||||
--commit-range HEAD^
|
||||
${browser.name}
|
||||
--
|
||||
--channel=${browser.channel}
|
||||
${operation.extra_args} || result=$?;
|
||||
echo $result > ../artifacts/run-return-code.txt;
|
||||
echo "Command exited with code $result (failures are allowed while this task is being vetted)."
|
||||
${operation.extra_args};
|
||||
|
|
|
|||
|
|
@ -51,8 +51,7 @@ matrix:
|
|||
apt:
|
||||
packages:
|
||||
- libnss3-tools
|
||||
env:
|
||||
- JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=firefox:nightly
|
||||
env: JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=firefox:nightly
|
||||
- name: "stability (Chrome Dev)"
|
||||
if: type = pull_request
|
||||
os: linux
|
||||
|
|
@ -62,8 +61,7 @@ matrix:
|
|||
packages:
|
||||
- libappindicator1
|
||||
- fonts-liberation
|
||||
env:
|
||||
- JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=chrome:dev
|
||||
env: JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=chrome:dev
|
||||
- name: "tools/ unittests (Python 2)"
|
||||
if: type = pull_request
|
||||
os: linux
|
||||
|
|
@ -103,6 +101,8 @@ matrix:
|
|||
- env: # exclude empty env from the top-level above
|
||||
allow_failures:
|
||||
- env: JOB=build_css SCRIPT=css/build-css-testsuites.sh
|
||||
- env: JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=firefox:nightly
|
||||
- env: JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=chrome:dev
|
||||
script:
|
||||
- ./tools/ci/run.sh
|
||||
cache:
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<script>
|
||||
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
records = [ { pKey: "primaryKey_0", iKey: "indexKey_0" },
|
||||
{ pKey: "primaryKey_1", iKey: "indexKey_1" } ];
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<script type="text/javascript">
|
||||
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
records = [ { pKey: "primaryKey_0", iKey: "indexKey_0" },
|
||||
{ pKey: "primaryKey_1", iKey: "indexKey_1" } ];
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script>
|
||||
var db,
|
||||
count = 0,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
records = [ { pKey: "primaryKey_0", iKey: "indexKey_0" },
|
||||
{ pKey: "primaryKey_1", iKey: "indexKey_1" },
|
||||
{ pKey: "primaryKey_1-2", iKey: "indexKey_1" } ],
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script>
|
||||
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
records = [ { pKey: "primaryKey_0", iKey: "indexKey_0" },
|
||||
{ pKey: "primaryKey_1", iKey: "indexKey_1" },
|
||||
{ pKey: "primaryKey_1-2", iKey: "indexKey_1" },
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script>
|
||||
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
records = [ { pKey: "primaryKey_0", iKey: "indexKey_0" },
|
||||
{ pKey: "primaryKey_1", iKey: "indexKey_1" },
|
||||
{ pKey: "primaryKey_1-2", iKey: "indexKey_1" },
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000});
|
||||
t = async_test(document.title);
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
var db,
|
||||
count = 0,
|
||||
t = async_test(document.title, {timeout: 10000});
|
||||
t = async_test(document.title);
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
var db,
|
||||
count = 0,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
records = [ { pKey: "primaryKey_0", obj: { iKey: "iKey_0" }},
|
||||
{ pKey: "primaryKey_1", obj: { iKey: "iKey_1" }},
|
||||
{ pKey: "primaryKey_2", obj: { iKey: "iKey_2" }} ],
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
var db,
|
||||
count = 0,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
records = [ { pKey: "primaryKey_0", obj: { iKey: "iKey_0" }},
|
||||
{ pKey: "primaryKey_2", obj: { iKey: "iKey_2" }} ],
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
var db,
|
||||
count = 0,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
records = [ { pKey: "primaryKey_0" },
|
||||
{ pKey: "primaryKey_1" },
|
||||
{ pKey: "primaryKey_2" } ],
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
var db,
|
||||
count = 0,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
records = [ { pKey: "primaryKey_0" },
|
||||
{ pKey: "primaryKey_2" } ],
|
||||
expected_records = [ { pKey: "primaryKey_0" },
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000})
|
||||
t = async_test(document.title)
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<script>
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 600000}),
|
||||
t = async_test(document.title),
|
||||
open_rq = createdb(t)
|
||||
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<script>
|
||||
|
||||
var t = async_test(document.title, {timeout: 10000}),
|
||||
var t = async_test(document.title),
|
||||
open_rq = createdb(t)
|
||||
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script>
|
||||
|
||||
var t = async_test(document.title, {timeout: 10000}),
|
||||
var t = async_test(document.title),
|
||||
keys = [],
|
||||
open_rq = createdb(t)
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<script>
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
open_rq = createdb(t);
|
||||
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<script>
|
||||
var db
|
||||
var open_rq = createdb(async_test(document.title, {timeout: 10000}), undefined, 9)
|
||||
var open_rq = createdb(async_test(document.title), undefined, 9)
|
||||
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
db = e.target.result
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<script>
|
||||
var db, db2;
|
||||
var open_rq = createdb(async_test(document.title, {timeout: 10000}), undefined, 9);
|
||||
var open_rq = createdb(async_test(document.title), undefined, 9);
|
||||
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
db = e.target.result;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
var db;
|
||||
var count_done = 0;
|
||||
var open_rq = createdb(async_test(document.title, {timeout: 10000}));
|
||||
var open_rq = createdb(async_test(document.title));
|
||||
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
db = e.target.result;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<script>
|
||||
var db;
|
||||
var open_rq = createdb(async_test(document.title, {timeout: 10000}), undefined, 9);
|
||||
var open_rq = createdb(async_test(document.title), undefined, 9);
|
||||
var open2_t = async_test(document.title + " - second upgrade");
|
||||
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<script src="support.js"></script>
|
||||
|
||||
<script>
|
||||
createdb(async_test(document.title, {timeout: 10000})).onupgradeneeded = function(e) {
|
||||
createdb(async_test(document.title)).onupgradeneeded = function(e) {
|
||||
var store = e.target.result.createObjectStore("store");
|
||||
|
||||
assert_throws('InvalidAccessError', function() {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
<script>
|
||||
var db,
|
||||
t_add = async_test("Adding one item with 1000 multiEntry keys", { timeout: 10000 }),
|
||||
t_get = async_test("Getting the one item by 1000 indeced keys ", { timeout: 10000 });
|
||||
t_add = async_test("Adding one item with 1000 multiEntry keys"),
|
||||
t_get = async_test("Getting the one item by 1000 indeced keys ");
|
||||
|
||||
var open_rq = createdb(t_add);
|
||||
var obj = { test: 'yo', idxkeys: [] };
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
var db,
|
||||
expected_keys = [1, 2, 2, 3, 3];
|
||||
|
||||
var open_rq = createdb(async_test(document.title, {timeout: 10000}))
|
||||
var open_rq = createdb(async_test(document.title))
|
||||
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
db = e.target.result;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script>
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000});
|
||||
t = async_test(document.title);
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<script>
|
||||
var db, aborted,
|
||||
t = async_test(document.title, {timeout:19000})
|
||||
t = async_test(document.title)
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<script>
|
||||
var db,
|
||||
events = [],
|
||||
t = async_test(document.title, {timeout: 10000})
|
||||
t = async_test(document.title)
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script>
|
||||
var db, aborted,
|
||||
t = async_test(document.title, {timeout: 10000})
|
||||
t = async_test(document.title)
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
var db,
|
||||
events = [],
|
||||
t = async_test(document.title, {timeout: 10000})
|
||||
t = async_test(document.title)
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
var db,
|
||||
events = [],
|
||||
t = async_test(document.title, {timeout: 10000})
|
||||
t = async_test(document.title)
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<script>
|
||||
var db,
|
||||
t = async_test(document.title, {timeout:19000}),
|
||||
t = async_test(document.title),
|
||||
now = new Date(),
|
||||
mar18 = new Date(1111111111111),
|
||||
ar = ["Yay", 2, -Infinity],
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script>
|
||||
var db,
|
||||
add_success = false,
|
||||
t = async_test(document.title, {timeout: 10000})
|
||||
t = async_test(document.title)
|
||||
|
||||
var open_rq = createdb(t);
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<script>
|
||||
var db, store,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
open_rq = createdb(t),
|
||||
stages = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script>
|
||||
var db, aborted,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
record = { indexedProperty: "bar" };
|
||||
|
||||
var open_rq = createdb(t);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<script>
|
||||
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000});
|
||||
t = async_test(document.title);
|
||||
|
||||
t.step(function() {
|
||||
var openrq = indexedDB.open('db', 3);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<script>
|
||||
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
objects = [1, null, {id: 2}, null, 2.00001, 5, null, {id: 6} ],
|
||||
expected = [1, 2, 2.00001, 3, 5, 6],
|
||||
errors = 0;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script>
|
||||
|
||||
var db,
|
||||
t = async_test(document.title, {timeout: 10000}),
|
||||
t = async_test(document.title),
|
||||
overflow_error_fired = false,
|
||||
objects = [9007199254740991, null, "error", 2, "error" ],
|
||||
expected_keys = [2, 9007199254740991, 9007199254740992];
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
function keysort(desc, unsorted, expected) {
|
||||
var db,
|
||||
t = async_test("Database readback sort - " + desc, { timeout: 10000 }),
|
||||
t = async_test("Database readback sort - " + desc),
|
||||
store_name = 'store-' + Date.now() + Math.random();
|
||||
|
||||
// The database test
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script>
|
||||
function keypath(keypath, objects, expected_keys, desc) {
|
||||
var db,
|
||||
t = async_test(document.title + " - " + (desc ? desc : keypath), { timeout: 10000 }),
|
||||
t = async_test(document.title + " - " + (desc ? desc : keypath)),
|
||||
open_rq = createdb(t);
|
||||
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<script>
|
||||
var events = [];
|
||||
|
||||
var open_rq = createdb(async_test(document.title, {timeout: 10000}));
|
||||
var open_rq = createdb(async_test(document.title));
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
var db = e.target.result;
|
||||
var txn = e.target.transaction;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
var db, db_got_versionchange, db2,
|
||||
events = [],
|
||||
t = async_test(document.title, {timeout: 10000});
|
||||
t = async_test(document.title);
|
||||
|
||||
t.step(function() {
|
||||
var openrq = indexedDB.open('db', 3);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
var db, db_got_versionchange, db2,
|
||||
events = [],
|
||||
t = async_test(document.title, {timeout: 10000});
|
||||
t = async_test(document.title);
|
||||
|
||||
t.step(function() {
|
||||
var openrq = indexedDB.open('db', 3);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script>
|
||||
|
||||
var db, t = async_test(document.title, {timeout: 10000}),
|
||||
var db, t = async_test(document.title),
|
||||
keys = { txn: [], txn2: [] },
|
||||
open_rq = createdb(t)
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<script>
|
||||
var events = [];
|
||||
|
||||
var open_rq = createdb(async_test(document.title, {timeout: 10000}));
|
||||
var open_rq = createdb(async_test(document.title));
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
var db = e.target.result;
|
||||
var txn = e.target.transaction;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
var write_request_count = 0, write_success_count = 0;
|
||||
var RQ_COUNT = 25;
|
||||
|
||||
var open_rq = createdb(async_test(undefined, {timeout: 20000}));
|
||||
var open_rq = createdb(async_test(undefined));
|
||||
open_rq.onupgradeneeded = function(e) {
|
||||
db = e.target.result;
|
||||
db.createObjectStore("s")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS box-shadow Test: <body> shadow should look the same regardless of background color</title>
|
||||
<link rel="author" title="fmalita" href="mailto:fmalita@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow">
|
||||
<link rel="match" href="reference/box-shadow-body-ref.html">
|
||||
<style type="text/css">
|
||||
body {
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 4px red;
|
||||
height: 300px;
|
||||
width: 600px;
|
||||
margin: 20px auto;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS box-shadow Test Reference</title>
|
||||
<link rel="author" title="fmalita" href="mailto:fmalita@chromium.org">
|
||||
<style type="text/css">
|
||||
html {
|
||||
background-color: white;
|
||||
}
|
||||
body {
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 4px red;
|
||||
height: 300px;
|
||||
width: 600px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<p>The word "PASS" should be seen below.</p>
|
||||
<div style="margin-left:2ch; font-family:monospace; line-height:50px;">
|
||||
<div style="float:left;">PA</div>
|
||||
<div style="float:left;">SS</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
|
||||
<link rel="match" href="line-after-unbreakable-float-after-padding-ref.html">
|
||||
<p>The word "PASS" should be seen below.</p>
|
||||
<div style="columns:3; column-gap:0; column-fill:auto; font-family:monospace; line-height:50px; width:6ch; height:101px; orphans:1; widows:1;">
|
||||
<div style="padding-top:100px;">
|
||||
<div style="float:left; break-inside:avoid; width:100%; height:75px;">PA</div>
|
||||
SS
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
|
||||
<title>css-flexbox: Tests align-content with single-line flex-wrap: wrap</title>
|
||||
<style>
|
||||
.default {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
height: 70px;
|
||||
border: 1px solid red;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.default > div {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.verticalWriting {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
width: 70px;
|
||||
border: 1px solid red;
|
||||
margin: 5px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.verticalWriting > div {
|
||||
width: 20px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
</head>
|
||||
<body onload="checkLayout('.default, .verticalWriting'); ">
|
||||
<div id=log></div>
|
||||
<p>Test that we honor align-content even in single-line flex containers</p>
|
||||
<div class="default" style="align-content: flex-start">
|
||||
<div data-offset-y="0">This text should be at the top of its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: flex-end">
|
||||
<div data-offset-y="50">This text should be at the bottom of its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: center">
|
||||
<div data-offset-y="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: space-between">
|
||||
<div data-offset-y="0">This text should be at the top of its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: space-around">
|
||||
<div data-offset-y="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: space-evenly">
|
||||
<div data-offset-y="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="default" style="align-content: stretch">
|
||||
<div data-offset-y="0">This text should be at the top of its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: flex-start">
|
||||
<div data-offset-x="0">This text should be at the left of its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: flex-end">
|
||||
<div data-offset-x="50">This text should be at the right of its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: center">
|
||||
<div data-offset-x="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: space-between">
|
||||
<div data-offset-x="0">This text should be at the left of its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: space-around">
|
||||
<div data-offset-x="25">This text should be centered in its container</div>
|
||||
</div>
|
||||
<div class="verticalWriting" style="align-content: stretch">
|
||||
<div data-offset-x="0">This text should be at the left of its container</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
|
||||
<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
|
||||
<style>
|
||||
.flex-horizontal {
|
||||
width:600px;
|
||||
display:flex;
|
||||
height:100px;
|
||||
background:gray;
|
||||
margin-bottom:100px;
|
||||
}
|
||||
.flex-vertical {
|
||||
width:100px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
height:600px;
|
||||
background:gray;
|
||||
margin-top:200px;
|
||||
margin-bottom:100px;
|
||||
}
|
||||
.item-horizontal {
|
||||
width:150px;
|
||||
background:yellow;
|
||||
margin:10px;
|
||||
flex:none;
|
||||
}
|
||||
.item-vertical {
|
||||
height:150px;
|
||||
background:yellow;
|
||||
margin:10px;
|
||||
flex:none;
|
||||
}
|
||||
.content1-horizontal {
|
||||
width:100px;
|
||||
height:150px;
|
||||
background:red;
|
||||
}
|
||||
.content2-horizontal {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background:red;
|
||||
}
|
||||
.content3-horizontal {
|
||||
width:100px;
|
||||
height:50px;
|
||||
background:red;
|
||||
}
|
||||
.content1-vertical {
|
||||
width:150px;
|
||||
height:100px;
|
||||
background:red;
|
||||
}
|
||||
.content2-vertical {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background:red;
|
||||
}
|
||||
.content3-vertical {
|
||||
width:50px;
|
||||
height:100px;
|
||||
background:red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.flex-horizontal, .flex-vertical');">
|
||||
<div id=log></div>
|
||||
<p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p>
|
||||
<div class="flex-horizontal">
|
||||
<div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-horizontal" style="flex-wrap:wrap;">
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-horizontal" style="flex-wrap:wrap;">
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
|
||||
<div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-vertical">
|
||||
<div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-vertical" style="flex-wrap:wrap;">
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-vertical" style="flex-wrap:wrap;">
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
|
||||
<div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,330 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
|
||||
<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
background-color: #aaa;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
}
|
||||
.horizontal > div {
|
||||
min-height: 20px;
|
||||
}
|
||||
.horizontal > :nth-child(1) {
|
||||
width: 100px;
|
||||
min-height: 10px;
|
||||
}
|
||||
.horizontal > :nth-child(2) {
|
||||
width: 100px;
|
||||
}
|
||||
.horizontal > :nth-child(3) {
|
||||
width: 200px;
|
||||
}
|
||||
.horizontal > :nth-child(4) {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
}
|
||||
.vertical-rl > div {
|
||||
min-width: 20px;
|
||||
}
|
||||
.vertical-rl > :nth-child(1) {
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
.vertical-rl > :nth-child(2) {
|
||||
height: 10px;
|
||||
}
|
||||
.vertical-rl > :nth-child(3) {
|
||||
height: 20px;
|
||||
}
|
||||
.vertical-rl > :nth-child(4) {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.flexbox :nth-child(1) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
.flexbox :nth-child(2) {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.flexbox :nth-child(3) {
|
||||
background-color: pink;
|
||||
}
|
||||
.flexbox :nth-child(4) {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.flexbox')">
|
||||
<div id=log></div>
|
||||
<p>Test to make sure that align-content works properly.</p>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-start">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-end">
|
||||
<div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: center">
|
||||
<div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly">
|
||||
<div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around">
|
||||
<div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
|
||||
</div>
|
||||
|
||||
<!-- Negative overflow goes out the top. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: flex-end; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: center; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should be the same as flex-start. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stretch should only grow, not shrink. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- 0 lines should not crash. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
|
||||
</div>
|
||||
|
||||
<!-- 1 line should not crash. -->
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div>
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
|
||||
</div>
|
||||
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl">
|
||||
<div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
|
||||
<div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-start">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-end">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: center">
|
||||
<div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-between">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around">
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly">
|
||||
<div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch">
|
||||
<div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
|
||||
<div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
|
||||
</div>
|
||||
|
||||
<!-- Negative overflow goes out the right. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: center; width: 30px;">
|
||||
<div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should be the same as flex-start. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px;">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;">
|
||||
<div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- If we overflow, we should true center. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;">
|
||||
<div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stretch should only grow, not shrink. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
|
||||
<div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
|
||||
<div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
|
||||
</div>
|
||||
|
||||
<!-- 0 lines should not crash. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
|
||||
</div>
|
||||
|
||||
<!-- 1 line should not crash. -->
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div>
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
|
||||
</div>
|
||||
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" />
|
||||
<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100px;
|
||||
line-height: 1;
|
||||
}
|
||||
.flex > div {
|
||||
min-height: 0;
|
||||
background: green;
|
||||
}
|
||||
.flex * {
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="flex">
|
||||
<div style="align-self: stretch;">
|
||||
<div style="display: inline-block; width: 20px; height: 40px;"></div>
|
||||
</div>
|
||||
<div style="height: 60px;">
|
||||
<div style="display: inline-block; height: 15px; width: 20px;"></div>
|
||||
<div style="display: inline-block; height: 15px; width: 100px;"></div>
|
||||
<div style="display: inline-block; height: 15px; width: 100px;"></div>
|
||||
<div style="display: inline-block; height: 15px; width: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!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 Grid Reference: align/justify-self on range INPUT items</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace;
|
||||
}
|
||||
|
||||
input {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:none; /* NOTE: On Windows, GetWidgetBorder returns 1px on all sides,
|
||||
so we need the next declaration for the width/height to match: */
|
||||
box-sizing: border-box;
|
||||
width:300px;
|
||||
height:80px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
grid: 80px / 300px;
|
||||
place-items: stretch;
|
||||
border:1px solid;
|
||||
}
|
||||
|
||||
.zero { grid:0/0; }
|
||||
.zero input { width:0; height:0; }
|
||||
|
||||
.none input { -webkit-appearance:none; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid"><input type=range></div>
|
||||
<br>
|
||||
<div class="grid zero"><input type=range></div>
|
||||
<br>
|
||||
<div class="grid"><input type=range style="place-self:normal"></div>
|
||||
<br>
|
||||
<div class="grid zero"><input type=range style="place-self:normal"></div>
|
||||
<br>
|
||||
|
||||
<div class="none">
|
||||
<div class="grid"><input type=range></div>
|
||||
<br>
|
||||
<div class="grid zero"><input type=range></div>
|
||||
<br>
|
||||
<div class="grid"><input type=range style="place-self:normal"></div>
|
||||
<br>
|
||||
<div class="grid zero"><input type=range style="place-self:normal"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!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 Grid Test: align/justify-self on range INPUT items</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
|
||||
<link rel="match" href="grid-self-alignment-stretch-input-range-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace;
|
||||
}
|
||||
|
||||
input {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
grid: 80px / 300px;
|
||||
place-items: stretch;
|
||||
border:1px solid;
|
||||
}
|
||||
|
||||
.zero { grid:0/0; }
|
||||
|
||||
.none input { -webkit-appearance:none; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid"><input type=range></div>
|
||||
<br>
|
||||
<div class="grid zero"><input type=range></div>
|
||||
<br>
|
||||
<div class="grid"><input type=range style="place-self:normal"></div>
|
||||
<br>
|
||||
<div class="grid zero"><input type=range style="place-self:normal"></div>
|
||||
<br>
|
||||
|
||||
<div class="none">
|
||||
<div class="grid"><input type=range></div>
|
||||
<br>
|
||||
<div class="grid zero"><input type=range></div>
|
||||
<br>
|
||||
<div class="grid"><input type=range style="place-self:normal"></div>
|
||||
<br>
|
||||
<div class="grid zero"><input type=range style="place-self:normal"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
.container {
|
||||
font: 10px/1 Ahem;
|
||||
margin: 10px;
|
||||
background: grey;
|
||||
}
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same output than the reference.</p>
|
||||
<p>The test passes if it has the same output as the reference.</p>
|
||||
|
||||
<div style="float: left; width: 350px;">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
|
||||
<link rel="match" href="grid-container-scrollbar-001-ref.html">
|
||||
<meta name="assert" content="This test verifes that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
|
||||
<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.grid {
|
||||
font: 10px/1 Ahem;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same output than the reference.</p>
|
||||
<p>The test passes if it has the same output as the reference.</p>
|
||||
|
||||
<div style="float: left; width: 350px;">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
.container {
|
||||
font: 10px/1 Ahem;
|
||||
margin: 10px;
|
||||
background: grey;
|
||||
writing-mode: vertical-lr;
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same output than the reference.</p>
|
||||
<p>The test passes if it has the same output as the reference.</p>
|
||||
|
||||
<div style="float: left; width: 350px;">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
|
||||
<link rel="match" href="grid-container-scrollbar-vertical-lr-001-ref.html">
|
||||
<meta name="assert" content="This test verifes that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
|
||||
<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.grid {
|
||||
font: 10px/1 Ahem;
|
||||
margin: 10px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same output than the reference.</p>
|
||||
<p>The test passes if it has the same output as the reference.</p>
|
||||
|
||||
<div style="float: left; width: 350px;">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
.container {
|
||||
font: 10px/1 Ahem;
|
||||
margin: 10px;
|
||||
background: grey;
|
||||
writing-mode: vertical-rl;
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same output than the reference.</p>
|
||||
<p>The test passes if it has the same output as the reference.</p>
|
||||
|
||||
<div style="float: left; width: 350px;">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@
|
|||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
|
||||
<link rel="match" href="grid-container-scrollbar-vertical-rl-001-ref.html">
|
||||
<meta name="assert" content="This test verifes that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
|
||||
<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
|
||||
<link href="support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.grid {
|
||||
font: 10px/1 Ahem;
|
||||
margin: 10px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same output than the reference.</p>
|
||||
<p>The test passes if it has the same output as the reference.</p>
|
||||
|
||||
<div style="float: left; width: 350px;">
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Logical Values: Flow-Relative Values for the 'float' property</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
|
||||
<meta name="assert" content="This test checks that the 'inline-start' and 'inline-end' values of the 'float' and 'clear' properties map to the correct physical value." />
|
||||
<link rel="match" href="reference/logical-values-float-clear-reftest-ref.html">
|
||||
<style>
|
||||
.test {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 300px;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.float, .clear {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 3px;
|
||||
width: 100px;
|
||||
background: #f0f;
|
||||
}
|
||||
.clear {
|
||||
background: #0ff;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const sides = ["inline-start", "inline-end"];
|
||||
const directions = ["ltr", "rtl"];
|
||||
for (const floatSide of sides) {
|
||||
for (const clearSide of sides) {
|
||||
for (const containerDirection of directions) {
|
||||
for (const inlineParentDirection of [null, ...directions]) {
|
||||
for (const floatDirection of directions) {
|
||||
for (const clearDirection of directions) {
|
||||
const containerEl = document.createElement("div");
|
||||
containerEl.className = "test";
|
||||
containerEl.style.direction = containerDirection;
|
||||
const floatEl = document.createElement("div");
|
||||
floatEl.className = "float";
|
||||
floatEl.style.direction = floatDirection;
|
||||
floatEl.style.float = floatSide;
|
||||
const clearEl = document.createElement("div");
|
||||
clearEl.className = "clear";
|
||||
clearEl.style.direction = floatDirection;
|
||||
clearEl.style.clear = clearSide;
|
||||
if (inlineParentDirection) {
|
||||
const inlineParent = document.createElement("div");
|
||||
inlineParent.className = "inline";
|
||||
inlineParent.style.direction = inlineParentDirection;
|
||||
inlineParent.appendChild(floatEl);
|
||||
inlineParent.appendChild(clearEl);
|
||||
containerEl.appendChild(inlineParent);
|
||||
} else {
|
||||
containerEl.appendChild(floatEl);
|
||||
containerEl.appendChild(clearEl);
|
||||
}
|
||||
document.body.appendChild(containerEl);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
|
||||
<style>
|
||||
.test {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 300px;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.float, .clear {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 3px;
|
||||
width: 100px;
|
||||
background: #f0f;
|
||||
}
|
||||
.clear {
|
||||
background: #0ff;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
function physicalValue(value, containerDirection) {
|
||||
return ((value === "inline-start") === (containerDirection === "ltr")) ? "left" : "right";
|
||||
}
|
||||
const sides = ["inline-start", "inline-end"];
|
||||
const directions = ["ltr", "rtl"];
|
||||
for (const floatSide of sides) {
|
||||
for (const clearSide of sides) {
|
||||
for (const containerDirection of directions) {
|
||||
for (const inlineParentDirection of [null, ...directions]) {
|
||||
for (const floatDirection of directions) {
|
||||
for (const clearDirection of directions) {
|
||||
const containerEl = document.createElement("div");
|
||||
containerEl.className = "test";
|
||||
containerEl.style.direction = containerDirection;
|
||||
const floatEl = document.createElement("div");
|
||||
floatEl.className = "float";
|
||||
floatEl.style.direction = floatDirection;
|
||||
floatEl.style.float = physicalValue(floatSide, containerDirection);
|
||||
const clearEl = document.createElement("div");
|
||||
clearEl.className = "clear";
|
||||
clearEl.style.direction = floatDirection;
|
||||
clearEl.style.clear = physicalValue(clearSide, containerDirection);
|
||||
if (inlineParentDirection) {
|
||||
const inlineParent = document.createElement("div");
|
||||
inlineParent.className = "inline";
|
||||
inlineParent.style.direction = inlineParentDirection;
|
||||
inlineParent.appendChild(floatEl);
|
||||
inlineParent.appendChild(clearEl);
|
||||
containerEl.appendChild(inlineParent);
|
||||
} else {
|
||||
containerEl.appendChild(floatEl);
|
||||
containerEl.appendChild(clearEl);
|
||||
}
|
||||
document.body.appendChild(containerEl);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -21,27 +21,7 @@ export function runTests(property, values) {
|
|||
style.cssText = "";
|
||||
style.setProperty(property, value);
|
||||
testCSSValues("logical values in inline style", style, [[property, value]]);
|
||||
testComputedValues("logical values in computed style", style, [[property, value]]);
|
||||
}, `Test that '${property}: ${value}' is supported.`);
|
||||
|
||||
const camelCase = value.replace(/-(.)/g, (match, $1) => $1.toUpperCase());
|
||||
for (const writingMode of writingModes) {
|
||||
for (const style of writingMode.styles) {
|
||||
const writingModeDecl = makeDeclaration(style);
|
||||
test(function() {
|
||||
const physicalSide = writingMode[camelCase];
|
||||
let expected;
|
||||
if (physicalSide === writingMode.lineLeft) {
|
||||
expected = "left";
|
||||
} else if (physicalSide === writingMode.lineRight) {
|
||||
expected = "right";
|
||||
} else {
|
||||
expected = physicalSide;
|
||||
}
|
||||
testComputedValues(`computed value`,
|
||||
`.test { ${writingModeDecl} }`,
|
||||
[[property, expected]]);
|
||||
}, `Test '${property}: ${value}' with '${writingModeDecl}'.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="./resources/utils.js"></script>
|
||||
<style>
|
||||
div {
|
||||
--registered-length-1: 10px;
|
||||
|
|
@ -135,4 +136,38 @@ test(function(){
|
|||
element.style = '';
|
||||
}, 'Lists with relative units are absolutized when substituting');
|
||||
|
||||
function test_valid_fallback(syntax, value, fallback) {
|
||||
test(function(){
|
||||
let name = generate_property(syntax);
|
||||
try {
|
||||
element.style = `${name}: ${value}; --x:var(${name},${fallback})`;
|
||||
let computedStyle = getComputedStyle(element);
|
||||
assert_equals(computedStyle.getPropertyValue('--x'), value);
|
||||
} finally {
|
||||
element.style = '';
|
||||
}
|
||||
}, `Valid fallback does not invalidate var()-reference [${syntax}, ${fallback}]`);
|
||||
}
|
||||
|
||||
function test_invalid_fallback(syntax, value, fallback) {
|
||||
test(function(){
|
||||
let name = generate_property(syntax);
|
||||
try {
|
||||
element.style = `${name}: ${value}; --x:var(${name},${fallback})`;
|
||||
let computedStyle = getComputedStyle(element);
|
||||
assert_equals(computedStyle.getPropertyValue('--x'), '');
|
||||
} finally {
|
||||
element.style = '';
|
||||
}
|
||||
}, `Invalid fallback invalidates var()-reference [${syntax}, ${fallback}]`);
|
||||
}
|
||||
|
||||
test_valid_fallback('<length>', '40px', '10px');
|
||||
test_valid_fallback('<length> | <color>', '40px', 'red');
|
||||
test_valid_fallback('<length> | none', '40px', 'none');
|
||||
|
||||
test_invalid_fallback('<length>', '40px', 'red');
|
||||
test_invalid_fallback('<length> | none', '40px', 'nolength');
|
||||
test_invalid_fallback('<length>', '40px', 'var(--novar)');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test reference</title>
|
||||
<link rel=author title="Ambrose Li" href="http://port.ambroseli.ca/">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>The test passes if the word pairs below are all displayed in the same font.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>ping4 on1
|
||||
<td>salaam
|
||||
<td>shalom
|
||||
<tr>
|
||||
<td>ping4 on1
|
||||
<td>salaam
|
||||
<td>shalom
|
||||
</table>
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if the first line below ends with a hyphen.
|
||||
|
||||
<div lang=ja-Latn>Fushimi‐<br>ku</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<p>The test passes if the question mark in the phrase below is alone on the second line.
|
||||
|
||||
<div lang=en-Hrkt>ハロー、ハウアーユー<br>？</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>The test passes if the both lines are identical, including the spacing of the characters.
|
||||
|
||||
<div lang=ain-Kana>“アイヌイタㇰ”</div>
|
||||
<div lang=ain-Kana>“アイヌイタㇰ”</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test reference</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the two words below are identical: there must be a dot on the “i” letter at the beginning of the word.
|
||||
<div lang=tr-Cyrl>iстанбул</div>
|
||||
<div lang=tr-Cyrl>iстанбул</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test: font selection and writing sytem</title>
|
||||
<link rel=author title="Ambrose Li" href="http://port.ambroseli.ca/">
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
|
||||
<link rel=help href="https://drafts.csswg.org/css-fonts-4/#language-specific-support">
|
||||
<link rel=match href="reference/writing-system-font-001-ref.html">
|
||||
<meta name=assert content="An explicit writing system takes precedence over the content language for font selection">
|
||||
|
||||
<p>The test passes if the word pairs below are all displayed in the same font.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>ping4 on1
|
||||
<td>salaam
|
||||
<td>shalom
|
||||
<tr>
|
||||
<td><span lang=zh-yue-latn>ping4 on1</span>
|
||||
<td><span lang=ar-latn>salaam</span>
|
||||
<td><span lang=he-latn>shalom</span>
|
||||
</table>
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test: writing system and line breaking</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
|
||||
<link rel=match href="reference/writing-system-line-break-001-ref.html">
|
||||
<meta name=assert content="breaks before hyphens when line-break is loose are allowed if the content language is Japanese,
|
||||
but not when the writing system is Latin.">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
width: 7ch;
|
||||
line-break: loose;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if the first line below ends with a hyphen.
|
||||
|
||||
<div lang=ja-Latn>Fushimi‐ku</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test: writing system and line breaking</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
|
||||
<link rel=match href="reference/writing-system-line-break-002-ref.html">
|
||||
<meta name=assert content="breaks before U+FF1F when line-break is loose are allowed
|
||||
if the writing system is Japanese (which includes Hrkt),
|
||||
but even when the language not Japanese.">
|
||||
<style>
|
||||
div {
|
||||
width: 10em;
|
||||
line-break: loose;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if the question mark in the phrase below is alone on the second line.
|
||||
|
||||
<div lang=en-Hrkt>ハロー、ハウアーユー？</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test: writing system and segment break transformation</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#line-break-transform">
|
||||
<link rel=match href="reference/writing-system-segment-break-001-ref.html">
|
||||
<meta name=assert content="If the writing system of the segment break is Chinese, Japanese, or Yi,
|
||||
and the character before or after the segment break is punctuation or a symbol (Unicode general category P* or S*)
|
||||
and has an East Asian Width property of A or is Emoji,
|
||||
and the character on the other side of the segment break is F, W, or H, and not Hangul or Emoji,
|
||||
then the segment break is removed.">
|
||||
<!--
|
||||
In this case, checking with “ and ” which are punctuation with East Asian Width of A,
|
||||
next to Katakana letters (which are W),
|
||||
while the writing system is Katakana, which is classified as Japanese,
|
||||
despite a non Japanese content language (Ainu).
|
||||
-->
|
||||
|
||||
<p>The test passes if the both lines are identical, including the spacing of the characters.
|
||||
|
||||
<div lang=ain-Kana>“
|
||||
アイヌイタㇰ
|
||||
”</div>
|
||||
<div lang=ain-Kana>“アイヌイタㇰ”</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS test: text-transform and writing systems</title>
|
||||
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-text-transform">
|
||||
<link rel=match href="reference/writing-system-text-transform-001-ref.html">
|
||||
<meta name=assert content="text transform rules that depend on the language are overriden by a contradicting explicit script tag.">
|
||||
<style>
|
||||
div {
|
||||
text-transform: lowercase;
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the two words below are identical: there must be a dot on the “i” letter at the beginning of the word.
|
||||
<div lang=tr-Cyrl>IСТАНБУЛ</div>
|
||||
<div lang=tr-Cyrl>iстанбул</div>
|
||||
|
|
@ -11,6 +11,28 @@ function test_interpolation(settings, expectations, name) {
|
|||
return 'cubic-bezier(0, ' + y + ', 1, ' + y + ')';
|
||||
}
|
||||
|
||||
function RoundMatrix(style) {
|
||||
var matrixMatch = style.match(/^(matrix(3d)?)\(.+\)$/);
|
||||
if (!!matrixMatch) {
|
||||
var matrixType = matrixMatch[1];
|
||||
var matrixArgs = style.substr(matrixType.length);
|
||||
var extractmatrix = function(matrixStr) {
|
||||
var list = [];
|
||||
var regex = /[+\-]?[0-9]+[.]?[0-9]*(e[+/-][0-9]+)?/g;
|
||||
var match = undefined;
|
||||
do {
|
||||
match = regex.exec(matrixStr);
|
||||
if (match) {
|
||||
list.push(parseFloat(parseFloat(match[0]).toFixed(6)));
|
||||
}
|
||||
} while (match);
|
||||
return list;
|
||||
}
|
||||
return matrixType + '(' + extractmatrix(matrixArgs).join(', ') + ')';
|
||||
}
|
||||
return style;
|
||||
}
|
||||
|
||||
test(function(){
|
||||
assert_true(CSS.supports(settings.property, settings.from), 'Value "' + settings.from + '" is supported by ' + settings.property);
|
||||
assert_true(CSS.supports(settings.property, settings.to), 'Value "' + settings.to + '" is supported by ' + settings.property);
|
||||
|
|
@ -49,7 +71,9 @@ function test_interpolation(settings, expectations, name) {
|
|||
document.body.appendChild(reference);
|
||||
reference.style = '';
|
||||
|
||||
assert_equals(getComputedStyle(target)[settings.property], getComputedStyle(reference)[settings.property]);
|
||||
var observed = RoundMatrix(getComputedStyle(target)[settings.property]);
|
||||
var expected = RoundMatrix(getComputedStyle(reference)[settings.property]);
|
||||
assert_equals(observed, expected);
|
||||
}, message_prefix + 'Animation between "' + settings.from + '" and "' + settings.to + '" at progress ' + progress);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
height: 100px;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
-webkit-backdrop-filter: invert(1);
|
||||
backdrop-filter: invert(1);
|
||||
opacity: 0.5;
|
||||
background: blue;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
height: 100px;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
-webkit-backdrop-filter: invert(1);
|
||||
backdrop-filter: invert(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
height: 100px;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
-webkit-backdrop-filter: invert(1);
|
||||
backdrop-filter: invert(1);
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ div {
|
|||
}
|
||||
.filter {
|
||||
opacity: 0.7;
|
||||
-webkit-backdrop-filter: invert(1);
|
||||
backdrop-filter: invert(1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Clip the filter at border box of element</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<p>Expected: A green box, blurred inside the short, wide white box with a<br>
|
||||
blue border, and not blurred anywhere else. In particular, there should be<br>
|
||||
no blurring inside the tall, narrow white box, or anywhere outside that.</p>
|
||||
</div>
|
||||
<div class="box"></div>
|
||||
<div class="navbar"></div>
|
||||
<div class="menu"></div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background: green;
|
||||
}
|
||||
.navbar {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
top: 150px;
|
||||
left: 50px;
|
||||
border: 1px solid blue;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.menu {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
top: 201px;
|
||||
left: 146px;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Clip the filter at border box of element</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<link rel="match" href="backdrop-filter-paint-order-ref.html">
|
||||
|
||||
<div>
|
||||
<p>Expected: A green box, blurred inside the short, wide white box with a<br>
|
||||
blue border, and not blurred anywhere else. In particular, there should be<br>
|
||||
no blurring inside the tall, narrow white box, or anywhere outside that.</p>
|
||||
</div>
|
||||
<div class="box"></div>
|
||||
<div class="navbar">
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background: green;
|
||||
}
|
||||
.navbar {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
top: 150px;
|
||||
left: 50px;
|
||||
border: 1px solid blue;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.menu {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
top: 50px;
|
||||
left: 95px;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Edge pixels shouldn't get filtered</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
|
||||
|
||||
|
||||
<div class="box"></div>
|
||||
<div style="position:absolute;top:100px;">
|
||||
<p>Expected above: A pure white box with a blue border.<br>
|
||||
No dark/black should be observed within the white box.</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
border: 1px solid blue;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Edge pixels shouldn't get filtered</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<link rel="match" href="backdrop-filter-edge-pixels-ref.html">
|
||||
|
||||
<div class="box"></div>
|
||||
<div style="position:absolute;top:100px;">
|
||||
<p>Expected above: A pure white box with a blue border.<br>
|
||||
No dark/black should be observed within the white box.</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
border: 1px solid blue;
|
||||
backdrop-filter: blur(30px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -35,7 +35,6 @@ div {
|
|||
top: 30px;
|
||||
left: -90px;
|
||||
opacity: 0.3;
|
||||
-webkit-backdrop-filter: invert(1);
|
||||
backdrop-filter: invert(1);
|
||||
background: yellow;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ div {
|
|||
top: 30px;
|
||||
left: -90px;
|
||||
opacity: 0.3;
|
||||
-webkit-backdrop-filter: invert(1);
|
||||
backdrop-filter: invert(1);
|
||||
background: yellow;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Only filter objects painted before</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<p>Expected: A pure white box with a blue border, surrounded by green.<br>
|
||||
No green should be observed within the white box.<br>
|
||||
No dark/black should be observed within the white box either.</p>
|
||||
</div>
|
||||
|
||||
<div class="filterbox"></div>
|
||||
<div class="greenbox top"></div>
|
||||
<div class="greenbox right"></div>
|
||||
<div class="greenbox bottom"></div>
|
||||
<style>
|
||||
.filterbox {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 150px;
|
||||
left: 0px;
|
||||
border: 1px solid blue;
|
||||
|
||||
|
||||
}
|
||||
.greenbox {
|
||||
position:absolute;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
.top {
|
||||
top:100px;
|
||||
left: 10px;
|
||||
}
|
||||
.right {
|
||||
top:130px;
|
||||
left: 102px;
|
||||
width: 58px;
|
||||
height: 150px;
|
||||
}
|
||||
.bottom {
|
||||
top:252px;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>backdrop-filter: Only filter objects painted before</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
|
||||
<link rel="match" href="backdrop-filter-paint-order-ref.html">
|
||||
|
||||
<div>
|
||||
<p>Expected: A pure white box with a blue border, surrounded by green.<br>
|
||||
No green should be observed within the white box.<br>
|
||||
No dark/black should be observed within the white box either.</p>
|
||||
</div>
|
||||
|
||||
<div class="filterbox"></div>
|
||||
<div class="greenbox top"></div>
|
||||
<div class="greenbox right"></div>
|
||||
<div class="greenbox bottom"></div>
|
||||
<style>
|
||||
.filterbox {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 150px;
|
||||
left: 0px;
|
||||
border: 1px solid blue;
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.greenbox {
|
||||
position:absolute;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
.top {
|
||||
top:100px;
|
||||
left: 10px;
|
||||
}
|
||||
.right {
|
||||
top:130px;
|
||||
left: 102px;
|
||||
width: 58px;
|
||||
height: 150px;
|
||||
}
|
||||
.bottom {
|
||||
top:252px;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Selectors Invalidation: :matches()</title>
|
||||
<title>CSS Selectors Invalidation: :is()</title>
|
||||
<link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
|
||||
<meta name="assert" content="This tests that the :matches() selector is effective">
|
||||
<meta name="assert" content="This tests that the :is() selector is effective">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
|
@ -12,18 +12,18 @@
|
|||
color: yellow;
|
||||
}
|
||||
/*Simple selector arguments */
|
||||
.a :matches(.b, .c) {
|
||||
.a :is(.b, .c) {
|
||||
color: red;
|
||||
}
|
||||
/*Compound selector arguments */
|
||||
.a :matches(.c#d, .e) {
|
||||
.a :is(.c#d, .e) {
|
||||
color: green;
|
||||
}
|
||||
/* Complex selector arguments */
|
||||
.a .g>.b {
|
||||
color: black;
|
||||
}
|
||||
.a :matches(.e+.f, .g>.b, .h) {
|
||||
.a :is(.e+.f, .g>.b, .h) {
|
||||
color: blue;
|
||||
}
|
||||
.g>.b {
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
.c>.a+.e {
|
||||
color: black;
|
||||
}
|
||||
.a+:matches(.b+.f, :matches(.c>.e, .g)) {
|
||||
.a+:is(.b+.f, :is(.c>.e, .g)) {
|
||||
color: red;
|
||||
}
|
||||
.c>.e {
|
||||
|
|
@ -108,32 +108,32 @@
|
|||
assert_equals(getComputedStyle(b1).color, red);
|
||||
assert_equals(getComputedStyle(b3).color, red);
|
||||
assert_equals(getComputedStyle(c1).color, red);
|
||||
}, "Invalidate :matches() for simple selector arguments.");
|
||||
}, "Invalidate :is() for simple selector arguments.");
|
||||
|
||||
test(() => {
|
||||
a1.className = "a";
|
||||
assert_equals(getComputedStyle(d).color, green);
|
||||
}, "Invalidate :matches() for compound selector arguments.");
|
||||
}, "Invalidate :is() for compound selector arguments.");
|
||||
|
||||
test(() => {
|
||||
a1.className = "a";
|
||||
assert_equals(getComputedStyle(b2).color, blue);
|
||||
assert_equals(getComputedStyle(b3).color, red);
|
||||
assert_equals(getComputedStyle(f1).color, blue);
|
||||
}, "Invalidate :matches() for complex selector arguments.");
|
||||
}, "Invalidate :is() for complex selector arguments.");
|
||||
|
||||
test(() => {
|
||||
a1.className = "a";
|
||||
assert_equals(getComputedStyle(e2).color, black);
|
||||
a2.className = "a";
|
||||
assert_equals(getComputedStyle(e2).color, red);
|
||||
}, "Invalidate nested :matches().");
|
||||
}, "Invalidate nested :is().");
|
||||
|
||||
test(() => {
|
||||
a1.className = "a";
|
||||
assert_equals(getComputedStyle(b2).color, blue);
|
||||
assert_equals(getComputedStyle(h1).color, black);
|
||||
}, "Test specificity of :matches().");
|
||||
}, "Test specificity of :is().");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
:where(.a>:where(.g+.h, .b)~.i) {
|
||||
color: blue;
|
||||
}
|
||||
:where(:matches(.a~.h)) {
|
||||
:where(:is(.a~.h)) {
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Selectors: :matches()</title>
|
||||
<title>CSS Selectors: :is()</title>
|
||||
<link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
|
||||
<meta name="assert" content="This tests that the :matches() selector is effective when nested">
|
||||
<meta name="assert" content="This tests that the :is() selector is effective when nested">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
/* Testing that highest specificity is chosen for class outside of :matches() */
|
||||
/* Testing that highest specificity is chosen for class outside of :is() */
|
||||
.a+.b+.c>.e+.d {
|
||||
color: black;
|
||||
font-size: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
.a+:matches(.b+.f, .b+:matches(*, .c>.e, .g, *))+.d {
|
||||
.a+:is(.b+.f, .b+:is(*, .c>.e, .g, *))+.d {
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
}
|
||||
.a+.b+.c>.e+.d {
|
||||
color: yellow;
|
||||
}
|
||||
/* Testing specificty of a class within :matches() */
|
||||
/* Testing specificty of a class within :is() */
|
||||
.a+.c>.e {
|
||||
color: black;
|
||||
}
|
||||
.a+:matches(.b+.f, :matches(.c>.e, .g)) {
|
||||
.a+:is(.b+.f, :is(.c>.e, .g)) {
|
||||
color: red;
|
||||
}
|
||||
.c>.e {
|
||||
|
|
@ -61,11 +61,11 @@
|
|||
assert_equals(getComputedStyle(d1).color, yellow);
|
||||
assert_equals(getComputedStyle(d1).fontSize, "20px");
|
||||
assert_equals(getComputedStyle(d1).width, "10px");
|
||||
}, "Test nested :matches() chooses highest specificity for class outside :matches().");
|
||||
}, "Test nested :is() chooses highest specificity for class outside :is().");
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(e1).color, red);
|
||||
}, "Test nested :matches() specificity for class within arguments.");
|
||||
}, "Test nested :is() specificity for class within arguments.");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Selectors: :matches()</title>
|
||||
<title>CSS Selectors: :is()</title>
|
||||
<link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
|
||||
<meta name="assert" content="This tests that the :matches() selector chooses the correct specificity">
|
||||
<meta name="assert" content="This tests that the :is() selector chooses the correct specificity">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
:matches(.a, .b.c + .d, .e) + :matches(* + .p, .q.r + .s, * + .t) + #target {
|
||||
:is(.a, .b.c + .d, .e) + :is(* + .p, .q.r + .s, * + .t) + #target {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
assert_equals(getComputedStyle(target).width, "30px");
|
||||
assert_equals(getComputedStyle(target).height, "20px");
|
||||
assert_equals(getComputedStyle(target).fontSize, "10px");
|
||||
}, "Test :matches() uses highest possible specificity");
|
||||
}, "Test :is() uses highest possible specificity");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -13,10 +13,16 @@ function test_computed_value(property, specified, computed) {
|
|||
if (!computed)
|
||||
computed = specified;
|
||||
test(() => {
|
||||
const target = document.getElementById('target');
|
||||
if (!getComputedStyle(target)[property])
|
||||
return;
|
||||
target.style[property] = '';
|
||||
target.style[property] = specified;
|
||||
assert_equals(getComputedStyle(target)[property], computed);
|
||||
if (computed !== specified) {
|
||||
target.style[property] = '';
|
||||
target.style[property] = computed;
|
||||
assert_equals(getComputedStyle(target)[property], computed, 'computed value should round-trip');
|
||||
}
|
||||
}, "Property " + property + " value '" + specified + "' computes to '" + computed + "'");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/feature-policy/experimental-features/resources/common.js"></script>
|
||||
<title> 'layout-animations' Policy : violation reports from javascript
|
||||
</title>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
document.policy.allowedFeatures().forEach((enabled_feature) => {
|
||||
assert_not_equals(enabled_feature, "layout-animations");
|
||||
});
|
||||
},
|
||||
"Verify 'layout-animations' is not in document's feature list.");
|
||||
|
||||
promise_test(async () => {
|
||||
let promise = wait_for_violation_in_file(
|
||||
"layout-animations",
|
||||
"animation-property-height.js");
|
||||
let script = document.createElement("script");
|
||||
script.src = "/feature-policy/experimental-features/resources/" +
|
||||
"animation-property-height.js";
|
||||
document.body.appendChild(script);
|
||||
await promise;
|
||||
},
|
||||
"Verify that when 'layout-animations' is disabled, an 'element.animate' " +
|
||||
"API including a keyframe that uses a blocked property generates violation " +
|
||||
"report (linked scripts).");
|
||||
|
||||
promise_test(async () => {
|
||||
let promise = wait_for_violation_in_file(
|
||||
"layout-animations",
|
||||
"layout-animations-disabled-violation-report-js-tentative.html");
|
||||
let div = document.createElement("div");
|
||||
document.body.appendChild(div);
|
||||
div.animate([{width: "100px"}, {width: "200px"}]);
|
||||
await promise;
|
||||
},
|
||||
"Verify that when 'layout-animations' is disabled, an 'element.animate' " +
|
||||
"API including a keyframe that uses a blocked property generates violation " +
|
||||
"report (inline scripts).");
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Feature-Policy: layout-animations 'none'
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/feature-policy/experimental-features/resources/common.js"></script>
|
||||
<title> 'layout-animations' Policy : violation reports from CSS keyframes
|
||||
</title>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
document.policy.allowedFeatures().forEach((enabled_feature) => {
|
||||
assert_not_equals(enabled_feature, "layout-animations");
|
||||
});
|
||||
},
|
||||
"Sanity-check: 'layout-animations' is not in document's feature list.");
|
||||
|
||||
promise_test(async () => {
|
||||
let promise = wait_for_violation_in_file(
|
||||
"layout-animations", null /* source not specified */);
|
||||
let style = document.createElement("style");
|
||||
style.innerHTML = `@keyframes animation_property_top {
|
||||
from { top: 0px }
|
||||
to { top: 100px }
|
||||
}`;
|
||||
document.body.appendChild(style);
|
||||
await promise;
|
||||
},
|
||||
"Verify that when 'layout-animations' is disabled, a keyframes which " +
|
||||
"includes a blocked property generates violation report.");
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Feature-Policy: layout-animations 'none'
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
let div = document.createElement("div");
|
||||
document.body.appendChild(div);
|
||||
div.animate([{"height": "0px"}, {"height": "100px"}]);
|
||||
|
|
@ -64,4 +64,29 @@ function wait_for_load(e) {
|
|||
return new Promise((resolve) => {
|
||||
e.addEventListener("load", resolve);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.reporting_observer_instance = new ReportingObserver((reports, observer) => {
|
||||
if (window.reporting_observer_callback) {
|
||||
reports.forEach(window.reporting_observer_callback);
|
||||
}
|
||||
}, {types: ["feature-policy"]});
|
||||
window.reporting_observer_instance.observe();
|
||||
window.reporting_observer_callback = null;
|
||||
|
||||
// Waits for a violation in |feature| and source file containing |file_name|.
|
||||
function wait_for_violation_in_file(feature, file_name) {
|
||||
return new Promise( (resolve) => {
|
||||
assert_equals(null, window.reporting_observer_callback);
|
||||
window.reporting_observer_callback = (report) => {
|
||||
var feature_match = (feature === report.body.feature);
|
||||
var file_name_match =
|
||||
!file_name ||
|
||||
(report.body.sourceFile.indexOf(file_name) !== -1);
|
||||
if (feature_match && file_name_match) {
|
||||
window.reporting_observer_callback = null;
|
||||
resolve(report);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue