Update web-platform-tests to revision 7b078f0d6ff82157c57f343838f61b5200686e53

This commit is contained in:
WPT Sync Bot 2018-10-29 22:02:09 -04:00
parent 2f8dc65519
commit 5682eb7930
39 changed files with 1136 additions and 338 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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)');

View file

@ -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>

View file

@ -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>