commit 389712611ecb911128d5165d73deec7285c08a6f parent 4e7901670b998a1736fc2ea9baa48cf5ddffc7d8 Author: Javier Contreras Tenorio <javiercon@microsoft.com> Date: Wed, 12 Nov 2025 08:50:58 +0000 Bug 1999405 [wpt PR 55967] - [gap-decorations] Rule `inset` properties implementation, a=testonly Automatic update from web-platform-tests [gap-decorations] Rule `inset` properties implementation This CL implements the behavior of the newly renamed `inset` properties, previously named `outset`. Implementation-wise the only thing this means is that we flip the sign, of when we compute the gap decoration offsets. Previously, "outset" would mean that positive values extended the decorations "out", while negative values made them shrink inwards. With the resolutions from the linked issues, "insets" do those same things but reversed: positive values shrink the decorations inwards, while negative values extend them outwards. Moreover, this CL also makes sure that the initial value for the interior outset values is -50%, as per the resolutions with the renames. We update all the tests that use the "inset" property by flipping the sign of the value they were using previously. https://github.com/w3c/csswg-drafts/issues/12848. https://github.com/w3c/csswg-drafts/issues/12603. Bug: 357648037, 440054556 Change-Id: I40599d09a9f213844175261ef61956ae5067918a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7131883 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Javier Contreras <javiercon@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1542854} -- wpt-commits: 4cb0362ba6265e0818f892ff6d335b786130f55e wpt-pr: 55967 Diffstat:
23 files changed, 202 insertions(+), 202 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 @@ -19,7 +19,7 @@ .target { display: flex; - row-gap: 10px; + gap: 10px; row-rule: 10px solid black; column-rule: 10px solid black; @@ -108,27 +108,27 @@ ]); test_interpolation({ property: 'column-rule-interior-start-inset', - from: 'initial', // initial is 50%. - to: '40%', + 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%' }, + { 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-inset', - from: 'initial', // initial is 50%. - to: '40%', + 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%' }, + { 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({ @@ -207,26 +207,26 @@ test_interpolation({ property: 'column-rule-interior-start-inset', from: 'unset', - to: '40%', + 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%' }, + { 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-inset', from: 'unset', - to: '40%', + 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%' }, + { 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({ @@ -280,100 +280,100 @@ test_interpolation({ property: 'column-rule-edge-start-inset', - from: '100%', + 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: -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)' }, + { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ property: 'column-rule-edge-end-inset', - from: '100%', + 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: -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)' }, + { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ property: 'column-rule-interior-start-inset', - from: '100%', + 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: -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)' }, + { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ property: 'column-rule-interior-end-inset', - from: '100%', + 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: -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)' }, + { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ property: 'column-rule-edge-start-inset', from: '10px', - to: '10%', + to: '-10%', }, [ - { at: -0.3, expect: 'calc(-3% + 13px)' }, + { 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)' }, + { 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-inset', from: '10px', - to: '10%', + 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)' }, + { 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-inset', from: '10px', - to: '10%', + to: '-10%', }, [ - { at: -0.3, expect: 'calc(-3% + 13px)' }, + { 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)' }, + { 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-inset', from: '10px', - to: '10%', + to: '-10%', }, [ - { at: -0.3, expect: 'calc(-3% + 13px)' }, + { 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)' }, + { 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)' }, ]); </script> </body> 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 @@ -108,27 +108,27 @@ ]); test_interpolation({ property: 'row-rule-interior-start-inset', - from: 'initial', // initial is 50%. - to: '40%', + 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%' }, + { 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-inset', - from: 'initial', // initial is 50%. - to: '40%', + 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%' }, + { 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({ @@ -207,26 +207,26 @@ test_interpolation({ property: 'row-rule-interior-start-inset', from: 'unset', - to: '40%', + 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%' }, + { 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-inset', from: 'unset', - to: '40%', + 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%' }, + { 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({ @@ -280,100 +280,100 @@ test_interpolation({ property: 'row-rule-edge-start-inset', - from: '100%', + 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: -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)' }, + { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ property: 'row-rule-edge-end-inset', - from: '100%', + 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: -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)' }, + { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ property: 'row-rule-interior-start-inset', - from: '100%', + 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: -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)' }, + { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ property: 'row-rule-interior-end-inset', - from: '100%', + 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: -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)' }, + { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ property: 'row-rule-edge-start-inset', from: '10px', - to: '10%', + to: '-10%', }, [ - { at: -0.3, expect: 'calc(-3% + 13px)' }, + { 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)' }, + { 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-inset', from: '10px', - to: '10%', + 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)' }, + { 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-inset', from: '10px', - to: '10%', + to: '-10%', }, [ - { at: -0.3, expect: 'calc(-3% + 13px)' }, + { 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)' }, + { 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-inset', from: '10px', - to: '10%', + to: '-10%', }, [ - { at: -0.3, expect: 'calc(-3% + 13px)' }, + { 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)' }, + { 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)' }, ]); </script> </body> diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-011.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-011.html @@ -22,7 +22,7 @@ column-rule-color: red; column-rule-width: 2px; column-rule-break: intersection; - column-rule-inset: 2px; + column-rule-inset: -2px; width: 170px; flex-wrap: wrap; } diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-013.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-013.html @@ -22,7 +22,7 @@ column-rule-color: red; column-rule-width: 2px; column-rule-break: intersection; - column-rule-inset: -2px; + column-rule-inset: 2px; width: 170px; flex-wrap: wrap; } diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-014.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-014.html @@ -22,7 +22,7 @@ column-rule-color: red; column-rule-width: 2px; column-rule-break: intersection; - column-rule-inset: 100%; + column-rule-inset: -100%; width: 170px; flex-wrap: wrap; } 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 @@ -20,12 +20,12 @@ row-rule: 3px solid gray; column-rule-break: intersection; column-rule-interior-start-inset: 0; - column-rule-interior-end-inset: 5px; - column-rule-edge-end-inset: 10px; - column-rule-edge-start-inset: -1px; + column-rule-interior-end-inset: -5px; + column-rule-edge-end-inset: -10px; + column-rule-edge-start-inset: 1px; row-rule-break: intersection; - row-rule-edge-end-inset: -5px; - row-rule-edge-start-inset: -1px; + row-rule-edge-end-inset: 5px; + row-rule-edge-start-inset: 1px; } .item { width: 100px; 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 @@ -19,12 +19,12 @@ row-rule: 3px solid gray; row-rule-break: intersection; row-rule-interior-start-inset: 0; - row-rule-interior-end-inset: -1px; + row-rule-interior-end-inset: 1px; column-rule: 3px solid red; column-rule-break: intersection; column-rule-interior-start-inset: 0; - column-rule-interior-end-inset: 6px; - column-rule-edge-end-inset: 8px; + column-rule-interior-end-inset: -6px; + column-rule-edge-end-inset: -8px; } .item { width: 100px; 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 @@ -26,15 +26,15 @@ row-rule-color: blue; row-rule-width: 10px; row-rule-break: intersection; - row-rule-edge-end-inset: -1px; - row-rule-edge-start-inset: -2px; + row-rule-edge-end-inset: 1px; + row-rule-edge-start-inset: 2px; column-rule-style: solid; column-rule-color: red; column-rule-width: 10px; column-rule-break: intersection; - column-rule-edge-start-inset: -1px; - column-rule-edge-end-inset: 1px; - column-rule-interior-start-inset: -2px; + column-rule-edge-start-inset: 1px; + column-rule-edge-end-inset: -1px; + column-rule-interior-start-inset: 2px; width: 170px; flex-wrap: wrap; } diff --git a/testing/web-platform/tests/css/css-gaps/flex/fragmentation/flex-gap-decorations-fragmentation-004.html b/testing/web-platform/tests/css/css-gaps/flex/fragmentation/flex-gap-decorations-fragmentation-004.html @@ -29,7 +29,7 @@ column-rule-color: red; column-rule-width: 10px; column-rule-break: intersection; - column-rule-inset: -1px; + column-rule-inset: 1px; width: 170px; flex-wrap: wrap; } 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,10 +25,10 @@ row-gap: 20px; row-rule: solid 10px red; row-rule-break: intersection; - row-rule-edge-start-inset: -1px; + row-rule-edge-start-inset: 1px; column-rule: solid 6px blue; column-rule-break: intersection; - column-rule-edge-start-inset: -1px; + column-rule-edge-start-inset: 1px; column-rule-interior-end-inset: 0px; } .grid-container>div { diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-012.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-012.html @@ -20,7 +20,7 @@ row-rule-style: solid; row-rule-width: 5px; - column-rule-inset: 5px; + column-rule-inset: -5px; column-rule-break: intersection; } diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-013.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-013.html @@ -24,7 +24,7 @@ row-rule-style: solid; row-rule-width: 5px; - column-rule-inset: -5px; + column-rule-inset: 5px; column-rule-break: intersection; } diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-014.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-014.html @@ -20,7 +20,7 @@ row-rule-style: solid; row-rule-width: 5px; - column-rule-inset: 5px; + column-rule-inset: -5px; column-rule-break: none; } diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-015.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-015.html @@ -28,7 +28,7 @@ column-rule-break: spanning-item; row-rule-break: spanning-item; - column-rule-inset: 20px; + column-rule-inset: -20px; } .grid-item { 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 @@ -17,10 +17,10 @@ column-rule: 3px solid red; column-rule-break: intersection; column-rule-interior-start-inset: 0px; - column-rule-interior-end-inset: 5px; + column-rule-interior-end-inset: -5px; row-rule-break: intersection; - row-rule-edge-end-inset: -5px; - row-rule-edge-start-inset: -1px; + row-rule-edge-end-inset: 5px; + row-rule-edge-start-inset: 1px; left: 0px; top: 0px; } 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 @@ -16,13 +16,13 @@ row-rule: 3px solid gray; row-rule-break: intersection; row-rule-interior-start-inset: 0; - row-rule-interior-end-inset: -1px; + row-rule-interior-end-inset: 1px; column-rule: 3px solid red; column-rule-break: intersection; column-rule-interior-start-inset: 0; - column-rule-interior-end-inset: 8px; - column-rule-edge-start-inset: -1px; - column-rule-edge-end-inset: 10px; + column-rule-interior-end-inset: -8px; + column-rule-edge-start-inset: 1px; + column-rule-edge-end-inset: -10px; left: 0px; top: 0px; } diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/subgrid-gap-decorations-008.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/subgrid-gap-decorations-008.html @@ -22,7 +22,7 @@ column-rule: blue solid 5px; row-rule: red solid 5px; - column-rule-inset: 5px; + column-rule-inset: -5px; column-rule-break: intersection; } .item { diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-009.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-009.html @@ -25,8 +25,8 @@ row-rule-color: gold; row-rule-break: intersection; column-rule-break: intersection; - column-rule-inset: 2px; - row-rule-inset: 2px; + column-rule-inset: -2px; + row-rule-inset: -2px; column-wrap: wrap; column-width: 60px; column-count: 3; diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-010.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-010.html @@ -25,8 +25,8 @@ row-rule-color: gold; row-rule-break: intersection; column-rule-break: intersection; - column-rule-inset: -2px; - row-rule-inset: -2px; + column-rule-inset: 2px; + row-rule-inset: 2px; column-wrap: wrap; column-width: 60px; column-count: 3; diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-011.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-011.html @@ -25,8 +25,8 @@ row-rule-color: gold; row-rule-break: intersection; column-rule-break: intersection; - column-rule-inset: 100%; - row-rule-inset: 100%; + column-rule-inset: -100%; + row-rule-inset: -100%; column-wrap: wrap; column-width: 60px; column-count: 3; diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-013.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-013.html @@ -18,7 +18,7 @@ column-rule-color: gold; column-rule-width: 10px; column-rule-style: solid; - column-rule-inset: -4px; + column-rule-inset: 4px; } </style> 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 @@ -28,9 +28,9 @@ column-rule-break: intersection; column-rule-interior-start-inset: 0; column-rule-interior-end-inset: 0px; - column-rule-edge-end-inset: 5px; + column-rule-edge-end-inset: -5px; row-rule-break: intersection; - row-rule-edge-end-inset: -5px; + row-rule-edge-end-inset: 5px; gap-rule-overlap: column-over-row; } p { 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 @@ -27,10 +27,10 @@ column-wrap: wrap; column-rule-break: intersection; column-rule-interior-start-inset: 0; - column-rule-interior-end-inset: 8px; + column-rule-interior-end-inset: -8px; row-rule-break: intersection; - row-rule-edge-start-inset: 2px; - row-rule-edge-end-inset: 1px; + row-rule-edge-start-inset: -2px; + row-rule-edge-end-inset: -1px; gap-rule-overlap: column-over-row; } p {