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; }
-
+
@@ -74,7 +74,7 @@ br { clear: both; }
-
+
@@ -142,7 +142,7 @@ br { clear: both; }
-
+
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; } 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 @@ + + + + + + Reference: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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 @@ + + + + + + CSS Test: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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 @@ + + + + + + Reference: Testing row and column gaps in vertical writing mode multi-line flex containers + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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 @@ + + + + + + CSS Test: Testing row and column gaps in vertical writing mode multi-line flex containers + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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 @@ + + + + + Reference: Testing cross size computation with row and column gaps in horizontal multi-line flex containers + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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 @@ + + + + + CSS Test: Testing cross size computation with row and column gaps in horizontal multi-line flex containers + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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 @@ + + + + + Reference: Testing percentage gap resolution in flex containers + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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 @@ + + + + + CSS Test: Testing percentage gap resolution in flex containers + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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 @@ + + + + CSS Flexible Box Layout Test Reference: Test flexbox intrinsic inline-size, gap, and absolute-positioned children + + + + + +
+ B + + C +
+ 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 @@ + + + + CSS Flexible Box Layout Test: Test flexbox intrinsic inline-size, gap, and absolute-positioned children + + + + + + + + + +
+ + + B + C +
+ 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,33 +6695,55 @@ 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-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: [ "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, - subproperties: [ "grid-column-gap", "grid-row-gap" ], - initial_values: [ "0", "0 0" ], - other_values: [ "1ch 0", "1px 1%", "1em 1px", "calc(1px) calc(1%)" ], - invalid_values: [ "-1px", "1px -1px", "1px 1px 1px", "inherit 1px", - "1px auto" ] + alias_for: "gap", + subproperties: [ "column-gap", "row-gap" ], }; if (IsCSSPropertyPrefEnabled("layout.css.display-contents.enabled")) { 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);