Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-align/self-alignment
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
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>
+
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-align/self-alignment
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip