mirror of
https://github.com/servo/servo.git
synced 2025-08-15 18:35:33 +01:00
Update web-platform-tests to revision 10168e9a5d44efbc6e7d416d1d454eb9c9f1396c
This commit is contained in:
Josh Matthews
parent
c88dc51d03
commit
0e1caebaf4
791 changed files with 23381 additions and 5501 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue