mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
Update web-platform-tests to revision 7b078f0d6ff82157c57f343838f61b5200686e53
This commit is contained in:
parent
2f8dc65519
commit
5682eb7930
39 changed files with 1136 additions and 338 deletions
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#containing-block-details">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
|
||||
<style>
|
||||
.rel { position:relative; }
|
||||
.inline-block { display:inline-block; width:100px; height:1px; }
|
||||
.inline-block.large { width:200px; }
|
||||
#target { position:absolute; width:100%; height:100px; background:green; }
|
||||
</style>
|
||||
<p>There should be a green square below.</p>
|
||||
<div style="height:200px;">
|
||||
<span class="rel" id="notContainingBlockOfTarget">
|
||||
<div class="large inline-block"></div>
|
||||
<br>
|
||||
<span id="containingBlockOfTarget" class="rel">
|
||||
<div class="inline-block"></div>
|
||||
<span>
|
||||
<div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</span>
|
||||
<div class="inline-block"></div></span><br>
|
||||
<div class="large inline-block"></div>
|
||||
</span>
|
||||
</div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
assert_equals(document.getElementById("target").offsetWidth, 100);
|
||||
}, "Make sure that we're sized by the right ancestor");
|
||||
</script>
|
|
@ -29,7 +29,7 @@ for (let element of [divWithFontSizeSet, divWithFontSizeInherited]) {
|
|||
// Because we want to include the parsing step, insert a stylesheet
|
||||
// node with textContent.
|
||||
let node = document.createElement('style');
|
||||
node.textContent = `#${id} { ${name}: ${value}; }`;
|
||||
node.textContent = `#${id} { ${name}:${value}; }`;
|
||||
document.body.append(node);
|
||||
|
||||
try {
|
||||
|
@ -123,5 +123,29 @@ for (let element of [divWithFontSizeSet, divWithFontSizeInherited]) {
|
|||
test(function() {
|
||||
assert_computed_value('<integer>+', '15 calc(2.4) calc(2.6)', '15 2 3');
|
||||
}, "<integer>+ values are computed correctly for " + id);
|
||||
|
||||
test(function() {
|
||||
assert_computed_value('<color>', '#ff0000', 'rgb(255, 0, 0)');
|
||||
assert_computed_value('<color>', '#000f00', 'rgb(0, 15, 0)');
|
||||
assert_computed_value('<color>', '#00000a', 'rgb(0, 0, 10)');
|
||||
assert_computed_value('<color>', '#badbee', 'rgb(186, 219, 238)');
|
||||
assert_computed_value('<color>', '#badbee33', 'rgba(186, 219, 238, 0.2)');
|
||||
assert_computed_value('<color>', 'tomato', 'rgb(255, 99, 71)');
|
||||
assert_computed_value('<color>', 'plum', 'rgb(221, 160, 221)');
|
||||
assert_computed_value('<color>', 'currentcolor', 'currentcolor');
|
||||
}, "<color> values are computed correctly for " + id);
|
||||
|
||||
test(function() {
|
||||
assert_computed_value('*', 'tomato', 'tomato');
|
||||
assert_computed_value('tomato | plum', 'plum', 'plum');
|
||||
assert_computed_value('tomato | plum | <color>', 'plum', 'plum');
|
||||
}, "ident values that look like color keywords are not converted to colors" + id);
|
||||
|
||||
test(function() {
|
||||
assert_computed_value('*', '-50grad', '-50grad');
|
||||
assert_computed_value('<angle>', '180deg', '180deg');
|
||||
assert_computed_value('<angle>', '400grad', '360deg');
|
||||
assert_computed_value('<angle>', 'calc(360deg + 400grad)', '720deg');
|
||||
}, "<angle> values computed correctly for " + id);
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -46,7 +46,7 @@ test(function() {
|
|||
assert_equals(inlineStyle.getPropertyValue('--length'), '5');
|
||||
assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');
|
||||
assert_equals(computedStyle.getPropertyValue('--length'), '0px');
|
||||
assert_equals(computedStyle.getPropertyValue('--color'), 'blue');
|
||||
assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)');
|
||||
}, "Formerly valid values are still readable from inline styles but are computed as the unset value");
|
||||
|
||||
test(function() {
|
||||
|
@ -62,7 +62,7 @@ test(function() {
|
|||
assert_equals(inlineStyle.getPropertyValue('--length'), '');
|
||||
assert_equals(inlineStyle.getPropertyValue('--color'), '');
|
||||
assert_equals(computedStyle.getPropertyValue('--length'), '10px');
|
||||
assert_equals(computedStyle.getPropertyValue('--color'), 'red');
|
||||
assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 0, 0)');
|
||||
}, "Values can be removed from inline styles");
|
||||
|
||||
test(function() {
|
||||
|
@ -80,9 +80,9 @@ test(function() {
|
|||
assert_equals(inlineStyle.getPropertyValue('--length'), '30px');
|
||||
assert_equals(inlineStyle.getPropertyValue('--color'), 'pink');
|
||||
assert_equals(computedStyle.getPropertyValue('--length'), '30px');
|
||||
assert_equals(computedStyle.getPropertyValue('--color'), 'pink');
|
||||
assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 192, 203)');
|
||||
inlineStyle.setProperty('--color', 'inherit');
|
||||
assert_equals(inlineStyle.getPropertyValue('--color'), 'inherit');
|
||||
assert_equals(computedStyle.getPropertyValue('--color'), 'blue');
|
||||
assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)');
|
||||
}, "Valid values can be set on inline styles");
|
||||
</script>
|
||||
|
|
|
@ -23,8 +23,8 @@ test(function() {
|
|||
computedStyle = getComputedStyle(target);
|
||||
assert_equals(computedStyle.getPropertyValue('--length'), '25px');
|
||||
assert_equals(computedStyle.getPropertyValue('--length-percentage'), 'calc(100px + 10%)');
|
||||
assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'pink');
|
||||
assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'purple');
|
||||
assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'rgb(255, 192, 203)');
|
||||
assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'rgb(128, 0, 128)');
|
||||
assert_equals(computedStyle.getPropertyValue('--transform-function'), 'rotate(42deg)');
|
||||
assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)');
|
||||
assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)');
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Inheritance of Filter Effects properties</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#property-index">
|
||||
<meta name="assert" content="Properties inherit according to the spec.">
|
||||
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/inheritance-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
assert_inherited('color-interpolation-filters', 'linearrgb', 'srgb');
|
||||
assert_not_inherited('filter', 'none', 'blur(10px)');
|
||||
assert_not_inherited('flood-color', 'rgb(0, 0, 0)', 'rgb(42, 53, 64)');
|
||||
assert_not_inherited('flood-opacity', '1', '0.5');
|
||||
assert_not_inherited('lighting-color', 'rgb(255, 255, 255)', 'rgb(42, 53, 64)');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Selectors Invalidation: :where()</title>
|
||||
<link rel="author" title="Victoria Su" href="mailto:victoriaytsu@google.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#zero-matches">
|
||||
<meta name="assert" content="This tests that the :where() selector is effective">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
* {
|
||||
color: black;
|
||||
}
|
||||
.b {
|
||||
color: yellow;
|
||||
}
|
||||
/*Simple selector arguments */
|
||||
:where(.b, .c) {
|
||||
color: red;
|
||||
}
|
||||
/*Compound selector arguments */
|
||||
.a~:where(.c#d, .e) {
|
||||
color: green;
|
||||
}
|
||||
/* Complex selector arguments */
|
||||
.h {
|
||||
color: red;
|
||||
}
|
||||
:where(.a~.h, .a~.h+.f) {
|
||||
color: yellow;
|
||||
}
|
||||
/* Nested */
|
||||
:where(.a>:where(.g+.h, .b)~.i) {
|
||||
color: blue;
|
||||
}
|
||||
:where(:matches(.a~.h)) {
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a1">
|
||||
<div class="g">
|
||||
</div>
|
||||
<div class="h">
|
||||
</div>
|
||||
<div class="i" id="i1">
|
||||
Blue
|
||||
</div>
|
||||
</div>
|
||||
<div class="b" id="b1">
|
||||
Yellow
|
||||
</div>
|
||||
<div class="c" id="c1">
|
||||
Red
|
||||
</div>
|
||||
<div class="c" id="d">
|
||||
Green
|
||||
</div>
|
||||
<div class="h" id="h1">
|
||||
Red
|
||||
</div>
|
||||
<div class="f" id="f1">
|
||||
Yellow
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
|
||||
var black = "rgb(0, 0, 0)";
|
||||
var green = "rgb(0, 128, 0)";
|
||||
var red = "rgb(255, 0, 0)";
|
||||
var yellow = "rgb(255, 255, 0)";
|
||||
var blue = "rgb(0, 0, 255)";
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(b1).color, yellow);
|
||||
assert_equals(getComputedStyle(c1).color, red);
|
||||
assert_equals(getComputedStyle(d).color, red);
|
||||
assert_equals(getComputedStyle(h1).color, red);
|
||||
assert_equals(getComputedStyle(f1).color, black);
|
||||
assert_equals(getComputedStyle(i1).color, black);
|
||||
}, "Preconditions.");
|
||||
|
||||
test(() => {
|
||||
a1.className = "a";
|
||||
assert_equals(getComputedStyle(b1).color, yellow);
|
||||
assert_equals(getComputedStyle(c1).color, red);
|
||||
}, "Invalidate :where() for simple selector arguments.");
|
||||
|
||||
test(() => {
|
||||
a1.className = "a";
|
||||
assert_equals(getComputedStyle(d).color, green);
|
||||
}, "Invalidate :where() for compound selector arguments.");
|
||||
|
||||
test(() => {
|
||||
a1.className = "a";
|
||||
assert_equals(getComputedStyle(h1).color, red);
|
||||
assert_equals(getComputedStyle(f1).color, yellow);
|
||||
}, "Invalidate :where() for complex selector arguments.");
|
||||
|
||||
test(() => {
|
||||
a1.className = "a";
|
||||
assert_equals(getComputedStyle(i1).color, blue);
|
||||
}, "Invalidate nested :where().");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue