Update web-platform-tests to revision 10168e9a5d44efbc6e7d416d1d454eb9c9f1396c

This commit is contained in:
Josh Matthews 2018-01-31 09:13:41 -05:00
parent c88dc51d03
commit 0e1caebaf4
791 changed files with 23381 additions and 5501 deletions

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Distribution: align-content - setting values via CSS</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" />
<link rel="stylesheet" href="../../support/alignment.css" >
<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses,
baselineClasses, overflowClasses);
for (var key in classes) {
let specifiedValue = classes[key];
element = document.createElement("div");
element.className = "alignContent" + key;
document.body.appendChild(element);
test(function() {
if (specifiedValue === "first baseline")
checkValues(element, "alignContent", "align-content", "", "baseline");
else
checkValues(element, "alignContent", "align-content", "", specifiedValue);
}, "Checking align-content: " + specifiedValue);
}
</script>

View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Distribution: align-content - 'initial' value</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" />
<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" />
<meta name="assert" content="Check the 'initial' value in diferent scenarios."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
container = document.createElement("div");
element = document.createElement("div");
container.appendChild(element);
document.body.appendChild(container);
test(function() {
element = document.createElement("div");
document.body.appendChild(element);
checkValues(element, "alignContent", "align-content", "", "normal");
}, "Test 'initial' value when nothing is specified");
test(function() {
container.style.display = "";
checkInitialValues(element, "alignContent", "align-content", "center", "normal");
}, "Test align-content: 'initial'");
test(function() {
container.style.display = "grid";
checkInitialValues(element, "alignContent", "align-content", "safe start", "normal");
}, "Test grid items align-content: 'initial'");
test(function() {
container.style.display = "flex";
checkInitialValues(element, "alignContent", "align-content", "unsafe end", "normal");
}, "Test flex items align-content: 'initial'");
test(function() {
container.style.display = "";
element.style.position = "absolute";
checkInitialValues(element, "alignContent", "align-content", "start", "normal");
}, "Test absolute positioned elements align-content: 'initial'");
test(function() {
container.style.display = "grid";
element.style.position = "absolute";
checkInitialValues(element, "alignContent", "align-content", "end", "normal");
}, "Test absolute positioned grid items align-content: 'initial'");
test(function() {
container.style.display = "flex";
element.style.position = "absolute";
checkInitialValues(element, "alignContent", "align-content", "end", "normal");
}, "Test absolute positioned flex items align-content: 'initial'");
</script>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Disrtribution: align-content - setting values via JS</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" />
<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
element = document.createElement("div");
document.body.appendChild(element);
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses,
baselineClasses, overflowClasses);
for (var key in classes) {
let specifiedValue = classes[key];
test(function() {
element.style.alignContent = "";
element.style.alignContent = specifiedValue;
if (specifiedValue === "first baseline")
checkValues(element, "alignContent", "align-content", "baseline", "baseline");
else
checkValues(element, "alignContent", "align-content", specifiedValue, specifiedValue);
}, "Checking align-content: " + specifiedValue);
}
</script>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Distribution: align-content - invalid values</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" />
<meta name="assert" content="Check bad combinations of specified values."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
element = document.createElement("div");
document.body.appendChild(element);
let values = ["auto", "legacy", "self-start", "left", "safe right"].concat(invalidPositionValues, invalidDistributionValues);
values.forEach(function(value) {
test(function() {
checkBadValues(element, "alignContent", "align-content", value);
}, "Checking invalid combination - align-content: " + value);
});
</script>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Distibution: align-content - inherit value</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" />
<meta name="assert" content="Check bad cobinations of specified values."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
test(function() {
checkInheritValues("alignContent", "align-content", "end");
}, "Test the value 'inherit' overrides current value ('end')");
test(function() {
checkInheritValues("alignContent", "align-content", "safe start");
}, "Test the value 'inherit' overrides current value ('safe start')");
test(function() {
checkInheritValues("alignContent", "align-content", "unsafe center");
}, "Test the value 'inherit' overrides current value ('unsafe center')");
</script>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Distribution: justify-content - setting values via CSS</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" />
<link rel="stylesheet" href="../../support/alignment.css" >
<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses,
distributionClasses, overflowClasses);
for (var key in classes) {
let specifiedValue = classes[key];
element = document.createElement("div");
element.className = "justifyContent" + key;
document.body.appendChild(element);
test(function() {
checkValues(element, "justifyContent", "justify-content", "", specifiedValue);
}, "Checking justify-content: " + specifiedValue);
}
</script>

View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Distribution: justify-content - 'initial' value</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" />
<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" />
<meta name="assert" content="Check the 'initial' value in diferent scenarios."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
container = document.createElement("div");
element = document.createElement("div");
container.appendChild(element);
document.body.appendChild(container);
test(function() {
element = document.createElement("div");
document.body.appendChild(element);
checkValues(element, "justifyContent", "justify-content", "", "normal");
}, "Test 'initial' value when nothing is specified");
test(function() {
container.style.display = "";
checkInitialValues(element, "justifyContent", "justify-content", "center", "normal");
}, "Test justify-content: 'initial'");
test(function() {
container.style.display = "grid";
checkInitialValues(element, "justifyContent", "justify-content", "safe start", "normal");
}, "Test grid items justify-content: 'initial'");
test(function() {
container.style.display = "flex";
checkInitialValues(element, "justifyContent", "justify-content", "unsafe end", "normal");
}, "Test flex items justify-content: 'initial'");
test(function() {
container.style.display = "";
element.style.position = "absolute";
checkInitialValues(element, "justifyContent", "justify-content", "start", "normal");
}, "Test absolute positioned elements justify-content: 'initial'");
test(function() {
container.style.display = "grid";
element.style.position = "absolute";
checkInitialValues(element, "justifyContent", "justify-content", "end", "normal");
}, "Test absolute positioned grid items justify-content: 'initial'");
test(function() {
container.style.display = "flex";
element.style.position = "absolute";
checkInitialValues(element, "justifyContent", "justify-content", "end", "normal");
}, "Test absolute positioned flex items justify-content: 'initial'");
</script>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Disrtribution: justify-content - setting values via JS</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" />
<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
element = document.createElement("div");
document.body.appendChild(element);
let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses,
distributionClasses, overflowClasses);
for (var key in classes) {
let specifiedValue = classes[key];
test(function() {
element.style.justifyContent = "";
element.style.justifyContent = specifiedValue;
checkValues(element, "justifyContent", "justify-content", specifiedValue, specifiedValue);
}, "Checking justify-content: " + specifiedValue);
}
</script>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Distribution: justify-content - invalid values</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" />
<meta name="assert" content="Check bad combinations of specified values."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
element = document.createElement("div");
document.body.appendChild(element);
let values = ["auto", "legacy", "self-start", "baseline", "first baseline", "last baseline"].concat(invalidPositionValues, invalidDistributionValues);
values.forEach(function(value) {
test(function() {
checkBadValues(element, "justifyContent", "justify-content", value);
}, "Checking invalid combination - justify-content: " + value);
});
</script>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Content Distibution: justify-content - inherit value</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" />
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" />
<meta name="assert" content="Check bad cobinations of specified values."/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
test(function() {
checkInheritValues("justifyContent", "justify-content", "end");
}, "Test the value 'inherit' overrides current value ('end')");
test(function() {
checkInheritValues("justifyContent", "justify-content", "safe left");
}, "Test the value 'inherit' overrides current value ('safe left')");
test(function() {
checkInheritValues("justifyContent", "justify-content", "unsafe center");
}, "Test the value 'inherit' overrides current value ('unsafe center')");
</script>

View file

@ -5,13 +5,14 @@
<meta name="assert" content="Check that setting a single value to place-content expands to such value set in both 'align-content' and 'justify-content'." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
var values = ["normal"].concat(contentPositionValues, distributionValues, baselineValues);
values.forEach(function(value) {
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses);
for (var key in classes) {
let value = classes[key];
test(function() {
checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", value);
}, "Checking place-content: " + value);
});
}
</script>

View file

@ -5,15 +5,18 @@
<meta name="assert" content="Check that setting two values to place-content sets the first one to 'align-content' and the second one to 'justify-content'." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
var values = ["normal"].concat(contentPositionValues, distributionValues, baselineValues);
values.forEach(function(alignValue) {
values.forEach(function(justifyValue) {
test(function() {
checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", alignValue, justifyValue);
}, "Checking place-content: " + alignValue + " " + justifyValue);
});
});
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
for (var key1 in classes) {
let alignValue = classes[key1];
let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses);
for (var key2 in classes2) {
let justifyValue = classes2[key2];
test(function() {
checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", alignValue, justifyValue);
}, "Checking place-content: " + alignValue + " " + justifyValue);
}
}
</script>

View file

@ -5,7 +5,7 @@
<meta name="assert" content="Check that place-content's invalid values are properly detected at parsing time." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<script>
function checkInvalidValues(value)
@ -14,8 +14,8 @@
}
test(function() {
checkInvalidValues("center safe")
checkInvalidValues("true center")
checkInvalidValues("safe center")
checkInvalidValues("unsafe center")
}, "Verify overflow keywords are invalid");
test(function() {
@ -23,15 +23,28 @@
}, "Verify fallback values are invalid");
test(function() {
checkInvalidValues("10px left")
checkInvalidValues("right 10%")
checkInvalidValues("left")
checkInvalidValues("left start")
checkInvalidValues("right center")
}, "Verify 'left' and 'right' values are invalid for block/cross axis alignment");
test(function() {
checkInvalidValues("baseline")
checkInvalidValues("first baseline")
checkInvalidValues("start baseline")
checkInvalidValues("end last baseline")
}, "Verify <baseline-position> values are invalid for the justify-content property");
test(function() {
checkInvalidValues("10px end")
checkInvalidValues("start 10%")
}, "Verify numeric values are invalid");
test(function() {
checkInvalidValues("auto")
checkInvalidValues("auto right")
checkInvalidValues("auto auto")
checkInvalidValues("left auto")
checkInvalidValues("start auto")
}, "Verify 'auto' values are invalid");
test(function() {

View file

@ -5,17 +5,20 @@
<meta name="assert" content="Check the place-content's 'specified' and 'resolved' values serialization." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/alignment-parsing-utils.js"></script>
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
<div id="log"></div>
<div id="test"></div>
<script>
var values = ["normal"].concat(contentPositionValues, distributionValues, baselineValues);
values.forEach(function(alignValue) {
[""].concat(values).forEach(function(justifyValue) {
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
for (var key1 in classes) {
let alignValue = classes[key1];
let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses);
for (var key2 in classes2) {
let justifyValue = classes2[key2];
var value = (alignValue + " " + justifyValue).trim();
test(function() {
checkPlaceShorhand("place-content", alignValue, justifyValue)
checkPlaceShorhand("place-content", value, alignValue, justifyValue)
}, "Checking place-content: " + value);
});
});
}
}
</script>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test Reference</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<style>
div {
width: 400px;
height: 400px;
background: blue;
position: relative;
}
span {
background: green;
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
left: 100px;
}
</style>
Should see a green square centered and at the bottom of the blue square.
<div><span></span></div>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment: place-content shorthand with fallback</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="help" href="https://drafts.csswg.org/css-align/#propdef-place-content">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1430622">
<link rel="match" href="place-content-shorthand-007-ref.html">
<style>
div {
display: grid;
grid: 200px / 200px;
width: 400px;
height: 400px;
background: blue;
place-content: end space-evenly;
}
span {
background: green;
}
</style>
Should see a green square centered and at the bottom of the blue square.
<div><span></span></div>