mirror of
https://github.com/servo/servo.git
synced 2025-08-16 02:45:36 +01:00
Update web-platform-tests to revision 4333a1d2f109795547fc5e22ebfc8481fa649de7
This commit is contained in:
WPT Sync Bot
parent
728ebcc932
commit
8c46b67f8e
456 changed files with 10561 additions and 5108 deletions
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Compositing and Blending Level 1: parsing background-blend-mode with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/compositing-1/#propdef-background-blend-mode">
|
||||
<meta name="assert" content="background-blend-mode supports only the grammar '<blend-mode>#'.">
|
||||
<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("background-blend-mode", "auto");
|
||||
test_invalid_value("background-blend-mode", "normal luminosity");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Compositing and Blending Level 1: parsing background-blend-mode with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/compositing-1/#propdef-background-blend-mode">
|
||||
<meta name="assert" content="background-blend-mode supports the full grammar '<blend-mode>#'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("background-blend-mode", "normal");
|
||||
test_valid_value("background-blend-mode", "multiply");
|
||||
test_valid_value("background-blend-mode", "screen");
|
||||
test_valid_value("background-blend-mode", "overlay");
|
||||
test_valid_value("background-blend-mode", "darken");
|
||||
test_valid_value("background-blend-mode", "lighten");
|
||||
test_valid_value("background-blend-mode", "color-dodge");
|
||||
test_valid_value("background-blend-mode", "color-burn");
|
||||
test_valid_value("background-blend-mode", "hard-light");
|
||||
test_valid_value("background-blend-mode", "soft-light");
|
||||
test_valid_value("background-blend-mode", "difference");
|
||||
test_valid_value("background-blend-mode", "exclusion");
|
||||
test_valid_value("background-blend-mode", "hue");
|
||||
test_valid_value("background-blend-mode", "saturation");
|
||||
test_valid_value("background-blend-mode", "color");
|
||||
test_valid_value("background-blend-mode", "luminosity");
|
||||
|
||||
test_valid_value("background-blend-mode", "normal, luminosity");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Compositing and Blending Level 1: parsing isolation with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/compositing-1/#propdef-isolation">
|
||||
<meta name="assert" content="isolation supports only the grammar '<isolation-mode>'.">
|
||||
<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("isolation", "none");
|
||||
test_invalid_value("isolation", "auto isolate");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Compositing and Blending Level 1: parsing isolation with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/compositing-1/#propdef-isolation">
|
||||
<meta name="assert" content="isolation supports the full grammar '<isolation-mode>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("isolation", "auto");
|
||||
test_valid_value("isolation", "isolate");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Compositing and Blending Level 1: parsing mix-blend-mode with invalid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/compositing-1/#propdef-mix-blend-mode">
|
||||
<meta name="assert" content="mix-blend-mode supports only the grammar '<blend-mode>'.">
|
||||
<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("mix-blend-mode", "auto");
|
||||
test_invalid_value("mix-blend-mode", "normal luminosity");
|
||||
test_invalid_value("mix-blend-mode", "normal, luminosity");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Compositing and Blending Level 1: parsing mix-blend-mode with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/compositing-1/#propdef-mix-blend-mode">
|
||||
<meta name="assert" content="mix-blend-mode supports the full grammar '<blend-mode>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("mix-blend-mode", "normal");
|
||||
test_valid_value("mix-blend-mode", "multiply");
|
||||
test_valid_value("mix-blend-mode", "screen");
|
||||
test_valid_value("mix-blend-mode", "overlay");
|
||||
test_valid_value("mix-blend-mode", "darken");
|
||||
test_valid_value("mix-blend-mode", "lighten");
|
||||
test_valid_value("mix-blend-mode", "color-dodge");
|
||||
test_valid_value("mix-blend-mode", "color-burn");
|
||||
test_valid_value("mix-blend-mode", "hard-light");
|
||||
test_valid_value("mix-blend-mode", "soft-light");
|
||||
test_valid_value("mix-blend-mode", "difference");
|
||||
test_valid_value("mix-blend-mode", "exclusion");
|
||||
test_valid_value("mix-blend-mode", "hue");
|
||||
test_valid_value("mix-blend-mode", "saturation");
|
||||
test_valid_value("mix-blend-mode", "color");
|
||||
test_valid_value("mix-blend-mode", "luminosity");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>css-animations IDL tests</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/WebIDLParser.js"></script>
|
||||
<script src="/resources/idlharness.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
promise_test(async () => {
|
||||
const idl = await fetch('/interfaces/css-animations.idl').then(r => r.text());
|
||||
const cssom = await fetch('/interfaces/cssom.idl').then(r => r.text());
|
||||
const dom = await fetch('/interfaces/dom.idl').then(r => r.text());
|
||||
|
||||
const idl_array = new IdlArray();
|
||||
idl_array.add_idls(idl);
|
||||
idl_array.add_dependency_idls(cssom);
|
||||
idl_array.add_dependency_idls(dom);
|
||||
|
||||
idl_array.test();
|
||||
}, 'Test css-animations IDL implementation');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>css-conditional IDL tests</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-conditional/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/WebIDLParser.js"></script>
|
||||
<script src="/resources/idlharness.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
promise_test(async () => {
|
||||
const idl = await fetch('/interfaces/css-conditional.idl').then(r => r.text());
|
||||
const cssom = await fetch('/interfaces/cssom.idl').then(r => r.text());
|
||||
const dom = await fetch('/interfaces/dom.idl').then(r => r.text());
|
||||
const idl_array = new IdlArray();
|
||||
idl_array.add_idls(idl);
|
||||
idl_array.add_dependency_idls(cssom);
|
||||
idl_array.add_dependency_idls(dom);
|
||||
idl_array.test();
|
||||
}, 'Test css-conditional IDL implementation');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
|
||||
<style>
|
||||
img {
|
||||
background: green;
|
||||
padding: 50px;
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<img src="/css/support/60x60-red.png" />
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title style="display: none">CSS Test Reference</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<style>
|
||||
* { display: contents }
|
||||
</style>
|
||||
<whatever>
|
||||
PASS
|
||||
</whatever>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title style="display: none">CSS Test: display:contents style sharing.</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="match" href="display-contents-sharing-001-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-html">
|
||||
<link rel="help" href="https://bugzil.la/1469076">
|
||||
<style>
|
||||
* { display: contents }
|
||||
</style>
|
||||
<br>
|
||||
<whatever>
|
||||
PASS
|
||||
</whatever>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test that CSS env vars work with @support</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
@supports (background-color: env(test)) {
|
||||
body { background-color: rgb(0, 128, 0); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
const style = window.getComputedStyle(document.body);
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgb(0, 128, 0)");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test env() will work in custom properties</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
--my-width: env(test, 100px);
|
||||
width: var(--my-width);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
const style = window.getComputedStyle(document.body);
|
||||
assert_equals(style.getPropertyValue("width"), "100px");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test that nested var() fallback values work with CSS env vars</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
--main-bg-color: rgb(0, 128, 0);
|
||||
background-color: env(test, var(--main-bg-color));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
const style = window.getComputedStyle(document.body);
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgb(0, 128, 0)");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test style seralization round tripping with CSS env vars</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
document.body.style.top = "env(test)";
|
||||
assert_equals(document.body.style.getPropertyValue("top"), "env(test)");
|
||||
document.body.style.setProperty("top", "env()");
|
||||
assert_equals(document.body.style.getPropertyValue("top"), "env(test)");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test that CSS env vars work with CSS.supports</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_true(CSS.supports("background: env(test)"));
|
||||
assert_true(CSS.supports("background", "env(test)"));
|
||||
assert_false(CSS.supports("background", "env()"));
|
||||
assert_false(CSS.supports("background", "env(test,)"));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test env() syntax</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div { background-color: rgb(0, 128, 0); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// This value is expected if the syntax is valid.
|
||||
const envWorkingValue = "rgba(0, 0, 0, 0)";
|
||||
|
||||
// This value is expected if the syntax is invalid.
|
||||
const pageDefaultValue = "rgb(0, 128, 0)";
|
||||
|
||||
// This value is used to test fallback values.
|
||||
const blueValue = "rgb(0, 0, 255)";
|
||||
|
||||
const testCases = [
|
||||
{ style: "", expectedPropertyValue: pageDefaultValue },
|
||||
{ style: "background-color: env(test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: ENV(test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test) !important", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test, 10px)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test, blue)", expectedPropertyValue: blueValue },
|
||||
{ style: "background-color: env(test, env(another))", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test, env(another, blue))", expectedPropertyValue: blueValue },
|
||||
{ style: "background-color: env(-test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(--test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(10px)", expectedPropertyValue: pageDefaultValue },
|
||||
{ style: "background-color: env(env(test))", expectedPropertyValue: pageDefaultValue },
|
||||
{ style: "background-color: env( test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test )", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env( test )", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test /**/, blue)", expectedPropertyValue: blueValue },
|
||||
{ style: "background-color: env(test, {})", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test, {)", expectedPropertyValue: pageDefaultValue },
|
||||
];
|
||||
|
||||
testCases.forEach((testcase) => {
|
||||
test(() => {
|
||||
const elem = document.createElement("div");
|
||||
const style = window.getComputedStyle(elem);
|
||||
|
||||
document.body.appendChild(elem);
|
||||
elem.style.cssText = testcase.style;
|
||||
|
||||
assert_equals(style.getPropertyValue("background-color"), testcase.expectedPropertyValue);
|
||||
}, testcase.style + " " + testcase.expectedPropertyValue);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test unknown env() names will override previous values</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body style="background-color: green; background-color: env(unknown);">
|
||||
<script>
|
||||
test(() => {
|
||||
const style = window.getComputedStyle(document.body);
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgba(0, 0, 0, 0)");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: font shorthand serialization with font-stretch values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#propdef-font">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-1/#serializing-css-values">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="test" style="font: medium serif"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
const div = document.getElementById("test");
|
||||
div.style.fontStretch = "50%";
|
||||
assert_equals(div.style.font, "ultra-condensed medium serif");
|
||||
div.style.fontStretch = "62.5%";
|
||||
assert_equals(div.style.font, "extra-condensed medium serif");
|
||||
div.style.fontStretch = "75%";
|
||||
assert_equals(div.style.font, "condensed medium serif");
|
||||
div.style.fontStretch = "87.5%";
|
||||
assert_equals(div.style.font, "semi-condensed medium serif");
|
||||
div.style.fontStretch = "100%";
|
||||
assert_equals(div.style.font, "medium serif", "The keyword normal should be omitted");
|
||||
div.style.fontStretch = "112.5%";
|
||||
assert_equals(div.style.font, "semi-expanded medium serif");
|
||||
div.style.fontStretch = "125%";
|
||||
assert_equals(div.style.font, "expanded medium serif");
|
||||
div.style.fontStretch = "150%";
|
||||
assert_equals(div.style.font, "extra-expanded medium serif");
|
||||
div.style.fontStretch = "200%";
|
||||
assert_equals(div.style.font, "ultra-expanded medium serif");
|
||||
}, "Percentages which can be transformed into keywords should be for serialization");
|
||||
|
||||
test(function() {
|
||||
const div = document.getElementById("test");
|
||||
div.style.fontStretch = "25%";
|
||||
assert_equals(div.style.font, "");
|
||||
div.style.fontStretch = "101%";
|
||||
assert_equals(div.style.font, "");
|
||||
}, "Percentages which cannot be transformed into keywords should prevent the font shorthand from serializing");
|
||||
</script>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset=utf-8>
|
||||
<title>@font-feature-values rule parsing tests</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-feature-values" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-fonts-4/#font-feature-values" />
|
||||
<meta name="assert" content="tests that valid @font-feature-values rules parse and invalid ones don't" />
|
||||
<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=549861 -->
|
||||
<script type="text/javascript" src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid positioned items percentage and calc() gaps</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters">
|
||||
<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 100px 100px 100px 100px;
|
||||
grid-template-rows: 50px 50px 50px 50px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
border: 5px solid black;
|
||||
margin: 30px;
|
||||
padding: 15px;
|
||||
/* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grid > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
</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 id="log"></div>
|
||||
|
||||
<div class="grid directionRTL" style="gap: 10%;">
|
||||
<div style="grid-column: 2 / 4; grid-row: 2 / 4;"
|
||||
data-offset-x="355" data-offset-y="125" data-expected-width="280" data-expected-height="160">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid directionRTL" style="gap: calc(10% + 25px);">
|
||||
<div style="grid-column: 2 / 4; grid-row: 2 / 4;"
|
||||
data-offset-x="305" data-offset-y="150" data-expected-width="305" data-expected-height="185">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Grid positioned items percentage and calc() gaps</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters">
|
||||
<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps.">
|
||||
<link rel="stylesheet" href="support/grid.css">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 100px 100px 100px 100px;
|
||||
grid-template-rows: 50px 50px 50px 50px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
border: 5px solid black;
|
||||
margin: 30px;
|
||||
padding: 15px;
|
||||
/* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grid > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
</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 id="log"></div>
|
||||
|
||||
<div class="grid" style="gap: 10%;">
|
||||
<div style="grid-column: 2 / 4; grid-row: 2 / 4;"
|
||||
data-offset-x="195" data-offset-y="125" data-expected-width="280" data-expected-height="160">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="gap: calc(10% + 25px);">
|
||||
<div style="grid-column: 2 / 4; grid-row: 2 / 4;"
|
||||
data-offset-x="220" data-offset-y="150" data-expected-width="305" data-expected-height="185">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
#target {
|
||||
--reg-alt-non-inherited-url: url(foo.jpg);
|
||||
--reg-alt-non-inherited-func: url("foo.jpg");
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
function reg_url(name, inherits) {
|
||||
CSS.registerProperty({
|
||||
name: name,
|
||||
syntax: '<url> | none',
|
||||
inherits: inherits,
|
||||
initialValue: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
reg_url('--reg-alt-non-inherited-url', false);
|
||||
reg_url('--reg-alt-non-inherited-func', false);
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
#target {
|
||||
--unreg-url: url(foo.jpg);
|
||||
--unreg-func: url("foo.jpg");
|
||||
|
||||
--reg-inherited-url: url(foo.jpg);
|
||||
--reg-non-inherited-url: url(foo.jpg);
|
||||
|
||||
--reg-inherited-func: url("foo.jpg");
|
||||
--reg-non-inherited-func: url("foo.jpg");
|
||||
|
||||
--reg-ref-to-unreg-url: var(--unreg-url);
|
||||
--reg-ref-to-unreg-func: var(--unreg-func);
|
||||
|
||||
--reg-ref-to-reg-url: var(--reg-alt-non-inherited-url);
|
||||
--reg-ref-to-reg-func: var(--reg-alt-non-inherited-func);
|
||||
|
||||
--unreg-ref-to-reg-url: var(--reg-alt-non-inherited-url);
|
||||
--unreg-ref-to-reg-func: var(--reg-alt-non-inherited-func);
|
||||
|
||||
--unreg-multi-ref-to-reg-urls: var(--reg-non-inherited-url), var(--reg-alt-non-inherited-url);
|
||||
--unreg-multi-ref-to-reg-funcs: var(--reg-non-inherited-func), var(--reg-alt-non-inherited-func);
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
function reg_url(name, inherits) {
|
||||
CSS.registerProperty({
|
||||
name: name,
|
||||
syntax: '<url> | none',
|
||||
inherits: inherits,
|
||||
initialValue: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
reg_url('--reg-non-inherited-url', false);
|
||||
reg_url('--reg-non-inherited-func', false);
|
||||
|
||||
reg_url('--reg-inherited-url', true);
|
||||
reg_url('--reg-inherited-func', true);
|
||||
|
||||
reg_url('--reg-ref-to-unreg-url', false);
|
||||
reg_url('--reg-ref-to-unreg-func', false);
|
||||
|
||||
reg_url('--reg-ref-to-reg-url', false);
|
||||
reg_url('--reg-ref-to-reg-func', false);
|
||||
|
||||
reg_url('--reg-merged-func', false);
|
||||
|
||||
reg_url('--reg-utf16be-url', false);
|
||||
reg_url('--reg-utf16be-func', false);
|
||||
Binary file not shown.
|
|
@ -0,0 +1,139 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Anders Hartvoll Ruud" href="andruud@chromium.org">
|
||||
<!-- TODO(andruud): Replace help link when spec is updated. -->
|
||||
<link rel="help" href="https://github.com/w3c/css-houdini-drafts/issues/393#issuecomment-294706386" />
|
||||
<meta name="assert" content="This test verifies that relative URLs in registered properties resolve correctly" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<script src="support/main/main.js"></script>
|
||||
<script src="support/alt/alt.js"></script>
|
||||
<link id="main" rel="stylesheet" type="text/css" href="support/main/main.css" />
|
||||
<link id="main_utf16be" rel="stylesheet" type="text/css" href="support/main/main.utf16be.css" />
|
||||
<link id="alt" rel="stylesheet" type="text/css" href="support/alt/alt.css" />
|
||||
<div id=target>
|
||||
<div id=inner></div>
|
||||
</div>
|
||||
<script>
|
||||
function parse_url(urlstr) {
|
||||
urlstr = urlstr.trim();
|
||||
if (!urlstr.startsWith('url("') || !urlstr.endsWith('")'))
|
||||
throw 'Unknown url format: ' + urlstr;
|
||||
return urlstr.slice(5, -2);
|
||||
}
|
||||
|
||||
function get_bg_url(element) {
|
||||
return parse_url(getComputedStyle(element)['background-image']);
|
||||
}
|
||||
|
||||
function get_bg_urls(element) {
|
||||
return getComputedStyle(element)['background-image']
|
||||
.split(',')
|
||||
.map(x => x.trim())
|
||||
.map(x => parse_url(x));
|
||||
}
|
||||
|
||||
function assert_base_path_equal(actual, expected) {
|
||||
let actual_base = new URL(actual).pathname.split('/').slice(0, -1);
|
||||
let expected_base = new URL(expected).pathname.split('/').slice(0, -1);
|
||||
assert_equals(actual_base.join('/'), expected_base.join('/'));
|
||||
}
|
||||
|
||||
function assert_base_paths_equal(actual, expected) {
|
||||
assert_equals(actual.length, expected.length);
|
||||
for (let i = 0; i < actual.length; i++) {
|
||||
assert_base_path_equal(actual[i], expected[i]);
|
||||
}
|
||||
}
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--unreg-url);';
|
||||
assert_base_path_equal(get_bg_url(target), document.baseURI);
|
||||
}, 'Unregistered property resolves against document (URL token)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--unreg-func);';
|
||||
assert_base_path_equal(get_bg_url(target), document.baseURI);
|
||||
}, 'Unregistered property resolves against document (URL function)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-non-inherited-url);';
|
||||
assert_base_path_equal(get_bg_url(target), main.sheet.href);
|
||||
}, 'Registered non-inherited <url> resolves against sheet (URL token)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-non-inherited-func);';
|
||||
assert_base_path_equal(get_bg_url(target), main.sheet.href);
|
||||
}, 'Registered non-inherited <url> resolves against sheet (URL function)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-inherited-url);';
|
||||
assert_base_path_equal(get_bg_url(target), main.sheet.href);
|
||||
}, 'Registered inherited <url> resolves against sheet (URL token)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-inherited-func);';
|
||||
assert_base_path_equal(get_bg_url(target), main.sheet.href);
|
||||
}, 'Registered inherited <url> resolves against sheet (URL function)');
|
||||
|
||||
test(function() {
|
||||
inner.style = 'background-image: var(--reg-inherited-url);';
|
||||
assert_base_path_equal(get_bg_url(inner), main.sheet.href);
|
||||
}, 'Registered inherited <url> resolves against sheet (Child node, URL token)');
|
||||
|
||||
test(function() {
|
||||
inner.style = 'background-image: var(--reg-inherited-func);';
|
||||
assert_base_path_equal(get_bg_url(inner), main.sheet.href);
|
||||
}, 'Registered inherited <url> resolves against sheet (Child node, URL function)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-ref-to-unreg-url);';
|
||||
assert_base_path_equal(get_bg_url(target), main.sheet.href);
|
||||
}, 'Registered property with unregistered var reference resolves against sheet (URL token)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-ref-to-unreg-func);';
|
||||
assert_base_path_equal(get_bg_url(target), main.sheet.href);
|
||||
}, 'Registered property with unregistered var reference resolves against sheet. (URL function)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-ref-to-reg-url);';
|
||||
assert_base_path_equal(get_bg_url(target), alt.sheet.href);
|
||||
}, 'Registered property with registered var reference resolves against sheet of referenced property (URL token)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-ref-to-reg-func);';
|
||||
assert_base_path_equal(get_bg_url(target), alt.sheet.href);
|
||||
}, 'Registered property with registered var reference resolves against sheet of referenced property (URL function)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--unreg-ref-to-reg-url);';
|
||||
assert_base_path_equal(get_bg_url(target), alt.sheet.href);
|
||||
}, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL token)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--unreg-ref-to-reg-func);';
|
||||
assert_base_path_equal(get_bg_url(target), alt.sheet.href);
|
||||
}, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL function)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--unreg-multi-ref-to-reg-urls);';
|
||||
assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]);
|
||||
}, 'Multiple (registered) var reference resolve against respective sheets (URL token)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--unreg-multi-ref-to-reg-funcs);';
|
||||
assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]);
|
||||
}, 'Multiple (registered) var reference resolve against respective sheets (URL function)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-utf16be-url);';
|
||||
assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href);
|
||||
}, 'Registered UTF16BE-encoded var reference resolve against sheet (URL token)');
|
||||
|
||||
test(function() {
|
||||
target.style = 'background-image: var(--reg-utf16be-func);';
|
||||
assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href);
|
||||
}, 'Registered UTF16BE-encoded var reference resolve against sheet (URL function)');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: directionality propagation in Shadow DOM.</title>
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#the-dir-attribute">
|
||||
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
|
||||
<link rel="match" href="reference/green-box.html">
|
||||
<style>
|
||||
div { width: 100px; }
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<div id="host1"></div>
|
||||
<div id="host2" dir="rtl"></div>
|
||||
<div id="host3"></div>
|
||||
<div id="host4" dir="rtl"></div>
|
||||
<script>
|
||||
host1.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<style>:dir(ltr) { background: green; height: 25px; }</style>
|
||||
<div></div>
|
||||
`;
|
||||
host2.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<style>:dir(rtl) { background: green; height: 25px; }</style>
|
||||
<div></div>
|
||||
`;
|
||||
host3.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<style>:dir(rtl) { background: green; height: 25px; }</style>
|
||||
<div></div>
|
||||
`;
|
||||
host4.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<style>span:dir(ltr) { display: block; background: green; height: 25px; }</style>
|
||||
<div dir="ltr"><span></span></div>
|
||||
`;
|
||||
document.body.offsetTop;
|
||||
host3.setAttribute("dir", "rtl");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: directionality propagation in Shadow DOM, appending a shadow host.</title>
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#the-dir-attribute">
|
||||
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
|
||||
<link rel="match" href="reference/green-box.html">
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<style>
|
||||
div { width: 100px; }
|
||||
</style>
|
||||
<div id="host-parent" dir="rtl"></div>
|
||||
<script>
|
||||
let host = document.createElement("div");
|
||||
host.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<style>:dir(rtl) { background: green; height: 100px; width: 100px; }</style>
|
||||
<div></div>
|
||||
`;
|
||||
document.getElementById("host-parent").appendChild(host);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: <link rel="stylesheet"> in Shadow DOM doesn't affect the normal DOM</title>
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#link-type-stylesheet">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html">
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<style>
|
||||
#light-dom {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div id="host">FAIL</div>
|
||||
<div id="light-dom"></div>
|
||||
<script>
|
||||
host.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<link rel="stylesheet" href="data:text/css,div { background: red !important }">
|
||||
`;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: <link rel="stylesheet"> in Shadow DOM</title>
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#link-type-stylesheet">
|
||||
<link rel="match" href="reference/green-box.html">
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<div id="host">FAIL</div>
|
||||
<script>
|
||||
host.attachShadow({ mode: "open" }).innerHTML = `
|
||||
<link rel="stylesheet" href="resources/host-green-box.css">
|
||||
`;
|
||||
</script>
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="support/scrollbars.css">
|
||||
|
||||
<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
display: table-cell;
|
||||
background: cyan;
|
||||
overflow: scroll;
|
||||
margin: 1px 2px 3px 4px;
|
||||
padding: 5px 15px 10px 20px;
|
||||
border: solid magenta;
|
||||
border-width: 12px 9px 6px 3px;
|
||||
|
|
@ -29,6 +28,7 @@
|
|||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="support/scrollbars.css">
|
||||
|
||||
<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ img {
|
|||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="support/scrollbars.css">
|
||||
|
||||
<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
display: table-cell;
|
||||
background: cyan;
|
||||
overflow: scroll;
|
||||
margin: 1px 2px 3px 4px;
|
||||
padding: 5px 15px 10px 20px;
|
||||
border: solid magenta;
|
||||
border-width: 12px 9px 6px 3px;
|
||||
|
|
@ -30,6 +29,7 @@ img {
|
|||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="support/scrollbars.css">
|
||||
|
||||
<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
/* This makes the scrollbars visible on mac, both to humans and screenshots.*/
|
||||
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #eee;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<title>css-transitions IDL tests</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/">
|
||||
<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>
|
||||
"use strict";
|
||||
|
||||
promise_test(async () => {
|
||||
const idl_array = new IdlArray();
|
||||
const idl = await fetch("/interfaces/css-transitions.idl").then(r => r.text());
|
||||
const cssom = await fetch("/interfaces/cssom.idl").then(r => r.text());
|
||||
const html = await fetch("/interfaces/html.idl").then(r => r.text());
|
||||
const dom = await fetch("/interfaces/dom.idl").then(r => r.text());
|
||||
idl_array.add_idls(idl);
|
||||
idl_array.add_dependency_idls(cssom);
|
||||
idl_array.add_dependency_idls(html);
|
||||
idl_array.add_dependency_idls(dom);
|
||||
idl_array.test();
|
||||
}, "Test IDL implementation of css-transitions API");
|
||||
</script>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="box-sizing supports only the grammar 'content-box | border-box'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="box-sizing supports the full grammar 'content-box | border-box'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="caret-color supports only the grammar 'auto | <color>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="caret-color supports the full grammar 'auto | <color>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="cursor supports only the grammar.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="cursor supports the full grammar.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="outline-color supports only the grammar '<color> | invert'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="outline-color supports '<color>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="may">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="outline supports only the grammar '<outline-color> || <outline> || <outline>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="outline-offset supports only the grammar '<length>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="outline-offset supports the full grammar '<length>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="outline-style supports only the grammar 'auto | <outline-line-style>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="outline-style supports the full grammar 'auto | <outline-line-style>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="assert" content="outline supports the full grammar '<outline-color> || <outline> || <outline>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<meta name="flags" content="may">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="outline-width supports only the grammar '<border-width>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="outline-width supports the full grammar '<border-width>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="resize supports only the grammar 'none | both | horizontal | vertical'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="resize supports the full grammar 'none | both | horizontal | vertical'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
'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;
|
||||
|
||||
var stringifiedValue = JSON.stringify(value);
|
||||
|
||||
test(function(){
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
assert_not_equals(div.style.getPropertyValue(property), "", "property should be set");
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
var readValue = div.style.getPropertyValue(property);
|
||||
if (serializedValue instanceof Array)
|
||||
assert_in_array(readValue, serializedValue, "serialization should be sound");
|
||||
else
|
||||
assert_equals(readValue, serializedValue, "serialization should be canonical");
|
||||
|
||||
div.style[property] = readValue;
|
||||
assert_equals(div.style.getPropertyValue(property), readValue, "serialization should round-trip");
|
||||
|
||||
}, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
|
||||
}
|
||||
|
||||
function test_invalid_value(property, value) {
|
||||
var stringifiedValue = JSON.stringify(value);
|
||||
|
||||
test(function(){
|
||||
var div = document.createElement('div');
|
||||
div.style[property] = value;
|
||||
assert_equals(div.style.getPropertyValue(property), "");
|
||||
}, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="text-overflow supports only the grammar 'clip | ellipsis'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="assert" content="text-overflow supports the full grammar 'clip | ellipsis'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/parsing-testcommon.js"></script>
|
||||
<script src="support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: calc rounding doesn't accumulate a lot of error.</title>
|
||||
<link rel="author" href="mailto:mats@mozilla.com" title="Mats Palmgren">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1323735">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-values/#funcdef-calc">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background: #f3f5f6;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 15px;
|
||||
width: 401px;
|
||||
margin: 20px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
b {
|
||||
height: 50px;
|
||||
background: red;
|
||||
width: calc((100% - 4.5em) / 4); /* .5em gutters */
|
||||
}
|
||||
|
||||
b:not(:last-child) {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
</style>
|
||||
<div><b></b><b></b><b></b><b></b></div>
|
||||
<script>
|
||||
test(function() {
|
||||
assert_equals(document.querySelector("div").offsetHeight, 50);
|
||||
}, "calc() doesn't accumulate much error that makes flex items overflow");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-view/#extensions-to-the-document-interface">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div style="font-size: 40px">
|
||||
<span id="target">
|
||||
XXX <span id="small" style="font-size:10px">small</span> YYY
|
||||
</span>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
// Find a point in the empty region above the "small" span, but still inside
|
||||
// the "target" span.
|
||||
const small = document.getElementById('small');
|
||||
const rect = small.getBoundingClientRect();
|
||||
const x = rect.left + rect.width / 2;
|
||||
const y = rect.top - 5;
|
||||
|
||||
const actual = document.elementFromPoint(x, y);
|
||||
const target = document.getElementById('target');
|
||||
assert_equals(actual, target);
|
||||
}, 'document.elementFromPoint finds container SPAN in the empty region above a child SPAN with a smaller font size');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers vertical-rl writing mode</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Suneel Kota" href="mailto:suneel.kota@samsung.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#scroller {
|
||||
writing-mode: vertical-rl;
|
||||
overflow: scroll;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#container{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
#target {
|
||||
background-color: #ff0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<!-- ROW-1 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-2 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box" id="target"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
<!-- ROW-3 -->
|
||||
<div class="row">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
|
||||
|
||||
var scroller_width = scroller.offsetWidth;
|
||||
var scroller_height = scroller.offsetHeight;
|
||||
var box_width = target.offsetWidth;
|
||||
var box_height = target.offsetHeight;
|
||||
|
||||
var expectedX = [ ((2*box_width)-scroller_width)+scrollbar_width, ((3*box_width - scroller_width)/2)+ (scrollbar_width/2), box_width ];
|
||||
var expectedY = [ box_height, ((3*box_height - scroller_height)/2) + (scrollbar_width/2), ((2*box_height)-scroller_height) + scrollbar_width ];
|
||||
|
||||
// As browsers differ in the meaning of scrollLeft when
|
||||
// in a right-to-left mode, we adjust the expectation
|
||||
// to match the semantics of scrollLeft.
|
||||
if(scroller.scrollLeft === 0)
|
||||
expectedX = [ -box_width, -(((3*box_width - scroller_width)/2)+ (scrollbar_width/2)), -(((2*box_width)-scroller_width)+scrollbar_width)];
|
||||
|
||||
// This formats dict as a string suitable as test name.
|
||||
// format_value() is provided by testharness.js,
|
||||
// which also preserves sign for -0.
|
||||
function format_dict(dict) {
|
||||
const props = [];
|
||||
for (let prop in dict) {
|
||||
props.push(`${prop}: ${format_value(dict[prop])}`);
|
||||
}
|
||||
return `{${props.join(", ")}}`;
|
||||
}
|
||||
|
||||
[
|
||||
[{block: "start", inline: "start"}, expectedX[0], expectedY[0]],
|
||||
[{block: "start", inline: "center"}, expectedX[0], expectedY[1]],
|
||||
[{block: "start", inline: "end"}, expectedX[0], expectedY[2]],
|
||||
[{block: "center", inline: "start"}, expectedX[1], expectedY[0]],
|
||||
[{block: "center", inline: "center"}, expectedX[1], expectedY[1]],
|
||||
[{block: "center", inline: "end"}, expectedX[1], expectedY[2]],
|
||||
[{block: "end", inline: "start"}, expectedX[2], expectedY[0]],
|
||||
[{block: "end", inline: "center"}, expectedX[2], expectedY[1]],
|
||||
[{block: "end", inline: "end"}, expectedX[2], expectedY[2]],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${format_dict(input)})`);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -12,10 +12,10 @@
|
|||
</div>
|
||||
<iframe srcdoc="<html></html>" style="display: none"></iframe>
|
||||
<script>
|
||||
function testNoComputedStyle(element, description) {
|
||||
function testNoComputedStyle(element, description, global) {
|
||||
test(function() {
|
||||
assert_true(!!element);
|
||||
let style = getComputedStyle(element);
|
||||
let style = (global ? global : window).getComputedStyle(element);
|
||||
assert_true(!!style);
|
||||
assert_true(style.length === 0);
|
||||
assert_equals(style.color, "");
|
||||
|
|
@ -28,6 +28,10 @@ testNoComputedStyle(detached, "detached element");
|
|||
testNoComputedStyle(document.querySelector('iframe').contentDocument.documentElement,
|
||||
"element in non-rendered iframe (display: none)");
|
||||
|
||||
testNoComputedStyle(document.querySelector('iframe').contentDocument.documentElement,
|
||||
"element in non-rendered iframe (display: none) from iframe's window",
|
||||
document.querySelector('iframe').contentWindow);
|
||||
|
||||
host.attachShadow({ mode: "open" });
|
||||
testNoComputedStyle(document.getElementById('non-slotted'),
|
||||
"element outside the flat tree");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: getComputedStyle gets invalidated for display: none elements (inheritance)</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=186882">
|
||||
<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>
|
||||
#undisplayed, #host {
|
||||
display: none;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<div id="undisplayed"><div id="child"></div></div>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
let undisplayed_style = getComputedStyle(undisplayed);
|
||||
let undisplayed_child_style = getComputedStyle(child);
|
||||
assert_equals(undisplayed_style.color, "rgb(255, 0, 0)");
|
||||
assert_equals(undisplayed_child_style.color, "rgb(255, 0, 0)");
|
||||
undisplayed.style.color = "green";
|
||||
assert_equals(undisplayed_style.color, "rgb(0, 128, 0)");
|
||||
assert_equals(undisplayed_child_style.color, "rgb(0, 128, 0)");
|
||||
}, "getComputedStyle gets invalidated in display: none subtrees due to inherited changes to an ancestor");
|
||||
test(function() {
|
||||
host.attachShadow({ mode: 'open' }).innerHTML = `
|
||||
<div></div>
|
||||
`;
|
||||
let host_style = getComputedStyle(host);
|
||||
let shadow_style = getComputedStyle(host.shadowRoot.firstElementChild);
|
||||
assert_equals(host_style.color, "rgb(255, 0, 0)");
|
||||
assert_equals(shadow_style.color, "rgb(255, 0, 0)");
|
||||
host.style.color = "green";
|
||||
assert_equals(host_style.color, "rgb(0, 128, 0)");
|
||||
assert_equals(shadow_style.color, "rgb(0, 128, 0)");
|
||||
}, "getComputedStyle gets invalidated in display: none subtrees due to inherited changes to an ancestor shadow host");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSOM: getComputedStyle gets invalidated for display: none elements (rules)</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=186882">
|
||||
<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>
|
||||
#undisplayed {
|
||||
display: none;
|
||||
color: red;
|
||||
}
|
||||
.sibling + #undisplayed {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.sibling + #undisplayed > div {
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div id="helper"></div>
|
||||
<div id="undisplayed"><div id="child"></div></div>
|
||||
<script>
|
||||
test(function() {
|
||||
let undisplayed_style = getComputedStyle(undisplayed);
|
||||
let undisplayed_child_style = getComputedStyle(child);
|
||||
assert_equals(undisplayed_style.color, "rgb(255, 0, 0)");
|
||||
assert_equals(undisplayed_child_style.color, "rgb(255, 0, 0)");
|
||||
helper.classList.add("sibling");
|
||||
assert_equals(undisplayed_style.color, "rgb(0, 128, 0)");
|
||||
assert_equals(undisplayed_child_style.color, "rgb(255, 255, 0)");
|
||||
}, "getComputedStyle gets invalidated in display: none subtrees due to rule matching changes");
|
||||
</script>
|
||||
|
|
@ -44,6 +44,16 @@
|
|||
content: "foo";
|
||||
position: absolute;
|
||||
}
|
||||
#contents-pseudos-dynamic::before,
|
||||
#contents-pseudos-dynamic::after {
|
||||
display: block;
|
||||
content: "foo";
|
||||
position: absolute;
|
||||
}
|
||||
#contents-pseudos-dynamic.contents::before,
|
||||
#contents-pseudos-dynamic.contents::after {
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
<div id="test">
|
||||
<div id="contents"></div>
|
||||
|
|
@ -51,6 +61,7 @@
|
|||
<div id="flex"></div>
|
||||
<div id="flex-no-pseudo"></div>
|
||||
<div id="contents-pseudos"></div>
|
||||
<div id="contents-pseudos-dynamic"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
|
|
@ -109,6 +120,22 @@ test(function() {
|
|||
"display: contents in " + pseudo + " should reflect other non-inherited properties in CSSOM");
|
||||
});
|
||||
}, "display: contents on pseudo-elements");
|
||||
test(function() {
|
||||
var contentsPseudosDynamic = document.getElementById('contents-pseudos-dynamic');
|
||||
[":before", ":after"].forEach(function(pseudo) {
|
||||
assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).display, "block",
|
||||
"Check that display for " + pseudo + " is block before change");
|
||||
});
|
||||
contentsPseudosDynamic.className = "contents";
|
||||
[":before", ":after"].forEach(function(pseudo) {
|
||||
assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).display, "contents",
|
||||
"display: contents in " + pseudo + " should get reflected on CSSOM");
|
||||
assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).width, "auto",
|
||||
pseudo + " with display: contents should have no box");
|
||||
assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).position, "absolute",
|
||||
"display: contents in " + pseudo + " should reflect other non-inherited properties in CSSOM");
|
||||
});
|
||||
}, "Dynamically change to display: contents on pseudo-elements");
|
||||
test(function() {
|
||||
var div = document.getElementById('test');
|
||||
assert_throws(new TypeError(), () => getComputedStyle(div, "totallynotapseudo"),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue