summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-align/default-alignment
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-align/default-alignment')
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/justify-items-legacy-001.html26
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-001.html32
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-002.html57
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-003.html33
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-004.html23
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-align-items-005.html22
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-001.html32
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-002.html57
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-003.html33
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-004.html24
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-005.html22
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/parse-justify-items-006.html22
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-001.html19
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-002.html23
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-003.html25
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-004.html34
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-005.html30
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/place-items-shorthand-006.html23
-rw-r--r--testing/web-platform/tests/css/css-align/default-alignment/shorthand-serialization-001.html131
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>