commit ef430faddb5a26ae3c6c32aefb15e8d2972f1976 parent d5e61729e16c05aeed9271e181c6a813e6ed9e96 Author: Javier Contreras Tenorio <javiercon@microsoft.com> Date: Fri, 7 Nov 2025 08:47:48 +0000 Bug 1998483 [wpt PR 55862] - [gap-decorations] Make `row-rule-outset` into shorthand using new props, a=testonly Automatic update from web-platform-tests [gap-decorations] Make `row-rule-outset` into shorthand using new props This CL makes `column-rule-outset` into a shorthand using the new longhands https://github.com/w3c/csswg-drafts/issues/12603. We also implement the paint behavior so that these work for `row`, moreover, we add new tests for this property, since the existing ones are using the `row-rule-outset` shorthand. We also update some existing parsing tests, and uncomment parts of tests that now work since we introduced the shorthand again. Recently it was resolved that the `outset` properties will be renamed to `inset` https://github.com/w3c/csswg-drafts/issues/12848, so they will need to be renamed in follow up CLs, but since the asymmetric behavior resolved first, we are implementing that first. It will also allow us to move to the new inset behavior incrementally. Bug: 357648037, 440054556 Change-Id: I89086f1df91383468d5379680b7aeb038e99023c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7107409 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Javier Contreras <javiercon@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1540297} -- wpt-commits: 6d75c23c1cdeaeac4f716a8eac3ae2d1f2852fb8 wpt-pr: 55862 Diffstat:
22 files changed, 357 insertions(+), 83 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/animation/gap-decorations-outset-neutral-keyframe-001.html b/testing/web-platform/tests/css/css-gaps/animation/gap-decorations-outset-neutral-keyframe-001.html @@ -2,7 +2,7 @@ <html> <head> <meta charset="utf-8"> - <title>gap decorations row-rule-outset neutral keyframe</title> + <title>gap decorations row-rule-outset properties neutral keyframe</title> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> <meta name="assert" content="gap decorations row-rule-outset value list supports neutral keyframe."> <script src="/resources/testharness.js"></script> @@ -14,12 +14,30 @@ <script> test(() => { target.style.rowRuleStyle = 'solid'; - target.style.rowRuleOutset = '1px'; - var animation = target.animate([{}, {rowRuleOutset: '11px'}], 1000); + target.style.rowRuleEdgeStartOutset = '1px'; + target.style.rowRuleEdgeEndOutset = '1px'; + target.style.rowRuleInteriorStartOutset = '1px'; + target.style.rowRuleInteriorEndOutset = '1px'; + var animation = target.animate([{}, {rowRuleEdgeStartOutset: '11px'}], 1000); animation.pause(); animation.currentTime = 500; - assert_equals(getComputedStyle(target).rowRuleOutset, '6px'); - }, 'gap decorations row-rule-outset value list supports neutral keyframe.'); + assert_equals(getComputedStyle(target).rowRuleEdgeStartOutset, '6px'); + + var animation2 = target.animate([{}, {rowRuleEdgeEndOutset: '11px'}], 1000); + animation2.pause(); + animation2.currentTime = 500; + assert_equals(getComputedStyle(target).rowRuleEdgeEndOutset, '6px'); + + var animation3 = target.animate([{}, {rowRuleInteriorStartOutset: '11px'}], 1000); + animation3.pause(); + animation3.currentTime = 500; + assert_equals(getComputedStyle(target).rowRuleInteriorStartOutset, '6px'); + + var animation4 = target.animate([{}, {rowRuleInteriorEndOutset: '11px'}], 1000); + animation4.pause(); + animation4.currentTime = 500; + assert_equals(getComputedStyle(target).rowRuleInteriorEndOutset, '6px'); + }, 'gap decorations row-rule-outset properties support neutral keyframe.'); </script> </body> </html> diff --git a/testing/web-platform/tests/css/css-gaps/animation/row-rule-outset-interpolation.html b/testing/web-platform/tests/css/css-gaps/animation/row-rule-outset-interpolation.html @@ -2,7 +2,7 @@ <html> <head> <meta charset="UTF-8"> - <title>row-rule-outset interpolation</title> + <title>row-rule-outset properties interpolation</title> <link rel="author" title="Javier Contreras" href="mailto:javiercon@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> <script src="/resources/testharness.js"></script> @@ -11,7 +11,10 @@ <style> .parent { row-rule-style: solid; - row-rule-outset: 20px; + row-rule-edge-start-outset: 20px; + row-rule-edge-end-outset: 20px; + row-rule-interior-start-outset: 20px; + row-rule-interior-end-outset: 20px; } .target { @@ -21,14 +24,53 @@ column-rule: 10px solid black; row-rule-break: intersection; - row-rule-outset: 5px; + row-rule-edge-start-outset: 5px; + row-rule-edge-end-outset: 5px; + row-rule-interior-start-outset: 5px; + row-rule-interior-end-outset: 5px; } </style> </head> <body> <script> test_interpolation({ - property: 'row-rule-outset', + property: 'row-rule-edge-start-outset', + from: neutralKeyframe, + to: '15px', + }, [ + { at: -0.3, expect: '2px' }, + { at: 0, expect: '5px' }, + { at: 0.3, expect: '8px' }, + { at: 0.6, expect: '11px' }, + { at: 1, expect: '15px' }, + { at: 1.5, expect: '20px' }, + ]); + test_interpolation({ + property: 'row-rule-edge-end-outset', + from: neutralKeyframe, + to: '15px', + }, [ + { at: -0.3, expect: '2px' }, + { at: 0, expect: '5px' }, + { at: 0.3, expect: '8px' }, + { at: 0.6, expect: '11px' }, + { at: 1, expect: '15px' }, + { at: 1.5, expect: '20px' }, + ]); + test_interpolation({ + property: 'row-rule-interior-start-outset', + from: neutralKeyframe, + to: '15px', + }, [ + { at: -0.3, expect: '2px' }, + { at: 0, expect: '5px' }, + { at: 0.3, expect: '8px' }, + { at: 0.6, expect: '11px' }, + { at: 1, expect: '15px' }, + { at: 1.5, expect: '20px' }, + ]); + test_interpolation({ + property: 'row-rule-interior-end-outset', from: neutralKeyframe, to: '15px', }, [ @@ -41,7 +83,43 @@ ]); test_interpolation({ - property: 'row-rule-outset', + property: 'row-rule-edge-start-outset', + from: 'initial', // initial for `edge` is 0px. + to: '10px', + }, [ + { at: -0.3, expect: '-3px' }, + { at: 0, expect: '0px' }, + { at: 0.3, expect: '3px' }, + { at: 0.6, expect: '6px' }, + { at: 1, expect: '10px' }, + { at: 1.5, expect: '15px' }, + ]); + test_interpolation({ + property: 'row-rule-edge-end-outset', + from: 'initial', // initial for `edge` is 0px. + to: '10px', + }, [ + { at: -0.3, expect: '-3px' }, + { at: 0, expect: '0px' }, + { at: 0.3, expect: '3px' }, + { at: 0.6, expect: '6px' }, + { at: 1, expect: '10px' }, + { at: 1.5, expect: '15px' }, + ]); + test_interpolation({ + property: 'row-rule-interior-start-outset', + from: 'initial', // initial is 50%. + to: '40%', + }, [ + { at: -0.3, expect: '53%' }, + { at: 0, expect: '50%' }, + { at: 0.3, expect: '47%' }, + { at: 0.6, expect: '44%' }, + { at: 1, expect: '40%' }, + { at: 1.5, expect: '35%' }, + ]); + test_interpolation({ + property: 'row-rule-interior-end-outset', from: 'initial', // initial is 50%. to: '40%', }, [ @@ -54,7 +132,43 @@ ]); test_interpolation({ - property: 'row-rule-outset', + property: 'row-rule-edge-start-outset', + from: 'inherit', + to: '10px', + }, [ + { at: -0.3, expect: '23px' }, + { at: 0, expect: '20px' }, + { at: 0.3, expect: '17px' }, + { at: 0.6, expect: '14px' }, + { at: 1, expect: '10px' }, + { at: 1.5, expect: '5px' }, + ]); + test_interpolation({ + property: 'row-rule-edge-end-outset', + from: 'inherit', + to: '10px', + }, [ + { at: -0.3, expect: '23px' }, + { at: 0, expect: '20px' }, + { at: 0.3, expect: '17px' }, + { at: 0.6, expect: '14px' }, + { at: 1, expect: '10px' }, + { at: 1.5, expect: '5px' }, + ]); + test_interpolation({ + property: 'row-rule-interior-start-outset', + from: 'inherit', + to: '10px', + }, [ + { at: -0.3, expect: '23px' }, + { at: 0, expect: '20px' }, + { at: 0.3, expect: '17px' }, + { at: 0.6, expect: '14px' }, + { at: 1, expect: '10px' }, + { at: 1.5, expect: '5px' }, + ]); + test_interpolation({ + property: 'row-rule-interior-end-outset', from: 'inherit', to: '10px', }, [ @@ -67,7 +181,43 @@ ]); test_interpolation({ - property: 'row-rule-outset', + property: 'row-rule-edge-start-outset', + from: 'unset', + to: '10px', + }, [ + { at: -0.3, expect: '-3px' }, + { at: 0, expect: '0px' }, + { at: 0.3, expect: '3px' }, + { at: 0.6, expect: '6px' }, + { at: 1, expect: '10px' }, + { at: 1.5, expect: '15px' }, + ]); + test_interpolation({ + property: 'row-rule-edge-end-outset', + from: 'unset', + to: '10px', + }, [ + { at: -0.3, expect: '-3px' }, + { at: 0, expect: '0px' }, + { at: 0.3, expect: '3px' }, + { at: 0.6, expect: '6px' }, + { at: 1, expect: '10px' }, + { at: 1.5, expect: '15px' }, + ]); + test_interpolation({ + property: 'row-rule-interior-start-outset', + from: 'unset', + to: '40%', + }, [ + { at: -0.3, expect: '53%' }, + { at: 0, expect: '50%' }, + { at: 0.3, expect: '47%' }, + { at: 0.6, expect: '44%' }, + { at: 1, expect: '40%' }, + { at: 1.5, expect: '35%' }, + ]); + test_interpolation({ + property: 'row-rule-interior-end-outset', from: 'unset', to: '40%', }, [ @@ -80,11 +230,47 @@ ]); test_interpolation({ - property: 'row-rule-outset', + property: 'row-rule-edge-start-outset', + from: '-5px', + to: '5px' + }, [ + { at: -0.3, expect: '-8px' }, // row-rule-edge-start-outset can be negative + { at: 0, expect: '-5px' }, + { at: 0.3, expect: '-2px' }, + { at: 0.6, expect: '1px' }, + { at: 1, expect: '5px' }, + { at: 1.5, expect: '10px' }, + ]); + test_interpolation({ + property: 'row-rule-edge-end-outset', + from: '-5px', + to: '5px' + }, [ + { at: -0.3, expect: '-8px' }, // row-rule-edge-end-outset can be negative + { at: 0, expect: '-5px' }, + { at: 0.3, expect: '-2px' }, + { at: 0.6, expect: '1px' }, + { at: 1, expect: '5px' }, + { at: 1.5, expect: '10px' }, + ]); + test_interpolation({ + property: 'row-rule-interior-start-outset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // row-rule-outset can be negative + { at: -0.3, expect: '-8px' }, // row-rule-interior-start-outset can be negative + { at: 0, expect: '-5px' }, + { at: 0.3, expect: '-2px' }, + { at: 0.6, expect: '1px' }, + { at: 1, expect: '5px' }, + { at: 1.5, expect: '10px' }, + ]); + test_interpolation({ + property: 'row-rule-interior-end-outset', + from: '-5px', + to: '5px' + }, [ + { at: -0.3, expect: '-8px' }, // row-rule-interior-end-outset can be negative { at: 0, expect: '-5px' }, { at: 0.3, expect: '-2px' }, { at: 0.6, expect: '1px' }, @@ -93,7 +279,43 @@ ]); test_interpolation({ - property: 'row-rule-outset', + property: 'row-rule-edge-start-outset', + from: '100%', + to: '1px', + }, [ + { at: -0.3, expect: 'calc(130% - 0.3px)' }, + { at: 0, expect: '100%' }, + { at: 0.3, expect: 'calc(70% + 0.3px)' }, + { at: 0.6, expect: 'calc(40% + 0.6px)' }, + { at: 1, expect: 'calc(0% + 1px)' }, + { at: 1.5, expect: 'calc(-50% + 1.5px)' }, + ]); + test_interpolation({ + property: 'row-rule-edge-end-outset', + from: '100%', + to: '1px', + }, [ + { at: -0.3, expect: 'calc(130% - 0.3px)' }, + { at: 0, expect: '100%' }, + { at: 0.3, expect: 'calc(70% + 0.3px)' }, + { at: 0.6, expect: 'calc(40% + 0.6px)' }, + { at: 1, expect: 'calc(0% + 1px)' }, + { at: 1.5, expect: 'calc(-50% + 1.5px)' }, + ]); + test_interpolation({ + property: 'row-rule-interior-start-outset', + from: '100%', + to: '1px', + }, [ + { at: -0.3, expect: 'calc(130% - 0.3px)' }, + { at: 0, expect: '100%' }, + { at: 0.3, expect: 'calc(70% + 0.3px)' }, + { at: 0.6, expect: 'calc(40% + 0.6px)' }, + { at: 1, expect: 'calc(0% + 1px)' }, + { at: 1.5, expect: 'calc(-50% + 1.5px)' }, + ]); + test_interpolation({ + property: 'row-rule-interior-end-outset', from: '100%', to: '1px', }, [ @@ -106,7 +328,43 @@ ]); test_interpolation({ - property: 'row-rule-outset', + property: 'row-rule-edge-start-outset', + from: '10px', + to: '10%', + }, [ + { at: -0.3, expect: 'calc(-3% + 13px)' }, + { at: 0, expect: 'calc(0% + 10px)' }, + { at: 0.3, expect: 'calc(3% + 7px)' }, + { at: 0.6, expect: 'calc(6% + 4px)' }, + { at: 1, expect: '10%' }, + { at: 1.5, expect: 'calc(15% - 5px)' }, + ]); + test_interpolation({ + property: 'row-rule-edge-end-outset', + from: '10px', + to: '10%', + }, [ + { at: -0.3, expect: 'calc(-3% + 13px)' }, + { at: 0, expect: 'calc(0% + 10px)' }, + { at: 0.3, expect: 'calc(3% + 7px)' }, + { at: 0.6, expect: 'calc(6% + 4px)' }, + { at: 1, expect: '10%' }, + { at: 1.5, expect: 'calc(15% - 5px)' }, + ]); + test_interpolation({ + property: 'row-rule-interior-start-outset', + from: '10px', + to: '10%', + }, [ + { at: -0.3, expect: 'calc(-3% + 13px)' }, + { at: 0, expect: 'calc(0% + 10px)' }, + { at: 0.3, expect: 'calc(3% + 7px)' }, + { at: 0.6, expect: 'calc(6% + 4px)' }, + { at: 1, expect: '10%' }, + { at: 1.5, expect: 'calc(15% - 5px)' }, + ]); + test_interpolation({ + property: 'row-rule-interior-end-outset', from: '10px', to: '10%', }, [ diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-029-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-029-ref.html @@ -19,9 +19,9 @@ background: lightgray; } .row-decoration { - left: 0px; + left: 1px; top: 108.5px; - width: 335px; + width: 334px; height: 3px; position: absolute; background-color: gray; @@ -33,7 +33,7 @@ background-color: red; } </style> -<!-- <div class="row-decoration"></div> --> +<div class="row-decoration"></div> <div class="column-decoration" style="top: 1px; left: 208.5px; height: 104px;"></div> <div class="column-decoration" style="top: 120px; left: 108.5px; height: 110px;"></div> <div class="column-decoration" style="top: 120px; left: 228.5px; height: 110px;"></div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-029.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-029.html @@ -17,14 +17,15 @@ top: 0px; width: 340px; column-rule: 3px solid red; - /* row-rule: 3px solid gray; */ + row-rule: 3px solid gray; column-rule-break: intersection; column-rule-interior-start-outset: 0; column-rule-interior-end-outset: 5px; column-rule-edge-end-outset: 10px; column-rule-edge-start-outset: -1px; - /* row-rule-break: intersection; */ - /* row-rule-edge-end-outset: -5px; */ + row-rule-break: intersection; + row-rule-edge-end-outset: -5px; + row-rule-edge-start-outset: -1px; } .item { width: 100px; diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-030-ref.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-030-ref.html @@ -34,9 +34,9 @@ background-color: red; } </style> -<!-- <div class="row-decoration"></div> --> -<!-- <div class="row-decoration" style="left:120px; width: 80px;"></div> --> -<!-- <div class="row-decoration" style="left: 240px;"></div> --> +<div class="row-decoration" style="width: 99px;"></div> +<div class="row-decoration" style="left:120px; width: 79px;"></div> +<div class="row-decoration" style="left: 240px;"></div> <div class="column-decoration" style="top: 0px; left: 208.5px; height: 106px;"></div> <div class="column-decoration" style="top: 120px; left: 108.5px"></div> <div class="column-decoration" style="top: 120px; left: 228.5px"></div> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-030.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-030.html @@ -16,10 +16,10 @@ left: 0px; top: 0px; width: 340px; - /* row-rule: 3px solid gray; */ - /* row-rule-break: intersection; */ - /* row-rule-interior-start-outset: 0; */ - /* row-rule-interior-end-outset: 0; */ + row-rule: 3px solid gray; + row-rule-break: intersection; + row-rule-interior-start-outset: 0; + row-rule-interior-end-outset: -1px; column-rule: 3px solid red; column-rule-break: intersection; column-rule-interior-start-outset: 0; diff --git a/testing/web-platform/tests/css/css-gaps/flex/fragmentation/flex-gap-decorations-fragmentation-001-ref.html b/testing/web-platform/tests/css/css-gaps/flex/fragmentation/flex-gap-decorations-fragmentation-001-ref.html @@ -43,10 +43,10 @@ .row-rule { position: absolute; background: blue; - width: 170px; + width: 167px; height: 10px; top: 5px; - left: 265px; + left: 267px; } </style> diff --git a/testing/web-platform/tests/css/css-gaps/flex/fragmentation/flex-gap-decorations-fragmentation-001.html b/testing/web-platform/tests/css/css-gaps/flex/fragmentation/flex-gap-decorations-fragmentation-001.html @@ -25,6 +25,9 @@ row-rule-style: solid; row-rule-color: blue; row-rule-width: 10px; + row-rule-break: intersection; + row-rule-edge-end-outset: -1px; + row-rule-edge-start-outset: -2px; column-rule-style: solid; column-rule-color: red; column-rule-width: 10px; diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-008-ref.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-008-ref.html @@ -34,7 +34,6 @@ position: absolute; background: red; height: 10px; - width: 100px; } </style> <div class="multi-col"> @@ -56,6 +55,6 @@ <div class="column-gap" style="left: 157px; top: 1px; height: 19px;"></div> <div class="column-gap" style="left: 157px; top: 25px; height: 75px;"></div> <div class="column-gap" style="left: 267px; top: 1px; height: 49px;"></div> -<div class="row-gap" style="left: 0px; top: 55px;"></div> -<div class="row-gap" style="left: 110px; top: 25px;"></div> +<div class="row-gap" style="left: 1px; top: 55px; width: 99px;"></div> +<div class="row-gap" style="left: 111px; top: 25px; width: 99px;"></div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-008.html b/testing/web-platform/tests/css/css-gaps/grid/fragmentation/grid-gap-decorations-fragmentation-008.html @@ -24,6 +24,8 @@ column-gap: 10px; row-gap: 20px; row-rule: solid 10px red; + row-rule-break: intersection; + row-rule-edge-start-outset: -1px; column-rule: solid 6px blue; column-rule-break: intersection; column-rule-edge-start-outset: -1px; diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-052-ref.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-052-ref.html @@ -29,8 +29,8 @@ position: absolute; height: 3px; background-color: gray; - width: 335px; - left: 0px; + width: 334px; + left: 1px; } </style> <div class="column-decoration" style="left: 108.5px"></div> @@ -39,8 +39,8 @@ <div class="column-decoration" style="left: 228.5px; top: 120px;"></div> <div class="column-decoration" style="left: 108.5px; top: 240px; height: 100px"></div> <div class="column-decoration" style="left: 228.5px; top: 240px; height: 100px"></div> -<!-- <div class="row-decoration" style="top: 108.5px;"></div> --> -<!-- <div class="row-decoration" style="top: 228.5px;"></div> --> +<div class="row-decoration" style="top: 108.5px;"></div> +<div class="row-decoration" style="top: 228.5px;"></div> <div class="grid"> <div class="item"></div> <div class="item"></div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-052.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-052.html @@ -13,13 +13,14 @@ display: grid; grid-template: repeat(auto-fill, 100px) / repeat(3, 100px); grid-gap: 20px; - /* row-rule: 3px solid gray; */ + row-rule: 3px solid gray; column-rule: 3px solid red; column-rule-break: intersection; column-rule-interior-start-outset: 0px; column-rule-interior-end-outset: 5px; - /* row-rule-break: intersection; */ - /* row-rule-edge-end-outset: -5px; */ + row-rule-break: intersection; + row-rule-edge-end-outset: -5px; + row-rule-edge-start-outset: -1px; left: 0px; top: 0px; } diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-053-ref.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-053-ref.html @@ -19,24 +19,18 @@ } .row-decoration { left: 0px; - width: 340px; height: 3px; position: absolute; - display: flex; - gap: 20px; + background: grey; + width: 100px; } .column-decoration { position: absolute; top: 0px; - height: 348px; width: 3px; background: red; height: 108px; } - .row { - background: grey; - width: 100px; - } </style> <div class="column-decoration" style="left: 108.5px; top: 1px; height: 107px;"></div> <div class="column-decoration" style="left: 228.5px; top: 1px; height: 107px;"></div> @@ -44,16 +38,12 @@ <div class="column-decoration" style="left: 228.5px; top: 120px;"></div> <div class="column-decoration" style="left: 108.5px; top: 240px; height: 110px;"></div> <div class="column-decoration" style="left: 228.5px; top: 240px; height: 110px;"></div> -<!-- <div class="row-decoration" style="top: 108.5px"> - <div class="row"></div> - <div class="row"></div> - <div class="row"></div> -</div> -<div class="row-decoration" style="top: 228.5px"> - <div class="row"></div> - <div class="row"></div> - <div class="row"></div> -</div> --> +<div class="row-decoration" style="top: 108.5px; width: 99px;"></div> +<div class="row-decoration" style="top: 228.5px; width: 99px;"></div> +<div class="row-decoration" style="top: 108.5px; width: 99px; left: 120px;"></div> +<div class="row-decoration" style="top: 228.5px; width: 99px; left: 120px;"></div> +<div class="row-decoration" style="top: 108.5px; left: 240px;"></div> +<div class="row-decoration" style="top: 228.5px; left: 240px;"></div> <div class="grid"> <div class="item"></div> <div class="item"></div> diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-053.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-053.html @@ -13,10 +13,10 @@ display: grid; grid-template: repeat(auto-fill, 100px) / repeat(3, 100px); grid-gap: 20px; - /* row-rule: 3px solid gray; */ - /* row-rule-break: intersection; */ - /* row-rule-interior-start-outset: 0; */ - /* row-rule-interior-end-outset: 0; */ + row-rule: 3px solid gray; + row-rule-break: intersection; + row-rule-interior-start-outset: 0; + row-rule-interior-end-outset: -1px; column-rule: 3px solid red; column-rule-break: intersection; column-rule-interior-start-outset: 0; diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-022-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-022-ref.html @@ -45,7 +45,7 @@ <div class="items"></div> <div class="items"></div> </div> -<!-- <div class="row-gap"></div> --> +<div class="row-gap"></div> <div class="column-gap" style="left:62px; height: 60px"></div> <div class="column-gap" style="left:132px; height: 60px;"></div> <div class="column-gap" style="left:62px; top:72px;"></div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-022.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-022.html @@ -21,16 +21,16 @@ column-rule-width: 10px; column-rule-style: solid; column-rule-color: blue; - /* row-rule-width: 10px; */ - /* row-rule-style: solid; */ - /* row-rule-color: gold; */ + row-rule-width: 10px; + row-rule-style: solid; + row-rule-color: gold; column-wrap: wrap; column-rule-break: intersection; column-rule-interior-start-outset: 0; column-rule-interior-end-outset: 0px; column-rule-edge-end-outset: 5px; - /* row-rule-break: intersection; */ - /* row-rule-edge-end-outset: -5px; */ + row-rule-break: intersection; + row-rule-edge-end-outset: -5px; gap-rule-overlap: column-over-row; } p { diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-023-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-023-ref.html @@ -47,7 +47,9 @@ <div class="items"></div> <div class="items"></div> </div> -<!-- <div class="row-gap" style="left:0px; width: 204px;"></div> --> +<div class="row-gap" style="left:0px; width: 61px;"></div> +<div class="row-gap" style="left:72px; width: 59px;"></div> +<div class="row-gap" style="left:142px; width: 62px;"></div> <div class="column-gap" style="left:62px;"></div> <div class="column-gap" style="left:132px;"></div> <div class="column-gap" style="left:62px; top:72px; height: 60px"></div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-023.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-023.html @@ -21,18 +21,18 @@ column-rule-width: 10px; column-rule-style: solid; column-rule-color: blue; - /* row-rule-width: 10px; */ - /* row-rule-style: solid; */ - /* row-rule-color: gold; */ + row-rule-width: 10px; + row-rule-style: solid; + row-rule-color: gold; column-wrap: wrap; column-rule-break: intersection; column-rule-interior-start-outset: 0; column-rule-interior-end-outset: 8px; - /* row-rule-break: intersection; */ - /* row-rule-interior-start-outset: 0; */ - /* row-rule-interior-end-outset: 0; */ - /* row-rule-edge-start-outset: 2px; */ - /* row-rule-edge-end-outset: 2px; */ + row-rule-break: intersection; + row-rule-interior-start-outset: 0; + row-rule-interior-end-outset: -1px; + row-rule-edge-start-outset: 2px; + row-rule-edge-end-outset: 2px; gap-rule-overlap: column-over-row; } p { diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-computed.html @@ -18,7 +18,7 @@ } </style> <script> - const properties = ["column-rule-outset" /* , "row-rule-outset", "rule-outset"*/]; + const properties = ["column-rule-outset", "row-rule-outset"/*, "rule-outset"*/]; for (const property of properties) { test_computed_value(property, "10px", "10px 10px / 10px 10px"); test_computed_value(property, "-20px", "-20px -20px / -20px -20px"); diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-invalid.html @@ -12,7 +12,7 @@ <body> <div id="target"></div> <script> - const properties = ['column-rule-outset'/*, 'row-rule-outset', 'rule-outset'*/]; + const properties = ['column-rule-outset', 'row-rule-outset'/*, 'rule-outset'*/]; for (const property of properties) { test_invalid_value(property, 'auto'); test_invalid_value(property, 'none'); diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-shorthand.html @@ -15,8 +15,8 @@ const rule_properties = { 'column-rule-outset': ['column-rule-edge-start-outset', 'column-rule-edge-end-outset', 'column-rule-interior-start-outset', 'column-rule-interior-end-outset'], - /* 'row-rule-outset': ['row-rule-edge-start-outset', 'row-rule-edge-end-outset', - 'row-rule-interior-start-outset', 'row-rule-interior-end-outset'] */ + 'row-rule-outset': ['row-rule-edge-start-outset', 'row-rule-edge-end-outset', + 'row-rule-interior-start-outset', 'row-rule-interior-end-outset'] }; const testCases = [ { diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-valid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-valid.html @@ -12,7 +12,7 @@ <body> <div id="target"></div> <script> - const properties = ['column-rule-outset',/* 'row-rule-outset', 'rule-outset'*/]; + const properties = ['column-rule-outset', 'row-rule-outset'/*, 'rule-outset'*/]; for (const property of properties) { test_valid_value(property, '0', '0px 0px / 0px 0px'); test_valid_value(property, '-20px', '-20px -20px / -20px -20px');