diff options
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 /layout/reftests | |
parent | f1c2ba75d1067ae2610eacbfae56b7b71ebfa223 (diff) | |
download | uxp-b226f8942d95c5fa8b29ca249e3cd39a7a4d6e7f.tar.gz |
Issue #1838 - Part 7: Update tests
Diffstat (limited to 'layout/reftests')
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 |