Bug 1435868 - Update web-platform-tests to revision 1e5122139897bc70789527960120354b8c640ef0, a=testonly

MozReview-Commit-ID: L9ZlgNF4QF1


--HG--
rename : testing/web-platform/tests/webvr/idlharness.html => testing/web-platform/tests/webvr/idlharness.https.html
This commit is contained in:
James Graham 2018-02-04 20:56:26 +00:00
Родитель 3ee8100ae0
Коммит 27845c244d
192 изменённых файлов: 5803 добавлений и 1020 удалений

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -1,2 +1,2 @@
local: b53d2fadbdb530bf3d794c1020229eb1526331d1
upstream: c434326b946e471e50428ed987b5dfe220c85027
local: cac3a4e6000d7079f8cf0118a5c509b2527b3289
upstream: 928cae0eb86aaa89cec64f7a1721afb47a97d059

Просмотреть файл

@ -73,7 +73,7 @@ matrix:
python: "2.7"
env:
- secure: "YTSXPwI0DyCA1GhYrLT9KMEV6b7QQKuEeaQgeFDP38OTzJ1+cIj3CC4SRNqbnJ/6SJwPGcdqSxLuV8m4e5HFFnyCcQnJe6h8EMsTehZ7W3j/fP9UYrJqYqvGpe3Vj3xblO5pwBYmq7sg3jAmmuCgAgOW6VGf7cRMucrsmFeo7VM="
- JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=sauce:MicrosoftEdge:14.14393 PLATFORM='Windows 10'
- JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=sauce:MicrosoftEdge:16.16299 PLATFORM='Windows 10'
- python: 2.7
env: JOB=tools_unittest TOXENV=py27 HYPOTHESIS_PROFILE=ci SCRIPT=tools/ci/ci_tools_unittest.sh
- python: 3.6
@ -97,7 +97,7 @@ matrix:
- JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=chrome:dev
- env:
- secure: "YTSXPwI0DyCA1GhYrLT9KMEV6b7QQKuEeaQgeFDP38OTzJ1+cIj3CC4SRNqbnJ/6SJwPGcdqSxLuV8m4e5HFFnyCcQnJe6h8EMsTehZ7W3j/fP9UYrJqYqvGpe3Vj3xblO5pwBYmq7sg3jAmmuCgAgOW6VGf7cRMucrsmFeo7VM="
- JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=sauce:MicrosoftEdge:14.14393 PLATFORM='Windows 10'
- JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=sauce:MicrosoftEdge:16.16299 PLATFORM='Windows 10'
- env:
- secure: "YTSXPwI0DyCA1GhYrLT9KMEV6b7QQKuEeaQgeFDP38OTzJ1+cIj3CC4SRNqbnJ/6SJwPGcdqSxLuV8m4e5HFFnyCcQnJe6h8EMsTehZ7W3j/fP9UYrJqYqvGpe3Vj3xblO5pwBYmq7sg3jAmmuCgAgOW6VGf7cRMucrsmFeo7VM="
- JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=sauce:safari:11.0 PLATFORM='macOS 10.12'

Просмотреть файл

@ -43,13 +43,34 @@ function makeVideo() {
});
}
function makeDataUrlVideo() {
const toDataUrl = (type, buffer) => {
const encoded = btoa(String.fromCodePoint(...new Uint8Array(buffer)));
return `data:${type};base64,${encoded}`
};
return fetch(getVideoURI("/images/pattern"))
.then(response => Promise.all([response.headers.get("Content-Type"), response.arrayBuffer()]))
.then(([type, data]) => {
return new Promise(function(resolve, reject) {
var video = document.createElement("video");
video.oncanplaythrough = function() {
resolve(video);
};
video.onerror = reject;
video.src = toDataUrl(type, data);
});
});
}
function makeMakeHTMLImage(src) {
return function() {
return new Promise(resolve => {
return new Promise((resolve, reject) => {
var img = new Image();
img.onload = function() {
resolve(img);
};
img.onerror = reject;
img.src = src;
});
}
@ -115,6 +136,7 @@ function makeBlob() {
var imageSourceTypes = [
{ name: 'an HTMLCanvasElement', factory: makeCanvas },
{ name: 'an HTMLVideoElement', factory: makeVideo },
{ name: 'an HTMLVideoElement from a data URL', factory: makeDataUrlVideo },
{ name: 'a bitmap HTMLImageElement', factory: makeMakeHTMLImage("/images/pattern.png") },
{ name: 'a vector HTMLImageElement', factory: makeMakeHTMLImage("/images/pattern.svg") },
{ name: 'a bitmap SVGImageElement', factory: makeMakeSVGImage("/images/pattern.png") },

Просмотреть файл

@ -10,25 +10,28 @@
<link rel="stylesheet" href="/common/canvas-tests.css">
<body>
<script>
function testCanvasDisplayingPattern(canvas)
function testCanvasDisplayingPattern(canvas, width, height)
{
var tolerance = 5; // for creating ImageBitmap from a video, the tolerance needs to be high
_assertPixelApprox(canvas, 5,5, 255,0,0,255, "5,5", "255,0,0,255", tolerance);
_assertPixelApprox(canvas, 15,5, 0,255,0,255, "15,5", "0,255,0,255", tolerance);
_assertPixelApprox(canvas, 5,15, 0,0,255,255, "5,15", "0,0,255,255", tolerance);
_assertPixelApprox(canvas, 15,15, 0,0,0,255, "15,15", "0,0,0,255", tolerance);
var tolerance = 10; // for creating ImageBitmap from a video, the tolerance needs to be high
const check = (x, y, r, g, b, a) =>
_assertPixelApprox(canvas, x,y, r,g,b,a, `${x},${y}`, `${r},${g},${b},${a}`, tolerance);
check(1 * width / 4, 1 * height / 4, 255,0,0,255);
check(3 * width / 4, 1 * height / 4, 0,255,0,255);
check(1 * width / 4, 3 * height / 4, 0,0,255,255);
check(3 * width / 4, 3 * height / 4, 0,0,0,255);
}
function testDrawImageBitmap(source, args = [])
function testDrawImageBitmap(source, args = [], { resizeWidth = 20, resizeHeight = 20 } = {})
{
var canvas = document.createElement("canvas");
canvas.width = 20;
canvas.height = 20;
canvas.width = resizeWidth;
canvas.height = resizeHeight;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
return createImageBitmap(source, ...args).then(imageBitmap => {
assert_equals(imageBitmap.width, resizeWidth);
assert_equals(imageBitmap.height, resizeHeight);
ctx.drawImage(imageBitmap, 0, 0);
testCanvasDisplayingPattern(canvas);
testCanvasDisplayingPattern(canvas, resizeWidth, resizeHeight);
});
}
@ -39,6 +42,27 @@ for (let { name, factory } of imageSourceTypes) {
});
}, `createImageBitmap from ${name}, and drawImage on the created ImageBitmap`);
promise_test(function() {
return factory().then(function(img) {
const options = { resizeWidth: 10, resizeHeight: 10 };
return testDrawImageBitmap(img, [options], options);
});
}, `createImageBitmap from ${name} scaled down, and drawImage on the created ImageBitmap`);
promise_test(function() {
return factory().then(function(img) {
const options = { resizeWidth: 40, resizeHeight: 40 };
return testDrawImageBitmap(img, [options], options);
});
}, `createImageBitmap from ${name} scaled up, and drawImage on the created ImageBitmap`);
promise_test(function() {
return factory().then(function(img) {
const options = { resizeWidth: 10, resizeHeight: 40 };
return testDrawImageBitmap(img, [options], options);
});
}, `createImageBitmap from ${name} resized, and drawImage on the created ImageBitmap`);
promise_test(function() {
return factory().then(function(img) {
return testDrawImageBitmap(img, [20, 20, -20, -20]);

Просмотреть файл

@ -58,6 +58,18 @@ const arguments = [
},
},
{
name: "redirected to cross-origin HTMLVideoElement",
factory: () => {
return new Promise((resolve, reject) => {
const video = document.createElement("video");
video.oncanplaythrough = () => resolve(video);
video.onerror = reject;
video.src = "/common/redirect.py?location=" + getVideoURI("http://{{domains[www1]}}:{{ports[http][0]}}/media/movie_300");
});
},
},
{
name: "unclean HTMLCanvasElement",
factory: () => {

Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>FileAPI Test: filereader_readAsBinaryString</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="https://w3c.github.io/FileAPI/#readAsBinaryString">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
async_test(t => {
const blob = new Blob(["σ"]);
const reader = new FileReader();
reader.onload = t.step_func_done(() => {
assert_equals(typeof reader.result, "string", "The result is string");
assert_equals(reader.result.length, 2, "The result length is 2");
assert_equals(reader.result, "\xcf\x83", "The result is \xcf\x83");
assert_equals(reader.readyState, reader.DONE);
});
reader.onloadstart = t.step_func(() => {
assert_equals(reader.readyState, reader.LOADING);
});
reader.onprogress = t.step_func(() => {
assert_equals(reader.readyState, reader.LOADING);
});
reader.readAsBinaryString(blob);
});
</script>

Просмотреть файл

@ -0,0 +1,33 @@
async_test(t => {
const run_result = 'test_frame_OK';
const blob_contents = '<!doctype html>\n<meta charset="utf-8">\n' +
'<script>window.test_result = "' + run_result + '";</script>';
const blob = new Blob([blob_contents], {type: 'text/html'});
const url = URL.createObjectURL(blob);
const frame = document.createElement('iframe');
frame.setAttribute('src', url);
frame.setAttribute('style', 'display:none;');
document.body.appendChild(frame);
URL.revokeObjectURL(url);
frame.onload = t.step_func_done(() => {
assert_equals(frame.contentWindow.test_result, run_result);
});
}, 'Fetching a blob URL immediately before revoking it works in an iframe.');
async_test(t => {
const run_result = 'test_script_OK';
const blob_contents = 'window.script_test_result = "' + run_result + '";';
const blob = new Blob([blob_contents]);
const url = URL.createObjectURL(blob);
const e = document.createElement('script');
e.setAttribute('src', url);
e.onload = t.step_func_done(() => {
assert_equals(window.script_test_result, run_result);
});
document.body.appendChild(e);
URL.revokeObjectURL(url);
}, 'Fetching a blob URL immediately before revoking it works in <script> tags.');

Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>form-action-src-redirect-allowed-target-blank</title>
<meta http-equiv="Content-Security-Policy" content="form-action 'self'">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function OnDocumentLoaded() {
let test = async_test("form submission targetting _blank allowed after a redirect");
window.addEventListener("message", function(event) {
if (event.data == "DocumentNotBlocked") {
event.source.close();
test.done();
}
});
let form = document.getElementById("form");
form.action =
"/content-security-policy/form-action/support/post-message-to-opener.sub.html";
let submit = document.getElementById("submit");
submit.click();
}
</script>
</head>
<body onload="OnDocumentLoaded();">
<form id="form" method="GET" target="_blank">
<input type="hidden" name="message" value="DocumentNotBlocked">
<input type="submit" id="submit">
</form>
</body>
</html>

Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>form-action-src-allowed-target-frame</title>
<meta http-equiv="Content-Security-Policy" content="form-action 'self'">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function OnDocumentLoaded() {
let test = async_test("form submission targetting a frame allowed");
window.addEventListener("message", function(event) {
if (event.data == "DocumentNotBlocked") {
test.done();
}
});
let form = document.getElementById("form");
form.action =
"/content-security-policy/form-action/support/post-message-to-parent.sub.html";
let submit = document.getElementById("submit");
submit.click();
}
</script>
</head>
<body onload="OnDocumentLoaded();">
<form id="form" method="GET" target="frame">
<input type="hidden" name="message" value="DocumentNotBlocked">
<input type="submit" id="submit">
</form>
<iframe name="frame"></iframe>
</body>
</html>

Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>form-action-src-redirect-allowed-target-blank</title>
<meta http-equiv="Content-Security-Policy" content="form-action 'self'">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function OnDocumentLoaded() {
let test = async_test("form submission targetting _blank allowed after a redirect");
window.addEventListener("message", function(event) {
if (event.data == "DocumentNotBlocked") {
event.source.close();
test.done();
}
});
let form = document.getElementById("form");
let final_url = "/content-security-policy/form-action/support/post-message-to-opener.sub.html?message=DocumentNotBlocked";
let redirect_url = "/common/redirect.py?location=";
form.action = redirect_url + encodeURIComponent(final_url);
let submit = document.getElementById("submit");
submit.click();
}
</script>
</head>
<body onload="OnDocumentLoaded();">
<form id="form" method="POST" target="_blank">
<input type="submit" id="submit">
</form>
</body>
</html>

Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>form-action-src-redirect-allowed-target-frame</title>
<meta http-equiv="Content-Security-Policy" content="form-action 'self'">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function OnDocumentLoaded() {
let test = async_test("form submission targetting a frame allowed after a redirect");
window.addEventListener("message", function(event) {
if (event.data == "DocumentNotBlocked") {
test.done();
}
});
let form = document.getElementById("form");
let final_url = "/content-security-policy/form-action/support/post-message-to-parent.sub.html?message=DocumentNotBlocked";
let redirect_url = "/common/redirect.py?location=";
form.action = redirect_url + encodeURIComponent(final_url);
let submit = document.getElementById("submit");
submit.click();
}
</script>
</head>
<body onload="OnDocumentLoaded();">
<form id="form" method="POST" target="frame">
<input type="submit" id="submit">
</form>
<iframe name="frame"></iframe>
</body>
</html>

Просмотреть файл

@ -0,0 +1,3 @@
<script>
opener.postMessage("{{GET[message]}}", "*");
</script>

Просмотреть файл

@ -0,0 +1,3 @@
<script>
parent.postMessage("{{GET[message]}}", "*");
</script>

Просмотреть файл

@ -1,8 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: Flex item - contiguous text runs - position:absolute</title>
<title>CSS Flexbox Test: Flex item - non-contiguous text runs - position:absolute</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
<link rel="match" href="anonymous-flex-item-ref.html">
<p>There should be a space between "two" and "words" below.</p>
<div style="display:flex">two <span style="position:absolute"></span>words</div>
<link rel="match" href="anonymous-flex-item-split-ref.html">
<p>The words "Two" and "lines" should not be on the same line.</p>
<div style="display:flex;flex-direction:column">Two <span style="position:absolute"></span>lines</div>

Просмотреть файл

@ -1,12 +1,14 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: Flex item - contiguous text runs - position:absolute dynamic</title>
<title>CSS Flexbox Test: Flex item - non-contiguous text runs - position:absolute dynamic</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
<link rel="match" href="anonymous-flex-item-ref.html">
<p>There should be a space between "two" and "words" below.</p>
<div style="display:flex">two <span id="absSpan"></span>words</div>
<link rel="match" href="anonymous-flex-item-split-ref.html">
<p>The words "Two" and "lines" should not be on the same line.</p>
<div style="display:flex;flex-direction:column">Two <span id="absSpan"></span>lines</div>
<script>
absSpan.style.display = "none";
document.body.offsetTop;
absSpan.style.position = "absolute";
absSpan.style.display = "inline";
</script>

Просмотреть файл

@ -1,12 +1,12 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: Flex item - contiguous text runs - position:absolute and node removal</title>
<title>CSS Flexbox Test: Flex item - non-contiguous text runs - position:absolute and node removal</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
<link rel="match" href="anonymous-flex-item-ref.html">
<link rel="match" href="anonymous-flex-item-split-ref.html">
<style>.abs { position:absolute }</style>
<p>There should be a space between "two" and "words" below.</p>
<div style="display:flex">two <span class="abs"></span><span id="spanRemove"></span><span class="abs"></span>words</div>
<p>The words "Two" and "lines" should not be on the same line.</p>
<div style="display:flex;flex-direction:column">Two <span class="abs"></span><span id="spanRemove"></span><span class="abs"></span>lines</div>
<script>
document.body.offsetTop;
spanRemove.remove();

Просмотреть файл

@ -0,0 +1,7 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<p>The words "Two" and "lines" should not be on the same line.</p>
Two<br>
lines

Просмотреть файл

@ -3,10 +3,10 @@
<head>
<title>CSS Test: feature value matching for font-variant-alternates</title>
<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-feature-values"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-4/#font-feature-values"/>
<link rel="match" href="alternates-order-ref.html"/>
<meta name="flags" content=""/>
<meta name="assert" content="Case and order of font family name or feature name should not affect alternate rendered"/>
<style type="text/css">
@font-face {

Просмотреть файл

@ -20,7 +20,7 @@
const div = document.querySelector("#test");
const div1 = document.querySelector("#test1");
test(function() {
assert_equals(getComputedStyle(div).fontFeatureSettings, '"vert" 1');
assert_equals(getComputedStyle(div1).fontFeatureSettings, '"vert" 1');
}, "font-feature-settings should have its feature tag serialized with double quotes");
assert_equals(getComputedStyle(div).fontFeatureSettings, '"vert"');
assert_equals(getComputedStyle(div1).fontFeatureSettings, '"vert"');
}, "font-feature-settings should be serialized with double quotes, and the default value of 1 should be omitted");
</script>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: normal; low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-01-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<meta name="assert" content="None of the features listed below are enabled. ">
<style>
@font-face {

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: historical-forms; low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-02-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<meta name="assert" content="Enables display of historical forms (OpenType feature: hist)">
<style>
@font-face {

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: stylistic(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-03-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of stylistic alternates (font specific, OpenType feature: salt &lt;feature-index&gt;)">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: stylistic(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-04-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of stylistic alternates (font specific, OpenType feature: salt &lt;feature-index&gt;)">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: stylistic(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-05-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of stylistic alternates (font specific, OpenType feature: salt &lt;feature-index&gt;)">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: styleset(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-06-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display with stylistic sets (font specific, OpenType feature: ss&lt;feature-index&gt;">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: styleset(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-07-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display with stylistic sets (font specific, OpenType feature: ss&lt;feature-index&gt;">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: styleset(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-08-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display with stylistic sets (font specific, OpenType feature: ss&lt;feature-index&gt;">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: character-variant(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-09-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of specific character variants (font specific, OpenType feature: cv&lt;feature-index&gt;">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: character-variant(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-10-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of specific character variants (font specific, OpenType feature: cv&lt;feature-index&gt;">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: character-variant(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-11-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of specific character variants (font specific, OpenType feature: cv&lt;feature-index&gt;">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: swash(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-12-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of swash glyphs (font specific, OpenType feature: swsh &lt;feature-index&gt;, cswh &lt;feature-index&gt;).">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: swash(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-13-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of swash glyphs (font specific, OpenType feature: swsh &lt;feature-index&gt;, cswh &lt;feature-index&gt;).">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: swash(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-14-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of swash glyphs (font specific, OpenType feature: swsh &lt;feature-index&gt;, cswh &lt;feature-index&gt;).">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: ornaments(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-15-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables replacement of default glyphs with ornaments, if provided in the font (font specific, OpenType feature: ornm &lt;feature-index&gt;).">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: ornaments(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-16-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables replacement of default glyphs with ornaments, if provided in the font (font specific, OpenType feature: ornm &lt;feature-index&gt;).">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: ornaments(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-17-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables replacement of default glyphs with ornaments, if provided in the font (font specific, OpenType feature: ornm &lt;feature-index&gt;).">
<style>

Просмотреть файл

@ -4,8 +4,8 @@
<title>CSS Test: font-variant-alternates: ornaments(); low level equivalence</title>
<link rel="author" title="Chris Lilley" href="chris@w3.org">
<link rel="match" href="font-variant-alternates-18-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-feature-settings-prop">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-feature-values">
<meta name="assert" content="Enables display of alternate annotation forms (font specific, OpenType feature: nalt &lt;feature-index&gt;).">
<style>

Просмотреть файл

@ -2,7 +2,7 @@
<meta charset="utf-8">
<title>CSS Test: font-variant-alternates: historical-forms; parses case-insensitively</title>
<link rel="author" title="Emilio Cobos Álvarez" href="emilio@crisal.io">
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-variant-alternates-prop">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>

Просмотреть файл

@ -0,0 +1,75 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Alignment along column axis of stcky positioned items</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Sticky positioned grid items are aligned correcly.">
<style>
.container {
border: solid 1px;
overflow: auto;
height: 500px;
}
.grid {
position: relative;
float: left;
display: grid;
grid-template-columns: 75px 75px 75px 75px;
grid-template-rows: 100px 100px 100px 300px;
background: grey;
height: 400px;
margin-right: 20px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
width: 20px;
height: 20px;
background-color: #cae8ca;
}
.item1 {
top: 0px;
grid-column: 1;
grid-row: 1;
}
.item2 {
top: 0px;
grid-column: 2;
grid-row: 2;
}
.item3 {
top: 0px;
grid-column: 3;
grid-row: 3;
}
.item4 {
grid-column: 4;
grid-row: 4;
background: lightgrey;
}
.scroll { overflow: auto; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div class="container">
<div style="height:30px"></div>
<div class="grid">
<div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
<div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
<div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
<div class="item4"></div>
</div>
<div class="grid scroll">
<div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div>
<div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
<div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
<div class="item4"></div>
</div>
<div style="height:2000px"></div>
</div>
</body>

Просмотреть файл

@ -0,0 +1,75 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Alignment along column axis of stcky positioned items</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Sticky positioned grid items are aligned correcly, but preserving non-static positions when required.">
<style>
.container {
border: solid 1px;
overflow: auto;
height: 500px;
}
.grid {
position: relative;
float: left;
display: grid;
grid-template-columns: 75px 75px 75px 75px;
grid-template-rows: 100px 100px 100px 300px;
background: grey;
height: 400px;
margin-right: 20px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
width: 20px;
height: 20px;
background-color: #cae8ca;
}
.item1 {
top: 40px;
grid-column: 1;
grid-row: 1;
}
.item2 {
top: 100px;
grid-column: 2;
grid-row: 2;
}
.item3 {
top: 290px;
grid-column: 3;
grid-row: 3;
}
.item4 {
grid-column: 4;
grid-row: 4;
background: lightgrey;
}
.scroll { overflow: auto; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div class="container">
<div style="height:30px"></div>
<div class="grid">
<div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="10"></div>
<div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
<div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div>
<div class="item4"></div>
</div>
<div class="grid scroll">
<div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="40"></div>
<div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div>
<div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="290"></div>
<div class="item4"></div>
</div>
<div style="height:2000px"></div>
</div>
</body>

Просмотреть файл

@ -0,0 +1,75 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Alignment along row axis of stcky positioned items</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Sticky positioned grid items are aligned correcly.">
<style>
.container {
border: solid 1px;
overflow: auto;
width: 500px;
}
.grid {
position: relative;
display: grid;
grid-template-columns: 100px 100px 100px 300px;
grid-template-rows: 75px 75px 75px 75px;
background: grey;
width: 400px;
margin-bottom: 20px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
width: 20px;
height: 20px;
background-color: #cae8ca;
}
.item1 {
left: 0px;
grid-column: 1;
grid-row: 1;
}
.item2 {
left: 0px;
grid-column: 2;
grid-row: 2;
}
.item3 {
left: 0px;
grid-column: 3;
grid-row: 3;
}
.item4 {
grid-column: 4;
grid-row: 4;
background: lightgrey;
}
.scroll { overflow: auto; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div class="container">
<div style="width: 30px; float:left; height: 10px;"></div>
<div class="grid">
<div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
<div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
<div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
<div class="item4"></div>
</div>
<div style="width: 30px; float:left; height: 10px;"></div>
<div class="grid scroll">
<div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div>
<div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
<div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
<div class="item4"></div>
</div>
<div style="width: 2000px; height: 10px;"></div>
</div>
</body>

Просмотреть файл

@ -0,0 +1,75 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Alignment along row axis of stcky positioned items</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Sticky positioned grid items are aligned correcly, but preserving non-static positions when required.">
<style>
.container {
border: solid 1px;
overflow: auto;
width: 500px;
}
.grid {
position: relative;
display: grid;
grid-template-columns: 100px 100px 100px 300px;
grid-template-rows: 75px 75px 75px 75px;
background: grey;
width: 400px;
margin-bottom: 20px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
width: 20px;
height: 20px;
background-color: #cae8ca;
}
.item1 {
left: 40px;
grid-column: 1;
grid-row: 1;
}
.item2 {
left: 100px;
grid-column: 2;
grid-row: 2;
}
.item3 {
left: 290px;
grid-column: 3;
grid-row: 3;
}
.item4 {
grid-column: 4;
grid-row: 4;
background: lightgrey;
}
.scroll { overflow: auto; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div class="container">
<div style="width: 30px; float:left; height: 10px;"></div>
<div class="grid">
<div class="item1 sticky justifySelfStart" data-offset-x="10" data-offset-y="0"></div>
<div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
<div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div>
<div class="item4"></div>
</div>
<div style="width: 30px; float:left; height: 10px;"></div>
<div class="grid scroll">
<div class="item1 sticky justifySelfStart" data-offset-x="40" data-offset-y="0"></div>
<div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
<div class="item3 sticky justifySelfEnd" data-offset-x="290" data-offset-y="150"></div>
<div class="item4"></div>
</div>
<div style="width: 2000px; height: 10px;"></div>
</div>
</body>

Просмотреть файл

@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Test: Anonymous grid items - non-contiguous text runs - position:absolute</title>
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
<link rel="match" href="/css/css-flexbox/anonymous-flex-item-split-ref.html">
<p>The words "Two" and "lines" should not be on the same line.</p>
<div style="display:grid">Two <span style="position:absolute"></span>lines</div>

Просмотреть файл

@ -0,0 +1,86 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
<title>Tests that window should snap at user scroll end.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
margin: 0px;
overflow: scroll;
scroll-snap-type: both mandatory;
}
#content {
width: 2000px;
height: 2000px;
padding: 0px;
margin: 0px;
}
#target {
position: relative;
left: 400px;
top: 400px;
width: 400px;
height: 400px;
background-color: lightblue;
scroll-snap-align: start;
}
#i1 {
color: red;
font-weight: bold;
}
</style>
<div id="content">
<div id="target">
<h1>CSSScrollSnap</h1>
<h4>Tests that the window can snap at user scroll end.</h4>
<ol>
<li id="i1" style="color: red">
Scroll the page vertically and horizontally.
Keep scrolling until background has turned yellow.</li>
<li id="i2"> Press the button "Done"</li>
</ol>
<input type="button" id="btn" value="DONE" style="width: 100px; height: 50px;"/>
</div>
</div>
<script>
var body = document.body;
var button = document.getElementById("btn");
var target = document.getElementById("target");
var instruction1 = document.getElementById("i1");
var instruction2 = document.getElementById("i2");
var scrolled_x = false;
var scrolled_y = false;
var start_x = window.scrollX;
var start_y = window.scrollY;
window.onscroll = function() {
if (scrolled_x && scrolled_y) {
body.style.backgroundColor = "yellow";
instruction1.style.color = "black";
instruction1.style.fontWeight = "normal";
instruction2.style.color = "red";
instruction2.style.fontWeight = "bold";
return;
}
scrolled_x |= window.scrollX != start_x;
scrolled_y |= window.scrollY != start_y;
}
button.onclick = function() {
if (!scrolled_x || !scrolled_y)
return;
assert_equals(window.scrollX, target.offsetLeft,
"window.scrollX should be at snapped position.");
assert_equals(window.scrollY, target.offsetTop,
"window.scrollY should be at snapped position.");
// To make the test result visible.
var content = document.getElementById("content");
body.removeChild(content);
done();
}
</script>

Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing shape-outside with invalid position values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
<meta name="assert" content="shape-outside positions support only the '<position>' grammar.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
</head>
<body>
<script>
// The following were supported in an earlier version of the spec.
// https://github.com/w3c/csswg-drafts/issues/2140
// Deprecated in Blink with support to be removed in M68, around July 2018.
test_invalid_value("shape-outside", "circle(at center left 1px)");
test_invalid_value("shape-outside", "circle(at center top 2px)");
test_invalid_value("shape-outside", "circle(at right 3% center)");
test_invalid_value("shape-outside", "circle(at left 4px top)");
test_invalid_value("shape-outside", "circle(at right top 5px)");
test_invalid_value("shape-outside", "circle(at bottom 6% center)");
test_invalid_value("shape-outside", "circle(at bottom 7% left)");
test_invalid_value("shape-outside", "circle(at bottom right 8%)");
</script>
</body>
</html>

Просмотреть файл

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing shape-outside with valid position values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
<meta name="assert" content="shape-outside positions support the full '<position>' grammar.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
</head>
<body>
<script>
// First serialization is being returned by Firefox/Edge, second by Blink/WebKit.
test_valid_value("shape-outside", "circle(at 10%)", ["circle(at 10%)", "circle(at 10% 50%)"]);
test_valid_value("shape-outside", "circle(at 20% 30px)");
test_valid_value("shape-outside", "circle(at 30px center)", ["circle(at 30px center)", "circle(at 30px 50%)"]);
test_valid_value("shape-outside", "circle(at 40px top)", ["circle(at 40px top)", "circle(at 40px 0%)"]);
test_valid_value("shape-outside", "circle(at bottom 10% right 20%)", ["circle(at bottom 10% right 20%)", "circle(at 80% 90%)"]);
test_valid_value("shape-outside", "circle(at bottom right)", ["circle(at bottom right)", "circle(at 100% 100%)"]);
test_valid_value("shape-outside", "circle(at center)", ["circle(at center)", "circle(at 50% 50%)"]);
test_valid_value("shape-outside", "circle(at center 50px)", ["circle(at center 50px)", "circle(at 50% 50px)"]);
test_valid_value("shape-outside", "circle(at center bottom)", ["circle(at center bottom)", "circle(at 50% 100%)"]);
test_valid_value("shape-outside", "circle(at center center)", ["circle(at center center)", "circle(at 50% 50%)"]);
test_valid_value("shape-outside", "circle(at center left)", ["circle(at center left)", "circle(at 0% 50%)"]);
test_valid_value("shape-outside", "circle(at left)", ["circle(at left)", "circle(at 0% 50%)"]);
test_valid_value("shape-outside", "circle(at left bottom)", ["circle(at left bottom)", "circle(at 0% 100%)"]);
test_valid_value("shape-outside", "circle(at left center)", ["circle(at left center)", "circle(at 0% 50%)"]);
test_valid_value("shape-outside", "circle(at right 40%)", ["circle(at right 40%)", "circle(at 100% 40%)"]);
test_valid_value("shape-outside", "circle(at right 30% top 60px)", ["circle(at right 30% top 60px)", "circle(at 70% 60px)"]);
test_valid_value("shape-outside", "circle(at top)", ["circle(at top)", "circle(at 50% 0%)"]);
test_valid_value("shape-outside", "circle(at top center)", ["circle(at top center)", "circle(at 50% 0%)"]);
</script>
</body>
</html>

Просмотреть файл

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: parsing perspective-origin with invalid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property">
<meta name="assert" content="perspective-origin supports only the '<position>' grammar.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("perspective-origin", "auto");
test_invalid_value("perspective-origin", "1px 2px 3px");
test_invalid_value("perspective-origin", "left right");
test_invalid_value("perspective-origin", "bottom 10% top 20%");
// The following were supported in an earlier version of the spec.
// https://github.com/w3c/csswg-drafts/issues/2140
// Deprecated in Blink with support to be removed in M68, around July 2018.
test_invalid_value("perspective-origin", "center left 1px");
test_invalid_value("perspective-origin", "center top 2px");
test_invalid_value("perspective-origin", "right 3% center");
test_invalid_value("perspective-origin", "left 4px top");
test_invalid_value("perspective-origin", "right top 5px");
test_invalid_value("perspective-origin", "bottom 6% center");
test_invalid_value("perspective-origin", "bottom 7% left");
test_invalid_value("perspective-origin", "bottom right 8%");
</script>
</body>
</html>

Просмотреть файл

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: parsing perspective-origin with valid values</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property">
<meta name="assert" content="perspective-origin supports the full '<position>' grammar.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/parsing-testcommon.js"></script>
</head>
<body>
<script>
// Blink and WebKit append center. Edge and Firefox append 50%
test_valid_value("perspective-origin", "10%", ["10% center", "10% 50%"]);
test_valid_value("perspective-origin", "20% 30px");
test_valid_value("perspective-origin", "30px center");
test_valid_value("perspective-origin", "40px top");
test_valid_value("perspective-origin", "bottom 10% right 20%", "right 20% bottom 10%");
test_valid_value("perspective-origin", "bottom right", "right bottom");
test_valid_value("perspective-origin", "center", ["center center", "center 50%"]);
test_valid_value("perspective-origin", "center 50px");
test_valid_value("perspective-origin", "center bottom");
test_valid_value("perspective-origin", "center center");
test_valid_value("perspective-origin", "center left", "left center");
test_valid_value("perspective-origin", "left", ["left center", "left 50%"]);
test_valid_value("perspective-origin", "left bottom");
test_valid_value("perspective-origin", "left center");
test_valid_value("perspective-origin", "right 40%");
test_valid_value("perspective-origin", "right 30% top 60px");
test_valid_value("perspective-origin", "top", ["center top", "50% top"]);
test_valid_value("perspective-origin", "top center", "center top");
</script>
</body>
</html>

Просмотреть файл

@ -1,5 +1,8 @@
'use strict';
// serializedValue can be the expected serialization of value,
// or an array of permitted serializations,
// or omitted if value should serialize as value.
function test_valid_value(property, value, serializedValue) {
if (arguments.length < 3)
serializedValue = value;
@ -9,17 +12,20 @@ function test_valid_value(property, value, serializedValue) {
test(function(){
var div = document.createElement('div');
div.style[property] = value;
assert_not_equals(div.style[property], "");
}, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
assert_not_equals(div.style[property], "", "property should be set");
test(function(){
var div = document.createElement('div');
div.style[property] = value;
var readValue = div.style[property];
assert_equals(readValue, serializedValue);
if (serializedValue instanceof Array)
assert_true(serializedValue.includes(readValue), "serialization should be sound");
else
assert_equals(readValue, serializedValue, "serialization should be canonical");
div.style[property] = readValue;
assert_equals(div.style[property], readValue);
}, "Serialization should round-trip after setting e.style['" + property + "'] = " + stringifiedValue);
assert_equals(div.style[property], readValue, "serialization should round-trip");
}, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
}
function test_invalid_value(property, value) {

Просмотреть файл

@ -23,7 +23,7 @@ test_valid_value("translate", "100% 200px");
test_valid_value("translate", "100px 200px 300px");
test_valid_value("translate", "100% 200% 300px");
test_valid_value("translate", "calc(10px + 10%) calc(20px + 20%) calc(30px + 30em)");
test_valid_value("translate", "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)");
test_valid_value("translate", "0", "0px");
test_valid_value("translate", "1px 2px 0", "1px 2px 0px");

Просмотреть файл

@ -0,0 +1,38 @@
<!doctype HTML>
<title>CSS Test (Transforms): Transformed tr with percent height abspos child reference.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<style>
.table {
width: 100px;
height: 100px;
background-color: lightblue;
}
.tr {
height: 50px;
background-color: lightgrey;
}
.contblock {
transform: translateX(10px);
width: 200px;
height: 200px;
background-color: lightyellow;
}
.abspos {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
background-color: blue;
}
</style>
<div class="contblock">
<div class="table">
<div class="tr" style="width: 50px;"></div>
<div class="tr" style="width: 100px; transform: translateX(10px)">
<div class="abspos"></div>
</div>
</div>
</div>

Просмотреть файл

@ -0,0 +1,48 @@
<!doctype HTML>
<title>CSS Test (Transforms): Transformed tr with percent height abspos child.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
<meta name="assert" content="This test ensures that transformed tr's percent height abspos child uses tr's height as reference.">
<link rel="match" href="transform-transformed-tr-percent-height-child-ref.html">
<style>
table, td, tr {
margin: 0px;
padding: 0px;
border-spacing: 0px;
}
table {
background-color: lightblue;
}
td {
width: 50px;
height: 50px;
background-color: lightgrey;
}
.contblock {
transform: translateX(10px);
width: 200px;
height: 200px;
background-color: lightyellow;
}
.abspos {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
background-color: blue;
}
</style>
<div class="contblock">
<table>
<tr>
<td></td>
</tr>
<tr style="transform: translateX(10px)">
<td></td>
<td><div class="abspos"></div></td>
</tr>
</table>
</div>

Просмотреть файл

@ -137,7 +137,7 @@ function createRuleWithDeclaredStyleMap(test, cssText) {
test.add_cleanup(() => {
style.remove();
});
return [rule, rule.attributeStyleMap];
return [rule, rule.styleMap];
}
// Creates a new element with background image set to |imageValue|

Просмотреть файл

@ -1,8 +1,6 @@
<!doctype html>
<meta charset="utf-8">
<title>IDL-constructed CSSMathValue serialization tests</title>
<!-- Tentative because this depends on css-values-4 spec, which is still WIP:
https://drafts.csswg.org/css-values-4/#calc-notation -->
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#calc-serialization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
@ -11,70 +9,105 @@
'use strict';
const gTestCases = [
{
description: 'CSSMathSum with 1 argument',
value: new CSSMathSum(CSS.px(1)),
cssText: 'calc(1px)',
},
{
description: 'CSSMathSum with 2 arguments',
value: new CSSMathSum(CSS.px(1), CSS.px(2)),
cssText: 'calc(1px + 2px)',
},
{
description: 'CSSMathSum with more than 2 arguments',
value: new CSSMathSum(CSS.px(1), CSS.px(2), CSS.px(3)),
cssText: 'calc((1px + 2px) + 3px)',
},
{
description: 'CSSMathProduct with 1 argument',
value: new CSSMathProduct(CSS.px(1)),
cssText: 'calc(1px)',
},
{
description: 'CSSMathProduct with 2 arguments',
value: new CSSMathProduct(CSS.px(1), 2),
cssText: 'calc(1px * 2)',
},
{
description: 'CSSMathProduct with more than 2 arguments',
value: new CSSMathProduct(CSS.px(1), 2, 3),
cssText: 'calc((1px * 2) * 3)',
},
{
description: 'CSSMathProduct of two different base types',
value: new CSSMathProduct(CSS.px(1), CSS.s(1)),
cssText: 'calc(1px * 1s)',
},
{
description: 'CSSMathMax with one argument',
value: new CSSMathMax(CSS.px(2)),
cssText: 'max(1px)',
value: new CSSMathMax(1),
cssText: 'max(1)',
},
{
description: 'CSSMathMax with more than one argument',
value: new CSSMathMax(CSS.px(2), CSS.px(1)),
cssText: 'max(1px, 1s)',
value: new CSSMathMax(1, 2, 3),
cssText: 'max(1, 2, 3)',
},
{
description: 'CSSMathMax containing nested CSSMathValues',
value: new CSSMathMax(new CSSMathSum(1, 2), 3),
cssText: 'max(1 + 2, 3)',
},
{
description: 'CSSMathMin with one argument',
value: new CSSMathMin(CSS.px(1)),
cssText: 'min(1px)',
value: new CSSMathMin(1),
cssText: 'min(1)',
},
{
description: 'CSSMathMin with more than one argument',
value: new CSSMathMin(CSS.px(1), CSS.px(2)),
cssText: 'min(1px, 2px)',
value: new CSSMathMin(1, 2, 3),
cssText: 'min(1, 2, 3)',
},
{
description: 'CSSMathMin containing nested CSSMathValues',
value: new CSSMathMin(new CSSMathSum(1, 2), 3),
cssText: 'min(1 + 2, 3)',
},
{
description: 'CSSMathSum with one argument',
value: new CSSMathSum(1),
cssText: 'calc(1)',
},
{
description: 'CSSMathSum with more than one argument',
value: new CSSMathSum(1, 2, 3),
cssText: 'calc(1 + 2 + 3)',
},
{
description: 'CSSMathSum with a CSSMathNegate as first value',
value: new CSSMathSum(new CSSMathNegate(1), 2, 3),
cssText: 'calc((-1) + 2 + 3)',
},
{
description: 'CSSMathSum containing a CSSMathNegate after first value',
value: new CSSMathSum(1, new CSSMathNegate(2), 3),
cssText: 'calc(1 - 2 + 3)',
},
{
description: 'CSSMathSum nested inside a CSSMathValue',
value: new CSSMathSum(new CSSMathSum(1, 2), 3),
cssText: 'calc((1 + 2) + 3)',
},
{
description: 'CSSMathNegate',
value: new CSSMathNegate(CSS.px(1)),
cssText: 'calc(- 1px)',
value: new CSSMathNegate(1),
cssText: 'calc(-1)',
},
{
description: 'CSSMathNegate nested inside a CSSMathValue',
value: new CSSMathProduct(new CSSMathNegate(1)),
cssText: 'calc((-1))',
},
{
description: 'CSSMathProduct with one argument',
value: new CSSMathProduct(1),
cssText: 'calc(1)',
},
{
description: 'CSSMathProduct with more than one argument',
value: new CSSMathProduct(1, 2, 3),
cssText: 'calc(1 * 2 * 3)',
},
{
description: 'CSSMathProduct with a CSSMathInvert as first value',
value: new CSSMathProduct(new CSSMathInvert(1), 2, 3),
cssText: 'calc((1 / 1) * 2 * 3)',
},
{
description: 'CSSMathProduct containing a CSSMathInvert after first value',
value: new CSSMathProduct(1, new CSSMathInvert(2), 3),
cssText: 'calc(1 / 2 * 3)',
},
{
description: 'CSSMathProduct nested inside a CSSMathValue',
value: new CSSMathProduct(new CSSMathProduct(1, 2), 3),
cssText: 'calc((1 * 2) * 3)',
},
{
description: 'CSSMathInvert',
value: new CSSMathInvert(CSS.px(1)),
cssText: 'calc(1 / 1px)',
value: new CSSMathInvert(1),
cssText: 'calc(1 / 1)',
},
{
description: 'CSSMathInvert nested inside a CSSMathValue',
value: new CSSMathSum(new CSSMathInvert(1)),
cssText: 'calc((1 / 1))',
},
];

Просмотреть файл

@ -34,22 +34,10 @@ test(() => {
assert_equals(result.toString(), '3.14px');
}, 'CSSKeywordValue from DOMString modified by "value" setter serializes correctly');
test(() => {
let result = CSSStyleValue.parse('width', '1px');
result.unit = 's';
assert_equals(result.toString(), '1s');
}, 'CSSKeywordValue from DOMString modified by "unit" setter serializes correctly');
test(t => {
let result = createInlineStyleMap(t, 'width: 1px').get('width');
result.value = 3.14;
assert_equals(result.toString(), '3.14px');
}, 'CSSKeywordValue from CSSOM modified by "value" setter serializes correctly');
test(t => {
let result = createInlineStyleMap(t, 'width: 1px').get('width');
result.unit = 's';
assert_equals(result.toString(), '1s');
}, 'CSSKeywordValue from CSSOM modified by "unit" setter serializes correctly');
</script>

Просмотреть файл

@ -0,0 +1,67 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSPositionValue Error Handling</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#positionvalue-objects">
<meta name="assert" content="Test CSSPositionValue constructor and attributes error handling" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<div id="log">
<script>
'use strict';
const gTestArguments = [
{
description: 'a keyword',
value: 'auto',
},
{
description: 'a double',
value: 3.14,
},
{
description: 'a unitless zero',
value: 0,
},
{
description: 'a string length',
value: '10px',
},
{
description: 'a number CSSUnitValue',
value: CSS.number(10),
},
{
description: 'a time CSSUnitValue',
value: CSS.s(10),
},
{
description: 'a CSSMathValue of angle type',
value: new CSSMathSum(CSS.deg(1)),
},
];
for (const {value, description} of gTestArguments) {
test(() => {
assert_throws(new TypeError(), () => new CSSPositionValue(value, CSS.px(0)));
assert_throws(new TypeError(), () => new CSSPositionValue(CSS.px(0), value));
}, `Constructing a CSSPositionValue with ${description} throws a TypeError`);
test(() => {
let position = new CSSPositionValue(CSS.px(0), CSS.px(0));
assert_throws(new TypeError(), () => position.x = value);
assert_equals(position.x.value, 0,
'X member should not have changed');
}, `Updating CSSPositionValue.x with ${description} throws a TypeError`);
test(() => {
let position = new CSSPositionValue(CSS.px(0), CSS.px(0));
assert_throws(new TypeError(), () => position.y = value);
assert_equals(position.y.value, 0,
'Y member should not have changed');
}, `Updating CSSPositionValue.y with ${description} throws a TypeError`);
}
</script>

Просмотреть файл

@ -0,0 +1,61 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSPositionValue</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#positionvalue-objects">
<meta name="assert" content="Test CSSPositionValue constructor and attributes" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<body>
<div id="log">
<script>
'use strict';
const gTestArguments = [
{
description: 'a length CSSUnitValue' ,
value: CSS.px(1),
},
{
description: 'a percent CSSUnitValue' ,
value: CSS.percent(10),
},
{
description: 'a CSSMathValue of length type' ,
value: new CSSMathSum(CSS.px(1)),
},
{
description: 'a CSSMathValue of percent type' ,
value: new CSSMathSum(CSS.percent(1)),
},
];
for (const {value, description} of gTestArguments) {
test(() => {
const position = new CSSPositionValue(value, value);
assert_style_value_equals(position.x, value,
'X member should be same as passed in constructor');
assert_style_value_equals(position.y, value,
'Y member should be same as passed in constructor');
}, 'CSSPositionValue can be constructed from ' + description);
}
for (const {value, description} of gTestArguments) {
test(() => {
let position = new CSSPositionValue(CSS.px(0), CSS.px(0));
position.x = value;
assert_style_value_equals(position.x, value,
'X member should be updated to new value');
}, 'CSSPositionValue.x can be updated to ' + description);
test(() => {
let position = new CSSPositionValue(CSS.px(0), CSS.px(0));
position.y = value;
assert_style_value_equals(position.y, value,
'Y member should be updated to new value');
}, 'CSSPositionValue.y can be updated to ' + description);
}
</script>

Просмотреть файл

@ -1,65 +0,0 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSPositionValue tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#positionvalue-objects">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<script>
'use strict';
const gInvalidTestCases = [
{ value: 'auto', desc: 'a keyword'},
{ value: 10, desc: 'a double'},
{ value: 0, desc: 'a unitless zero'},
{ value: '10px', desc: 'a string length'},
{ value: CSS.number(10), desc: 'a number CSSUnitValue'},
{ value: CSS.s(10), desc: 'a time dimension CSSUnitValue'},
{ value: new CSSMathSum(CSS.deg(1)), desc: 'a CSSMathValue of angle type' },
];
for (const {value, desc} of gInvalidTestCases) {
test(() => {
assert_throws(new TypeError(), () => new CSSPositionValue(value, CSS.px(0)));
assert_throws(new TypeError(), () => new CSSPositionValue(CSS.px(0), value));
}, 'Constructing a CSSPositionValue with ' + desc + ' throws a TypeError');
}
for (const attr of ['x', 'y']) {
for (const {value, desc} of gInvalidTestCases) {
test(() => {
const position = new CSSPositionValue(CSS.px(0), CSS.px(0));
assert_throws(new TypeError(), () => position[attr] = value);
assert_style_value_equals(position[attr], CSS.px(0));
}, 'Updating CSSPositionValue.' + attr + ' with ' + desc + ' throws a TypeError');
}
}
const gValidTestCases = [
{ value: CSS.px(1), desc: 'a length CSSUnitValue' },
{ value: CSS.percent(10), desc: 'a percent CSSUnitValue' },
{ value: new CSSMathSum(CSS.px(1)), desc: 'a CSSMathValue of length type' },
{ value: new CSSMathSum(CSS.percent(1)), desc: 'a CSSMathValue of percent type' },
];
for (const {value: x, desc: xDesc} of gValidTestCases) {
for (const {value: y, desc: yDesc} of gValidTestCases) {
test(() => {
const position = new CSSPositionValue(x, y);
assert_equals(position.x, x);
assert_equals(position.y, y);
}, 'CSSPositionValue can be constructed from ' + xDesc + ' and ' + yDesc);
}
}
for (const attr of ['x', 'y']) {
for (const {value, desc} of gValidTestCases) {
test(() => {
const position = new CSSPositionValue(CSS.px(0), CSS.px(0));
position[attr] = value;
assert_style_value_equals(position[attr], value);
}, 'CSSPositionValue.' + attr + ' can be updated to ' + desc);
}
}
</script>

Просмотреть файл

@ -0,0 +1,30 @@
<!doctype html>
<meta charset=utf-8>
<title>CSSUnparsedValue IDL</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#cssunparsedvalue">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>
<script src="/resources/idlharness.js"></script>
<script type="text/plain" id="idl">
[Constructor((DOMString or CSSVariableReferenceValue)... members)]
interface CSSUnparsedValue : CSSStyleValue {
iterable<(DOMString or CSSVariableReferenceValue)>;
readonly attribute unsigned long length;
getter (DOMString or CSSVariableReferenceValue) (unsigned long index);
};
</script>
<script>
'use strict';
const idlArray = new IdlArray();
idlArray.add_untested_idls('interface CSSStyleValue { stringifier; };');
idlArray.add_untested_idls('interface CSSVariableReferenceValue : CSSStyleValue { };');
idlArray.add_idls(document.getElementById('idl').textContent);
idlArray.add_objects({
CSSUnparsedValue: [
'new CSSUnparsedValue()',
'new CSSUnparsedValue("foo")',
]
});
idlArray.test();
</script>

Просмотреть файл

@ -0,0 +1,50 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSUnparsedValue</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#unparsedvalue-objects">
<meta name="assert" content="Test CSSUnparsedValue constructor and members">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<div id="log">
<script>
'use strict';
const gTestArguments = [
{
description: 'no arguments',
args: [],
},
{
description: 'an empty string',
args: [''],
},
{
description: 'a CSSVariableReferenceValue',
args: [new CSSVariableReferenceValue('--foo')],
},
{
description: 'mix of strings and CSSVariableReferenceValues',
args: [
'foo',
'bar',
new CSSVariableReferenceValue('--A'),
'baz',
new CSSVariableReferenceValue('--B')
],
},
];
for (const {args, description} of gTestArguments) {
test(() => {
const result = new CSSUnparsedValue(...args);
assert_not_equals(result, null,
'A CSSUnparsedValue should be created');
assert_array_equals(result, args,
'Content of CSSUnparsedValue should be same as the arguments ' +
'passed in the constructor');
}, 'CSSUnparsedValue can be constructed from ' + description);
}
</script>

Просмотреть файл

@ -1,28 +0,0 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSUnparsedValue tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#unparsedvalue-objects">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<script>
'use strict';
const gValidTestArgs = [
{ args: [], desc: 'no arguments' },
{ args: [''], desc: 'an empty string' },
{ args: [new CSSVariableReferenceValue('--foo')], desc: 'a CSSVariableReferenceValue' },
{
args: ['foo', 'bar', new CSSVariableReferenceValue('--A'), 'baz', new CSSVariableReferenceValue('--B')],
desc: 'mix of strings and CSSVariableReferenceValues'
},
];
for (const {args, desc} of gValidTestArgs) {
test(() => {
const result = new CSSUnparsedValue(...args);
assert_array_equals(result, args);
}, 'CSSUnparsedValue can be constructed from ' + desc);
}
</script>

Просмотреть файл

@ -0,0 +1,22 @@
<!doctype html>
<meta charset=utf-8>
<title>CSSURLImageValue IDL</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#cssurlimagevalue">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>
<script src="/resources/idlharness.js"></script>
<script type="text/plain" id="idl">
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet),
Constructor(USVString url)]
interface CSSURLImageValue : CSSImageValue {
readonly attribute USVString url;
};
</script>
<script>
'use strict';
const idlArray = new IdlArray();
idlArray.add_untested_idls('interface CSSImageValue { stringifier; };');
idlArray.add_idls(document.getElementById('idl').textContent);
idlArray.test();
</script>

Просмотреть файл

@ -0,0 +1,17 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSURLImageValue Error Handling</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#imagevalue-objects">
<meta name="assert" content="Test CSSURLImageValue constructor error handling" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<div id="log">
<script>
'use strict';
test(() => {
assert_throws(new TypeError(), () => new CSSURLImageValue("file://:invalid url"));
}, 'Constructing a CSSURLImageValue with an invalid URL throws a TypeError');
</script>

Просмотреть файл

@ -0,0 +1,81 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSURLImageValue</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#imagevalue-objects">
<meta name="assert" content="Test CSSURLImageValue constructor and attributes" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<body>
<div id="log">
<script>
'use strict';
const gTestUrl = '../resources/1x1-green.png';
const gBase64TestUrl = 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=';
const gBadTestUrl = document.location.href;
test(() => {
const result = new CSSURLImageValue(gTestUrl);
assert_not_equals(result, null,
'A CSSURLImageValue should be created');
assert_equals(result.url, gTestUrl,
'url member should be same as passed in the constructor');
assert_equals(result.intrinsicWidth, null, 'intrinsicWidth');
assert_equals(result.intrinsicHeight, null, 'intrinsicHeight');
assert_equals(result.intrinsicRatio, null, 'intrinsicRatio');
assert_equals(result.state, 'unloaded', 'state');
}, 'Constructing a CSSURLImageValue with a valid URL puts it in an ' +
'unloaded state');
async_test(t => {
const result = new CSSURLImageValue(gTestUrl);
let image = loadImageResource(t, result);
image.addEventListener('load', t.step_func_done(() => {
assert_equals(result.url, gTestUrl,
'url member should be same as passed in the constructor');
assert_equals(result.state, 'loaded', 'state');
assert_equals(result.intrinsicWidth, 1,
'intrinsicWidth member should be width of loaded image');
assert_equals(result.intrinsicHeight, 1,
'intrinsicHeight member should be height of loaded image');
assert_equals(result.intrinsicRatio, 1,
'intrinsicRatio member should be ratio of loaded image');
}));
}, 'Constructing a CSSURLImageValue from a URL sets its state to loaded');
async_test(t => {
const result = new CSSURLImageValue(gBase64TestUrl);
let image = loadImageResource(t, result);
image.addEventListener('load', t.step_func_done(() => {
assert_equals(result.url, gBase64TestUrl,
'url member should be same as passed in the constructor');
assert_equals(result.state, 'loaded', 'state');
assert_equals(result.intrinsicWidth, 1,
'intrinsicWidth member should be width of loaded image');
assert_equals(result.intrinsicHeight, 1,
'intrinsicHeight member should be height of loaded image');
assert_equals(result.intrinsicRatio, 1,
'intrinsicRatio member should be ratio of loaded image');
}));
}, 'Constructing a CSSURLImageValue from a base64 URL sets its state to loaded');
async_test(t => {
const result = new CSSURLImageValue(gBadTestUrl);
let image = loadImageResource(t, result);
image.addEventListener('error', t.step_func_done(() => {
assert_equals(result.url, gBadTestUrl,
'url member should be same as passed in the constructor');
assert_equals(result.state, 'error', 'state');
assert_equals(result.intrinsicWidth, null, 'intrinsicWidth');
assert_equals(result.intrinsicHeight, null, 'intrinsicHeight');
assert_equals(result.intrinsicRatio, null, 'intrinsicRatio');
}));
}, 'Constructing a CSSURLImageValue from a URL to an invalid image sets ' +
'its state to error');
</script>

Просмотреть файл

@ -1,73 +0,0 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSURLImageValue tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#imagevalue-objects">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<body>
<script>
'use strict';
const gTestUrl = '../resources/1x1-green.png';
const gBase64TestUrl = 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=';
const gBadTestUrl = document.location.href;
test(() => {
assert_throws(new TypeError(), () => new CSSURLImageValue("file://:This is invalid url"));
}, 'Constructing a CSSURLImageValue with an invalid URL throws a TypeError');
test(() => {
const result = new CSSURLImageValue(gTestUrl);
assert_equals(result.url, gTestUrl);
assert_equals(result.intrinsicWidth, null);
assert_equals(result.intrinsicHeight, null);
assert_equals(result.intrinsicRatio, null);
assert_equals(result.state, 'unloaded');
}, 'Constructing a CSSURLImageValue with a valid URL puts it in an unloaded state');
test(() => {
let result = new CSSURLImageValue(gTestUrl);
assert_throws(new TypeError(), () => result.url = gBase64TestUrl);
}, 'CSSURLImageValue.url is readonly');
async_test(t => {
const result = new CSSURLImageValue(gTestUrl);
let image = loadImageResource(t, result);
image.addEventListener('load', t.step_func_done(() => {
assert_equals(result.url, gTestUrl);
assert_equals(result.state, 'loaded');
assert_equals(result.intrinsicWidth, 1);
assert_equals(result.intrinsicHeight, 1);
assert_equals(result.intrinsicRatio, 1);
}));
}, 'Loading a CSSURLImageValue from a URL sets its state to loaded');
async_test(t => {
const result = new CSSURLImageValue(gBase64TestUrl);
let image = loadImageResource(t, result);
image.addEventListener('load', t.step_func_done(() => {
assert_equals(result.url, gBase64TestUrl);
assert_equals(result.state, 'loaded');
assert_equals(result.intrinsicWidth, 1);
assert_equals(result.intrinsicHeight, 1);
assert_equals(result.intrinsicRatio, 1);
}));
}, 'Loading a CSSURLImageValue from a base64 URL sets its state to loaded');
async_test(t => {
const result = new CSSURLImageValue(gBadTestUrl);
let image = loadImageResource(t, result);
image.addEventListener('error', t.step_func_done(() => {
assert_equals(result.url, gBadTestUrl);
assert_equals(result.state, 'error');
assert_equals(result.intrinsicWidth, null);
assert_equals(result.intrinsicHeight, null);
assert_equals(result.intrinsicRatio, null);
}));
}, 'Loading a CSSURLImageValue from a URL to an invalid image sets its state to error');
</script>

Просмотреть файл

@ -0,0 +1,26 @@
<!doctype html>
<meta charset=utf-8>
<title>CSSVariableReferenceValue IDL</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#cssvariablereferencevalue">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>
<script src="/resources/idlharness.js"></script>
<script type="text/plain" id="idl">
[Constructor(DOMString variable, optional CSSUnparsedValue fallback)]
interface CSSVariableReferenceValue {
attribute DOMString variable;
readonly attribute CSSUnparsedValue? fallback;
};
</script>
<script>
'use strict';
const idlArray = new IdlArray();
idlArray.add_idls(document.getElementById('idl').textContent);
idlArray.add_objects({
CSSVariableReferenceValue: [
'new CSSVariableReferenceValue("--foo")',
]
});
idlArray.test();
</script>

Просмотреть файл

@ -0,0 +1,41 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSVariableReferenceValue Error Handling</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#cssvariablereferencevalue">
<meta name="assert" content="Test CSSVariableReferenceValue constructor and attributes error handling" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<div id="log">
<script>
'use strict';
test(() => {
assert_throws(new TypeError(), () => new CSSVariableReferenceValue(''));
}, 'Constructing a CSSVariableReferenceValue with an empty variable name ' +
'throws a TypeError');
test(() => {
assert_throws(new TypeError(), () => new CSSVariableReferenceValue('bar'));
}, 'Constructing a CSSVariableReferenceValue with an invalid variable name ' +
'throws SyntaxError');
test(() => {
let result = new CSSVariableReferenceValue('--foo');
assert_throws(new TypeError(), () => result.variable = '');
assert_equals(result.variable, '--foo',
'Variable member should not have changed');
}, 'Updating CSSVariableReferenceValue.variable to an empty variable name ' +
'throws TypeError');
test(() => {
let result = new CSSVariableReferenceValue('--foo');
assert_throws(new TypeError(), () => result.variable = 'bar');
assert_equals(result.variable, '--foo',
'Variable member should not have changed');
}, 'Updating CSSVariableReferenceValue.variable to an invalid variable name ' +
'throws TypeError');
</script>

Просмотреть файл

@ -0,0 +1,45 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSVariableReferenceValue tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#cssvariablereferencevalue">
<meta name="assert" content="Test CSSVariableReferenceValue constructor and attributes" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<script>
'use strict';
test(() => {
const result = new CSSVariableReferenceValue('--foo');
assert_not_equals(result, null,
'A CSSVariableReferenceValue should be created');
assert_equals(result.variable, '--foo',
'Variable member should be same as passed in the constructor');
assert_equals(result.fallback, null,
'Fallback member should be null');
}, 'CSSVariableReferenceValue can be constructed with no fallback');
test(() => {
const result = new CSSVariableReferenceValue('--foo',
new CSSUnparsedValue('lemon'));
assert_not_equals(result, null,
'A CSSVariableReferenceValue should be created');
assert_equals(result.variable, '--foo',
'Variable member should be same as passed in the constructor');
assert_not_equals(result.fallback, null,
'Fallback member should not be null');
assert_style_value_equals(result.fallback, new CSSUnparsedValue('lemon'),
'Fallback member should be as same as passed in the constructor');
}, 'CSSVariableReferenceValue can be constructed with fallback');
test(() => {
let result = new CSSVariableReferenceValue('--foo');
result.variable = '--bar';
assert_equals(result.variable, '--bar',
'Variable member should be updated to new value');
}, 'CSSVariableReferenceValue.variable can updated to a valid variable name');
</script>

Просмотреть файл

@ -1,42 +0,0 @@
<!doctype html>
<meta charset="utf-8">
<title>CSSVariableReferenceValue tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#cssvariablereferencevalue">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<script>
'use strict';
test(() => {
assert_throws(new SyntaxError(), () => new CSSVariableReferenceValue('bar'));
assert_throws(new SyntaxError(), () => new CSSVariableReferenceValue(''));
}, 'Constructing a CSSVariableReferenceValue with an invalid variable name throws SyntaxError');
test(() => {
let result = new CSSVariableReferenceValue('--foo');
assert_throws(new SyntaxError(), () => result.variable = 'bar');
assert_equals(result.variable, '--foo');
assert_throws(new SyntaxError(), () => result.variable = '');
assert_equals(result.variable, '--foo');
}, 'Updating CSSVariableReferenceValue.variable to an invalid variable name throws SyntaxError');
test(() => {
const result = new CSSVariableReferenceValue('--foo');
assert_equals(result.variable, '--foo');
assert_equals(result.fallback, null);
}, 'CSSVariableReferenceValue can be constructed with no fallback');
test(() => {
const result = new CSSVariableReferenceValue('--foo', new CSSUnparsedValue('lemon'));
assert_equals(result.variable, '--foo');
assert_style_value_equals(result.fallback, new CSSUnparsedValue('lemon'));
}, 'CSSVariableReferenceValue can be constructed with fallback');
test(() => {
let result = new CSSVariableReferenceValue('--foo');
result.variable = '--bar';
assert_equals(result.variable, '--bar');
}, 'CSSVariableReferenceValue.variable can updated to a valid variable name');
</script>

Просмотреть файл

@ -144,4 +144,10 @@ test(() => {
new CSSMathProduct(CSS.number(2), CSS.number(0.5), new CSSMathInvert(CSS.px(2)), CSS.number(2), new CSSMathInvert(new CSSMathSum(2))));
}, 'Calling CSSNumericValue.div inverts all argument values');
test(() => {
assert_throws(new RangeError(), () => CSS.number(2).div(CSS.number(0)));
assert_throws(new RangeError(), () => CSS.number(3).div(CSS.px(10) ,CSS.number(0)));
assert_throws(new RangeError(), () => CSS.number(2).div(CSS.number(0), CSS.number(0)));
}, 'Can not divide with CSSUnitValue which has zero value and number type');
</script>

Просмотреть файл

@ -19,26 +19,12 @@ for (const {unit, desc} of gInvalidTestUnits) {
}, 'Constructing CSSUnitValue with ' + desc + ' as the unit throws a TypeError');
}
for (const {unit, desc} of gInvalidTestUnits) {
test(() => {
let result = new CSSUnitValue(0, 'px');
assert_throws(new TypeError(), () => result.unit = unit);
assert_equals(result.unit, 'px');
}, 'Updating CSSUnitValue.unit with ' + desc + ' throws a TypeError');
}
for (const unit of gValidUnits) {
test(() => {
const result = new CSSUnitValue(-3.14, unit);
assert_equals(result.value, -3.14);
assert_equals(result.unit, unit.toLowerCase());
}, 'CSSUnitValue can be constructed with ' + unit);
test(() => {
let result = new CSSUnitValue(-3.14, 'px');
result.unit = unit
assert_equals(result.unit, unit.toLowerCase());
}, 'CSSUnitValue.unit can be updated to ' + unit);
}
</script>

Просмотреть файл

@ -28,7 +28,7 @@ div {
'use strict';
const target = document.getElementById('target');
const styleMap = document.styleSheets[0].rules[0].attributeStyleMap;
const styleMap = document.styleSheets[0].rules[0].styleMap;
test(() => {
const properties = styleMap.getProperties();
@ -63,7 +63,7 @@ test(() => {
style.sheet.insertRule('.test { width: 10px; }');
let rule = style.sheet.rules[0];
let styleMap = rule.attributeStyleMap;
let styleMap = rule.styleMap;
assert_style_value_equals(styleMap.get('width'), CSS.px(10));
rule.style.width = '20px';

Просмотреть файл

@ -1,24 +0,0 @@
<!doctype html>
<meta charset="utf-8">
<title>Declared StylePropertyMap tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#declared-stylepropertymap-objects">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<style>
#target { width: 100px; height: 100px; background: red; }
</style>
<body>
<div id="target">
<script>
'use strict';
test(() => {
let rule = document.styleSheets[0].rules[0];
rule.attributeStyleMap.set('width', CSS.px(200));
assert_equals(getComputedStyle(target).width, '200px')
rule.attributeStyleMap.set('width', CSS.px(150));
assert_equals(getComputedStyle(target).width, '150px')
});
</script>
</body>

Просмотреть файл

@ -30,7 +30,7 @@ partial interface Element {
};
partial interface CSSStyleRule {
[SameObject] readonly attribute StylePropertyMap attributeStyleMap;
[SameObject] readonly attribute StylePropertyMap styleMap;
};
partial interface Element {

Просмотреть файл

@ -0,0 +1,21 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>cssom-view - Scrolling element with no layout box</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scroll">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#css-layout-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div style="display: none">
<div id="elem"></div>
</div>
<script>
test(() => {
const elem = document.getElementById('elem');
elem.scroll(1, 2);
assert_equals(elem.scrollTop, 0, "scrollTop should be unchanged");
assert_equals(elem.scrollLeft, 0, "scrollLeft should be unchanged");
}, "scrolling an element with no CSS layout box should have no effect");
</script>

Просмотреть файл

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Invalidation: :any-link</title>
<title>CSS Selectors Invalidation: :matches()</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">
@ -9,15 +9,38 @@
<script src="/resources/testharnessreport.js"></script>
<style>
.b {
color: rgb(255, 255, 0); /* yellow */
color: yellow;
}
/*Simple selector arguments */
.a :matches(.b, .c) {
color: rgb(255, 0, 0); /* red */
color: red;
}
/*Compound selector arguments */
.a :matches(.c#d, .e) {
color: rgb(0, 255, 0); /* green */
color: green;
}
/* Complex selector arguments */
.a .g>.b {
color: black;
}
.a :matches(.e+.f, .g>.b, .h) {
color: blue;
}
.g>.b {
color: black;
}
.a .h {
color: black;
}
/* Nested */
.a+.c>.e {
color: black;
}
.a+:matches(.b+.f, :matches(.c>.e, .g)) {
color: red;
}
.c>.e {
color: black;
}
</style>
</head>
@ -38,29 +61,73 @@
<div class="f" id="f1">
Blue
</div>
<div class="g">
<div class="b" id="b2">
Blue
<div class="b" id="b3">
Red
</div>
</div>
</div>
<div class="h" id="h1">
Black
</div>
</div>
<div class="c" id="c2">
<div class="e" id="e2">
Red
</div>
</div>
<script>
document.body.offsetTop;
var black = "rgb(0, 0, 0)";
var blue = "rgb(0, 0, 255)";
var green = "rgb(0, 128, 0)";
var red = "rgb(255, 0, 0)";
var yellow = "rgb(255, 255, 0)";
test(() => {
assert_equals(getComputedStyle(b1).color, "rgb(255, 255, 0)");
assert_equals(getComputedStyle(c1).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(d).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(e1).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(f1).color, "rgb(0, 0, 0)");
assert_equals(getComputedStyle(b1).color, yellow);
assert_equals(getComputedStyle(b2).color, black);
assert_equals(getComputedStyle(b3).color, yellow);
assert_equals(getComputedStyle(c1).color, black);
assert_equals(getComputedStyle(d).color, black);
assert_equals(getComputedStyle(e1).color, black);
assert_equals(getComputedStyle(e2).color, black);
assert_equals(getComputedStyle(f1).color, black);
assert_equals(getComputedStyle(h1).color, black);
}, "Preconditions.");
test(() => {
a1.className = "a";
assert_equals(getComputedStyle(b1).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(c1).color, "rgb(255, 0, 0)");
assert_equals(getComputedStyle(b1).color, red);
assert_equals(getComputedStyle(b3).color, red);
assert_equals(getComputedStyle(c1).color, red);
}, "Invalidate :matches() for simple selector arguments.");
test(() => {
a1.className = "a";
assert_equals(getComputedStyle(d).color, "rgb(0, 255, 0)");
assert_equals(getComputedStyle(d).color, green);
}, "Invalidate :matches() 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.");
test(() => {
a1.className = "a";
assert_equals(getComputedStyle(e2).color, red);
}, "Invalidate nested :matches().");
test(() => {
a1.className = "a";
assert_equals(getComputedStyle(b2).color, blue);
assert_equals(getComputedStyle(h1).color, black);
}, "Test specificity of :matches().");
</script>
</body>
</html>

Просмотреть файл

@ -0,0 +1,27 @@
<!-- Quirks mode -->
<meta charset="utf-8">
<title>Invalidation of style due to a dynamic stylesheet change in quirks mode</title>
<link rel="help" href="https://html.spec.whatwg.org/#case-sensitivity-of-selectors">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1433589">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#foo {
width: 100px;
height: 100px;
background: red;
}
</style>
Should see a green square below.
<div id="foo"></div>
<script>
test(function() {
let foo = document.getElementById('foo');
assert_equals(getComputedStyle(foo).backgroundColor, "rgb(255, 0, 0)");
let style = document.createElement('style');
style.textContent = "#FoO { background: green; }";
document.body.appendChild(style);
assert_equals(getComputedStyle(foo).backgroundColor, "rgb(0, 128, 0)");
}, "Style should've changed to a green background");
</script>

Просмотреть файл

@ -53,6 +53,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>
@ -75,6 +79,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>

Просмотреть файл

@ -54,6 +54,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>
@ -76,6 +80,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>

Просмотреть файл

@ -51,6 +51,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>
@ -73,6 +77,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>

Просмотреть файл

@ -53,6 +53,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>
@ -75,6 +79,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>

Просмотреть файл

@ -54,6 +54,12 @@
<div class="container"><img src="support/colors-8x16.png"
class="alignStart"><!--stretch--></div>
<br>
<!-- <baseline-position> -->
<div class="container"><img src="support/colors-8x16.png"
class="alignStart"><!--baseline--></div>
<div class="container"><img src="support/colors-8x16.png"
class="alignEnd"><!--last baseline--></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><img src="support/colors-8x16.png"
class="alignCenter"><!--center--></div>
@ -88,6 +94,12 @@
<div class="container"><img src="support/colors-8x16.png"
class="alignStart"><!--stretch--></div>
<br>
<!-- <baseline-position> -->
<div class="container"><img src="support/colors-8x16.png"
class="alignStart"><!--baseline--></div>
<div class="container"><img src="support/colors-8x16.png"
class="alignEnd"><!--last baseline--></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><img src="support/colors-8x16.png"
class="alignCenter"><!--center--></div>

Просмотреть файл

@ -53,6 +53,12 @@
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: stretch"></div>
<br>
<!-- <baseline-position> -->
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: baseline"></div>
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: last baseline"></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: center"></div>
@ -87,6 +93,12 @@
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: stretch"></div>
<br>
<!-- <baseline-position> -->
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: baseline"></div>
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: last baseline"></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: center"></div>

Просмотреть файл

@ -52,6 +52,12 @@
<div class="container"><img src="support/colors-8x16.png"
class="alignStart"><!--stretch--></div>
<br>
<!-- <baseline-position> -->
<div class="container"><img src="support/colors-8x16.png"
class="alignStart"><!--baseline--></div>
<div class="container"><img src="support/colors-8x16.png"
class="alignEnd"><!--last baseline--></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><img src="support/colors-8x16.png"
class="alignCenter"><!--center--></div>
@ -86,6 +92,12 @@
<div class="container"><img src="support/colors-8x16.png"
class="alignStart"><!--stretch--></div>
<br>
<!-- <baseline-position> -->
<div class="container"><img src="support/colors-8x16.png"
class="alignStart"><!--baseline--></div>
<div class="container"><img src="support/colors-8x16.png"
class="alignEnd"><!--last baseline--></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><img src="support/colors-8x16.png"
class="alignCenter"><!--center--></div>

Просмотреть файл

@ -52,6 +52,12 @@
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: stretch"></div>
<br>
<!-- <baseline-position> -->
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: baseline"></div>
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: last baseline"></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: center"></div>
@ -86,6 +92,12 @@
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: stretch"></div>
<br>
<!-- <baseline-position> -->
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: baseline"></div>
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: last baseline"></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><img src="support/colors-8x16.png"
style="justify-self: center"></div>

Просмотреть файл

@ -53,6 +53,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>
@ -75,6 +79,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>

Просмотреть файл

@ -54,6 +54,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>
@ -76,6 +80,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>

Просмотреть файл

@ -53,6 +53,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>
@ -75,6 +79,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>

Просмотреть файл

@ -55,6 +55,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>
@ -77,6 +81,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>

Просмотреть файл

@ -51,6 +51,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>
@ -73,6 +77,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>

Просмотреть файл

@ -53,6 +53,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>
@ -75,6 +79,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>

Просмотреть файл

@ -51,6 +51,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>
@ -73,6 +77,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>

Просмотреть файл

@ -54,6 +54,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>
@ -76,6 +80,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>

Просмотреть файл

@ -55,6 +55,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>
@ -77,6 +81,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>

Просмотреть файл

@ -53,6 +53,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>
@ -75,6 +79,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>

Просмотреть файл

@ -55,6 +55,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>
@ -77,6 +81,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>

Просмотреть файл

@ -54,6 +54,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>
@ -76,6 +80,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>

Просмотреть файл

@ -53,6 +53,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>
@ -75,6 +79,10 @@
<div class="container"><div class="alignStart"><!--normal--></div></div>
<div class="container"><div class="alignStart"><!--stretch--></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div class="alignStart"><!--baseline--></div></div>
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
<br>
<!-- <self-position>, part 1: -->
<div class="container"><div class="alignCenter"><!--center--></div></div>
<div class="container"><div class="alignStart"><!--start--></div></div>

Просмотреть файл

@ -52,6 +52,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>
@ -74,6 +78,10 @@
<div class="container"><div style="justify-self: normal"></div></div>
<div class="container"><div style="justify-self: stretch"></div></div>
<br>
<!-- <baseline-position> -->
<div class="container"><div style="justify-self: baseline"></div></div>
<div class="container"><div style="justify-self: last baseline"></div></div>
<br>
<!-- <self-position>, part 1 -->
<div class="container"><div style="justify-self: center"></div></div>
<div class="container"><div style="justify-self: start"></div></div>

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше