mirror of
https://github.com/servo/servo.git
synced 2025-08-12 00:45: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>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: align-items - 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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" />
|
||||
<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", "Stretch":"stretch"}, selfPositionClasses,
|
||||
baselineClasses, overflowClasses);
|
||||
|
||||
for (var key in classes) {
|
||||
let specifiedValue = classes[key];
|
||||
element = document.createElement("div");
|
||||
element.className = "alignItems" + key;
|
||||
document.body.appendChild(element);
|
||||
test(function() {
|
||||
if (specifiedValue === "first baseline")
|
||||
checkValues(element, "alignItems", "align-items", "", "baseline");
|
||||
else
|
||||
checkValues(element, "alignItems", "align-items", "", specifiedValue);
|
||||
}, "Checking align-items: " + specifiedValue);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: align-items - '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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" />
|
||||
<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, "alignItems", "align-items", "", "normal");
|
||||
}, "Test 'initial' value when nothing is specified");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "";
|
||||
checkInitialValues(element, "alignItems", "align-items", "center", "normal");
|
||||
}, "Test align-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "grid";
|
||||
checkInitialValues(element, "alignItems", "align-items", "safe start", "normal");
|
||||
}, "Test grid items align-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "flex";
|
||||
checkInitialValues(element, "alignItems", "align-items", "unsafe end", "normal");
|
||||
}, "Test flex items align-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "alignItems", "align-items", "start", "normal");
|
||||
}, "Test absolute positioned elements align-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "grid";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "alignItems", "align-items", "end", "normal");
|
||||
}, "Test absolute positioned grid items align-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "flex";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "alignItems", "align-items", "end", "normal");
|
||||
}, "Test absolute positioned flex items align-items: 'initial'");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: align-items - 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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" />
|
||||
<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", "Stretch":"stretch"}, selfPositionClasses,
|
||||
baselineClasses, overflowClasses);
|
||||
|
||||
for (var key in classes) {
|
||||
let specifiedValue = classes[key];
|
||||
test(function() {
|
||||
element.style.alignItems = "";
|
||||
element.style.alignItems = specifiedValue;
|
||||
if (specifiedValue === "first baseline")
|
||||
checkValues(element, "alignItems", "align-items", "baseline", "baseline");
|
||||
else
|
||||
checkValues(element, "alignItems", "align-items", specifiedValue, specifiedValue);
|
||||
}, "Checking align-items: " + specifiedValue);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: align-items - 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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" />
|
||||
<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", "space-around", "left", "safe right"].concat(invalidPositionValues);
|
||||
|
||||
values.forEach(function(value) {
|
||||
test(function() {
|
||||
checkBadValues(element, "alignItems", "align-items", value);
|
||||
}, "Checking invalid combination - align-items: " + value);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: align-items - 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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" />
|
||||
<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("alignItems", "align-items", "end");
|
||||
}, "Test the value 'inherit' overrides current value ('end')");
|
||||
test(function() {
|
||||
checkInheritValues("alignItems", "align-items", "safe start");
|
||||
}, "Test the value 'inherit' overrides current value ('safe start')");
|
||||
test(function() {
|
||||
checkInheritValues("alignItems", "align-items", "unsafe center");
|
||||
}, "Test the value 'inherit' overrides current value ('unsafe center')");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: justify-items - 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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" />
|
||||
<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", "Stretch":"stretch", "Left":"left", "Right":"right"},
|
||||
selfPositionClasses, baselineClasses, overflowClasses);
|
||||
|
||||
for (var key in classes) {
|
||||
let specifiedValue = classes[key];
|
||||
element = document.createElement("div");
|
||||
element.className = "justifyItems" + key;
|
||||
document.body.appendChild(element);
|
||||
test(function() {
|
||||
if (specifiedValue === "first baseline")
|
||||
checkValues(element, "justifyItems", "justify-items", "", "baseline");
|
||||
else
|
||||
checkValues(element, "justifyItems", "justify-items", "", specifiedValue);
|
||||
}, "Checking justify-items: " + specifiedValue);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: justify-items - '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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" />
|
||||
<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, "justifyItems", "justify-items", "", "legacy");
|
||||
}, "Test 'initial' value when nothing is specified");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "";
|
||||
checkInitialValues(element, "justifyItems", "justify-items", "center", "legacy");
|
||||
}, "Test justify-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "grid";
|
||||
checkInitialValues(element, "justifyItems", "justify-items", "safe start", "legacy");
|
||||
}, "Test grid items justify-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "flex";
|
||||
checkInitialValues(element, "justifyItems", "justify-items", "unsafe end", "legacy");
|
||||
}, "Test flex items justify-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "justifyItems", "justify-items", "start", "legacy");
|
||||
}, "Test absolute positioned elements justify-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "grid";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "justifyItems", "justify-items", "end", "legacy");
|
||||
}, "Test absolute positioned grid items justify-items: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "flex";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "justifyItems", "justify-items", "end", "legacy");
|
||||
}, "Test absolute positioned flex items justify-items: 'initial'");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: justify-items - 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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" />
|
||||
<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", "Stretch":"stretch", "Left":"left", "Right":"right"},
|
||||
selfPositionClasses, baselineClasses, overflowClasses);
|
||||
|
||||
for (var key in classes) {
|
||||
let specifiedValue = classes[key];
|
||||
test(function() {
|
||||
element.style.justifyItems = "";
|
||||
element.style.justifyItems = specifiedValue;
|
||||
if (specifiedValue === "first baseline")
|
||||
checkValues(element, "justifyItems", "justify-items", "baseline", "baseline");
|
||||
else
|
||||
checkValues(element, "justifyItems", "justify-items", specifiedValue, specifiedValue);
|
||||
}, "Checking justify-items: " + specifiedValue);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: justify-items - 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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" />
|
||||
<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", "space-around"].concat(invalidPositionValues, invalidLegacyValues);
|
||||
|
||||
values.forEach(function(value) {
|
||||
test(function() {
|
||||
checkBadValues(element, "justifyItems", "justify-items", value);
|
||||
}, "Checking invalid combination - justify-items: " + value);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: justify-items - 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/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" />
|
||||
<meta name="assert" content="Check the 'inherit' value in different 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>
|
||||
test(function() {
|
||||
checkInheritValues("justifyItems", "justify-items", "end");
|
||||
}, "Test the value 'inherit' overrides current value ('end')");
|
||||
test(function() {
|
||||
checkInheritValues("justifyItems", "justify-items", "safe left");
|
||||
}, "Test the value 'inherit' overrides current value ('safe left')");
|
||||
test(function() {
|
||||
checkInheritValues("justifyItems", "justify-items", "unsafe center");
|
||||
}, "Test the value 'inherit' overrides current value ('unsafe center')");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Default-Alignment: justify-items - use of the 'legacy' keyword</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" />
|
||||
<meta name="assert" content="Check the use of the 'legacy' keyword in different 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>
|
||||
test(function() {
|
||||
checkLegacyValues("justifyItems", "justify-items", "legacy left");
|
||||
}, "Test the value justify-items: legacy left");
|
||||
test(function() {
|
||||
checkLegacyValues("justifyItems", "justify-items", "legacy center");
|
||||
}, "Test the value justify-items: legacy center");
|
||||
test(function() {
|
||||
checkLegacyValues("justifyItems", "justify-items", "legacy right");
|
||||
}, "Test the value justify-items: legacy right");
|
||||
</script>
|
||||
|
|
@ -5,13 +5,14 @@
|
|||
<meta name="assert" content="Check that setting a single value to place-items expands to such value set in both 'align-items' and 'justify-items'." />
|
||||
<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", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(value) {
|
||||
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
|
||||
for (var key in classes) {
|
||||
let value = classes[key];
|
||||
test(function() {
|
||||
checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", value);
|
||||
}, "Checking place-items: " + value);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,15 +5,18 @@
|
|||
<meta name="assert" content="Check that setting two values to place-items sets the first one to 'align-items' and the second one to 'justify-items'." />
|
||||
<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", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(alignValue) {
|
||||
["auto"].concat(values).forEach(function(justifyValue) {
|
||||
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
|
||||
for (var key1 in classes) {
|
||||
let alignValue = classes[key1];
|
||||
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
|
||||
for (var key2 in classes2) {
|
||||
let justifyValue = classes2[key2];
|
||||
test(function() {
|
||||
checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", alignValue, justifyValue);
|
||||
}, "Checking place-items: " + alignValue + " " + justifyValue);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="assert" content="Check that place-items'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,14 +14,20 @@
|
|||
}
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center safe")
|
||||
checkInvalidValues("true center")
|
||||
checkInvalidValues("safe center")
|
||||
checkInvalidValues("unsafe center")
|
||||
}, "Verify overflow keywords are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center space-between start")
|
||||
}, "Verify fallback values are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("left")
|
||||
checkInvalidValues("left start")
|
||||
checkInvalidValues("right center")
|
||||
}, "Verify 'left' and 'right' values are invalid for block/cross axis alignment");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("10px left")
|
||||
checkInvalidValues("right 10%")
|
||||
|
|
|
|||
|
|
@ -5,16 +5,19 @@
|
|||
<meta name="assert" content="Check the place-items'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>
|
||||
<script>
|
||||
var values = ["normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(alignValue) {
|
||||
[""].concat(values).forEach(function(justifyValue) {
|
||||
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
|
||||
for (var key1 in classes) {
|
||||
let alignValue = classes[key1];
|
||||
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
|
||||
for (var key2 in classes2) {
|
||||
let justifyValue = classes2[key2];
|
||||
var value = (alignValue + " " + justifyValue).trim();
|
||||
test(function() {
|
||||
checkPlaceShorhand("place-items", alignValue, justifyValue)
|
||||
checkPlaceShorhand("place-items", value, alignValue, justifyValue)
|
||||
}, "Checking place-items: " + value);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,43 @@
|
|||
var selfPositionValues = [ "start", "end", "self-start", "self-end", "left", "right", "center", "flex-start", "flex-end"];
|
||||
var contentPositionValues = [ "start", "end", "left", "right", "center", "flex-start", "flex-end"];
|
||||
var distributionValues = [ "stretch", "space-around", "space-between", "space-evenly"];
|
||||
var baselineValues = [ "baseline", "first baseline", "last baseline"];
|
||||
var selfPositionClasses = {"Start":"start", "End":"end", "SelfStart":"self-start", "SelfEnd":"self-end", "Center":"center", "FlexStart":"flex-start", "FlexEnd":"flex-end"};
|
||||
var contentPositionClasses = {"Start":"start", "End":"end", "Center":"center", "FlexStart":"flex-start", "FlexEnd":"flex-end"};
|
||||
var distributionClasses = {"Stretch":"stretch", "SpaceAround":"space-around", "SpaceBetween":"space-between", "SpaceEvenly":"space-evenly"};
|
||||
var baselineClasses = {"Baseline":"baseline", "FirstBaseline":"first baseline", "LastBaseline":"last baseline"};
|
||||
var overflowClasses = {"SafeFlexEnd":"safe flex-end", "UnsafeEnd":"unsafe end", "SafeEnd":"safe end", "UnsafeFlexStart":"unsafe flex-start", "SafeCenter":"safe center"};
|
||||
var legacyClasses = {"LegacyLeft":"legacy left", "LegacyCenter":"legacy center", "LegacyRight":"legacy right", "LeftLegacy":"left legacy", "CenterLegacy":"center legacy", "RightLegacy":"right legacy", "Legacy":"legacy"};
|
||||
|
||||
function checkPlaceShorhand(shorthand, alignValue, justifyValue)
|
||||
var invalidPositionValues = ["auto safe", "auto left", "normal unsafe", "normal stretch", "baseline normal",
|
||||
"baseline center", "first baseline center", "last baseline center", "baseline last",
|
||||
"baseline first", "stretch unsafe", "stretch right", "unsafe unsafe", "unsafe safe",
|
||||
"center start", "unsafe stretch", "safe stretch", "baseline safe", "unsafe baseline",
|
||||
"unsafe safe left", "unsafe left safe", "left safe unsafe safe", "start safe", "safe"];
|
||||
var invalidLegacyValues = ["legacy start", "legacy end", "legacy right unsafe", "legacy auto", "legacy stretch",
|
||||
"legacy left right"];
|
||||
var invalidDistributionValues = ["space-between left", "space-around center", "space-evenly right",
|
||||
"stretch safe start", "space-around unsafe", "space-evenly safe flex-start",
|
||||
"space-between safe", "space-between stretch", "stretch start",
|
||||
"stretch baseline", "first baseline space-around"];
|
||||
|
||||
function checkPlaceShorhand(shorthand, shorthandValue, alignValue, justifyValue)
|
||||
{
|
||||
var div = document.createElement("div");
|
||||
var specifiedValue = (alignValue + " " + justifyValue).trim();
|
||||
div.style[shorthand] = specifiedValue;
|
||||
div.style[shorthand] = shorthandValue;
|
||||
document.body.appendChild(div);
|
||||
|
||||
if (alignValue === justifyValue)
|
||||
specifiedValue = alignValue;
|
||||
|
||||
var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
|
||||
if (alignValue === "first baseline")
|
||||
alignValue = "baseline";
|
||||
if (justifyValue === "first baseline")
|
||||
justifyValue = "baseline";
|
||||
if (justifyValue === "")
|
||||
justifyValue = alignValue;
|
||||
var expectedResolvedValue = (alignValue + " " + justifyValue).trim()
|
||||
|
||||
assert_equals(div.style[shorthand], specifiedValue, shorthand + " specified value");
|
||||
let specifiedValue = (alignValue + " " + justifyValue).trim();
|
||||
if (alignValue === justifyValue)
|
||||
specifiedValue = alignValue;
|
||||
|
||||
var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
|
||||
var expectedResolvedValue = (alignValue + " " + justifyValue).trim();
|
||||
|
||||
assert_equals(div.style[shorthand], specifiedValue, shorthandValue + " specified value");
|
||||
// FIXME: We need https://github.com/w3c/csswg-drafts/issues/1041 to clarify which
|
||||
// value is expected for the shorthand's 'resolved value".
|
||||
assert_in_array(resolvedValue, ["", expectedResolvedValue], shorthand + " resolved value");
|
||||
|
|
@ -33,6 +48,10 @@ function checkPlaceShorhandLonghands(shorthand, alignLonghand, justifyLonghand,
|
|||
var div = document.createElement("div");
|
||||
div.setAttribute("style", shorthand + ": " + alignValue + " " + justifyValue);
|
||||
document.body.appendChild(div);
|
||||
if (alignValue === "first baseline")
|
||||
alignValue = "baseline";
|
||||
if (justifyValue === "first baseline")
|
||||
justifyValue = "baseline";
|
||||
if (justifyValue === "")
|
||||
justifyValue = alignValue;
|
||||
assert_equals(div.style[alignLonghand],
|
||||
|
|
@ -52,3 +71,60 @@ function checkPlaceShorthandInvalidValues(shorthand, alignLonghand, justifyLongh
|
|||
assert_equals(div.style[justifyLonghand],
|
||||
"end", justifyLonghand + " expanded value");
|
||||
}
|
||||
|
||||
function checkValues(element, property, propertyID, value, computedValue)
|
||||
{
|
||||
window.element = element;
|
||||
var elementID = element.id || "element";
|
||||
assert_equals(eval('element.style.' + property), value, propertyID + ' specified value is not what it should.');
|
||||
assert_equals(eval("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')"), computedValue, propertyID + " computed style is not what is should.");
|
||||
}
|
||||
|
||||
function checkBadValues(element, property, propertyID, value)
|
||||
{
|
||||
var elementID = element.id || "element";
|
||||
element.style[property] = "";
|
||||
var initialValue = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + propertyID + "')");
|
||||
element.style[property] = value;
|
||||
checkValues(element, property, propertyID, "", initialValue);
|
||||
}
|
||||
|
||||
function checkInitialValues(element, property, propertyID, value, initial)
|
||||
{
|
||||
element.style[property] = value;
|
||||
checkValues(element, property, propertyID, value, value);
|
||||
element.style[property] = "initial";
|
||||
checkValues(element, property, propertyID, "initial", initial);
|
||||
}
|
||||
|
||||
function checkInheritValues(property, propertyID, value)
|
||||
{
|
||||
var parentElement = document.createElement("div");
|
||||
document.body.appendChild(parentElement);
|
||||
parentElement.style[property] = value;
|
||||
checkValues(parentElement, property, propertyID, value, value);
|
||||
|
||||
var element = document.createElement("div");
|
||||
parentElement.appendChild(element);
|
||||
element.style[property] = "inherit";
|
||||
checkValues(element, property, propertyID, "inherit", value);
|
||||
}
|
||||
|
||||
function checkLegacyValues(property, propertyID, value)
|
||||
{
|
||||
var parentElement = document.createElement("div");
|
||||
document.body.appendChild(parentElement);
|
||||
parentElement.style[property] = value;
|
||||
checkValues(parentElement, property, propertyID, value, value);
|
||||
|
||||
var element = document.createElement("div");
|
||||
parentElement.appendChild(element);
|
||||
checkValues(element, property, propertyID, "", value);
|
||||
}
|
||||
|
||||
function checkSupportedValues(elementID, property)
|
||||
{
|
||||
var value = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + property + "')");
|
||||
var value1 = eval("window.getComputedStyle(" + elementID + " , '')");
|
||||
shouldBeTrue("CSS.supports('" + property + "', '" + value + "')");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: align-self - 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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" />
|
||||
<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({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
|
||||
baselineClasses, overflowClasses);
|
||||
|
||||
for (var key in classes) {
|
||||
let specifiedValue = classes[key];
|
||||
element = document.createElement("div");
|
||||
element.className = "alignSelf" + key;
|
||||
document.body.appendChild(element);
|
||||
test(function() {
|
||||
if (specifiedValue === "first baseline")
|
||||
checkValues(element, "alignSelf", "align-self", "", "baseline");
|
||||
else
|
||||
checkValues(element, "alignSelf", "align-self", "", specifiedValue);
|
||||
}, "Checking align-self: " + specifiedValue);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: align-self - '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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" />
|
||||
<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, "alignSelf", "align-self", "", "auto");
|
||||
}, "Test 'initial' value when nothing is specified");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "";
|
||||
checkInitialValues(element, "alignSelf", "align-self", "center", "auto");
|
||||
}, "Test align-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "grid";
|
||||
checkInitialValues(element, "alignSelf", "align-self", "safe start", "auto");
|
||||
}, "Test grid items align-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "flex";
|
||||
checkInitialValues(element, "alignSelf", "align-self", "unsafe end", "auto");
|
||||
}, "Test flex items align-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "alignSelf", "align-self", "start", "auto");
|
||||
}, "Test absolute positioned elements align-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "grid";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "alignSelf", "align-self", "end", "auto");
|
||||
}, "Test absolute positioned grid items align-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "flex";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "alignSelf", "align-self", "end", "auto");
|
||||
}, "Test absolute positioned flex items align-self: 'initial'");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: align-self - 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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" />
|
||||
<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({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
|
||||
baselineClasses, overflowClasses);
|
||||
|
||||
for (var key in classes) {
|
||||
let specifiedValue = classes[key];
|
||||
test(function() {
|
||||
element.style.alignSelf = "";
|
||||
element.style.alignSelf = specifiedValue;
|
||||
if (specifiedValue === "first baseline")
|
||||
checkValues(element, "alignSelf", "align-self", "baseline", "baseline");
|
||||
else
|
||||
checkValues(element, "alignSelf", "align-self", specifiedValue, specifiedValue);
|
||||
}, "Checking align-self: " + specifiedValue);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: align-self - 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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" />
|
||||
<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 = ["legacy", "space-around", "left", "safe right"].concat(invalidPositionValues);
|
||||
|
||||
values.forEach(function(value) {
|
||||
test(function() {
|
||||
checkBadValues(element, "alignSelf", "align-self", value);
|
||||
}, "Checking invalid combination - align-self: " + value);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: align-self - 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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" />
|
||||
<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("alignSelf", "align-self", "end");
|
||||
}, "Test the value 'inherit' overrides current value ('end')");
|
||||
test(function() {
|
||||
checkInheritValues("alignSelf", "align-self", "safe start");
|
||||
}, "Test the value 'inherit' overrides current value ('safe start')");
|
||||
test(function() {
|
||||
checkInheritValues("alignSelf", "align-self", "unsafe center");
|
||||
}, "Test the value 'inherit' overrides current value ('unsafe center')");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: justify-self - 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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" />
|
||||
<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({"Auto":"auto", "Normal":"normal", "Stretch":"stretch", "Left":"left",
|
||||
"Right":"right"}, selfPositionClasses, baselineClasses, overflowClasses);
|
||||
|
||||
for (var key in classes) {
|
||||
let specifiedValue = classes[key];
|
||||
element = document.createElement("div");
|
||||
element.className = "justifySelf" + key;
|
||||
document.body.appendChild(element);
|
||||
test(function() {
|
||||
let value = specifiedValue;
|
||||
if (specifiedValue === "first baseline")
|
||||
checkValues(element, "justifySelf", "justify-self", "", "baseline");
|
||||
else
|
||||
checkValues(element, "justifySelf", "justify-self", "", value);
|
||||
}, "Checking justify-self: " + specifiedValue);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: justify-self - '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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" />
|
||||
<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, "justifySelf", "justify-self", "", "auto");
|
||||
}, "Test 'initial' value when nothing is specified");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "";
|
||||
checkInitialValues(element, "justifySelf", "justify-self", "center", "auto");
|
||||
}, "Test justify-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "grid";
|
||||
checkInitialValues(element, "justifySelf", "justify-self", "safe start", "auto");
|
||||
}, "Test grid items justify-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "flex";
|
||||
checkInitialValues(element, "justifySelf", "justify-self", "unsafe end", "auto");
|
||||
}, "Test flex items justify-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "justifySelf", "justify-self", "start", "auto");
|
||||
}, "Test absolute positioned elements justify-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "grid";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "justifySelf", "justify-self", "end", "auto");
|
||||
}, "Test absolute positioned grid items justify-self: 'initial'");
|
||||
|
||||
test(function() {
|
||||
container.style.display = "flex";
|
||||
element.style.position = "absolute";
|
||||
checkInitialValues(element, "justifySelf", "justify-self", "end", "auto");
|
||||
}, "Test absolute positioned flex items justify-self: 'initial'");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: justify-self - 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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" />
|
||||
<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({"Auto":"auto", "Normal":"normal", "Stretch":"stretch", "Left":"left",
|
||||
"Right":"right"}, selfPositionClasses, baselineClasses, overflowClasses);
|
||||
|
||||
for (var key in classes) {
|
||||
let specifiedValue = classes[key];
|
||||
test(function() {
|
||||
element.style.justifySelf = "";
|
||||
element.style.justifySelf = specifiedValue;
|
||||
if (specifiedValue === "first baseline")
|
||||
checkValues(element, "justifySelf", "justify-self", "baseline", "baseline");
|
||||
else
|
||||
checkValues(element, "justifySelf", "justify-self", specifiedValue, specifiedValue);
|
||||
}, "Checking justify-self: " + specifiedValue);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: justify-self - 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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" />
|
||||
<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 = ["legacy", "space-around"].concat(invalidPositionValues);
|
||||
|
||||
values.forEach(function(value) {
|
||||
test(function() {
|
||||
checkBadValues(element, "justifySelf", "justify-self", value);
|
||||
}, "Checking invalid combination - justify-self: " + value);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Self-Alignment: justify-self - 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/#self-alignment" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" />
|
||||
<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("justifySelf", "justify-self", "end");
|
||||
}, "Test the value 'inherit' overrides current value ('end')");
|
||||
test(function() {
|
||||
checkInheritValues("justifySelf", "justify-self", "safe left");
|
||||
}, "Test the value 'inherit' overrides current value ('safe left')");
|
||||
test(function() {
|
||||
checkInheritValues("justifySelf", "justify-self", "unsafe center");
|
||||
}, "Test the value 'inherit' overrides current value ('unsafe center')");
|
||||
</script>
|
||||
|
|
@ -5,13 +5,15 @@
|
|||
<meta name="assert" content="Check that setting a single value to place-self expands to such value set in both 'align-self' and 'justify-self'." />
|
||||
<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 = ["auto", "normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(value) {
|
||||
let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
|
||||
baselineClasses);
|
||||
for (var key in classes) {
|
||||
let value = classes[key];
|
||||
test(function() {
|
||||
checkPlaceShorhandLonghands("place-self", "align-self", "justify-self", value);
|
||||
}, "Checking place-self: " + value);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,15 +5,19 @@
|
|||
<meta name="assert" content="Check that setting two values to place-self sets the first one to 'align-self' and the second one to 'justify-self'." />
|
||||
<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 = ["auto", "normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(alignValue) {
|
||||
values.forEach(function(justifyValue) {
|
||||
let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
|
||||
baselineClasses);
|
||||
for (var key1 in classes) {
|
||||
let alignValue = classes[key1];
|
||||
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
|
||||
for (var key2 in classes2) {
|
||||
let justifyValue = classes2[key2];
|
||||
test(function() {
|
||||
checkPlaceShorhandLonghands("place-self", "align-self", "justify-self", alignValue, justifyValue);
|
||||
}, "Checking place-self: " + alignValue + " " + justifyValue);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="assert" content="Check that place-self'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,14 +14,20 @@
|
|||
}
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center safe")
|
||||
checkInvalidValues("true center")
|
||||
checkInvalidValues("safe center")
|
||||
checkInvalidValues("unsafe center")
|
||||
}, "Verify overflow keywords are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center space-between start")
|
||||
}, "Verify fallback values are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("left")
|
||||
checkInvalidValues("left start")
|
||||
checkInvalidValues("right center")
|
||||
}, "Verify 'left' and 'right' values are invalid for block/cross axis alignment");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("10px left")
|
||||
checkInvalidValues("right 10%")
|
||||
|
|
|
|||
|
|
@ -5,16 +5,20 @@
|
|||
<meta name="assert" content="Check the place-self'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>
|
||||
<script>
|
||||
var values = ["auto", "normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(alignValue) {
|
||||
[""].concat(values).forEach(function(justifyValue) {
|
||||
let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
|
||||
baselineClasses);
|
||||
for (var key1 in classes) {
|
||||
let alignValue = classes[key1];
|
||||
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
|
||||
for (var key2 in classes2) {
|
||||
let justifyValue = classes2[key2];
|
||||
var value = (alignValue + " " + justifyValue).trim();
|
||||
test(function() {
|
||||
checkPlaceShorhand("place-self", alignValue, justifyValue)
|
||||
checkPlaceShorhand("place-self", value, alignValue, justifyValue)
|
||||
}, "Checking place-self: " + value);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue