summaryrefslogtreecommitdiff
path: root/layout/reftests
diff options
context:
space:
mode:
authorFranklinDM <mrmineshafter17@gmail.com>2022-04-02 20:23:26 +0800
committerFranklinDM <mrmineshafter17@gmail.com>2022-04-02 23:14:36 +0800
commitb226f8942d95c5fa8b29ca249e3cd39a7a4d6e7f (patch)
tree0c21492d67953bbd9da3f6827e5efdf9efb94bc6 /layout/reftests
parentf1c2ba75d1067ae2610eacbfae56b7b71ebfa223 (diff)
downloaduxp-b226f8942d95c5fa8b29ca249e3cd39a7a4d6e7f.tar.gz
Issue #1838 - Part 7: Update tests
Diffstat (limited to 'layout/reftests')
-rw-r--r--layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html6
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html7
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001-ref.html97
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001.html65
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002-ref.html67
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002.html62
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003-ref.html63
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003.html61
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004-ref.html68
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004.html64
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute-ref.html20
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute.html26
-rw-r--r--layout/reftests/w3c-css/submitted/flexbox/reftest.list7
13 files changed, 608 insertions, 5 deletions
diff --git a/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html b/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
index 7ad85e1e58..1970d10e37 100644
--- a/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
+++ b/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
@@ -65,7 +65,7 @@ br { clear: both; }
</div>
<div class="float">
-<div class="grid" style="width:60px; height:60px; grid-column-gap:12px">
+<div class="grid" style="width:60px; height:60px; gap:12px">
<span><x></x></span>
<span><x></x></span>
<span><x></x></span>
@@ -74,7 +74,7 @@ br { clear: both; }
</div>
<div class="inline-grid">
-<div class="grid" style="width:60px; height:60px; grid-column-gap:12px; align-self:start; justify-self:start;">
+<div class="grid" style="width:60px; height:60px; gap:12px; align-self:start; justify-self:start;">
<span><x></x></span>
<span><x></x></span>
<span><x></x></span>
@@ -142,7 +142,7 @@ br { clear: both; }
</div>
<div class="float" style="margin-top:-50px; width:62px">
-<div class="grid" style="padding-left:186px; height:60px; grid-column-gap:calc(186px * 0.2);">
+<div class="grid" style="padding-left:186px; height:60px; gap:12px calc(186px * 0.2);">
<span style="margin-left:-186px; width:30px"><x></x></span>
<span style="margin-left:-186px; width:30px"><x></x></span>
<span style="margin-left:-186px; width:30px"><x></x></span>
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
index 682e0ca38e..8de84391eb 100644
--- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
@@ -83,15 +83,18 @@ fill,fit {
.zero-progress {
grid-row-gap: calc(10px - 1%);
- grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
+ grid-template-rows: [a] 10px repeat(3, [b] calc(4px / 10) [c]) [d];
+ height:40px;
}
.w50.zero-progress {
grid-row-gap: calc(10px - 1%);
grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
+ height:50px;
}
.mw50.zero-progress {
grid-row-gap: calc(10px - 1%);
- grid-template-rows: [a] 10px repeat(4, [b] 0 [c]) [d];
+ grid-template-rows: [a] 10px repeat(4, [b] calc(5px / 10) [c]) [d];
+ height:50px;
}
</style>
</head>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001-ref.html
new file mode 100644
index 0000000000..0606afe539
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001-ref.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<!--
+ Reference for the correctness of gaps in horizontal and vertical multi-line
+ flex containers.
+-->
+<html>
+<head>
+ <title>Reference: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .outerBox {
+ width: 200px;
+ height: 220px;
+ border: 1px solid black;
+ float: left;
+ }
+ .flexContainer {
+ display: flex;
+ align-content: space-around;
+ justify-content: space-around;
+ }
+ .rowNoWrap {
+ flex-flow: row nowrap;
+ }
+ .columnNoWrap {
+ flex-flow: column nowrap;
+ }
+ .item {
+ border: 1px solid blue;
+ background: lightblue;
+ width: 28px;
+ height: 28px;
+ }
+ .autoLBMargins {
+ margin-left: auto;
+ margin-bottom: auto;
+ }
+ .autoBMargin {
+ margin-bottom: auto;
+ }
+ .right20 {
+ margin-right: 20px;
+ }
+ .bottom40 {
+ margin-bottom: 40px;
+ }
+ .tb30100 {
+ margin-top: 30px;
+ margin-bottom: 100px;
+ }
+ .lr3080 {
+ margin-left: 30px;
+ margin-right: 80px;
+ }
+ .w200 {
+ width: 200px;
+ }
+ .h220 {
+ height: 220px;
+ }
+ .fleft {
+ float: left;
+ }
+ </style>
+</head>
+<body>
+ <div class="outerBox">
+ <div class="flexContainer w200 rowNoWrap tb30100">
+ <div class="item right20"></div>
+ <div class="item right20"></div>
+ <div class="item right20"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer w200 rowNoWrap">
+ <div class="item autoLBMargins right20"></div>
+ <div class="item"></div>
+ </div>
+ </div>
+ <div class="outerBox">
+ <div class="flexContainer fleft h220 columnNoWrap lr3080">
+ <div class="item bottom40"></div>
+ <div class="item bottom40"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer fleft h220 columnNoWrap">
+ <div class="item bottom40"></div>
+ <div class="item bottom40"></div>
+ <div class="item autoBMargin"></div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001.html
new file mode 100644
index 0000000000..25b28e8094
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<!--
+ Testcase for the correctness of gaps in horizontal and vertical multi-line
+ flex containers.
+-->
+<html>
+<head>
+ <title>CSS Test: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex">
+ <link rel="match" href="flexbox-column-row-gap-001-ref.html">
+ <meta charset="utf-8">
+ <style>
+ .flexContainer {
+ display: flex;
+ width: 200px;
+ height: 220px;
+ border: 1px solid black;
+ column-gap: 10%;
+ row-gap: 40px;
+ align-content: space-around;
+ justify-content: space-around;
+ float: left;
+ }
+ .rowWrap {
+ flex-flow: row wrap;
+ }
+ .columnWrap {
+ flex-flow: column wrap;
+ }
+ .item {
+ border: 1px solid blue;
+ background: lightblue;
+ width: 28px;
+ height: 28px;
+ }
+ .autoLBMargins {
+ margin-left: auto;
+ margin-bottom: auto;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexContainer rowWrap">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer columnWrap">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002-ref.html
new file mode 100644
index 0000000000..e23ddfe261
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002-ref.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<!--
+ Testcase for the correctness of gaps in vertical writing mode
+ multi-line flex containers.
+-->
+<html>
+<head>
+ <title>Reference: Testing row and column gaps in vertical writing mode multi-line flex containers</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .flexContainer {
+ display: flex;
+ width: 220px;
+ height: 200px;
+ border: 1px solid black;
+ align-content: flex-start;
+ justify-content: flex-end;
+ float: left;
+ writing-mode: vertical-lr;
+ }
+ .rowWrap {
+ flex-flow: row wrap;
+ }
+ .columnWrap {
+ flex-flow: column wrap;
+ }
+ .item {
+ border: 1px solid blue;
+ background: lightblue;
+ width: 28px;
+ height: 28px;
+ }
+ .b20 {
+ margin-bottom: 20px;
+ }
+ .t20 {
+ margin-top: 20px;
+ }
+ .l10 {
+ margin-left: 10px;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexContainer rowWrap">
+ <div class="item b20"></div>
+ <div class="item b20"></div>
+ <div class="item b20"></div>
+ <div class="item"></div>
+ <div class="item l10 b20"></div>
+ <div class="item l10"></div>
+ </div>
+ <div class="flexContainer columnWrap">
+ <div class="item"></div>
+ <div class="item l10"></div>
+ <div class="item l10"></div>
+ <div class="item l10"></div>
+ <div class="item l10"></div>
+ <div class="item l10 t20"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002.html
new file mode 100644
index 0000000000..fcd19cf8d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<!--
+ Testcase for the correctness of gaps in vertical writing mode multi-line
+ flex containers.
+-->
+<html>
+<head>
+ <title>CSS Test: Testing row and column gaps in vertical writing mode multi-line flex containers</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex">
+ <link rel="match" href="flexbox-column-row-gap-002-ref.html">
+ <meta charset="utf-8">
+ <style>
+ .flexContainer {
+ display: flex;
+ width: 220px;
+ height: 200px;
+ border: 1px solid black;
+ column-gap: 10%;
+ row-gap: 10px;
+ align-content: flex-start;
+ justify-content: flex-end;
+ float: left;
+ writing-mode: vertical-lr;
+ }
+ .rowWrap {
+ flex-flow: row wrap;
+ }
+ .columnWrap {
+ flex-flow: column wrap;
+ }
+ .item {
+ border: 1px solid blue;
+ background: lightblue;
+ width: 28px;
+ height: 28px;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexContainer rowWrap">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer columnWrap">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003-ref.html
new file mode 100644
index 0000000000..6e7f220b44
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>Reference: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <meta charset="utf-8">
+</html>
+ <style>
+ .flexContainer {
+ display: flex;
+ border: 1px solid black;
+ column-gap: 20px;
+ row-gap: 40px;
+ align-content: space-around;
+ justify-content: space-around;
+ }
+ .rowWrap {
+ flex-flow: row wrap;
+ }
+ .item {
+ border: 1px solid blue;
+ background: lightblue;
+ width: 28px;
+ height: 28px;
+ }
+ .autoLBMargins {
+ margin-left: auto;
+ margin-bottom: auto;
+ }
+ .w200 {
+ width: 200px;
+ }
+ .h100 {
+ height: 100px;
+ }
+ .h90 {
+ height: 90px;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexContainer rowWrap w200 h100">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer rowWrap w200 h90">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ <div class="item"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003.html
new file mode 100644
index 0000000000..2dcd027173
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>CSS Test: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex">
+ <link rel="match" href="flexbox-column-row-gap-003-ref.html">
+ <meta charset="utf-8">
+ <style>
+ .flexContainer {
+ display: flex;
+ border: 1px solid black;
+ column-gap: 20px;
+ row-gap: 40px;
+ align-content: space-around;
+ justify-content: space-around;
+ }
+ .rowWrap {
+ flex-flow: row wrap;
+ }
+ .item {
+ border: 1px solid blue;
+ background: lightblue;
+ width: 28px;
+ height: 28px;
+ }
+ .autoLBMargins {
+ margin-left: auto;
+ margin-bottom: auto;
+ }
+ .w200 {
+ width: 200px;
+ }
+ .hclamp {
+ max-height: 90px;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexContainer rowWrap w200">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer rowWrap w200 hclamp">
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item"></div>
+ <div class="item autoLBMargins"></div>
+ <div class="item"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004-ref.html
new file mode 100644
index 0000000000..0b40fb2d62
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>Reference: Testing percentage gap resolution in flex containers</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <meta charset="utf-8">
+ <style>
+ .flexContainer {
+ display: flex;
+ border: 2px solid black;
+ column-gap: 10px;
+ align-content: start;
+ justify-content: start;
+ margin-top: 20px;
+ }
+ .item {
+ border: 1px solid blue;
+ background: yellow;
+ width: 48px;
+ height: 48px;
+ flex: none;
+ }
+ .vertLR {
+ writing-mode: vertical-lr;
+ }
+ .rowWrap {
+ flex-flow: row wrap;
+ }
+ .colWrap {
+ flex-flow: column wrap;
+ }
+ .w50 {
+ width: 50px;
+ }
+ .h100 {
+ height: 100px;
+ }
+ .w100 {
+ width: 100px;
+ }
+ .noWrap {
+ flex-wrap: nowrap;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexContainer rowWrap w50 h100">
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer colWrap w50 h100 noWrap">
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer vertLR rowWrap h100 w100">
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer vertLR colWrap w100 noWrap">
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004.html
new file mode 100644
index 0000000000..0d86b3818f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>CSS Test: Testing percentage gap resolution in flex containers</title>
+ <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+ <link rel="help" href="https://drafts.csswg.org/css-align/#column-row-gap">
+ <link rel="match" href="flexbox-column-row-gap-004-ref.html">
+ <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5081">
+ <meta charset="utf-8">
+ <meta name="assert" content="% row-gaps in a flexbox with indefinite block size are treated as 'normal'." />
+ <style>
+ .flexContainer {
+ display: flex;
+ border: 2px solid black;
+ row-gap: 20%;
+ column-gap: 10%;
+ align-content: start;
+ justify-content: start;
+ margin-top: 20px;
+ }
+ .item {
+ border: 1px solid blue;
+ background: yellow;
+ width: 48px;
+ height: 48px;
+ flex: none;
+ }
+ .vertLR {
+ writing-mode: vertical-lr;
+ }
+ .rowWrap {
+ flex-flow: row wrap;
+ }
+ .colWrap {
+ flex-flow: column wrap;
+ }
+ .w50 {
+ width: 50px;
+ }
+ </style>
+</head>
+<body>
+ <div class="flexContainer rowWrap w50">
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer colWrap w50">
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer vertLR rowWrap">
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+ <div class="flexContainer vertLR colWrap">
+ <div class="item"></div>
+ <div class="item"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute-ref.html
new file mode 100644
index 0000000000..7cea1fb1dd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexible Box Layout Test Reference: Test flexbox intrinsic inline-size, gap, and absolute-positioned children</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+ <style>
+ div {
+ display: inline-flex;
+ background: fuchsia;
+ }
+ </style>
+
+ <div>
+ <span>B</span>
+ <span style="width: 100px;"></span>
+ <span>C</span>
+ </div>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute.html
new file mode 100644
index 0000000000..850f1a42d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <title>CSS Flexible Box Layout Test: Test flexbox intrinsic inline-size, gap, and absolute-positioned children</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-sizes">
+ <link rel="help" href="https://drafts.csswg.org/css-align-3/#gaps">
+ <link rel="match" href="flexbox-gap-position-absolute-ref.html">
+ <meta name="assert" content="This test verifies the absolute-positioned children do not contribute the gap size to the flexbox's intrinsic inline-size.">
+
+ <style>
+ div {
+ display: inline-flex;
+ gap: 100px;
+ background: fuchsia;
+ }
+ </style>
+
+ <div>
+ <span style="position: absolute;"></span>
+ <span style="position: fixed;"></span>
+ <span>B</span>
+ <span>C</span>
+ </div>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/reftest.list b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
index 281ef4758f..075aa660e1 100644
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -91,6 +91,13 @@
== flexbox-collapsed-item-horiz-002.html flexbox-collapsed-item-horiz-002-ref.html
== flexbox-collapsed-item-horiz-003.html flexbox-collapsed-item-horiz-003-ref.html
+# Tests for "row gap" and "column gap"
+== flexbox-column-row-gap-001.html flexbox-column-row-gap-001-ref.html
+== flexbox-column-row-gap-002.html flexbox-column-row-gap-002-ref.html
+== flexbox-column-row-gap-003.html flexbox-column-row-gap-003-ref.html
+== flexbox-column-row-gap-004.html flexbox-column-row-gap-004-ref.html
+== flexbox-gap-position-absolute.html flexbox-gap-position-absolute-ref.html
+
# Tests for flex-flow shorthand property
== flexbox-flex-flow-001.html flexbox-flex-flow-001-ref.html
== flexbox-flex-flow-002.html flexbox-flex-flow-002-ref.html