Issue #1838 - Part 7: Update tests

author: FranklinDM <mrmineshafter17@gmail.com> 2022-04-02 20:23:26 +0800
committer: FranklinDM <mrmineshafter17@gmail.com> 2022-04-02 23:14:36 +0800
commit: b226f8942d95c5fa8b29ca249e3cd39a7a4d6e7f (patch)
tree: 0c21492d67953bbd9da3f6827e5efdf9efb94bc6
parent: f1c2ba75d1067ae2610eacbfae56b7b71ebfa223 (diff)
download: uxp-b226f8942d95c5fa8b29ca249e3cd39a7a4d6e7f.tar.gz
15 files changed, 644 insertions, 38 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
diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
index 13a70faa6a..e3e719771b 100644
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -1432,23 +1432,6 @@ var gCSSProperties = {
     alias_for: "column-fill",
     subproperties: [ "column-fill" ]
   },
-  "column-gap": {
-    domProp: "columnGap",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: [ "normal", "1em", "calc(-2em + 3em)" ],
-    other_values: [ "2px", "1em", "4em", "3%", "calc(3%)", "calc(1em - 3%)",
-      "calc(2px)",
-      "calc(-2px)",
-      "calc(0px)",
-      "calc(0pt)",
-      "calc(5em)",
-      "calc(3*25px)",
-      "calc(25px*3)",
-      "calc(3*25px + 5em)",
-    ],
-    invalid_values: [ "-3%", "-1px", "4" ]
-  },
   "-moz-column-gap": {
     domProp: "MozColumnGap",
     inherited: false,
@@ -6712,34 +6695,56 @@ gCSSProperties["grid-area"] = {
   invalid_values: gridAreaInvalidValues
 };
 
-gCSSProperties["grid-column-gap"] = {
-  domProp: "gridColumnGap",
+gCSSProperties["column-gap"] = {
+  domProp: "columnGap",
   inherited: false,
   type: CSS_TYPE_LONGHAND,
-  initial_values: [ "0" ],
+  initial_values: [ "normal" ],
   other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)",
                   "calc(1% + 1ch)" , "calc(1px - 99%)" ],
   invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%", "fit-content(1px)" ],
 };
-gCSSProperties["grid-row-gap"] = {
-  domProp: "gridRowGap",
+gCSSProperties["grid-column-gap"] = {
+  domProp: "gridColumnGap",
+  inherited: false,
+  type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+  alias_for: "column-gap",
+  subproperties: [ "column-gap" ]
+};
+gCSSProperties["row-gap"] = {
+  domProp: "rowGap",
   inherited: false,
   type: CSS_TYPE_LONGHAND,
-  initial_values: [ "0" ],
+  initial_values: [ "normal" ],
   other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)",
                   "calc(1% + 1ch)" , "calc(1px - 99%)" ],
   invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%", "min-content" ],
 };
-gCSSProperties["grid-gap"] = {
-  domProp: "gridGap",
+gCSSProperties["grid-row-gap"] = {
+  domProp: "gridRowGap",
+  inherited: false,
+  type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+  alias_for: "row-gap",
+  subproperties: [ "row-gap" ]
+};
+gCSSProperties["gap"] = {
+  domProp: "gap",
   inherited: false,
   type: CSS_TYPE_TRUE_SHORTHAND,
-  subproperties: [ "grid-column-gap", "grid-row-gap" ],
-  initial_values: [ "0", "0 0" ],
-  other_values: [ "1ch 0", "1px 1%", "1em 1px", "calc(1px) calc(1%)" ],
+  subproperties: [ "column-gap", "row-gap" ],
+  initial_values: [ "normal", "normal normal" ],
+  other_values: [ "1ch 0", "1px 1%", "1em 1px", "calc(1px) calc(1%)",
+                  "normal 0", "1% normal" ],
   invalid_values: [ "-1px", "1px -1px", "1px 1px 1px", "inherit 1px",
                     "1px auto" ]
 };
+gCSSProperties["grid-gap"] = {
+  domProp: "gridGap",
+  inherited: false,
+  type: CSS_TYPE_TRUE_SHORTHAND,
+  alias_for: "gap",
+  subproperties: [ "column-gap", "row-gap" ],
+};
 
 if (IsCSSPropertyPrefEnabled("layout.css.display-contents.enabled")) {
   gCSSProperties["display"].other_values.push("contents");
diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html
index 934d8828fe..2e300fbe83 100644
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -69,8 +69,6 @@ var supported_properties = {
     "box-shadow": [ test_shadow_transition ],
     "column-count": [ test_pos_integer_or_auto_transition,
                       test_integer_at_least_one_clamping ],
-    "column-gap": [ test_length_transition,
-                    test_length_clamped ],
     "column-rule-color": [ test_color_transition,
                            test_true_currentcolor_transition ],
     "column-rule-width": [ test_length_transition,
@@ -161,8 +159,8 @@ var supported_properties = {
                           /* test_float_zeroToOne_clamped */ ],
     "font-stretch": [ test_font_stretch ],
     "font-weight": [ test_font_weight ],
-    "grid-column-gap": [ test_grid_gap ],
-    "grid-row-gap": [ test_grid_gap ],
+    "column-gap": [ test_gap ],
+    "row-gap": [ test_gap ],
     "height": [ test_length_transition, test_percent_transition,
                 test_length_percent_calc_transition,
                 test_length_clamped, test_percent_clamped ],
@@ -1922,7 +1920,7 @@ function test_font_weight(prop) {
   div.style.setProperty("transition-timing-function", "linear", "");
 }
 
-function test_grid_gap(prop) {
+function test_gap(prop) {
   test_length_transition(prop);
   test_length_clamped(prop);
   test_percent_transition(prop);
author	FranklinDM <mrmineshafter17@gmail.com>	2022-04-02 20:23:26 +0800
committer	FranklinDM <mrmineshafter17@gmail.com>	2022-04-02 23:14:36 +0800
commit	b226f8942d95c5fa8b29ca249e3cd39a7a4d6e7f (patch)
tree	0c21492d67953bbd9da3f6827e5efdf9efb94bc6
parent	f1c2ba75d1067ae2610eacbfae56b7b71ebfa223 (diff)
download	uxp-b226f8942d95c5fa8b29ca249e3cd39a7a4d6e7f.tar.gz