diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-align/self-alignment')
28 files changed, 2500 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-001.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-001.html new file mode 100644 index 0000000000..b19372d503 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-002.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-002.html new file mode 100644 index 0000000000..31af7806e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-003.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-003.html new file mode 100644 index 0000000000..a2f3351fe2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-004.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-004.html new file mode 100644 index 0000000000..354994704e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-005.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-005.html new file mode 100644 index 0000000000..37e15f85e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-align-self-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-001.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-001.html new file mode 100644 index 0000000000..4b321d5985 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-002.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-002.html new file mode 100644 index 0000000000..45403c7a0d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-003.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-003.html new file mode 100644 index 0000000000..96729166f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-004.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-004.html new file mode 100644 index 0000000000..ab81bf954d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-005.html b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-005.html new file mode 100644 index 0000000000..61b44be359 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/parse-justify-self-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-001.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-001.html new file mode 100644 index 0000000000..bd95302c3f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-001.html @@ -0,0 +1,19 @@ +<!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="/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 value = classes[key]; + test(function() { + checkPlaceShorhandLonghands("place-self", "align-self", "justify-self", value); + }, "Checking place-self: " + value); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-002.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-002.html new file mode 100644 index 0000000000..47bb78e3b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-002.html @@ -0,0 +1,23 @@ +<!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="/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 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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-003.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-003.html new file mode 100644 index 0000000000..a946ef3ed6 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-004.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-004.html new file mode 100644 index 0000000000..b7c9d80e71 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-004.html @@ -0,0 +1,34 @@ +<!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="/css/css-align/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 end 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%") + }, "Verify numeric values are invalid"); + + test(function() { + checkInvalidValues("") + }, "Verify empty declaration is invalid"); +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-005.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-005.html new file mode 100644 index 0000000000..d74f03993c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-006.html b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-006.html new file mode 100644 index 0000000000..fb5dce1b13 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/place-self-shorthand-006.html @@ -0,0 +1,24 @@ +<!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="/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); + 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", value, alignValue, justifyValue) + }, "Checking place-self: " + value); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001-ref.html new file mode 100644 index 0000000000..69d7f34708 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001-ref.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + } + + .item { + background: orange; + width: 100%; + } + + /* Test */ + .small .item { + height: 20px; + } + .large .item { + height: 40px; + } + + .small .center + { margin-top: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-top: 10px } + .large .center + { margin-top: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-top: -10px; } + .safe .item + { margin-top: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001.html new file mode 100644 index 0000000000..bb933b99d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-001.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<title>Safe vs Unsafe align-self in Row Flex Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="self-align-safe-unsafe-flex-001-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + display: flex; + } + + .item { + background: orange; + flex: none; + width: 100%; + } + + /* Test */ + .small .item { + height: 20px; + } + .large .item { + height: 40px; + } + + .center { align-self: center; } + .start { align-self: start; } + .end { align-self: end; } + .self-start { align-self: self-start; } + .self-end { align-self: self-end; } + .flex-start { align-self: flex-start; } + .flex-end { align-self: flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002-ref.html new file mode 100644 index 0000000000..92893d25da --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002-ref.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .small .center + { margin-left: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-left: 10px } + .large .center + { margin-left: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-left: -10px; } + .safe .item + { margin-left: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002.html new file mode 100644 index 0000000000..c7dc1c1aea --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-002.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<title>Safe vs Unsafe align-self in Column Flex Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="self-align-safe-unsafe-flex-002-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + display: flex; + flex-flow: column; + } + + .item { + background: orange; + flex: none; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .center { align-self: center; } + .start { align-self: start; } + .end { align-self: end; } + .self-start { align-self: self-start; } + .self-end { align-self: self-end; } + .flex-start { align-self: flex-start; } + .flex-end { align-self: flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003-ref.html new file mode 100644 index 0000000000..279ec4bb0b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003-ref.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<html dir=rtl> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: right; + width: 30px; + height: 30px; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .small .center + { margin-right: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-right: 10px } + .large .center + { margin-right: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-right: -10px; } + .safe .item + { margin-right: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003.html new file mode 100644 index 0000000000..41829f7729 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-flex-003.html @@ -0,0 +1,176 @@ +<!DOCTYPE html> +<html dir=rtl> +<title>Safe vs Unsafe align-self in RTL Column Flex Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> +<link rel="match" href="self-align-safe-unsafe-flex-003-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: right; + width: 30px; + height: 30px; + display: flex; + flex-flow: column; + } + + .item { + background: orange; + flex: none; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .center { align-self: center; } + .start { align-self: start; } + .end { align-self: end; } + .self-start { align-self: self-start; } + .self-end { align-self: self-end; } + .flex-start { align-self: flex-start; } + .flex-end { align-self: flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001-ref.html new file mode 100644 index 0000000000..f644611795 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001-ref.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + } + + .item { + background: orange; + width: 100%; + } + + /* Test */ + .small .item { + height: 20px; + } + .large .item { + height: 40px; + } + + .small .center + { margin-top: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-top: 10px } + .large .center + { margin-top: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-top: -10px; } + .large.safe .item + { margin-top: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001.html new file mode 100644 index 0000000000..0c50934627 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-001.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<title>Safe vs Unsafe align-self in Grid Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#column-align"> +<link rel="match" href="self-align-safe-unsafe-grid-001-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + display: grid; + grid: 100% / 100%; + } + + .item { + background: orange; + width: 100%; + } + + /* Test */ + .small .item { + height: 20px; + } + .large .item { + height: 40px; + } + + .center { align-self: center; } + .start { align-self: start; } + .end { align-self: end; } + .self-start { align-self: self-start; } + .self-end { align-self: self-end; } + .flex-start { align-self: flex-start; } + .flex-end { align-self: flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } + + .safe .center { align-self: safe center; } + .safe .start { align-self: safe start; } + .safe .end { align-self: safe end; } + .safe .self-start { align-self: safe self-start; } + .safe .self-end { align-self: safe self-end; } + .safe .flex-start { align-self: safe flex-start; } + .safe .flex-end { align-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002-ref.html new file mode 100644 index 0000000000..a86c7e4ae0 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002-ref.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .small .center + { margin-left: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-left: 10px } + .large .center + { margin-left: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-left: -10px; } + .large.safe .item + { margin-left: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002.html new file mode 100644 index 0000000000..ce6688ed1e --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-002.html @@ -0,0 +1,174 @@ +<!DOCTYPE html> +<title>Safe vs Unsafe justify-self in Grid Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/row-align"> +<link rel="match" href="self-align-safe-unsafe-grid-002-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: left; + width: 30px; + height: 30px; + display: grid; + grid: 100% / 100%; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .center { justify-self: center; } + .start { justify-self: start; } + .end { justify-self: end; } + .self-start { justify-self: self-start; } + .self-end { justify-self: self-end; } + .flex-start { justify-self: flex-start; } + .flex-end { justify-self: flex-end; } + + .safe .center { justify-self: safe center; } + .safe .start { justify-self: safe start; } + .safe .end { justify-self: safe end; } + .safe .self-start { justify-self: safe self-start; } + .safe .self-end { justify-self: safe self-end; } + .safe .flex-start { justify-self: safe flex-start; } + .safe .flex-end { justify-self: safe flex-end; } + + .safe .center { justify-self: safe center; } + .safe .start { justify-self: safe start; } + .safe .end { justify-self: safe end; } + .safe .self-start { justify-self: safe self-start; } + .safe .self-end { justify-self: safe self-end; } + .safe .flex-start { justify-self: safe flex-start; } + .safe .flex-end { justify-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003-ref.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003-ref.html new file mode 100644 index 0000000000..0d0b17977d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003-ref.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<html dir=rtl> +<title>Reftest Reference</title> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: right; + width: 30px; + height: 30px; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .small .center + { margin-right: 5px } + .small .end, + .small .self-end, + .small .flex-end + { margin-right: 10px } + .large .center + { margin-right: -5px; } + .large .end, + .large .self-end, + .large .flex-end + { margin-right: -10px; } + .large.safe .item + { margin-right: 0; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html new file mode 100644 index 0000000000..9695f0a2f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<html dir=rtl> +<title>Safe vs Unsafe justify-self in RTL Grid Layout</title> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align"> +<link rel="match" href="self-align-safe-unsafe-grid-003-ref.html"> +<style> + /* Label things */ + body > div { + display: flow-root; + } + body > div::before { + display: block; + content: attr(class); + font-size: 10px; + margin-top: 10px; + } + + /* Test Framework */ + .container { + border: solid aqua; + margin: 10px; + float: right; + width: 30px; + height: 30px; + display: grid; + grid: 100% / 100%; + } + + .item { + background: orange; + height: 100%; + } + + /* Test */ + .small .item { + width: 20px; + } + .large .item { + width: 40px; + } + + .center { justify-self: center; } + .start { justify-self: start; } + .end { justify-self: end; } + .self-start { justify-self: self-start; } + .self-end { justify-self: self-end; } + .flex-start { justify-self: flex-start; } + .flex-end { justify-self: flex-end; } + + .safe .center { justify-self: safe center; } + .safe .start { justify-self: safe start; } + .safe .end { justify-self: safe end; } + .safe .self-start { justify-self: safe self-start; } + .safe .self-end { justify-self: safe self-end; } + .safe .flex-start { justify-self: safe flex-start; } + .safe .flex-end { justify-self: safe flex-end; } + + .safe .center { justify-self: safe center; } + .safe .start { justify-self: safe start; } + .safe .end { justify-self: safe end; } + .safe .self-start { justify-self: safe self-start; } + .safe .self-end { justify-self: safe self-end; } + .safe .flex-start { justify-self: safe flex-start; } + .safe .flex-end { justify-self: safe flex-end; } +</style> + +<div class="default small"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="default large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="unsafe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + +<div class="safe large"> + <div class="container"> + <div class="item normal"></div> + </div> + <div class="container"> + <div class="item center"></div> + </div> + <div class="container"> + <div class="item start"></div> + </div> + <div class="container"> + <div class="item end"></div> + </div> + <div class="container"> + <div class="item self-start"></div> + </div> + <div class="container"> + <div class="item self-end"></div> + </div> + <div class="container"> + <div class="item flex-start"></div> + </div> + <div class="container"> + <div class="item flex-end"></div> + </div> +</div> + |