From b226f8942d95c5fa8b29ca249e3cd39a7a4d6e7f Mon Sep 17 00:00:00 2001
From: FranklinDM <mrmineshafter17@gmail.com>
Date: Sat, 2 Apr 2022 20:23:26 +0800
Subject: Issue #1838 - Part 7: Update tests

---
 .../css-grid/grid-percent-grid-gap-001-ref.html    |  6 +-
 .../grid-repeat-auto-fill-fit-002-ref.html         |  7 +-
 .../flexbox/flexbox-column-row-gap-001-ref.html    | 97 ++++++++++++++++++++++
 .../flexbox/flexbox-column-row-gap-001.html        | 65 +++++++++++++++
 .../flexbox/flexbox-column-row-gap-002-ref.html    | 67 +++++++++++++++
 .../flexbox/flexbox-column-row-gap-002.html        | 62 ++++++++++++++
 .../flexbox/flexbox-column-row-gap-003-ref.html    | 63 ++++++++++++++
 .../flexbox/flexbox-column-row-gap-003.html        | 61 ++++++++++++++
 .../flexbox/flexbox-column-row-gap-004-ref.html    | 68 +++++++++++++++
 .../flexbox/flexbox-column-row-gap-004.html        | 64 ++++++++++++++
 .../flexbox/flexbox-gap-position-absolute-ref.html | 20 +++++
 .../flexbox/flexbox-gap-position-absolute.html     | 26 ++++++
 .../w3c-css/submitted/flexbox/reftest.list         |  7 ++
 13 files changed, 608 insertions(+), 5 deletions(-)
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute.html

(limited to 'layout/reftests')

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
-- 
cgit v1.2.3