diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs
index cf755a64d78..28854ecc048 100644
--- a/components/layout_2020/flexbox/layout.rs
+++ b/components/layout_2020/flexbox/layout.rs
@@ -247,7 +247,8 @@ impl FlexContainerConfig {
fn align_for(&self, align_self: AlignSelf) -> AlignItems {
let value = align_self.0 .0.value();
let mapped_value = match value {
- AlignFlags::AUTO | AlignFlags::NORMAL => self.align_items.0,
+ AlignFlags::AUTO => self.align_items.0,
+ AlignFlags::NORMAL => AlignFlags::STRETCH,
_ => value,
};
AlignItems(mapped_value)
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 63af96bbb98..cb73d4b1a64 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -122762,6 +122762,19 @@
{}
]
],
+ "self-align-normal-flex.html": [
+ "26a983dea028cb48617e905504bc456c489b3021",
+ [
+ null,
+ [
+ [
+ "/css/reference/ref-filled-green-100px-square.xht",
+ "=="
+ ]
+ ],
+ {}
+ ]
+ ],
"self-align-safe-unsafe-flex-001.html": [
"bb933b99d722d462b2b824d86fb15e825a598f5a",
[
diff --git a/tests/wpt/tests/css/css-align/self-alignment/self-align-normal-flex.html b/tests/wpt/tests/css/css-align/self-alignment/self-align-normal-flex.html
new file mode 100644
index 00000000000..26a983dea02
--- /dev/null
+++ b/tests/wpt/tests/css/css-align/self-alignment/self-align-normal-flex.html
@@ -0,0 +1,24 @@
+
+align-self:normal on flex items
+
+
+
+
+
+Test passes if there is a filled green square and no red.
+