commit bf301f9272725fd2afd1404a333692017cc1edd1 parent 819d35b49168061247c20e5c7a3fc42d070b8440 Author: Javier Contreras Tenorio <javiercon@microsoft.com> Date: Fri, 7 Nov 2025 08:47:26 +0000 Bug 1998476 [wpt PR 55859] - [gap-decorations] Make `column-rule-outset` into shorthand using new props, a=testonly Automatic update from web-platform-tests [gap-decorations] Make `column-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 `column`, moreover, we add new tests for this property, since the existing ones are using the `column-rule-outset` shorthand. We also update some existing parsing tests, and comment out some parts of tests that are not applicable yet since `row-rule-outset` and its longhands will be implemented in following CLs. We also temporarily remove the `rule-outset` shorthand, but will be reintroduced once the above is done. 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: I37cdbe50cfabc371344d4bf2aadccd02f1b99c85 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7107919 Commit-Queue: Javier Contreras <javiercon@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1540149} -- wpt-commits: be09b58c0ea0055e3d63e4c40b8312c3f61314bb wpt-pr: 55859 Diffstat:
22 files changed, 1027 insertions(+), 89 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/animation/column-rule-outset-interpolation.html b/testing/web-platform/tests/css/css-gaps/animation/column-rule-outset-interpolation.html @@ -2,7 +2,7 @@ <html> <head> <meta charset="UTF-8"> - <title>column-rule-outset interpolation</title> + <title>column-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> @@ -10,8 +10,11 @@ <script src="/css/support/interpolation-testcommon.js"></script> <style> .parent { - row-rule-style: solid; - column-rule-outset: 20px; + column-rule-style: solid; + column-rule-edge-start-outset: 20px; + column-rule-edge-end-outset: 20px; + column-rule-interior-start-outset: 20px; + column-rule-interior-end-outset: 20px; } .target { @@ -21,14 +24,53 @@ column-rule: 10px solid black; column-rule-break: intersection; - column-rule-outset: 5px; + column-rule-edge-start-outset: 5px; + column-rule-edge-end-outset: 5px; + column-rule-interior-start-outset: 5px; + column-rule-interior-end-outset: 5px; } </style> </head> <body> <script> test_interpolation({ - property: 'column-rule-outset', + property: 'column-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: 'column-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: 'column-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: 'column-rule-interior-end-outset', from: neutralKeyframe, to: '15px', }, [ @@ -41,7 +83,43 @@ ]); test_interpolation({ - property: 'column-rule-outset', + property: 'column-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: 'column-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: 'column-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: 'column-rule-interior-end-outset', from: 'initial', // initial is 50%. to: '40%', }, [ @@ -54,7 +132,43 @@ ]); test_interpolation({ - property: 'column-rule-outset', + property: 'column-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: 'column-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: 'column-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: 'column-rule-interior-end-outset', from: 'inherit', to: '10px', }, [ @@ -67,7 +181,43 @@ ]); test_interpolation({ - property: 'column-rule-outset', + property: 'column-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: 'column-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: 'column-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: 'column-rule-interior-end-outset', from: 'unset', to: '40%', }, [ @@ -80,11 +230,47 @@ ]); test_interpolation({ - property: 'column-rule-outset', + property: 'column-rule-edge-start-outset', + from: '-5px', + to: '5px' + }, [ + { at: -0.3, expect: '-8px' }, // column-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: 'column-rule-edge-end-outset', + from: '-5px', + to: '5px' + }, [ + { at: -0.3, expect: '-8px' }, // column-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: 'column-rule-interior-start-outset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // column-rule-outset can be negative + { at: -0.3, expect: '-8px' }, // column-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: 'column-rule-interior-end-outset', + from: '-5px', + to: '5px' + }, [ + { at: -0.3, expect: '-8px' }, // column-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: 'column-rule-outset', + property: 'column-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: 'column-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: 'column-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: 'column-rule-interior-end-outset', from: '100%', to: '1px', }, [ @@ -106,7 +328,43 @@ ]); test_interpolation({ - property: 'column-rule-outset', + property: 'column-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: 'column-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: 'column-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: 'column-rule-interior-end-outset', from: '10px', to: '10%', }, [ diff --git a/testing/web-platform/tests/css/css-gaps/animation/gap-decorations-outset-neutral-keyframe-002.html b/testing/web-platform/tests/css/css-gaps/animation/gap-decorations-outset-neutral-keyframe-002.html @@ -2,7 +2,7 @@ <html> <head> <meta charset="utf-8"> - <title>gap decorations column-rule-outset neutral keyframe</title> + <title>gap decorations column-rule-outset properties support neutral keyframe</title> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> <meta name="assert" content="gap decorations column-rule-outset value list supports neutral keyframe."> <script src="/resources/testharness.js"></script> @@ -14,12 +14,31 @@ <script> test(() => { target.style.columnRuleStyle = 'solid'; - target.style.columnRuleOutset = '1px'; - var animation = target.animate([{}, {columnRuleOutset: '11px'}], 1000); + target.style.columnRuleEdgeStartOutset = '1px'; + target.style.columnRuleEdgeEndOutset = '1px'; + target.style.columnRuleInteriorStartOutset = '1px'; + target.style.columnRuleInteriorEndOutset = '1px'; + + var animation = target.animate([{}, {columnRuleEdgeStartOutset: '11px'}], 1000); animation.pause(); animation.currentTime = 500; - assert_equals(getComputedStyle(target).columnRuleOutset, '6px'); - }, 'gap decorations column-rule-outset value list supports neutral keyframe.'); + assert_equals(getComputedStyle(target).columnRuleEdgeStartOutset, '6px'); + + var animation2 = target.animate([{}, {columnRuleEdgeEndOutset: '11px'}], 1000); + animation2.pause(); + animation2.currentTime = 500; + assert_equals(getComputedStyle(target).columnRuleEdgeEndOutset, '6px'); + + var animation3 = target.animate([{}, {columnRuleInteriorStartOutset: '11px'}], 1000); + animation3.pause(); + animation3.currentTime = 500; + assert_equals(getComputedStyle(target).columnRuleInteriorStartOutset, '6px'); + + var animation4 = target.animate([{}, {columnRuleInteriorEndOutset: '11px'}], 1000); + animation4.pause(); + animation4.currentTime = 500; + assert_equals(getComputedStyle(target).columnRuleInteriorEndOutset, '6px'); + }, 'gap decorations column-rule-outset properties support neutral keyframe.'); </script> </body> </html> 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 @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .flex { + display: flex; + flex-wrap: wrap; + gap: 20px; + left: 0px; + top: 0px; + width: 340px; + } + .item { + width: 100px; + height: 100px; + background: lightgray; + } + .row-decoration { + left: 0px; + top: 108.5px; + width: 335px; + height: 3px; + position: absolute; + background-color: gray; + } + .column-decoration { + position: absolute; + height: 105px; + width: 3px; + background-color: red; + } +</style> +<!-- <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> +<div class="flex"> + <div class="item" style="width: 200px;"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> +</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 @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Flex gaps are painted with different outsets in start/end segment endpoints. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="match" href="flex-gap-decorations-029-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .flex { + display: flex; + flex-wrap: wrap; + gap: 20px; + left: 0px; + top: 0px; + width: 340px; + column-rule: 3px solid red; + /* 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; */ + } + .item { + width: 100px; + height: 100px; + background: lightgray; + } +</style> +<div class="flex"> + <div class="item" style="width: 200px;"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> +</div> 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 @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .flex { + display: flex; + flex-wrap: wrap; + gap: 20px; + left: 0px; + top: 0px; + width: 340px; + } + .item { + width: 100px; + height: 100px; + background: lightgray; + } + .row-decoration { + left: 0px; + top: 108.5px; + width: 340px; + height: 3px; + position: absolute; + width: 100px; + background-color: gray; + } + .column-decoration { + position: absolute; + height: 108px; + width: 3px; + 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="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> +<div class="flex"> + <div class="item" style="width: 200px;"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> +</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 @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Flex gaps are painted with different outsets in interior end segment endpoints. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="match" href="flex-gap-decorations-030-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .flex { + display: flex; + flex-wrap: wrap; + gap: 20px; + 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; */ + column-rule: 3px solid red; + column-rule-break: intersection; + column-rule-interior-start-outset: 0; + column-rule-interior-end-outset: 6px; + column-rule-edge-end-outset: 8px; + } + .item { + width: 100px; + height: 100px; + background: lightgray; + } +</style> +<div class="flex"> + <div class="item" style="width: 200px;"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> +</div> 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 @@ -50,15 +50,15 @@ } </style> -<div class="column-rule" style="top: 2px; height: 45px; left: 52px;"></div> -<div class="column-rule" style="top: 2px; height: 45px; left: 112px;"></div> +<div class="column-rule" style="top: 3px; height: 45px; left: 52px;"></div> +<div class="column-rule" style="top: 3px; height: 45px; left: 112px;"></div> -<div class="column-rule" style="height: 5px; left: 315px;"></div> -<div class="column-rule" style="height: 5px; left: 375px;"></div> -<div class="column-rule" style="top: 15px; height: 32px; left: 365px;"></div> +<div class="column-rule" style="top: 1px; height: 4px; left: 315px;"></div> +<div class="column-rule" style="top: 1px; height: 4px; height: 5px; left: 375px;"></div> +<div class="column-rule" style="top: 17px; height: 31px; left: 365px;"></div> <div class=row-rule></div> -<div class="column-rule" style="height: 18px; left: 628px;"></div> +<div class="column-rule" style="top: 1px; height: 18px; left: 628px;"></div> <div class="multi-column"> <div id="flexbox"> 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 @@ -28,6 +28,10 @@ column-rule-style: solid; column-rule-color: red; column-rule-width: 10px; + column-rule-break: intersection; + column-rule-edge-start-outset: -1px; + column-rule-edge-end-outset: 1px; + column-rule-interior-start-outset: -2px; width: 170px; flex-wrap: wrap; } 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 @@ -27,7 +27,7 @@ .column-gap { position: absolute; background: blue; - height: 100px; + height: 99px; width: 6px; } .row-gap { @@ -51,9 +51,11 @@ <div></div> <div></div> </div> -<div class="column-gap" style="left: 47px; top: 0px;"></div> -<div class="column-gap" style="left: 157px; top: 0px;"></div> -<div class="column-gap" style="left: 267px; top: 0px; height: 50px;"></div> +<div class="column-gap" style="left: 47px; top: 1px; height: 49px;"></div> +<div class="column-gap" style="left: 47px; top: 55px; height: 45px;"></div> +<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> 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 @@ -25,6 +25,9 @@ row-gap: 20px; row-rule: solid 10px red; column-rule: solid 6px blue; + column-rule-break: intersection; + column-rule-edge-start-outset: -1px; + column-rule-interior-end-outset: 0px; } .grid-container>div { background-color: skyblue; 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 @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(auto-fill, 100px) / repeat(3, 100px); + grid-gap: 20px; + left: 0px; + top: 0px; + } + .item { + width: 100px; + height: 100px; + background: lightgray; + } + .column-decoration { + position: absolute; + top: 0px; + height: 340px; + width: 3px; + background: red; + height: 105px; + } + .row-decoration { + position: absolute; + height: 3px; + background-color: gray; + width: 335px; + left: 0px; + } +</style> +<div class="column-decoration" style="left: 108.5px"></div> +<div class="column-decoration" style="left: 228.5px"></div> +<div class="column-decoration" style="left: 108.5px; top: 120px;"></div> +<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="grid"> + <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 class="item"></div> + <div class="item"></div> + <div class="item"></div> +</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 @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Grid gaps are painted with different outsets in start/end segment endpoints. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="match" href="grid-gap-decorations-052-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(auto-fill, 100px) / repeat(3, 100px); + grid-gap: 20px; + /* 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; */ + left: 0px; + top: 0px; + } + .item { + width: 100px; + height: 100px; + background: lightgray; + } +</style> +<div class="grid"> + <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 class="item"></div> + <div class="item"></div> + <div class="item"></div> +</div> 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 @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + display: grid; + grid-template: repeat(auto-fill, 100px) / repeat(3, 100px); + grid-gap: 20px; + left: 0px; + top: 0px; + } + .item { + width: 100px; + height: 100px; + background: lightgray; + } + .row-decoration { + left: 0px; + width: 340px; + height: 3px; + position: absolute; + display: flex; + gap: 20px; + } + .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> +<div class="column-decoration" style="left: 108.5px; top: 120px;"></div> +<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="grid"> + <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 class="item"></div> + <div class="item"></div> + <div class="item"></div> +</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 @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Grid gaps are painted with different outsets in interior end segment endpoints. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="match" href="grid-gap-decorations-053-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .grid { + 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; */ + column-rule: 3px solid red; + column-rule-break: intersection; + column-rule-interior-start-outset: 0; + column-rule-interior-end-outset: 8px; + column-rule-edge-start-outset: -1px; + column-rule-edge-end-outset: 10px; + left: 0px; + top: 0px; + } + .item { + width: 100px; + height: 100px; + background: lightgray; + } +</style> +<div class="grid"> + <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 class="item"></div> + <div class="item"></div> + <div class="item"></div> +</div> 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 @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .container { + border: 2px solid rgb(96 139 168); + width: 200px; + height: 130px; + column-count: 3; + column-width: 60px; + column-height: 60px; + column-gap: 10px; + row-gap: 10px; + } + .items { + background: rgb(96 139 168 / 0.2); + height: 60px; + margin: 0px; + width: 60px; + } + .row-gap { + position: absolute; + height: 10px; + width: 195px; + background: gold; + left: 2px; + top: 62px; + } + .column-gap { + position: absolute; + height: 65px; + width: 10px; + background: blue; + top: 2px; + } +</style> +<div class="container"> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> +</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> +<div class="column-gap" style="left:132px; 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 @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Multicol gaps are painted with different outsets in start/end segment endpoints. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="match" href="multicol-gap-decorations-022-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .container { + border: 2px solid rgb(96 139 168); + width: 200px; + height: 130px; + column-count: 3; + column-width: 60px; + column-height: 60px; + column-gap: 10px; + row-gap: 10px; + column-rule-width: 10px; + column-rule-style: solid; + column-rule-color: blue; + /* 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; */ + gap-rule-overlap: column-over-row; + } + p { + background: rgb(96 139 168 / 0.2); + height: 60px; + margin: 0px; + } +</style> +<div class="container"> + <p></p> + <p></p> + <p></p> + <p></p> + <p></p> + <p></p> +</div> 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 @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .container { + border: 2px solid rgb(96 139 168); + width: 200px; + height: 130px; + column-count: 3; + column-width: 60px; + column-height: 60px; + column-gap: 10px; + row-gap: 10px; + } + .items { + background: rgb(96 139 168 / 0.2); + height: 60px; + margin: 0px; + width: 60px; + } + .row-gap { + position: absolute; + height: 10px; + top: 62px; + background: gold; + } + .row { + background: gold; + width: 60px; + } + .column-gap { + position: absolute; + height: 68px; + width: 10px; + background: blue; + top: 2px; + } +</style> +<div class="container"> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> + <div class="items"></div> +</div> +<!-- <div class="row-gap" style="left:0px; width: 204px;"></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> +<div class="column-gap" style="left:132px; 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 @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title> + CSS Gap Decorations: Multicol gaps are painted with different outsets in interior end segment endpoints. +</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> +<link rel="match" href="multicol-gap-decorations-023-ref.html"> +<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> +<style> + body { + margin: 0px; + } + .container { + border: 2px solid rgb(96 139 168); + width: 200px; + height: 130px; + column-count: 3; + column-width: 60px; + column-height: 60px; + column-gap: 10px; + row-gap: 10px; + column-rule-width: 10px; + column-rule-style: solid; + column-rule-color: blue; + /* 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; */ + gap-rule-overlap: column-over-row; + } + p { + background: rgb(96 139 168 / 0.2); + height: 60px; + margin: 0px; + } +</style> +<div class="container"> + <p></p> + <p></p> + <p></p> + <p></p> + <p></p> + <p></p> +</div> 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 @@ -2,7 +2,7 @@ <html> <head> <meta charset="utf-8"> - <title>CSS Gaps: *-rule-outset getComputedStyle()</title> + <title>CSS Gaps: rule-outset shorthands getComputedStyle()</title> <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> <script src="/resources/testharness.js"></script> @@ -18,15 +18,20 @@ } </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"); - test_computed_value(property, "-20px"); - test_computed_value(property, "0.5em", "20px"); - test_computed_value(property, "calc(10px + 0.5em)", "30px"); - test_computed_value(property, "calc(10px - 0.5em)", "-10px"); - test_computed_value(property, "30%"); - test_computed_value(property, "calc(25% + 10px)"); + test_computed_value(property, "10px", "10px 10px / 10px 10px"); + test_computed_value(property, "-20px", "-20px -20px / -20px -20px"); + test_computed_value(property, "0.5em", "20px 20px / 20px 20px"); + test_computed_value(property, "calc(10px + 0.5em)", "30px 30px / 30px 30px"); + test_computed_value(property, "calc(10px - 0.5em)", "-10px -10px / -10px -10px"); + test_computed_value(property, "30%", "30% 30% / 30% 30%"); + test_computed_value(property, "calc(25% + 10px)", "calc(25% + 10px) calc(25% + 10px) / calc(25% + 10px) calc(25% + 10px)"); + test_computed_value(property, "10px 20px", "10px 20px / 10px 20px"); + test_computed_value(property, "10px 20px / 30px -10px"); + test_computed_value(property, "-10px -20px / 25% 24%"); + test_computed_value(property, "5% 10% / 15%", "5% 10% / 15% 15%"); + test_computed_value(property, "5% / 15% 20%", "5% 5% / 15% 20%"); } </script> </body> 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 @@ -2,7 +2,7 @@ <html> <head> <meta charset="utf-8"> - <title>CSS Gaps: parsing *-rule-outset with invalid values</title> + <title>CSS Gaps: parsing rule-outset shorthands with invalid values</title> <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> <script src="/resources/testharness.js"></script> @@ -12,12 +12,16 @@ <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'); test_invalid_value(property, '10'); - test_invalid_value(property, '10px 20px'); + test_invalid_value(property, '10px 20px 10px 20px 20px'); + test_invalid_value(property, '10px / 20px / 10px'); + test_invalid_value(property, '/ 10px 20px'); + test_invalid_value(property, '10px 10px 20px'); + test_invalid_value(property, '10% / 10px 10px 20px'); } </script> </body> 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 @@ -2,54 +2,99 @@ <html> <head> <meta charset="utf-8"> -<title>CSS Gap Decorations: rule-outset sets longhands</title> +<title>CSS Gap Decorations: rule-outset shorthands</title> <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-outset"> -<meta name="assert" content="rule-outset supports the full grammar '<length-percentage>'."> +<meta name="assert" + content="rule-outset supports the full grammar '<length-percentage> <length-percentage>? /[<length-percentage> <length-percentage>?]?'."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/shorthand-testcommon.js"></script> </head> <body> -<script> -const rule_properties = { - 'rule-outset': ['column-rule-outset', - 'row-rule-outset'], -}; - -const testCases = [ - { - input: '0px', - expected: { - column: '0px', - row: '0px' - } - }, - { - input: '10px', - expected: { - column: '10px', - row: '10px' - } - }, - { - input: '50%', - expected: { - column: '50%', - row: '50%' - } - }, - ]; - -for(rule_property in rule_properties) { - const [column, row] = rule_properties[rule_property]; - - for (const { input, expected } of testCases) { - test_shorthand_value(rule_property, input, { - [column]: expected.column, - [row]: expected.row - }); - } -} -</script> + <script> + 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'] */ + }; + const testCases = [ + { + input: '0px', + expected: { + ruleEdgeStartOutset: '0px', + ruleEdgeEndOutset: '0px', + ruleInteriorStartOutset: '0px', + ruleInteriorEndOutset: '0px', + } + }, + { + input: '10px', + expected: { + ruleEdgeStartOutset: '10px', + ruleEdgeEndOutset: '10px', + ruleInteriorStartOutset: '10px', + ruleInteriorEndOutset: '10px' + } + }, + { + input: '50%', + expected: { + ruleEdgeStartOutset: '50%', + ruleEdgeEndOutset: '50%', + ruleInteriorStartOutset: '50%', + ruleInteriorEndOutset: '50%', + } + }, + { + input: '10px 20px', + expected: { + ruleEdgeStartOutset: '10px', + ruleEdgeEndOutset: '20px', + ruleInteriorStartOutset: '10px', + ruleInteriorEndOutset: '20px', + } + }, + { + input: '10px 20px / 30px', + expected: { + ruleEdgeStartOutset: '10px', + ruleEdgeEndOutset: '20px', + ruleInteriorStartOutset: '30px', + ruleInteriorEndOutset: '30px', + } + }, + { + input: '10px / 20px 30px', + expected: { + ruleEdgeStartOutset: '10px', + ruleEdgeEndOutset: '10px', + ruleInteriorStartOutset: '20px', + ruleInteriorEndOutset: '30px', + } + }, + { + input: '10px 20px / 30px 40px', + expected: { + ruleEdgeStartOutset: '10px', + ruleEdgeEndOutset: '20px', + ruleInteriorStartOutset: '30px', + ruleInteriorEndOutset: '40px', + } + }, + ]; + for (rule_property in rule_properties) { + let test_cases = testCases; + for (const { input, expected } of test_cases) { + const [ruleEdgeStartOutset, ruleEdgeEndOutset, ruleInteriorStartOutset, ruleInteriorEndOutset] = rule_properties[rule_property]; + test_shorthand_value(rule_property, input, { + [ruleEdgeStartOutset]: expected.ruleEdgeStartOutset, + [ruleEdgeEndOutset]: expected.ruleEdgeEndOutset, + [ruleInteriorStartOutset]: expected.ruleInteriorStartOutset, + [ruleInteriorEndOutset]: expected.ruleInteriorEndOutset, + }); + } + } + </script> </body> </html> 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 @@ -2,7 +2,7 @@ <html> <head> <meta charset="utf-8"> - <title>CSS Gaps: parsing *-rule-outset with valid values</title> + <title>CSS Gaps: parsing rule-outset shorthands with valid values</title> <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> <script src="/resources/testharness.js"></script> @@ -12,13 +12,20 @@ <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'); - test_valid_value(property, '-20px'); - test_valid_value(property, '5%'); - test_valid_value(property, '10vmin'); - test_valid_value(property, 'calc(8em + 4ex)'); + test_valid_value(property, '0', '0px 0px / 0px 0px'); + test_valid_value(property, '-20px', '-20px -20px / -20px -20px'); + test_valid_value(property, '5%', '5% 5% / 5% 5%'); + test_valid_value(property, '10vmin', '10vmin 10vmin / 10vmin 10vmin'); + test_valid_value(property, 'calc(8em + 4ex)', 'calc(8em + 4ex) calc(8em + 4ex) / calc(8em + 4ex) calc(8em + 4ex)'); + test_valid_value(property, '10px 20px / 30px -10px'); + test_valid_value(property, '-10px -20px / 25% 24%'); + test_valid_value(property, '5% 10% / 15% 25%'); + test_valid_value(property, '10px 20px', '10px 20px / 10px 20px'); + test_valid_value(property, '10px 20px / -5px', '10px 20px / -5px -5px'); + test_valid_value(property, '10px / 20px 30px', '10px 10px / 20px 30px'); + test_valid_value(property, '10px / 20px', '10px 10px / 20px 20px'); } </script> </body>