зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
3ee8100ae0
Коммит
27845c244d
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
@ -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 <feature-index>)">
|
||||
<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 <feature-index>)">
|
||||
<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 <feature-index>)">
|
||||
<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<feature-index>">
|
||||
<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<feature-index>">
|
||||
<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<feature-index>">
|
||||
<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<feature-index>">
|
||||
<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<feature-index>">
|
||||
<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<feature-index>">
|
||||
<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 <feature-index>, cswh <feature-index>).">
|
||||
<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 <feature-index>, cswh <feature-index>).">
|
||||
<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 <feature-index>, cswh <feature-index>).">
|
||||
<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 <feature-index>).">
|
||||
<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 <feature-index>).">
|
||||
<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 <feature-index>).">
|
||||
<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 <feature-index>).">
|
||||
<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>
|
||||
|
|
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче