commit 3488f07266596f1f948e37d56ec4261ab087d9fa parent 8a7819f89fd122037102364e7ed75413d71ef223 Author: Javier Contreras Tenorio <javiercon@microsoft.com> Date: Fri, 19 Dec 2025 09:16:21 +0000 Bug 2006451 [wpt PR 56788] - [gap-decorations] Rename *-{start/end}-inset to *-inset-{start/end}, a=testonly Automatic update from web-platform-tests [gap-decorations] Rename *-{start/end}-inset to *-inset-{start/end} This CL renames the aforementioned properties based on feedback given in https://github.com/w3c/csswg-drafts/issues/12603#issuecomment-3458270001 This is just a rename CL, there are no behavior changes. Bug: 357648037 Change-Id: Idf63e657ffa3a94ebe83be6799d1887cd6e26379 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7265568 Reviewed-by: Kevin Babbitt <kbabbitt@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Javier Contreras <javiercon@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1559509} -- wpt-commits: 2dfd81e7dfab17dacde9dbf9a68773c16c53497e wpt-pr: 56788 Diffstat:
19 files changed, 267 insertions(+), 267 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 @@ -11,10 +11,10 @@ <style> .parent { column-rule-style: solid; - column-rule-edge-start-inset: 20px; - column-rule-edge-end-inset: 20px; - column-rule-interior-start-inset: 20px; - column-rule-interior-end-inset: 20px; + column-rule-edge-inset-start: 20px; + column-rule-edge-inset-end: 20px; + column-rule-interior-inset-start: 20px; + column-rule-interior-inset-end: 20px; } .target { @@ -24,17 +24,17 @@ column-rule: 10px solid black; column-rule-break: intersection; - column-rule-edge-start-inset: 5px; - column-rule-edge-end-inset: 5px; - column-rule-interior-start-inset: 5px; - column-rule-interior-end-inset: 5px; + column-rule-edge-inset-start: 5px; + column-rule-edge-inset-end: 5px; + column-rule-interior-inset-start: 5px; + column-rule-interior-inset-end: 5px; } </style> </head> <body> <script> test_interpolation({ - property: 'column-rule-edge-start-inset', + property: 'column-rule-edge-inset-start', from: neutralKeyframe, to: '15px', }, [ @@ -46,7 +46,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'column-rule-edge-end-inset', + property: 'column-rule-edge-inset-end', from: neutralKeyframe, to: '15px', }, [ @@ -58,7 +58,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'column-rule-interior-start-inset', + property: 'column-rule-interior-inset-start', from: neutralKeyframe, to: '15px', }, [ @@ -70,7 +70,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'column-rule-interior-end-inset', + property: 'column-rule-interior-inset-end', from: neutralKeyframe, to: '15px', }, [ @@ -83,7 +83,7 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-inset', + property: 'column-rule-edge-inset-start', from: 'initial', // initial for `edge` is 0px. to: '10px', }, [ @@ -95,7 +95,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'column-rule-edge-end-inset', + property: 'column-rule-edge-inset-end', from: 'initial', // initial for `edge` is 0px. to: '10px', }, [ @@ -107,7 +107,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'column-rule-interior-start-inset', + property: 'column-rule-interior-inset-start', from: 'initial', // initial is -50%. to: '-40%', }, [ @@ -119,7 +119,7 @@ { at: 1.5, expect: '-35%' }, ]); test_interpolation({ - property: 'column-rule-interior-end-inset', + property: 'column-rule-interior-inset-end', from: 'initial', // initial is -50%. to: '-40%', }, [ @@ -132,7 +132,7 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-inset', + property: 'column-rule-edge-inset-start', from: 'inherit', to: '10px', }, [ @@ -144,7 +144,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'column-rule-edge-end-inset', + property: 'column-rule-edge-inset-end', from: 'inherit', to: '10px', }, [ @@ -156,7 +156,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'column-rule-interior-start-inset', + property: 'column-rule-interior-inset-start', from: 'inherit', to: '10px', }, [ @@ -168,7 +168,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'column-rule-interior-end-inset', + property: 'column-rule-interior-inset-end', from: 'inherit', to: '10px', }, [ @@ -181,7 +181,7 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-inset', + property: 'column-rule-edge-inset-start', from: 'unset', to: '10px', }, [ @@ -193,7 +193,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'column-rule-edge-end-inset', + property: 'column-rule-edge-inset-end', from: 'unset', to: '10px', }, [ @@ -205,7 +205,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'column-rule-interior-start-inset', + property: 'column-rule-interior-inset-start', from: 'unset', to: '-40%', }, [ @@ -217,7 +217,7 @@ { at: 1.5, expect: '-35%' }, ]); test_interpolation({ - property: 'column-rule-interior-end-inset', + property: 'column-rule-interior-inset-end', from: 'unset', to: '-40%', }, [ @@ -230,11 +230,11 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-inset', + property: 'column-rule-edge-inset-start', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // column-rule-edge-start-inset can be negative + { at: -0.3, expect: '-8px' }, // column-rule-edge-inset-start can be negative { at: 0, expect: '-5px' }, { at: 0.3, expect: '-2px' }, { at: 0.6, expect: '1px' }, @@ -242,11 +242,11 @@ { at: 1.5, expect: '10px' }, ]); test_interpolation({ - property: 'column-rule-edge-end-inset', + property: 'column-rule-edge-inset-end', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // column-rule-edge-end-inset can be negative + { at: -0.3, expect: '-8px' }, // column-rule-edge-inset-end can be negative { at: 0, expect: '-5px' }, { at: 0.3, expect: '-2px' }, { at: 0.6, expect: '1px' }, @@ -254,11 +254,11 @@ { at: 1.5, expect: '10px' }, ]); test_interpolation({ - property: 'column-rule-interior-start-inset', + property: 'column-rule-interior-inset-start', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // column-rule-interior-start-inset can be negative + { at: -0.3, expect: '-8px' }, // column-rule-interior-inset-start can be negative { at: 0, expect: '-5px' }, { at: 0.3, expect: '-2px' }, { at: 0.6, expect: '1px' }, @@ -266,11 +266,11 @@ { at: 1.5, expect: '10px' }, ]); test_interpolation({ - property: 'column-rule-interior-end-inset', + property: 'column-rule-interior-inset-end', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // column-rule-interior-end-inset can be negative + { at: -0.3, expect: '-8px' }, // column-rule-interior-inset-end can be negative { at: 0, expect: '-5px' }, { at: 0.3, expect: '-2px' }, { at: 0.6, expect: '1px' }, @@ -279,7 +279,7 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-inset', + property: 'column-rule-edge-inset-start', from: '-100%', to: '1px', }, [ @@ -291,7 +291,7 @@ { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ - property: 'column-rule-edge-end-inset', + property: 'column-rule-edge-inset-end', from: '-100%', to: '1px', }, [ @@ -303,7 +303,7 @@ { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ - property: 'column-rule-interior-start-inset', + property: 'column-rule-interior-inset-start', from: '-100%', to: '1px', }, [ @@ -315,7 +315,7 @@ { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ - property: 'column-rule-interior-end-inset', + property: 'column-rule-interior-inset-end', from: '-100%', to: '1px', }, [ @@ -328,7 +328,7 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-inset', + property: 'column-rule-edge-inset-start', from: '10px', to: '-10%', }, [ @@ -340,7 +340,7 @@ { at: 1.5, expect: 'calc(-15% - 5px)' }, ]); test_interpolation({ - property: 'column-rule-edge-end-inset', + property: 'column-rule-edge-inset-end', from: '10px', to: '-10%', }, [ @@ -352,7 +352,7 @@ { at: 1.5, expect: 'calc(-15% - 5px)' }, ]); test_interpolation({ - property: 'column-rule-interior-start-inset', + property: 'column-rule-interior-inset-start', from: '10px', to: '-10%', }, [ @@ -364,7 +364,7 @@ { at: 1.5, expect: 'calc(-15% - 5px)' }, ]); test_interpolation({ - property: 'column-rule-interior-end-inset', + property: 'column-rule-interior-inset-end', from: '10px', to: '-10%', }, [ 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 @@ -14,29 +14,29 @@ <script> test(() => { target.style.rowRuleStyle = 'solid'; - target.style.rowRuleEdgeStartInset = '1px'; - target.style.rowRuleEdgeEndInset = '1px'; - target.style.rowRuleInteriorStartInset = '1px'; - target.style.rowRuleInteriorEndInset = '1px'; - var animation = target.animate([{}, {rowRuleEdgeStartInset: '11px'}], 1000); + target.style.rowRuleEdgeInsetStart = '1px'; + target.style.rowRuleEdgeInsetEnd = '1px'; + target.style.rowRuleInteriorInsetStart = '1px'; + target.style.rowRuleInteriorInsetEnd = '1px'; + var animation = target.animate([{}, {rowRuleEdgeInsetStart: '11px'}], 1000); animation.pause(); animation.currentTime = 500; - assert_equals(getComputedStyle(target).rowRuleEdgeStartInset, '6px'); + assert_equals(getComputedStyle(target).rowRuleEdgeInsetStart, '6px'); - var animation2 = target.animate([{}, {rowRuleEdgeEndInset: '11px'}], 1000); + var animation2 = target.animate([{}, {rowRuleEdgeInsetEnd: '11px'}], 1000); animation2.pause(); animation2.currentTime = 500; - assert_equals(getComputedStyle(target).rowRuleEdgeEndInset, '6px'); + assert_equals(getComputedStyle(target).rowRuleEdgeInsetEnd, '6px'); - var animation3 = target.animate([{}, {rowRuleInteriorStartInset: '11px'}], 1000); + var animation3 = target.animate([{}, {rowRuleInteriorInsetStart: '11px'}], 1000); animation3.pause(); animation3.currentTime = 500; - assert_equals(getComputedStyle(target).rowRuleInteriorStartInset, '6px'); + assert_equals(getComputedStyle(target).rowRuleInteriorInsetStart, '6px'); - var animation4 = target.animate([{}, {rowRuleInteriorEndInset: '11px'}], 1000); + var animation4 = target.animate([{}, {rowRuleInteriorInsetEnd: '11px'}], 1000); animation4.pause(); animation4.currentTime = 500; - assert_equals(getComputedStyle(target).rowRuleInteriorEndInset, '6px'); + assert_equals(getComputedStyle(target).rowRuleInteriorInsetEnd, '6px'); }, 'gap decorations row-rule-inset properties support neutral keyframe.'); </script> </body> 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 @@ -14,30 +14,30 @@ <script> test(() => { target.style.columnRuleStyle = 'solid'; - target.style.columnRuleEdgeStartInset = '1px'; - target.style.columnRuleEdgeEndInset = '1px'; - target.style.columnRuleInteriorStartInset = '1px'; - target.style.columnRuleInteriorEndInset = '1px'; + target.style.columnRuleEdgeInsetStart = '1px'; + target.style.columnRuleEdgeInsetEnd = '1px'; + target.style.columnRuleInteriorInsetStart = '1px'; + target.style.columnRuleInteriorInsetEnd = '1px'; - var animation = target.animate([{}, {columnRuleEdgeStartInset: '11px'}], 1000); + var animation = target.animate([{}, {columnRuleEdgeInsetStart: '11px'}], 1000); animation.pause(); animation.currentTime = 500; - assert_equals(getComputedStyle(target).columnRuleEdgeStartInset, '6px'); + assert_equals(getComputedStyle(target).columnRuleEdgeInsetStart, '6px'); - var animation2 = target.animate([{}, {columnRuleEdgeEndInset: '11px'}], 1000); + var animation2 = target.animate([{}, {columnRuleEdgeInsetEnd: '11px'}], 1000); animation2.pause(); animation2.currentTime = 500; - assert_equals(getComputedStyle(target).columnRuleEdgeEndInset, '6px'); + assert_equals(getComputedStyle(target).columnRuleEdgeInsetEnd, '6px'); - var animation3 = target.animate([{}, {columnRuleInteriorStartInset: '11px'}], 1000); + var animation3 = target.animate([{}, {columnRuleInteriorInsetStart: '11px'}], 1000); animation3.pause(); animation3.currentTime = 500; - assert_equals(getComputedStyle(target).columnRuleInteriorStartInset, '6px'); + assert_equals(getComputedStyle(target).columnRuleInteriorInsetStart, '6px'); - var animation4 = target.animate([{}, {columnRuleInteriorEndInset: '11px'}], 1000); + var animation4 = target.animate([{}, {columnRuleInteriorInsetEnd: '11px'}], 1000); animation4.pause(); animation4.currentTime = 500; - assert_equals(getComputedStyle(target).columnRuleInteriorEndInset, '6px'); + assert_equals(getComputedStyle(target).columnRuleInteriorInsetEnd, '6px'); }, 'gap decorations column-rule-inset properties support neutral keyframe.'); </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 @@ -11,10 +11,10 @@ <style> .parent { row-rule-style: solid; - row-rule-edge-start-inset: 20px; - row-rule-edge-end-inset: 20px; - row-rule-interior-start-inset: 20px; - row-rule-interior-end-inset: 20px; + row-rule-edge-inset-start: 20px; + row-rule-edge-inset-end: 20px; + row-rule-interior-inset-start: 20px; + row-rule-interior-inset-end: 20px; } .target { @@ -24,17 +24,17 @@ column-rule: 10px solid black; row-rule-break: intersection; - row-rule-edge-start-inset: 5px; - row-rule-edge-end-inset: 5px; - row-rule-interior-start-inset: 5px; - row-rule-interior-end-inset: 5px; + row-rule-edge-inset-start: 5px; + row-rule-edge-inset-end: 5px; + row-rule-interior-inset-start: 5px; + row-rule-interior-inset-end: 5px; } </style> </head> <body> <script> test_interpolation({ - property: 'row-rule-edge-start-inset', + property: 'row-rule-edge-inset-start', from: neutralKeyframe, to: '15px', }, [ @@ -46,7 +46,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'row-rule-edge-end-inset', + property: 'row-rule-edge-inset-end', from: neutralKeyframe, to: '15px', }, [ @@ -58,7 +58,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'row-rule-interior-start-inset', + property: 'row-rule-interior-inset-start', from: neutralKeyframe, to: '15px', }, [ @@ -70,7 +70,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'row-rule-interior-end-inset', + property: 'row-rule-interior-inset-end', from: neutralKeyframe, to: '15px', }, [ @@ -83,7 +83,7 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-inset', + property: 'row-rule-edge-inset-start', from: 'initial', // initial for `edge` is 0px. to: '10px', }, [ @@ -95,7 +95,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'row-rule-edge-end-inset', + property: 'row-rule-edge-inset-end', from: 'initial', // initial for `edge` is 0px. to: '10px', }, [ @@ -107,7 +107,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'row-rule-interior-start-inset', + property: 'row-rule-interior-inset-start', from: 'initial', // initial is -50%. to: '-40%', }, [ @@ -119,7 +119,7 @@ { at: 1.5, expect: '-35%' }, ]); test_interpolation({ - property: 'row-rule-interior-end-inset', + property: 'row-rule-interior-inset-end', from: 'initial', // initial is -50%. to: '-40%', }, [ @@ -132,7 +132,7 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-inset', + property: 'row-rule-edge-inset-start', from: 'inherit', to: '10px', }, [ @@ -144,7 +144,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'row-rule-edge-end-inset', + property: 'row-rule-edge-inset-end', from: 'inherit', to: '10px', }, [ @@ -156,7 +156,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'row-rule-interior-start-inset', + property: 'row-rule-interior-inset-start', from: 'inherit', to: '10px', }, [ @@ -168,7 +168,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'row-rule-interior-end-inset', + property: 'row-rule-interior-inset-end', from: 'inherit', to: '10px', }, [ @@ -181,7 +181,7 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-inset', + property: 'row-rule-edge-inset-start', from: 'unset', to: '10px', }, [ @@ -193,7 +193,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'row-rule-edge-end-inset', + property: 'row-rule-edge-inset-end', from: 'unset', to: '10px', }, [ @@ -205,7 +205,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'row-rule-interior-start-inset', + property: 'row-rule-interior-inset-start', from: 'unset', to: '-40%', }, [ @@ -217,7 +217,7 @@ { at: 1.5, expect: '-35%' }, ]); test_interpolation({ - property: 'row-rule-interior-end-inset', + property: 'row-rule-interior-inset-end', from: 'unset', to: '-40%', }, [ @@ -230,11 +230,11 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-inset', + property: 'row-rule-edge-inset-start', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // row-rule-edge-start-inset can be negative + { at: -0.3, expect: '-8px' }, // row-rule-edge-inset-start can be negative { at: 0, expect: '-5px' }, { at: 0.3, expect: '-2px' }, { at: 0.6, expect: '1px' }, @@ -242,11 +242,11 @@ { at: 1.5, expect: '10px' }, ]); test_interpolation({ - property: 'row-rule-edge-end-inset', + property: 'row-rule-edge-inset-end', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // row-rule-edge-end-inset can be negative + { at: -0.3, expect: '-8px' }, // row-rule-edge-inset-end can be negative { at: 0, expect: '-5px' }, { at: 0.3, expect: '-2px' }, { at: 0.6, expect: '1px' }, @@ -254,11 +254,11 @@ { at: 1.5, expect: '10px' }, ]); test_interpolation({ - property: 'row-rule-interior-start-inset', + property: 'row-rule-interior-inset-start', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // row-rule-interior-start-inset can be negative + { at: -0.3, expect: '-8px' }, // row-rule-interior-inset-start can be negative { at: 0, expect: '-5px' }, { at: 0.3, expect: '-2px' }, { at: 0.6, expect: '1px' }, @@ -266,11 +266,11 @@ { at: 1.5, expect: '10px' }, ]); test_interpolation({ - property: 'row-rule-interior-end-inset', + property: 'row-rule-interior-inset-end', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // row-rule-interior-end-inset can be negative + { at: -0.3, expect: '-8px' }, // row-rule-interior-inset-end can be negative { at: 0, expect: '-5px' }, { at: 0.3, expect: '-2px' }, { at: 0.6, expect: '1px' }, @@ -279,7 +279,7 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-inset', + property: 'row-rule-edge-inset-start', from: '-100%', to: '1px', }, [ @@ -291,7 +291,7 @@ { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ - property: 'row-rule-edge-end-inset', + property: 'row-rule-edge-inset-end', from: '-100%', to: '1px', }, [ @@ -303,7 +303,7 @@ { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ - property: 'row-rule-interior-start-inset', + property: 'row-rule-interior-inset-start', from: '-100%', to: '1px', }, [ @@ -315,7 +315,7 @@ { at: 1.5, expect: 'calc(50% + 1.5px)' }, ]); test_interpolation({ - property: 'row-rule-interior-end-inset', + property: 'row-rule-interior-inset-end', from: '-100%', to: '1px', }, [ @@ -328,7 +328,7 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-inset', + property: 'row-rule-edge-inset-start', from: '10px', to: '-10%', }, [ @@ -340,7 +340,7 @@ { at: 1.5, expect: 'calc(-15% - 5px)' }, ]); test_interpolation({ - property: 'row-rule-edge-end-inset', + property: 'row-rule-edge-inset-end', from: '10px', to: '-10%', }, [ @@ -352,7 +352,7 @@ { at: 1.5, expect: 'calc(-15% - 5px)' }, ]); test_interpolation({ - property: 'row-rule-interior-start-inset', + property: 'row-rule-interior-inset-start', from: '10px', to: '-10%', }, [ @@ -364,7 +364,7 @@ { at: 1.5, expect: 'calc(-15% - 5px)' }, ]); test_interpolation({ - property: 'row-rule-interior-end-inset', + property: 'row-rule-interior-inset-end', from: '10px', to: '-10%', }, [ 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 @@ -19,13 +19,13 @@ column-rule: 3px solid red; 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-inset-start: 0; + column-rule-interior-inset-end: -5px; + column-rule-edge-inset-end: -10px; + column-rule-edge-inset-start: 1px; row-rule-break: intersection; - row-rule-edge-end-inset: 5px; - row-rule-edge-start-inset: 1px; + row-rule-edge-inset-end: 5px; + row-rule-edge-inset-start: 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 @@ -18,13 +18,13 @@ width: 340px; row-rule: 3px solid gray; row-rule-break: intersection; - row-rule-interior-start-inset: 0; - row-rule-interior-end-inset: 1px; + row-rule-interior-inset-start: 0; + row-rule-interior-inset-end: 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-inset-start: 0; + column-rule-interior-inset-end: -6px; + column-rule-edge-inset-end: -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-inset-end: 1px; + row-rule-edge-inset-start: 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-inset-start: 1px; + column-rule-edge-inset-end: -1px; + column-rule-interior-inset-start: 2px; 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,11 +25,11 @@ row-gap: 20px; row-rule: solid 10px red; row-rule-break: intersection; - row-rule-edge-start-inset: 1px; + row-rule-edge-inset-start: 1px; column-rule: solid 6px blue; column-rule-break: intersection; - column-rule-edge-start-inset: 1px; - column-rule-interior-end-inset: 0px; + column-rule-edge-inset-start: 1px; + column-rule-interior-inset-end: 0px; } .grid-container>div { background-color: skyblue; 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 @@ -16,11 +16,11 @@ row-rule: 3px solid gray; column-rule: 3px solid red; column-rule-break: intersection; - column-rule-interior-start-inset: 0px; - column-rule-interior-end-inset: -5px; + column-rule-interior-inset-start: 0px; + column-rule-interior-inset-end: -5px; row-rule-break: intersection; - row-rule-edge-end-inset: 5px; - row-rule-edge-start-inset: 1px; + row-rule-edge-inset-end: 5px; + row-rule-edge-inset-start: 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 @@ -15,14 +15,14 @@ grid-gap: 20px; row-rule: 3px solid gray; row-rule-break: intersection; - row-rule-interior-start-inset: 0; - row-rule-interior-end-inset: 1px; + row-rule-interior-inset-start: 0; + row-rule-interior-inset-end: 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-inset-start: 0; + column-rule-interior-inset-end: -8px; + column-rule-edge-inset-start: 1px; + column-rule-edge-inset-end: -10px; left: 0px; top: 0px; } 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 @@ -26,11 +26,11 @@ row-rule-color: gold; column-wrap: wrap; column-rule-break: intersection; - column-rule-interior-start-inset: 0; - column-rule-interior-end-inset: 0px; - column-rule-edge-end-inset: -5px; + column-rule-interior-inset-start: 0; + column-rule-interior-inset-end: 0px; + column-rule-edge-inset-end: -5px; row-rule-break: intersection; - row-rule-edge-end-inset: 5px; + row-rule-edge-inset-end: 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 @@ -26,11 +26,11 @@ row-rule-color: gold; column-wrap: wrap; column-rule-break: intersection; - column-rule-interior-start-inset: 0; - column-rule-interior-end-inset: -8px; + column-rule-interior-inset-start: 0; + column-rule-interior-inset-end: -8px; row-rule-break: intersection; - row-rule-edge-start-inset: -2px; - row-rule-edge-end-inset: -1px; + row-rule-edge-inset-start: -2px; + row-rule-edge-inset-end: -1px; gap-rule-overlap: column-over-row; } p { diff --git a/testing/web-platform/tests/css/css-gaps/parsing/gap-decorations-bidirectional-shorthands.html b/testing/web-platform/tests/css/css-gaps/parsing/gap-decorations-bidirectional-shorthands.html @@ -25,14 +25,14 @@ column-rule-break: intersection; row-rule-break: intersection; - column-rule-edge-start-inset: 10px; - row-rule-edge-start-inset: 10px; - column-rule-edge-end-inset: 5px; - row-rule-edge-end-inset: 5px; - column-rule-interior-start-inset: 10px; - row-rule-interior-start-inset: 10px; - column-rule-interior-end-inset: 5px; - row-rule-interior-end-inset: 5px; + column-rule-edge-inset-start: 10px; + row-rule-edge-inset-start: 10px; + column-rule-edge-inset-end: 5px; + row-rule-edge-inset-end: 5px; + column-rule-interior-inset-start: 10px; + row-rule-interior-inset-start: 10px; + column-rule-interior-inset-end: 5px; + row-rule-interior-inset-end: 5px; } #target2 { @@ -48,14 +48,14 @@ column-rule-break: intersection; row-rule-break: spanning-item; - column-rule-edge-start-inset: 5px; - row-rule-edge-start-inset: 10px; - column-rule-edge-end-inset: 15px; - row-rule-edge-end-inset: 20px; - column-rule-interior-start-inset: 25px; - row-rule-interior-start-inset: 30px; - column-rule-interior-end-inset: 35px; - row-rule-interior-end-inset: 40px; + column-rule-edge-inset-start: 5px; + row-rule-edge-inset-start: 10px; + column-rule-edge-inset-end: 15px; + row-rule-edge-inset-end: 20px; + column-rule-interior-inset-start: 25px; + row-rule-interior-inset-start: 30px; + column-rule-interior-inset-end: 35px; + row-rule-interior-inset-end: 40px; } </style> <script> diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-start-end-inset-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-start-end-inset-computed.html @@ -19,7 +19,7 @@ </style> <script> // TODO(javiercon): Add shorthand support and test here. - const properties = ["column-rule-edge-start-inset", "row-rule-edge-start-inset", "column-rule-edge-end-inset", "row-rule-edge-end-inset"]; + const properties = ["column-rule-edge-inset-start", "row-rule-edge-inset-start", "column-rule-edge-inset-end", "row-rule-edge-inset-end"]; for (const property of properties) { test_computed_value(property, "10px"); test_computed_value(property, "-20px"); diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-egde-start-end-inset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-egde-start-end-inset-invalid.html @@ -13,7 +13,7 @@ <div id="target"></div> <script> // TODO(javiercon): Add shorthand support and test here. - const properties = ['column-rule-edge-start-inset', 'row-rule-edge-start-inset', 'column-rule-edge-end-inset', 'row-rule-edge-end-inset']; + const properties = ['column-rule-edge-inset-start', 'row-rule-edge-inset-start', 'column-rule-edge-inset-end', 'row-rule-edge-inset-end']; 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-inset-bidirectional-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-inset-bidirectional-shorthand.html @@ -13,102 +13,102 @@ <body> <script> const rule_properties = { - 'rule-inset': ['column-rule-edge-start-inset', 'column-rule-edge-end-inset', - 'column-rule-interior-start-inset', 'column-rule-interior-end-inset', - 'row-rule-edge-start-inset', 'row-rule-edge-end-inset', - 'row-rule-interior-start-inset', 'row-rule-interior-end-inset'] + 'rule-inset': ['column-rule-edge-inset-start', 'column-rule-edge-inset-end', + 'column-rule-interior-inset-start', 'column-rule-interior-inset-end', + 'row-rule-edge-inset-start', 'row-rule-edge-inset-end', + 'row-rule-interior-inset-start', 'row-rule-interior-inset-end'] }; const bidirectionalTestCases = [ { input: '0px', expected: { - columnRuleEdgeStartInset: '0px', - columnRuleEdgeEndInset: '0px', - columnRuleInteriorStartInset: '0px', - columnRuleInteriorEndInset: '0px', - rowRuleEdgeStartInset: '0px', - rowRuleEdgeEndInset: '0px', - rowRuleInteriorStartInset: '0px', - rowRuleInteriorEndInset: '0px' + columnRuleEdgeInsetStart: '0px', + columnRuleEdgeInsetEnd: '0px', + columnRuleInteriorInsetStart: '0px', + columnRuleInteriorInsetEnd: '0px', + rowRuleEdgeInsetStart: '0px', + rowRuleEdgeInsetEnd: '0px', + rowRuleInteriorInsetStart: '0px', + rowRuleInteriorInsetEnd: '0px' } }, { input: '10px', expected: { - columnRuleEdgeStartInset: '10px', - columnRuleEdgeEndInset: '10px', - columnRuleInteriorStartInset: '10px', - columnRuleInteriorEndInset: '10px', - rowRuleEdgeStartInset: '10px', - rowRuleEdgeEndInset: '10px', - rowRuleInteriorStartInset: '10px', - rowRuleInteriorEndInset: '10px' + columnRuleEdgeInsetStart: '10px', + columnRuleEdgeInsetEnd: '10px', + columnRuleInteriorInsetStart: '10px', + columnRuleInteriorInsetEnd: '10px', + rowRuleEdgeInsetStart: '10px', + rowRuleEdgeInsetEnd: '10px', + rowRuleInteriorInsetStart: '10px', + rowRuleInteriorInsetEnd: '10px' } }, { input: '50%', expected: { - columnRuleEdgeStartInset: '50%', - columnRuleEdgeEndInset: '50%', - columnRuleInteriorStartInset: '50%', - columnRuleInteriorEndInset: '50%', - rowRuleEdgeStartInset: '50%', - rowRuleEdgeEndInset: '50%', - rowRuleInteriorStartInset: '50%', - rowRuleInteriorEndInset: '50%', + columnRuleEdgeInsetStart: '50%', + columnRuleEdgeInsetEnd: '50%', + columnRuleInteriorInsetStart: '50%', + columnRuleInteriorInsetEnd: '50%', + rowRuleEdgeInsetStart: '50%', + rowRuleEdgeInsetEnd: '50%', + rowRuleInteriorInsetStart: '50%', + rowRuleInteriorInsetEnd: '50%', } }, { input: '10px 20px', expected: { - columnRuleEdgeStartInset: '10px', - columnRuleEdgeEndInset: '20px', - columnRuleInteriorStartInset: '10px', - columnRuleInteriorEndInset: '20px', - rowRuleEdgeStartInset: '10px', - rowRuleEdgeEndInset: '20px', - rowRuleInteriorStartInset: '10px', - rowRuleInteriorEndInset: '20px', + columnRuleEdgeInsetStart: '10px', + columnRuleEdgeInsetEnd: '20px', + columnRuleInteriorInsetStart: '10px', + columnRuleInteriorInsetEnd: '20px', + rowRuleEdgeInsetStart: '10px', + rowRuleEdgeInsetEnd: '20px', + rowRuleInteriorInsetStart: '10px', + rowRuleInteriorInsetEnd: '20px', } }, { input: '10px 20px / 30px', expected: { - columnRuleEdgeStartInset: '10px', - columnRuleEdgeEndInset: '20px', - columnRuleInteriorStartInset: '30px', - columnRuleInteriorEndInset: '30px', - rowRuleEdgeStartInset: '10px', - rowRuleEdgeEndInset: '20px', - rowRuleInteriorStartInset: '30px', - rowRuleInteriorEndInset: '30px', + columnRuleEdgeInsetStart: '10px', + columnRuleEdgeInsetEnd: '20px', + columnRuleInteriorInsetStart: '30px', + columnRuleInteriorInsetEnd: '30px', + rowRuleEdgeInsetStart: '10px', + rowRuleEdgeInsetEnd: '20px', + rowRuleInteriorInsetStart: '30px', + rowRuleInteriorInsetEnd: '30px', } }, { input: '10px / 20px 30px', expected: { - columnRuleEdgeStartInset: '10px', - columnRuleEdgeEndInset: '10px', - columnRuleInteriorStartInset: '20px', - columnRuleInteriorEndInset: '30px', - rowRuleEdgeStartInset: '10px', - rowRuleEdgeEndInset: '10px', - rowRuleInteriorStartInset: '20px', - rowRuleInteriorEndInset: '30px', + columnRuleEdgeInsetStart: '10px', + columnRuleEdgeInsetEnd: '10px', + columnRuleInteriorInsetStart: '20px', + columnRuleInteriorInsetEnd: '30px', + rowRuleEdgeInsetStart: '10px', + rowRuleEdgeInsetEnd: '10px', + rowRuleInteriorInsetStart: '20px', + rowRuleInteriorInsetEnd: '30px', } }, { input: '10px 20px / 30px 40px', expected: { - columnRuleEdgeStartInset: '10px', - columnRuleEdgeEndInset: '20px', - columnRuleInteriorStartInset: '30px', - columnRuleInteriorEndInset: '40px', - rowRuleEdgeStartInset: '10px', - rowRuleEdgeEndInset: '20px', - rowRuleInteriorStartInset: '30px', - rowRuleInteriorEndInset: '40px', + columnRuleEdgeInsetStart: '10px', + columnRuleEdgeInsetEnd: '20px', + columnRuleInteriorInsetStart: '30px', + columnRuleInteriorInsetEnd: '40px', + rowRuleEdgeInsetStart: '10px', + rowRuleEdgeInsetEnd: '20px', + rowRuleInteriorInsetStart: '30px', + rowRuleInteriorInsetEnd: '40px', } }, @@ -119,17 +119,17 @@ const test_cases = bidirectionalTestCases; for (const { input, expected } of test_cases) { - const [columnRuleEdgeStartInset, columnRuleEdgeEndInset, columnRuleInteriorStartInset, columnRuleInteriorEndInset, rowRuleEdgeStartInset, rowRuleEdgeEndInset, rowRuleInteriorStartInset, rowRuleInteriorEndInset] = rule_properties[rule_property]; + const [columnRuleEdgeInsetStart, columnRuleEdgeInsetEnd, columnRuleInteriorInsetStart, columnRuleInteriorInsetEnd, rowRuleEdgeInsetStart, rowRuleEdgeInsetEnd, rowRuleInteriorInsetStart, rowRuleInteriorInsetEnd] = rule_properties[rule_property]; test_shorthand_value(rule_property, input, { - [columnRuleEdgeStartInset]: expected.columnRuleEdgeStartInset, - [columnRuleEdgeEndInset]: expected.columnRuleEdgeEndInset, - [columnRuleInteriorStartInset]: expected.columnRuleInteriorStartInset, - [columnRuleInteriorEndInset]: expected.columnRuleInteriorEndInset, - [rowRuleEdgeStartInset]: expected.rowRuleEdgeStartInset, - [rowRuleEdgeEndInset]: expected.rowRuleEdgeEndInset, - [rowRuleInteriorStartInset]: expected.rowRuleInteriorStartInset, - [rowRuleInteriorEndInset]: expected.rowRuleInteriorEndInset, + [columnRuleEdgeInsetStart]: expected.columnRuleEdgeInsetStart, + [columnRuleEdgeInsetEnd]: expected.columnRuleEdgeInsetEnd, + [columnRuleInteriorInsetStart]: expected.columnRuleInteriorInsetStart, + [columnRuleInteriorInsetEnd]: expected.columnRuleInteriorInsetEnd, + [rowRuleEdgeInsetStart]: expected.rowRuleEdgeInsetStart, + [rowRuleEdgeInsetEnd]: expected.rowRuleEdgeInsetEnd, + [rowRuleInteriorInsetStart]: expected.rowRuleInteriorInsetStart, + [rowRuleInteriorInsetEnd]: expected.rowRuleInteriorInsetEnd, }); } } diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-inset-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-inset-shorthand.html @@ -13,73 +13,73 @@ <body> <script> const rule_properties = { - 'column-rule-inset': ['column-rule-edge-start-inset', 'column-rule-edge-end-inset', - 'column-rule-interior-start-inset', 'column-rule-interior-end-inset'], - 'row-rule-inset': ['row-rule-edge-start-inset', 'row-rule-edge-end-inset', - 'row-rule-interior-start-inset', 'row-rule-interior-end-inset'] + 'column-rule-inset': ['column-rule-edge-inset-start', 'column-rule-edge-inset-end', + 'column-rule-interior-inset-start', 'column-rule-interior-inset-end'], + 'row-rule-inset': ['row-rule-edge-inset-start', 'row-rule-edge-inset-end', + 'row-rule-interior-inset-start', 'row-rule-interior-inset-end'] }; const testCases = [ { input: '0px', expected: { - ruleEdgeStartInset: '0px', - ruleEdgeEndInset: '0px', - ruleInteriorStartInset: '0px', - ruleInteriorEndInset: '0px', + ruleEdgeInsetStart: '0px', + ruleEdgeInsetEnd: '0px', + ruleInteriorInsetStart: '0px', + ruleInteriorInsetEnd: '0px', } }, { input: '10px', expected: { - ruleEdgeStartInset: '10px', - ruleEdgeEndInset: '10px', - ruleInteriorStartInset: '10px', - ruleInteriorEndInset: '10px' + ruleEdgeInsetStart: '10px', + ruleEdgeInsetEnd: '10px', + ruleInteriorInsetStart: '10px', + ruleInteriorInsetEnd: '10px' } }, { input: '50%', expected: { - ruleEdgeStartInset: '50%', - ruleEdgeEndInset: '50%', - ruleInteriorStartInset: '50%', - ruleInteriorEndInset: '50%', + ruleEdgeInsetStart: '50%', + ruleEdgeInsetEnd: '50%', + ruleInteriorInsetStart: '50%', + ruleInteriorInsetEnd: '50%', } }, { input: '10px 20px', expected: { - ruleEdgeStartInset: '10px', - ruleEdgeEndInset: '20px', - ruleInteriorStartInset: '10px', - ruleInteriorEndInset: '20px', + ruleEdgeInsetStart: '10px', + ruleEdgeInsetEnd: '20px', + ruleInteriorInsetStart: '10px', + ruleInteriorInsetEnd: '20px', } }, { input: '10px 20px / 30px', expected: { - ruleEdgeStartInset: '10px', - ruleEdgeEndInset: '20px', - ruleInteriorStartInset: '30px', - ruleInteriorEndInset: '30px', + ruleEdgeInsetStart: '10px', + ruleEdgeInsetEnd: '20px', + ruleInteriorInsetStart: '30px', + ruleInteriorInsetEnd: '30px', } }, { input: '10px / 20px 30px', expected: { - ruleEdgeStartInset: '10px', - ruleEdgeEndInset: '10px', - ruleInteriorStartInset: '20px', - ruleInteriorEndInset: '30px', + ruleEdgeInsetStart: '10px', + ruleEdgeInsetEnd: '10px', + ruleInteriorInsetStart: '20px', + ruleInteriorInsetEnd: '30px', } }, { input: '10px 20px / 30px 40px', expected: { - ruleEdgeStartInset: '10px', - ruleEdgeEndInset: '20px', - ruleInteriorStartInset: '30px', - ruleInteriorEndInset: '40px', + ruleEdgeInsetStart: '10px', + ruleEdgeInsetEnd: '20px', + ruleInteriorInsetStart: '30px', + ruleInteriorInsetEnd: '40px', } }, ]; @@ -89,12 +89,12 @@ const test_cases = testCases; for (const { input, expected } of test_cases) { - const [ruleEdgeStartInset, ruleEdgeEndInset, ruleInteriorStartInset, ruleInteriorEndInset] = rule_properties[rule_property]; + const [ruleEdgeInsetStart, ruleEdgeInsetEnd, ruleInteriorInsetStart, ruleInteriorInsetEnd] = rule_properties[rule_property]; test_shorthand_value(rule_property, input, { - [ruleEdgeStartInset]: expected.ruleEdgeStartInset, - [ruleEdgeEndInset]: expected.ruleEdgeEndInset, - [ruleInteriorStartInset]: expected.ruleInteriorStartInset, - [ruleInteriorEndInset]: expected.ruleInteriorEndInset, + [ruleEdgeInsetStart]: expected.ruleEdgeInsetStart, + [ruleEdgeInsetEnd]: expected.ruleEdgeInsetEnd, + [ruleInteriorInsetStart]: expected.ruleInteriorInsetStart, + [ruleInteriorInsetEnd]: expected.ruleInteriorInsetEnd, }); } } diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-start-end-inset-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-start-end-inset-computed.html @@ -19,7 +19,7 @@ </style> <script> // TODO(javiercon): Add shorthand support and test here. - const properties = ["column-rule-interior-start-inset", "row-rule-interior-start-inset", "column-rule-interior-end-inset", "row-rule-interior-end-inset"]; + const properties = ["column-rule-interior-inset-start", "row-rule-interior-inset-start", "column-rule-interior-inset-end", "row-rule-interior-inset-end"]; for (const property of properties) { test_computed_value(property, "10px"); test_computed_value(property, "-20px"); diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-start-end-inset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-start-end-inset-invalid.html @@ -13,7 +13,7 @@ <div id="target"></div> <script> // TODO(javiercon): Add shorthand support and test here. - const properties = ['column-rule-interior-start-inset', 'row-rule-interior-start-inset', 'column-rule-interior-end-inset', 'row-rule-interior-end-inset']; + const properties = ['column-rule-interior-inset-start', 'row-rule-interior-inset-start', 'column-rule-interior-inset-end', 'row-rule-interior-inset-end']; for (const property of properties) { test_invalid_value(property, 'auto'); test_invalid_value(property, 'none');