diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-align/default-alignment')
19 files changed, 668 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/default-alignment/justify-items-legacy-001.html b/testing/web-platform/tests/css/css-align/default-alignment/justify-items-legacy-001.html new file mode 100644 index 0000000000..c4164d2b25 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/justify-items-legacy-001.html @@ -0,0 +1,26 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Box Alignment: legacy value for justify-items</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-align/#justify-items-property"> +<meta name="assert" content="Tests that legacy justify-items values are correctly inherited."> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> +#container { + justify-items: legacy center; +} +</style> +<div id="container"><span id="child"></span></div> +<script> + test(function() { + assert_equals(getComputedStyle(child).justifyItems, "legacy center", + "default justify-items resolves to the parent justify-items value if legacy") + container.style.justifyItems = "legacy left"; + assert_equals(getComputedStyle(child).justifyItems, "legacy left", + "dynamic changes to justify-items propagate to children if needed (legacy)") + container.style.justifyItems = "left"; + assert_equals(getComputedStyle(child).justifyItems, "normal", + "dynamic changes to justify-items propagate to children if needed (left)") + }, "legacy value for justify-items") +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-001.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-001.html new file mode 100644 index 0000000000..4a7d1b816c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "alignItems" + key; + document.body.appendChild(element); + test(function() { + if (specifiedValue === "first baseline") + checkValues(element, "alignItems", "align-items", "", "baseline"); + else + checkValues(element, "alignItems", "align-items", "", specifiedValue); + }, "Checking align-items: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-002.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-002.html new file mode 100644 index 0000000000..79b1d60b2f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "alignItems", "align-items", "", "normal"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "alignItems", "align-items", "center", "normal"); +}, "Test align-items: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "alignItems", "align-items", "safe start", "normal"); +}, "Test grid items align-items: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "alignItems", "align-items", "unsafe end", "normal"); +}, "Test flex items align-items: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "alignItems", "align-items", "start", "normal"); +}, "Test absolute positioned elements align-items: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "alignItems", "align-items", "end", "normal"); +}, "Test absolute positioned grid items align-items: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "alignItems", "align-items", "end", "normal"); +}, "Test absolute positioned flex items align-items: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-003.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-003.html new file mode 100644 index 0000000000..aa6b295dc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.alignItems = ""; + element.style.alignItems = specifiedValue; + if (specifiedValue === "first baseline") + checkValues(element, "alignItems", "align-items", "baseline", "baseline"); + else + checkValues(element, "alignItems", "align-items", specifiedValue, specifiedValue); + }, "Checking align-items: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-004.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-004.html new file mode 100644 index 0000000000..2cd306a759 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["auto", "legacy", "space-around", "left", "safe right"].concat(invalidPositionValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "alignItems", "align-items", value); + }, "Checking invalid combination - align-items: " + value); + }); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-005.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-005.html new file mode 100644 index 0000000000..6dc0ad684f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: align-items - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items" /> +<meta name="assert" content="Check bad cobinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("alignItems", "align-items", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("alignItems", "align-items", "safe start"); +}, "Test the value 'inherit' overrides current value ('safe start')"); +test(function() { + checkInheritValues("alignItems", "align-items", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-001.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-001.html new file mode 100644 index 0000000000..b2edd2affc --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch", "Left":"left", "Right":"right"}, + selfPositionClasses, baselineClasses, overflowClasses, legacyClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "justifyItems" + key; + document.body.appendChild(element); + test(function() { + if (specifiedValue === "first baseline") + checkValues(element, "justifyItems", "justify-items", "", "baseline"); + else + checkValues(element, "justifyItems", "justify-items", "", specifiedValue); + }, "Checking justify-items: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-002.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-002.html new file mode 100644 index 0000000000..1806fa2c72 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "justifyItems", "justify-items", "", "normal"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "justifyItems", "justify-items", "center", "normal"); +}, "Test justify-items: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "justifyItems", "justify-items", "safe start", "normal"); +}, "Test grid items justify-items: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "justifyItems", "justify-items", "unsafe end", "normal"); +}, "Test flex items justify-items: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "justifyItems", "justify-items", "start", "normal"); +}, "Test absolute positioned elements justify-items: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "justifyItems", "justify-items", "end", "normal"); +}, "Test absolute positioned grid items justify-items: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "justifyItems", "justify-items", "end", "normal"); +}, "Test absolute positioned flex items justify-items: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-003.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-003.html new file mode 100644 index 0000000000..6da7d7677a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch", "Left":"left", "Right":"right"}, + selfPositionClasses, baselineClasses, overflowClasses, legacyClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.justifyItems = ""; + element.style.justifyItems = specifiedValue; + if (specifiedValue === "first baseline") + checkValues(element, "justifyItems", "justify-items", "baseline", "baseline"); + else + checkValues(element, "justifyItems", "justify-items", specifiedValue, specifiedValue); + }, "Checking justify-items: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-004.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-004.html new file mode 100644 index 0000000000..70e80b2a42 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["auto", "space-around"].concat(invalidPositionValues, invalidLegacyValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "justifyItems", "justify-items", value); + }, "Checking invalid combination - justify-items: " + value); + }); + +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-005.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-005.html new file mode 100644 index 0000000000..b4814da1aa --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<meta name="assert" content="Check the 'inherit' value in different scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("justifyItems", "justify-items", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("justifyItems", "justify-items", "safe left"); +}, "Test the value 'inherit' overrides current value ('safe left')"); +test(function() { + checkInheritValues("justifyItems", "justify-items", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-006.html b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-006.html new file mode 100644 index 0000000000..f64b52e0f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-006.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Default-Alignment: justify-items - use of the 'legacy' keyword</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#default-alignment" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items" /> +<meta name="assert" content="Check the use of the 'legacy' keyword in different scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkLegacyValues("justifyItems", "justify-items", "legacy left"); +}, "Test the value justify-items: legacy left"); +test(function() { + checkLegacyValues("justifyItems", "justify-items", "legacy center"); +}, "Test the value justify-items: legacy center"); +test(function() { + checkLegacyValues("justifyItems", "justify-items", "legacy right"); +}, "Test the value justify-items: legacy right"); +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-001.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-001.html new file mode 100644 index 0000000000..5b63c87812 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-001.html @@ -0,0 +1,19 @@ +<!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="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses, + overflowClasses); + for (var key in classes) { + let value = classes[key]; + test(function() { + checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", value); + }, "Checking place-items: " + value); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-002.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-002.html new file mode 100644 index 0000000000..3a075b20d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-002.html @@ -0,0 +1,23 @@ +<!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="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses, + overflowClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Left":"left", "Right":"right"}, legacyClasses, classes); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + test(function() { + checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", alignValue, justifyValue); + }, "Checking place-items: " + alignValue + " " + justifyValue); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-003.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-003.html new file mode 100644 index 0000000000..00ef149cef --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-004.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-004.html new file mode 100644 index 0000000000..f0d245c041 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-004.html @@ -0,0 +1,34 @@ +<!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="/css/css-align/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 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/default-alignment/place-items-shorthand-005.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-005.html new file mode 100644 index 0000000000..b4f47c75e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-006.html b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-006.html new file mode 100644 index 0000000000..4c55b1058d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-006.html @@ -0,0 +1,23 @@ +<!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="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + var value = (alignValue + " " + justifyValue).trim(); + test(function() { + checkPlaceShorhand("place-items", value, alignValue, justifyValue) + }, "Checking place-items: " + value); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/default-alignment/shorthand-serialization-001.html b/testing/web-platform/tests/css/css-align/default-alignment/shorthand-serialization-001.html new file mode 100644 index 0000000000..eeff8af4b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/default-alignment/shorthand-serialization-001.html @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset=utf-8> + <title>Test serialization of CSS Align shorthand properties</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> + +<script> + +var initial_values = { + alignContent: "normal", + alignItems: "normal", + alignSelf: "auto", + justifyContent: "normal", + justifyItems: "legacy", + justifySelf: "auto", +}; + +var place_content_test_cases = [ + { + alignContent: "center", + shorthand: "center normal", + }, + { + alignContent: "baseline safe right", + shorthand: "", + }, + { + justifyContent: "safe start", + shorthand: "normal safe start", + }, + { + justifyContent: "unsafe start", + shorthand: ["normal unsafe start"], + }, + { + justifyContent: "space-evenly start", + shorthand: "", + }, + { + alignContent: "start", + justifyContent: "end", + shorthand: "start end", + }, +]; + +var place_items_test_cases = [ + { + alignItems: "center", + shorthand: "center legacy", + }, + { + alignItems: "baseline", + shorthand: "baseline legacy", + }, + { + justifyItems: "safe start", + shorthand: "normal safe start", + }, + { + justifyItems: "unsafe start", + shorthand: ["normal unsafe start"], + }, + { + justifyItems: "stretch", + shorthand: "normal stretch", + }, + { + justifyItems: "left legacy", + shorthand: "normal legacy left", + }, + { + alignItems: "stretch", + justifyItems: "end", + shorthand: "stretch end", + }, +]; + +var place_self_test_cases = [ + { + alignSelf: "self-end safe", + shorthand: "", + }, + { + justifySelf: "unsafe start", + shorthand: ["auto start", "auto unsafe start"], + }, + { + justifySelf: "last baseline start", + shorthand: "", + }, + { + alignSelf: "baseline", + justifySelf: "last baseline", + shorthand: "baseline last baseline", + }, +]; + +function run_tests(test_cases, shorthand, subproperties) { + test_cases.forEach(function(test_case) { + test(function() { + var element = document.createElement('div'); + document.body.appendChild(element); + subproperties.forEach(function(longhand) { + element.style[longhand] = test_case[longhand] || + initial_values[longhand]; + }); + if (Array.isArray(test_case.shorthand)) { + assert_in_array(element.style[shorthand], test_case.shorthand); + } else { + assert_equals(element.style[shorthand], test_case.shorthand); + } + }, "test shorthand serialization " + JSON.stringify(test_case)); + }); +} + +run_tests(place_content_test_cases, "placeContent", [ + "alignContent", "justifyContent"]); +run_tests(place_items_test_cases, "placeItems", [ + "alignItems", "justifyItems"]); +run_tests(place_self_test_cases, "placeSelf", [ + "alignSelf", "justifySelf"]); + +</script> +</body> +</html> |