mirror of
https://github.com/servo/servo.git
synced 2025-08-10 07:55:33 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-content shorthand - single values specified</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var values = ["normal"].concat(contentPositionValues, distributionValues, baselineValues);
|
||||
values.forEach(function(value) {
|
||||
test(function() {
|
||||
checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", value);
|
||||
}, "Checking place-content: " + value);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-content shorthand - multiple values specified</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" />
|
||||
<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>
|
||||
<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);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-content shorthand - initial value</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" />
|
||||
<meta name="assert" content="Check that place-content's 'initial' value expands to 'align-content' and 'justify-content'." />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var div = document.createElement("div");
|
||||
document.body.appendChild(div);
|
||||
div.style["align-content"] = "start";
|
||||
div.style["justify-content"] = "end";
|
||||
div.setAttribute("style", "place-content: initial");
|
||||
|
||||
test(function() {
|
||||
assert_equals(div.style["align-content"],
|
||||
"initial", "place-content specified value for align-content");
|
||||
}, "Check place-content: initial - align-content expanded value");
|
||||
|
||||
test(function() {
|
||||
assert_equals(div.style["justify-content"],
|
||||
"initial", "place-content specified value for justify-content");
|
||||
}, "Check place-content: initial - justify-content expanded value");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-content shorthand - invalid values</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
function checkInvalidValues(value)
|
||||
{
|
||||
checkPlaceShorthandInvalidValues("place-content", "align-content", "justify-content", value);
|
||||
}
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center safe")
|
||||
checkInvalidValues("true center")
|
||||
}, "Verify overflow keywords are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center space-between start")
|
||||
}, "Verify fallback values are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("10px left")
|
||||
checkInvalidValues("right 10%")
|
||||
}, "Verify numeric values are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("auto")
|
||||
checkInvalidValues("auto right")
|
||||
checkInvalidValues("auto auto")
|
||||
checkInvalidValues("left auto")
|
||||
}, "Verify 'auto' values are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("")
|
||||
}, "Verify empty declaration is invalid");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-content shorthand - inherit value</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" />
|
||||
<meta name="assert" content="Check that place-content's 'inherit' value expands to 'align-content' and 'justify-content'." />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#test {
|
||||
place-content: start end;
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
var child = document.createElement("div");
|
||||
document.getElementById("test").appendChild(child);
|
||||
child.setAttribute("style", "place-content: inherit");
|
||||
var style = getComputedStyle(child);
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("align-content"),
|
||||
"start", "place-content resolved value for align-content");
|
||||
}, "Check place-content: inherit - align-content resolved value");
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("justify-content"),
|
||||
"end", "place-content resolved value for justify-content");
|
||||
}, "Check place-content: inherit - justify-content resolved value");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-content shorthand - Shorthand 'specified' and 'resolved' value</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" />
|
||||
<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>
|
||||
<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) {
|
||||
var value = (alignValue + " " + justifyValue).trim();
|
||||
test(function() {
|
||||
checkPlaceShorhand("place-content", alignValue, justifyValue)
|
||||
}, "Checking place-content: " + value);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-items shorthand - single values specified</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var values = ["normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(value) {
|
||||
test(function() {
|
||||
checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", value);
|
||||
}, "Checking place-items: " + value);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-items shorthand - multiple values specified</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var values = ["normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(alignValue) {
|
||||
["auto"].concat(values).forEach(function(justifyValue) {
|
||||
test(function() {
|
||||
checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", alignValue, justifyValue);
|
||||
}, "Checking place-items: " + alignValue + " " + justifyValue);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-items shorthand - initial value</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" />
|
||||
<meta name="assert" content="Check that place-items's 'initial' value expands to 'align-items' and 'justify-items'." />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var div = document.createElement("div");
|
||||
document.body.appendChild(div);
|
||||
div.style["align-items"] = "start";
|
||||
div.style["justify-items"] = "end";
|
||||
div.setAttribute("style", "place-items: initial");
|
||||
|
||||
test(function() {
|
||||
assert_equals(div.style["align-items"],
|
||||
"initial", "place-items expanded value for align-items");
|
||||
}, "Check place-items: initial - align-items expanded value");
|
||||
|
||||
test(function() {
|
||||
assert_equals(div.style["justify-items"],
|
||||
"initial", "place-items expanded value for justify-items");
|
||||
}, "Check place-items: initial - justify-items expanded value");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-items shorthand - invalid values</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
function checkInvalidValues(value)
|
||||
{
|
||||
checkPlaceShorthandInvalidValues("place-items", "align-items", "justify-items", value);
|
||||
}
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center safe")
|
||||
checkInvalidValues("true center")
|
||||
}, "Verify overflow keywords are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center space-between start")
|
||||
}, "Verify fallback values are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("10px left")
|
||||
checkInvalidValues("right 10%")
|
||||
}, "Verify numeric values are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("auto")
|
||||
checkInvalidValues("auto right")
|
||||
checkInvalidValues("auto auto")
|
||||
}, "Verify 'auto' value is invalid as first longhand value.");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("")
|
||||
}, "Verify empty declaration is invalid");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-items shorthand - inherit value</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" />
|
||||
<meta name="assert" content="Check that place-items's 'inherit' value expands to 'align-items' and 'justify-items'." />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#test {
|
||||
place-items: start end;
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
var child = document.createElement("div");
|
||||
document.getElementById("test").appendChild(child);
|
||||
child.setAttribute("style", "place-items: inherit");
|
||||
var style = getComputedStyle(child);
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("align-items"),
|
||||
"start", "place-items resolved value for align-items");
|
||||
}, "Check place-items: inherit - align-items resolved value");
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("justify-items"),
|
||||
"end", "place-items resolved value for justify-items");
|
||||
}, "Check place-items: inherit - justify-items resolved value");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-items shorthand - Shorthand 'specified' and 'resolved' value</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-items-property" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var values = ["normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(alignValue) {
|
||||
["", "auto"].concat(values).forEach(function(justifyValue) {
|
||||
var value = (alignValue + " " + justifyValue).trim();
|
||||
test(function() {
|
||||
checkPlaceShorhand("place-items", alignValue, justifyValue)
|
||||
}, "Checking place-items: " + value);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Box Alignment: space-evenly & flexbox with single item</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="justify-content: space-evenly with flexbox and a single item must center it">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel=help href="https://drafts.csswg.org/css-align/#distribution-values">
|
||||
<link rel=help href="https://drafts.csswg.org/css-align/#fallback-alignment">
|
||||
<link rel=help href="https://drafts.csswg.org/css-flexbox-1/#justify-content-property">
|
||||
<style>
|
||||
.red {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
.container {
|
||||
margin-left: -100px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.container div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class=red></div>
|
||||
<div class=container><div></div></div>
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ttwf-reftest-alignContent-ref</title>
|
||||
<link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#align-content">
|
||||
<style type="text/css">
|
||||
#main{
|
||||
display:table;
|
||||
position:relative;
|
||||
font-size:0;
|
||||
width:70px;
|
||||
border:1px solid #c3c3c3;
|
||||
}
|
||||
#main .sample{
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:50%;
|
||||
z-index:-1;
|
||||
margin:-35px 0 0;
|
||||
}
|
||||
#main > span{
|
||||
display:inline-block;
|
||||
width:70px;
|
||||
height:70px;
|
||||
margin:50px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>PASS if there is no red box.</p>
|
||||
<div id="main">
|
||||
<span class="sample" style="background-color:red;"></span>
|
||||
<span style="background-color:green;"></span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
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"];
|
||||
|
||||
function checkPlaceShorhand(shorthand, alignValue, justifyValue)
|
||||
{
|
||||
var div = document.createElement("div");
|
||||
var specifiedValue = (alignValue + " " + justifyValue).trim();
|
||||
div.style[shorthand] = specifiedValue;
|
||||
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");
|
||||
// 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");
|
||||
}
|
||||
|
||||
function checkPlaceShorhandLonghands(shorthand, alignLonghand, justifyLonghand, alignValue, justifyValue = "")
|
||||
{
|
||||
var div = document.createElement("div");
|
||||
div.setAttribute("style", shorthand + ": " + alignValue + " " + justifyValue);
|
||||
document.body.appendChild(div);
|
||||
if (justifyValue === "")
|
||||
justifyValue = alignValue;
|
||||
assert_equals(div.style[alignLonghand],
|
||||
alignValue, alignLonghand + " expanded value");
|
||||
assert_equals(div.style[justifyLonghand],
|
||||
justifyValue, justifyLonghand + " expanded value");
|
||||
}
|
||||
|
||||
function checkPlaceShorthandInvalidValues(shorthand, alignLonghand, justifyLonghand, value)
|
||||
{
|
||||
var div = document.createElement("div");
|
||||
var css = alignLonghand + ": start; " + justifyLonghand + ": end;" + shorthand + ": " + value;
|
||||
div.setAttribute("style", css);
|
||||
document.body.appendChild(div);
|
||||
assert_equals(div.style[alignLonghand],
|
||||
"start", alignLonghand + " expanded value");
|
||||
assert_equals(div.style[justifyLonghand],
|
||||
"end", justifyLonghand + " expanded value");
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-self shorthand - single values specified</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var values = ["auto", "normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(value) {
|
||||
test(function() {
|
||||
checkPlaceShorhandLonghands("place-self", "align-self", "justify-self", value);
|
||||
}, "Checking place-self: " + value);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-self shorthand - multiple values specified</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var values = ["auto", "normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(alignValue) {
|
||||
values.forEach(function(justifyValue) {
|
||||
test(function() {
|
||||
checkPlaceShorhandLonghands("place-self", "align-self", "justify-self", alignValue, justifyValue);
|
||||
}, "Checking place-self: " + alignValue + " " + justifyValue);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-self shorthand - initial value</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" />
|
||||
<meta name="assert" content="Check that place-self's 'initial' value expands to 'align-self' and 'justify-self'." />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var div = document.createElement("div");
|
||||
document.body.appendChild(div);
|
||||
div.style["align-self"] = "start";
|
||||
div.style["justify-self"] = "end";
|
||||
div.setAttribute("style", "place-self: initial");
|
||||
|
||||
test(function() {
|
||||
assert_equals(div.style["align-self"],
|
||||
"initial", "place-self specified value for align-self");
|
||||
}, "Check place-self: initial - align-self expanded value");
|
||||
|
||||
test(function() {
|
||||
assert_equals(div.style["justify-self"],
|
||||
"initial", "place-self specified value for justify-self");
|
||||
}, "Check place-self: initial - justify-self expanded value");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-self shorthand - invalid values</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
function checkInvalidValues(value)
|
||||
{
|
||||
checkPlaceShorthandInvalidValues("place-self", "align-self", "justify-self", value);
|
||||
}
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center safe")
|
||||
checkInvalidValues("true center")
|
||||
}, "Verify overflow keywords are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("center space-between start")
|
||||
}, "Verify fallback values are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("10px left")
|
||||
checkInvalidValues("right 10%")
|
||||
}, "Verify numeric values are invalid");
|
||||
|
||||
test(function() {
|
||||
checkInvalidValues("")
|
||||
}, "Verify empty declaration is invalid");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-self shorthand - inherit value</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" />
|
||||
<meta name="assert" content="Check that place-self's 'inherit' value expands to 'align-self' and 'justify-self'." />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#test {
|
||||
place-self: start end;
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
var child = document.createElement("div");
|
||||
document.getElementById("test").appendChild(child);
|
||||
child.setAttribute("style", "place-self: inherit");
|
||||
var style = getComputedStyle(child);
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("align-self"),
|
||||
"start", "place-self resolved value for align-self");
|
||||
}, "Check place-self: inherit - align-self resolved value");
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("justify-self"),
|
||||
"end", "place-self resolved value for justify-self");
|
||||
}, "Check place-self: inherit - justify-self resolved value");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Box Alignment: place-self shorthand - Shorthand 'specified' and 'resolved' value</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#place-self-property" />
|
||||
<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>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var values = ["auto", "normal", "stretch"].concat(selfPositionValues, baselineValues);
|
||||
values.forEach(function(alignValue) {
|
||||
[""].concat(values).forEach(function(justifyValue) {
|
||||
var value = (alignValue + " " + justifyValue).trim();
|
||||
test(function() {
|
||||
checkPlaceShorhand("place-self", alignValue, justifyValue)
|
||||
}, "Checking place-self: " + value);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ttwf-reftest-alignContent-ref</title>
|
||||
<link rel="author" title="Heechang Kang" href="mailto:hckang80@gmail.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-align/#content-distribution">
|
||||
<style type="text/css">
|
||||
#main{
|
||||
display:flex;
|
||||
flex-flow:row wrap;
|
||||
align-content:space-around;
|
||||
position:relative;
|
||||
width:70px;
|
||||
height:170px;
|
||||
border:1px solid #c3c3c3;
|
||||
}
|
||||
#main .sample{
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:50%;
|
||||
z-index:-1;
|
||||
margin:-35px 0 0;
|
||||
}
|
||||
#main > span{
|
||||
display:inline-block;
|
||||
width:70px;
|
||||
height:70px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>PASS if there is no red box.</p>
|
||||
<div id="main">
|
||||
<span class="sample" style="background-color:red;"></span>
|
||||
<span style="background-color:green;"></span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue