commit 11eb2828499242dc8f4c0a521322aef6ef93fb61 parent 463ddc132e9e904b89ea9b77d7308b65fb5fb5ab Author: Javier Contreras Tenorio <javiercon@microsoft.com> Date: Mon, 10 Nov 2025 22:21:11 +0000 Bug 1999318 [wpt PR 55960] - [gap-decorations] Rename `outset` properties to `inset`, a=testonly Automatic update from web-platform-tests [gap-decorations] Rename `outset` properties to `inset` Per recent resolutions to the spec, rule `outset` properties are going to be named with `inset` instead. Although this requires some changes in behavior, this CL only renames the relevant properties (and their shorthands). A follow up CL will rename any test files referring to "outset" and a follow up CL to that will implement the change in behavior along with the changes in tests. https://github.com/w3c/csswg-drafts/issues/12848 https://github.com/w3c/csswg-drafts/issues/12603 The links in some comments have been modified too to point to their new sections in the spec, although they won't work right now since the PR to change the spec is still under review https://github.com/w3c/csswg-drafts/pull/13024. Bug: 357648037, 440054556 Change-Id: I81414a8dc7ee9974e90dbae38f46ee85d76a6251 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7127743 Commit-Queue: Javier Contreras <javiercon@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1542664} -- wpt-commits: b309d20b304af67e4c7e38c5ebd220a47347edb9 wpt-pr: 55960 Diffstat:
50 files changed, 329 insertions(+), 329 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 properties interpolation</title> + <title>column-rule-inset properties interpolation</title> <link rel="author" title="Javier Contreras" href="mailto:javiercon@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> <script src="/resources/testharness.js"></script> @@ -11,10 +11,10 @@ <style> .parent { 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; + column-rule-edge-start-inset: 20px; + column-rule-edge-end-inset: 20px; + column-rule-interior-start-inset: 20px; + column-rule-interior-end-inset: 20px; } .target { @@ -24,17 +24,17 @@ column-rule: 10px solid black; column-rule-break: intersection; - column-rule-edge-start-outset: 5px; - column-rule-edge-end-outset: 5px; - column-rule-interior-start-outset: 5px; - column-rule-interior-end-outset: 5px; + column-rule-edge-start-inset: 5px; + column-rule-edge-end-inset: 5px; + column-rule-interior-start-inset: 5px; + column-rule-interior-end-inset: 5px; } </style> </head> <body> <script> test_interpolation({ - property: 'column-rule-edge-start-outset', + property: 'column-rule-edge-start-inset', from: neutralKeyframe, to: '15px', }, [ @@ -46,7 +46,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'column-rule-edge-end-outset', + property: 'column-rule-edge-end-inset', from: neutralKeyframe, to: '15px', }, [ @@ -58,7 +58,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'column-rule-interior-start-outset', + property: 'column-rule-interior-start-inset', from: neutralKeyframe, to: '15px', }, [ @@ -70,7 +70,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'column-rule-interior-end-outset', + property: 'column-rule-interior-end-inset', from: neutralKeyframe, to: '15px', }, [ @@ -83,7 +83,7 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-outset', + property: 'column-rule-edge-start-inset', 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-outset', + property: 'column-rule-edge-end-inset', 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-outset', + property: 'column-rule-interior-start-inset', from: 'initial', // initial is 50%. to: '40%', }, [ @@ -119,7 +119,7 @@ { at: 1.5, expect: '35%' }, ]); test_interpolation({ - property: 'column-rule-interior-end-outset', + property: 'column-rule-interior-end-inset', from: 'initial', // initial is 50%. to: '40%', }, [ @@ -132,7 +132,7 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-outset', + property: 'column-rule-edge-start-inset', from: 'inherit', to: '10px', }, [ @@ -144,7 +144,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'column-rule-edge-end-outset', + property: 'column-rule-edge-end-inset', from: 'inherit', to: '10px', }, [ @@ -156,7 +156,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'column-rule-interior-start-outset', + property: 'column-rule-interior-start-inset', from: 'inherit', to: '10px', }, [ @@ -168,7 +168,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'column-rule-interior-end-outset', + property: 'column-rule-interior-end-inset', from: 'inherit', to: '10px', }, [ @@ -181,7 +181,7 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-outset', + property: 'column-rule-edge-start-inset', from: 'unset', to: '10px', }, [ @@ -193,7 +193,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'column-rule-edge-end-outset', + property: 'column-rule-edge-end-inset', from: 'unset', to: '10px', }, [ @@ -205,7 +205,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'column-rule-interior-start-outset', + property: 'column-rule-interior-start-inset', from: 'unset', to: '40%', }, [ @@ -217,7 +217,7 @@ { at: 1.5, expect: '35%' }, ]); test_interpolation({ - property: 'column-rule-interior-end-outset', + property: 'column-rule-interior-end-inset', from: 'unset', to: '40%', }, [ @@ -230,11 +230,11 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-outset', + property: 'column-rule-edge-start-inset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // column-rule-edge-start-outset can be negative + { at: -0.3, expect: '-8px' }, // column-rule-edge-start-inset 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-outset', + property: 'column-rule-edge-end-inset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // column-rule-edge-end-outset can be negative + { at: -0.3, expect: '-8px' }, // column-rule-edge-end-inset 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-outset', + property: 'column-rule-interior-start-inset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // column-rule-interior-start-outset can be negative + { at: -0.3, expect: '-8px' }, // column-rule-interior-start-inset 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-outset', + property: 'column-rule-interior-end-inset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // column-rule-interior-end-outset can be negative + { at: -0.3, expect: '-8px' }, // column-rule-interior-end-inset 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-outset', + property: 'column-rule-edge-start-inset', from: '100%', to: '1px', }, [ @@ -291,7 +291,7 @@ { at: 1.5, expect: 'calc(-50% + 1.5px)' }, ]); test_interpolation({ - property: 'column-rule-edge-end-outset', + property: 'column-rule-edge-end-inset', from: '100%', to: '1px', }, [ @@ -303,7 +303,7 @@ { at: 1.5, expect: 'calc(-50% + 1.5px)' }, ]); test_interpolation({ - property: 'column-rule-interior-start-outset', + property: 'column-rule-interior-start-inset', from: '100%', to: '1px', }, [ @@ -315,7 +315,7 @@ { at: 1.5, expect: 'calc(-50% + 1.5px)' }, ]); test_interpolation({ - property: 'column-rule-interior-end-outset', + property: 'column-rule-interior-end-inset', from: '100%', to: '1px', }, [ @@ -328,7 +328,7 @@ ]); test_interpolation({ - property: 'column-rule-edge-start-outset', + property: 'column-rule-edge-start-inset', from: '10px', to: '10%', }, [ @@ -340,7 +340,7 @@ { at: 1.5, expect: 'calc(15% - 5px)' }, ]); test_interpolation({ - property: 'column-rule-edge-end-outset', + property: 'column-rule-edge-end-inset', from: '10px', to: '10%', }, [ @@ -352,7 +352,7 @@ { at: 1.5, expect: 'calc(15% - 5px)' }, ]); test_interpolation({ - property: 'column-rule-interior-start-outset', + property: 'column-rule-interior-start-inset', from: '10px', to: '10%', }, [ @@ -364,7 +364,7 @@ { at: 1.5, expect: 'calc(15% - 5px)' }, ]); test_interpolation({ - property: 'column-rule-interior-end-outset', + property: 'column-rule-interior-end-inset', 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 @@ -2,9 +2,9 @@ <html> <head> <meta charset="utf-8"> - <title>gap decorations row-rule-outset properties neutral keyframe</title> + <title>gap decorations row-rule-inset properties neutral keyframe</title> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> - <meta name="assert" content="gap decorations row-rule-outset value list supports neutral keyframe."> + <meta name="assert" content="gap decorations row-rule-inset value list supports neutral keyframe."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/interpolation-testcommon.js"></script> @@ -14,30 +14,30 @@ <script> test(() => { target.style.rowRuleStyle = 'solid'; - target.style.rowRuleEdgeStartOutset = '1px'; - target.style.rowRuleEdgeEndOutset = '1px'; - target.style.rowRuleInteriorStartOutset = '1px'; - target.style.rowRuleInteriorEndOutset = '1px'; - var animation = target.animate([{}, {rowRuleEdgeStartOutset: '11px'}], 1000); + target.style.rowRuleEdgeStartInset = '1px'; + target.style.rowRuleEdgeEndInset = '1px'; + target.style.rowRuleInteriorStartInset = '1px'; + target.style.rowRuleInteriorEndInset = '1px'; + var animation = target.animate([{}, {rowRuleEdgeStartInset: '11px'}], 1000); animation.pause(); animation.currentTime = 500; - assert_equals(getComputedStyle(target).rowRuleEdgeStartOutset, '6px'); + assert_equals(getComputedStyle(target).rowRuleEdgeStartInset, '6px'); - var animation2 = target.animate([{}, {rowRuleEdgeEndOutset: '11px'}], 1000); + var animation2 = target.animate([{}, {rowRuleEdgeEndInset: '11px'}], 1000); animation2.pause(); animation2.currentTime = 500; - assert_equals(getComputedStyle(target).rowRuleEdgeEndOutset, '6px'); + assert_equals(getComputedStyle(target).rowRuleEdgeEndInset, '6px'); - var animation3 = target.animate([{}, {rowRuleInteriorStartOutset: '11px'}], 1000); + var animation3 = target.animate([{}, {rowRuleInteriorStartInset: '11px'}], 1000); animation3.pause(); animation3.currentTime = 500; - assert_equals(getComputedStyle(target).rowRuleInteriorStartOutset, '6px'); + assert_equals(getComputedStyle(target).rowRuleInteriorStartInset, '6px'); - var animation4 = target.animate([{}, {rowRuleInteriorEndOutset: '11px'}], 1000); + var animation4 = target.animate([{}, {rowRuleInteriorEndInset: '11px'}], 1000); animation4.pause(); animation4.currentTime = 500; - assert_equals(getComputedStyle(target).rowRuleInteriorEndOutset, '6px'); - }, 'gap decorations row-rule-outset properties support neutral keyframe.'); + assert_equals(getComputedStyle(target).rowRuleInteriorEndInset, '6px'); + }, 'gap decorations row-rule-inset properties support neutral keyframe.'); </script> </body> </html> 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,9 +2,9 @@ <html> <head> <meta charset="utf-8"> - <title>gap decorations column-rule-outset properties support neutral keyframe</title> + <title>gap decorations column-rule-inset 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."> + <meta name="assert" content="gap decorations column-rule-inset value list supports neutral keyframe."> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/css/support/interpolation-testcommon.js"></script> @@ -14,31 +14,31 @@ <script> test(() => { target.style.columnRuleStyle = 'solid'; - target.style.columnRuleEdgeStartOutset = '1px'; - target.style.columnRuleEdgeEndOutset = '1px'; - target.style.columnRuleInteriorStartOutset = '1px'; - target.style.columnRuleInteriorEndOutset = '1px'; + target.style.columnRuleEdgeStartInset = '1px'; + target.style.columnRuleEdgeEndInset = '1px'; + target.style.columnRuleInteriorStartInset = '1px'; + target.style.columnRuleInteriorEndInset = '1px'; - var animation = target.animate([{}, {columnRuleEdgeStartOutset: '11px'}], 1000); + var animation = target.animate([{}, {columnRuleEdgeStartInset: '11px'}], 1000); animation.pause(); animation.currentTime = 500; - assert_equals(getComputedStyle(target).columnRuleEdgeStartOutset, '6px'); + assert_equals(getComputedStyle(target).columnRuleEdgeStartInset, '6px'); - var animation2 = target.animate([{}, {columnRuleEdgeEndOutset: '11px'}], 1000); + var animation2 = target.animate([{}, {columnRuleEdgeEndInset: '11px'}], 1000); animation2.pause(); animation2.currentTime = 500; - assert_equals(getComputedStyle(target).columnRuleEdgeEndOutset, '6px'); + assert_equals(getComputedStyle(target).columnRuleEdgeEndInset, '6px'); - var animation3 = target.animate([{}, {columnRuleInteriorStartOutset: '11px'}], 1000); + var animation3 = target.animate([{}, {columnRuleInteriorStartInset: '11px'}], 1000); animation3.pause(); animation3.currentTime = 500; - assert_equals(getComputedStyle(target).columnRuleInteriorStartOutset, '6px'); + assert_equals(getComputedStyle(target).columnRuleInteriorStartInset, '6px'); - var animation4 = target.animate([{}, {columnRuleInteriorEndOutset: '11px'}], 1000); + var animation4 = target.animate([{}, {columnRuleInteriorEndInset: '11px'}], 1000); animation4.pause(); animation4.currentTime = 500; - assert_equals(getComputedStyle(target).columnRuleInteriorEndOutset, '6px'); - }, 'gap decorations column-rule-outset properties support neutral keyframe.'); + assert_equals(getComputedStyle(target).columnRuleInteriorEndInset, '6px'); + }, 'gap decorations column-rule-inset properties support neutral keyframe.'); </script> </body> </html> diff --git a/testing/web-platform/tests/css/css-gaps/animation/row-rule-outset-interpolation.html b/testing/web-platform/tests/css/css-gaps/animation/row-rule-outset-interpolation.html @@ -2,7 +2,7 @@ <html> <head> <meta charset="UTF-8"> - <title>row-rule-outset properties interpolation</title> + <title>row-rule-inset properties interpolation</title> <link rel="author" title="Javier Contreras" href="mailto:javiercon@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> <script src="/resources/testharness.js"></script> @@ -11,10 +11,10 @@ <style> .parent { row-rule-style: solid; - row-rule-edge-start-outset: 20px; - row-rule-edge-end-outset: 20px; - row-rule-interior-start-outset: 20px; - row-rule-interior-end-outset: 20px; + row-rule-edge-start-inset: 20px; + row-rule-edge-end-inset: 20px; + row-rule-interior-start-inset: 20px; + row-rule-interior-end-inset: 20px; } .target { @@ -24,17 +24,17 @@ column-rule: 10px solid black; row-rule-break: intersection; - row-rule-edge-start-outset: 5px; - row-rule-edge-end-outset: 5px; - row-rule-interior-start-outset: 5px; - row-rule-interior-end-outset: 5px; + row-rule-edge-start-inset: 5px; + row-rule-edge-end-inset: 5px; + row-rule-interior-start-inset: 5px; + row-rule-interior-end-inset: 5px; } </style> </head> <body> <script> test_interpolation({ - property: 'row-rule-edge-start-outset', + property: 'row-rule-edge-start-inset', from: neutralKeyframe, to: '15px', }, [ @@ -46,7 +46,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'row-rule-edge-end-outset', + property: 'row-rule-edge-end-inset', from: neutralKeyframe, to: '15px', }, [ @@ -58,7 +58,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'row-rule-interior-start-outset', + property: 'row-rule-interior-start-inset', from: neutralKeyframe, to: '15px', }, [ @@ -70,7 +70,7 @@ { at: 1.5, expect: '20px' }, ]); test_interpolation({ - property: 'row-rule-interior-end-outset', + property: 'row-rule-interior-end-inset', from: neutralKeyframe, to: '15px', }, [ @@ -83,7 +83,7 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-outset', + property: 'row-rule-edge-start-inset', 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-outset', + property: 'row-rule-edge-end-inset', 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-outset', + property: 'row-rule-interior-start-inset', from: 'initial', // initial is 50%. to: '40%', }, [ @@ -119,7 +119,7 @@ { at: 1.5, expect: '35%' }, ]); test_interpolation({ - property: 'row-rule-interior-end-outset', + property: 'row-rule-interior-end-inset', from: 'initial', // initial is 50%. to: '40%', }, [ @@ -132,7 +132,7 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-outset', + property: 'row-rule-edge-start-inset', from: 'inherit', to: '10px', }, [ @@ -144,7 +144,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'row-rule-edge-end-outset', + property: 'row-rule-edge-end-inset', from: 'inherit', to: '10px', }, [ @@ -156,7 +156,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'row-rule-interior-start-outset', + property: 'row-rule-interior-start-inset', from: 'inherit', to: '10px', }, [ @@ -168,7 +168,7 @@ { at: 1.5, expect: '5px' }, ]); test_interpolation({ - property: 'row-rule-interior-end-outset', + property: 'row-rule-interior-end-inset', from: 'inherit', to: '10px', }, [ @@ -181,7 +181,7 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-outset', + property: 'row-rule-edge-start-inset', from: 'unset', to: '10px', }, [ @@ -193,7 +193,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'row-rule-edge-end-outset', + property: 'row-rule-edge-end-inset', from: 'unset', to: '10px', }, [ @@ -205,7 +205,7 @@ { at: 1.5, expect: '15px' }, ]); test_interpolation({ - property: 'row-rule-interior-start-outset', + property: 'row-rule-interior-start-inset', from: 'unset', to: '40%', }, [ @@ -217,7 +217,7 @@ { at: 1.5, expect: '35%' }, ]); test_interpolation({ - property: 'row-rule-interior-end-outset', + property: 'row-rule-interior-end-inset', from: 'unset', to: '40%', }, [ @@ -230,11 +230,11 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-outset', + property: 'row-rule-edge-start-inset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // row-rule-edge-start-outset can be negative + { at: -0.3, expect: '-8px' }, // row-rule-edge-start-inset 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-outset', + property: 'row-rule-edge-end-inset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // row-rule-edge-end-outset can be negative + { at: -0.3, expect: '-8px' }, // row-rule-edge-end-inset 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-outset', + property: 'row-rule-interior-start-inset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // row-rule-interior-start-outset can be negative + { at: -0.3, expect: '-8px' }, // row-rule-interior-start-inset 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-outset', + property: 'row-rule-interior-end-inset', from: '-5px', to: '5px' }, [ - { at: -0.3, expect: '-8px' }, // row-rule-interior-end-outset can be negative + { at: -0.3, expect: '-8px' }, // row-rule-interior-end-inset 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-outset', + property: 'row-rule-edge-start-inset', from: '100%', to: '1px', }, [ @@ -291,7 +291,7 @@ { at: 1.5, expect: 'calc(-50% + 1.5px)' }, ]); test_interpolation({ - property: 'row-rule-edge-end-outset', + property: 'row-rule-edge-end-inset', from: '100%', to: '1px', }, [ @@ -303,7 +303,7 @@ { at: 1.5, expect: 'calc(-50% + 1.5px)' }, ]); test_interpolation({ - property: 'row-rule-interior-start-outset', + property: 'row-rule-interior-start-inset', from: '100%', to: '1px', }, [ @@ -315,7 +315,7 @@ { at: 1.5, expect: 'calc(-50% + 1.5px)' }, ]); test_interpolation({ - property: 'row-rule-interior-end-outset', + property: 'row-rule-interior-end-inset', from: '100%', to: '1px', }, [ @@ -328,7 +328,7 @@ ]); test_interpolation({ - property: 'row-rule-edge-start-outset', + property: 'row-rule-edge-start-inset', from: '10px', to: '10%', }, [ @@ -340,7 +340,7 @@ { at: 1.5, expect: 'calc(15% - 5px)' }, ]); test_interpolation({ - property: 'row-rule-edge-end-outset', + property: 'row-rule-edge-end-inset', from: '10px', to: '10%', }, [ @@ -352,7 +352,7 @@ { at: 1.5, expect: 'calc(15% - 5px)' }, ]); test_interpolation({ - property: 'row-rule-interior-start-outset', + property: 'row-rule-interior-start-inset', from: '10px', to: '10%', }, [ @@ -364,7 +364,7 @@ { at: 1.5, expect: 'calc(15% - 5px)' }, ]); test_interpolation({ - property: 'row-rule-interior-end-outset', + property: 'row-rule-interior-end-inset', from: '10px', to: '10%', }, [ diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-009.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-009.html @@ -19,12 +19,12 @@ row-rule-color: blue; row-rule-width: 10px; row-rule-break: intersection; - row-rule-outset: 0; + row-rule-inset: 0; column-rule-break: intersection; column-rule-style: solid; column-rule-color: red; column-rule-width: 10px; - column-rule-outset: 0; + column-rule-inset: 0; width: 170px; flex-wrap: wrap; } diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-010.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-010.html @@ -22,7 +22,7 @@ column-rule-style: solid; column-rule-color: red; column-rule-width: 10px; - column-rule-outset: 0; + column-rule-inset: 0; width: 170px; flex-wrap: wrap; } 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-outset: 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-outset: -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-outset: 100%; + column-rule-inset: 100%; width: 170px; flex-wrap: wrap; } diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-022.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-022.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title> - CSS Gap Decorations: flex column gaps are painted with different sized gaps and row-rule-outset 0. + CSS Gap Decorations: flex column gaps are painted with different sized gaps and row-rule-inset 0. </title> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> <link rel="match" href="../agnostic/gap-decorations-002-ref.html"> @@ -28,7 +28,7 @@ row-rule-width: 10px; row-rule-break: intersection; - row-rule-outset: 0; + row-rule-inset: 0; flex-wrap: wrap; } diff --git a/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-028.html b/testing/web-platform/tests/css/css-gaps/flex/flex-gap-decorations-028.html @@ -21,7 +21,7 @@ column-rule-style: solid; column-rule-color: red; column-rule-width: 10px; - column-rule-outset: 0; + column-rule-inset: 0; 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 @@ -19,13 +19,13 @@ 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; + column-rule-interior-start-inset: 0; + 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-outset: -5px; - row-rule-edge-start-outset: -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 @@ -18,13 +18,13 @@ width: 340px; row-rule: 3px solid gray; row-rule-break: intersection; - row-rule-interior-start-outset: 0; - row-rule-interior-end-outset: -1px; + row-rule-interior-start-inset: 0; + row-rule-interior-end-inset: -1px; 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; + column-rule-interior-start-inset: 0; + 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-outset: -1px; - row-rule-edge-start-outset: -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-outset: -1px; - column-rule-edge-end-outset: 1px; - column-rule-interior-start-outset: -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-outset: -1px; + column-rule-inset: -1px; width: 170px; flex-wrap: wrap; } diff --git a/testing/web-platform/tests/css/css-gaps/flex/fragmentation/flex-gap-decorations-fragmentation-013.html b/testing/web-platform/tests/css/css-gaps/flex/fragmentation/flex-gap-decorations-fragmentation-013.html @@ -30,7 +30,7 @@ row-rule: 10px solid gold; flex-direction: column; row-rule-break: intersection; - row-rule-outset: 0; + row-rule-inset: 0; } .items { 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-outset: -1px; + row-rule-edge-start-inset: -1px; column-rule: solid 6px blue; column-rule-break: intersection; - column-rule-edge-start-outset: -1px; - column-rule-interior-end-outset: 0px; + column-rule-edge-start-inset: -1px; + column-rule-interior-end-inset: 0px; } .grid-container>div { background-color: skyblue; diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-007.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-007.html @@ -26,10 +26,10 @@ row-rule-width: 5px; column-rule-break: intersection; - column-rule-outset: 0px; + column-rule-inset: 0px; row-rule-break: intersection; - row-rule-outset: 0px; + row-rule-inset: 0px; } .grid-item { diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-010.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-010.html @@ -24,7 +24,7 @@ row-rule-style: solid; row-rule-width: 5px; - column-rule-outset: 0px; + column-rule-inset: 0px; column-rule-break: intersection; } diff --git a/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-011.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-011.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title> - CSS Gap Decorations: *rule-outset defaults to 50% and extends each decoration end halfway into its intersection. + CSS Gap Decorations: *rule-inset defaults to 50% and extends each decoration end halfway into its intersection. </title> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> <link rel="match" href="grid-gap-decorations-011-ref.html"> 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-outset: 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-outset: -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-outset: 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-outset: 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 @@ -16,11 +16,11 @@ 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; + column-rule-interior-start-inset: 0px; + column-rule-interior-end-inset: 5px; row-rule-break: intersection; - row-rule-edge-end-outset: -5px; - row-rule-edge-start-outset: -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 @@ -15,14 +15,14 @@ grid-gap: 20px; row-rule: 3px solid gray; row-rule-break: intersection; - row-rule-interior-start-outset: 0; - row-rule-interior-end-outset: -1px; + row-rule-interior-start-inset: 0; + row-rule-interior-end-inset: -1px; 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; + column-rule-interior-start-inset: 0; + 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/grid-gap-decorations-38.html b/testing/web-platform/tests/css/css-gaps/grid/grid-gap-decorations-38.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title> - CSS Gap Decorations: grid column gaps are painted with different sized gaps and column-rule-outset 0. + CSS Gap Decorations: grid column gaps are painted with different sized gaps and column-rule-inset 0. </title> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> <link rel="match" href="../agnostic/gap-decorations-002-ref.html"> @@ -29,7 +29,7 @@ row-rule-width: 10px; row-rule-break: intersection; - row-rule-outset: 0; + row-rule-inset: 0; } .grid-item { diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/subgrid-gap-decorations-005.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/subgrid-gap-decorations-005.html @@ -27,10 +27,10 @@ row-rule: red solid 5px; column-rule-break: intersection; - column-rule-outset: 0px; + column-rule-inset: 0px; row-rule-break: intersection; - row-rule-outset: 0px; + row-rule-inset: 0px; } .grid-item { background-color: gray; diff --git a/testing/web-platform/tests/css/css-gaps/grid/subgrid/subgrid-gap-decorations-007.html b/testing/web-platform/tests/css/css-gaps/grid/subgrid/subgrid-gap-decorations-007.html @@ -25,7 +25,7 @@ column-rule: blue solid 5px; row-rule: red solid 5px; - column-rule-outset: 0px; + column-rule-inset: 0px; column-rule-break: intersection; } .item { 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-outset: 5px; + column-rule-inset: 5px; column-rule-break: intersection; } .item { diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-008.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-008.html @@ -25,8 +25,8 @@ row-rule-color: gold; row-rule-break: intersection; column-rule-break: intersection; - column-rule-outset: 0px; - row-rule-outset: 0px; + column-rule-inset: 0px; + row-rule-inset: 0px; column-wrap: wrap; column-width: 60px; column-count: 3; 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-outset: 2px; - row-rule-outset: 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-outset: -2px; - row-rule-outset: -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-outset: 100%; - row-rule-outset: 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-outset: -4px; + column-rule-inset: -4px; } </style> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-014.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-014.html @@ -29,7 +29,7 @@ column-wrap: wrap; column-fill: auto; column-rule-break: intersection; - column-rule-outset: 0; + column-rule-inset: 0; } p { diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-017.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-017.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <title> - CSS Gap Decorations: Multicolumn gap decorations painted with column-wrap and with different sized gaps and row-rule-outset 0. + CSS Gap Decorations: Multicolumn gap decorations painted with column-wrap and with different sized gaps and row-rule-inset 0. </title> <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> <link rel="match" href="multicol-gap-decorations-017-ref.html"> @@ -28,7 +28,7 @@ column-wrap: wrap; row-rule-break: intersection; - row-rule-outset: 0; + row-rule-inset: 0; } p { diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-020.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-020.html @@ -20,7 +20,7 @@ column-rule-style: solid; column-rule-color: blue; column-rule-break: none; - column-rule-outset: 0; + column-rule-inset: 0; row-rule-width: 10px; row-rule-style: solid; row-rule-color: gold; 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-outset: 0; - column-rule-interior-end-outset: 0px; - column-rule-edge-end-outset: 5px; + column-rule-interior-start-inset: 0; + column-rule-interior-end-inset: 0px; + column-rule-edge-end-inset: 5px; row-rule-break: intersection; - row-rule-edge-end-outset: -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 @@ -26,11 +26,11 @@ row-rule-color: gold; column-wrap: wrap; column-rule-break: intersection; - column-rule-interior-start-outset: 0; - column-rule-interior-end-outset: 8px; + column-rule-interior-start-inset: 0; + column-rule-interior-end-inset: 8px; row-rule-break: intersection; - row-rule-edge-start-outset: 2px; - row-rule-edge-end-outset: 1px; + row-rule-edge-start-inset: 2px; + row-rule-edge-end-inset: 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-outset: 10px; - row-rule-edge-start-outset: 10px; - column-rule-edge-end-outset: 5px; - row-rule-edge-end-outset: 5px; - column-rule-interior-start-outset: 10px; - row-rule-interior-start-outset: 10px; - column-rule-interior-end-outset: 5px; - row-rule-interior-end-outset: 5px; + 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; } #target2 { @@ -48,14 +48,14 @@ column-rule-break: intersection; row-rule-break: spanning-item; - column-rule-edge-start-outset: 5px; - row-rule-edge-start-outset: 10px; - column-rule-edge-end-outset: 15px; - row-rule-edge-end-outset: 20px; - column-rule-interior-start-outset: 25px; - row-rule-interior-start-outset: 30px; - column-rule-interior-end-outset: 35px; - row-rule-interior-end-outset: 40px; + 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; } </style> <script> @@ -75,8 +75,8 @@ assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-break'), 'intersection'); }, "rule-break shorthand computed from longhand values"); test(function() { - assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-outset'), '10px 5px / 10px 5px'); - }, "rule-outset shorthand computed from longhand values"); + assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-inset'), '10px 5px / 10px 5px'); + }, "rule-inset shorthand computed from longhand values"); @@ -96,8 +96,8 @@ assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-break'), ''); }, "rule-break shorthand cannot be computed from longhand values so expect an empty string"); test(function() { - assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-outset'), ''); - }, "rule-outset shorthand cannot be computed from longhand values so expect an empty string"); + assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-inset'), ''); + }, "rule-inset shorthand cannot be computed from longhand values so expect an empty string"); </script> </body> </html> diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-start-end-outset-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-edge-start-end-outset-computed.html @@ -19,7 +19,7 @@ </style> <script> // TODO(javiercon): Add shorthand support and test here. - const properties = ["column-rule-edge-start-outset", "row-rule-edge-start-outset", "column-rule-edge-end-outset", "row-rule-edge-end-outset"]; + const properties = ["column-rule-edge-start-inset", "row-rule-edge-start-inset", "column-rule-edge-end-inset", "row-rule-edge-end-inset"]; 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-outset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-egde-start-end-outset-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-outset', 'row-rule-edge-start-outset', 'column-rule-edge-end-outset', 'row-rule-edge-end-outset']; + const properties = ['column-rule-edge-start-inset', 'row-rule-edge-start-inset', 'column-rule-edge-end-inset', 'row-rule-edge-end-inset']; 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-interior-start-end-outset-computed.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-start-end-outset-computed.html @@ -19,7 +19,7 @@ </style> <script> // TODO(javiercon): Add shorthand support and test here. - const properties = ["column-rule-interior-start-outset", "row-rule-interior-start-outset", "column-rule-interior-end-outset", "row-rule-interior-end-outset"]; + const properties = ["column-rule-interior-start-inset", "row-rule-interior-start-inset", "column-rule-interior-end-inset", "row-rule-interior-end-inset"]; 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-outset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-interior-start-end-outset-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-outset', 'row-rule-interior-start-outset', 'column-rule-interior-end-outset', 'row-rule-interior-end-outset']; + const properties = ['column-rule-interior-start-inset', 'row-rule-interior-start-inset', 'column-rule-interior-end-inset', 'row-rule-interior-end-inset']; for (const property of properties) { test_invalid_value(property, 'auto'); test_invalid_value(property, 'none'); diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-bidirectional-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-bidirectional-shorthand.html @@ -2,10 +2,10 @@ <html> <head> <meta charset="utf-8"> -<title>CSS Gap Decorations: rule-outset shorthands</title> -<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-outset"> +<title>CSS Gap Decorations: rule-inset shorthands</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-inset"> <meta name="assert" - content="rule-outset supports the full grammar '<length-percentage> <length-percentage>? /[<length-percentage> <length-percentage>?]?'."> + content="rule-inset 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> @@ -13,102 +13,102 @@ <body> <script> const rule_properties = { - 'rule-outset': ['column-rule-edge-start-outset', 'column-rule-edge-end-outset', - 'column-rule-interior-start-outset', 'column-rule-interior-end-outset', - 'row-rule-edge-start-outset', 'row-rule-edge-end-outset', - 'row-rule-interior-start-outset', 'row-rule-interior-end-outset'] + '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'] }; const bidirectionalTestCases = [ { input: '0px', expected: { - columnRuleEdgeStartOutset: '0px', - columnRuleEdgeEndOutset: '0px', - columnRuleInteriorStartOutset: '0px', - columnRuleInteriorEndOutset: '0px', - rowRuleEdgeStartOutset: '0px', - rowRuleEdgeEndOutset: '0px', - rowRuleInteriorStartOutset: '0px', - rowRuleInteriorEndOutset: '0px' + columnRuleEdgeStartInset: '0px', + columnRuleEdgeEndInset: '0px', + columnRuleInteriorStartInset: '0px', + columnRuleInteriorEndInset: '0px', + rowRuleEdgeStartInset: '0px', + rowRuleEdgeEndInset: '0px', + rowRuleInteriorStartInset: '0px', + rowRuleInteriorEndInset: '0px' } }, { input: '10px', expected: { - columnRuleEdgeStartOutset: '10px', - columnRuleEdgeEndOutset: '10px', - columnRuleInteriorStartOutset: '10px', - columnRuleInteriorEndOutset: '10px', - rowRuleEdgeStartOutset: '10px', - rowRuleEdgeEndOutset: '10px', - rowRuleInteriorStartOutset: '10px', - rowRuleInteriorEndOutset: '10px' + columnRuleEdgeStartInset: '10px', + columnRuleEdgeEndInset: '10px', + columnRuleInteriorStartInset: '10px', + columnRuleInteriorEndInset: '10px', + rowRuleEdgeStartInset: '10px', + rowRuleEdgeEndInset: '10px', + rowRuleInteriorStartInset: '10px', + rowRuleInteriorEndInset: '10px' } }, { input: '50%', expected: { - columnRuleEdgeStartOutset: '50%', - columnRuleEdgeEndOutset: '50%', - columnRuleInteriorStartOutset: '50%', - columnRuleInteriorEndOutset: '50%', - rowRuleEdgeStartOutset: '50%', - rowRuleEdgeEndOutset: '50%', - rowRuleInteriorStartOutset: '50%', - rowRuleInteriorEndOutset: '50%', + columnRuleEdgeStartInset: '50%', + columnRuleEdgeEndInset: '50%', + columnRuleInteriorStartInset: '50%', + columnRuleInteriorEndInset: '50%', + rowRuleEdgeStartInset: '50%', + rowRuleEdgeEndInset: '50%', + rowRuleInteriorStartInset: '50%', + rowRuleInteriorEndInset: '50%', } }, { input: '10px 20px', expected: { - columnRuleEdgeStartOutset: '10px', - columnRuleEdgeEndOutset: '20px', - columnRuleInteriorStartOutset: '10px', - columnRuleInteriorEndOutset: '20px', - rowRuleEdgeStartOutset: '10px', - rowRuleEdgeEndOutset: '20px', - rowRuleInteriorStartOutset: '10px', - rowRuleInteriorEndOutset: '20px', + columnRuleEdgeStartInset: '10px', + columnRuleEdgeEndInset: '20px', + columnRuleInteriorStartInset: '10px', + columnRuleInteriorEndInset: '20px', + rowRuleEdgeStartInset: '10px', + rowRuleEdgeEndInset: '20px', + rowRuleInteriorStartInset: '10px', + rowRuleInteriorEndInset: '20px', } }, { input: '10px 20px / 30px', expected: { - columnRuleEdgeStartOutset: '10px', - columnRuleEdgeEndOutset: '20px', - columnRuleInteriorStartOutset: '30px', - columnRuleInteriorEndOutset: '30px', - rowRuleEdgeStartOutset: '10px', - rowRuleEdgeEndOutset: '20px', - rowRuleInteriorStartOutset: '30px', - rowRuleInteriorEndOutset: '30px', + columnRuleEdgeStartInset: '10px', + columnRuleEdgeEndInset: '20px', + columnRuleInteriorStartInset: '30px', + columnRuleInteriorEndInset: '30px', + rowRuleEdgeStartInset: '10px', + rowRuleEdgeEndInset: '20px', + rowRuleInteriorStartInset: '30px', + rowRuleInteriorEndInset: '30px', } }, { input: '10px / 20px 30px', expected: { - columnRuleEdgeStartOutset: '10px', - columnRuleEdgeEndOutset: '10px', - columnRuleInteriorStartOutset: '20px', - columnRuleInteriorEndOutset: '30px', - rowRuleEdgeStartOutset: '10px', - rowRuleEdgeEndOutset: '10px', - rowRuleInteriorStartOutset: '20px', - rowRuleInteriorEndOutset: '30px', + columnRuleEdgeStartInset: '10px', + columnRuleEdgeEndInset: '10px', + columnRuleInteriorStartInset: '20px', + columnRuleInteriorEndInset: '30px', + rowRuleEdgeStartInset: '10px', + rowRuleEdgeEndInset: '10px', + rowRuleInteriorStartInset: '20px', + rowRuleInteriorEndInset: '30px', } }, { input: '10px 20px / 30px 40px', expected: { - columnRuleEdgeStartOutset: '10px', - columnRuleEdgeEndOutset: '20px', - columnRuleInteriorStartOutset: '30px', - columnRuleInteriorEndOutset: '40px', - rowRuleEdgeStartOutset: '10px', - rowRuleEdgeEndOutset: '20px', - rowRuleInteriorStartOutset: '30px', - rowRuleInteriorEndOutset: '40px', + columnRuleEdgeStartInset: '10px', + columnRuleEdgeEndInset: '20px', + columnRuleInteriorStartInset: '30px', + columnRuleInteriorEndInset: '40px', + rowRuleEdgeStartInset: '10px', + rowRuleEdgeEndInset: '20px', + rowRuleInteriorStartInset: '30px', + rowRuleInteriorEndInset: '40px', } }, @@ -119,17 +119,17 @@ const test_cases = bidirectionalTestCases; for (const { input, expected } of test_cases) { - const [columnRuleEdgeStartOutset, columnRuleEdgeEndOutset, columnRuleInteriorStartOutset, columnRuleInteriorEndOutset, rowRuleEdgeStartOutset, rowRuleEdgeEndOutset, rowRuleInteriorStartOutset, rowRuleInteriorEndOutset] = rule_properties[rule_property]; + const [columnRuleEdgeStartInset, columnRuleEdgeEndInset, columnRuleInteriorStartInset, columnRuleInteriorEndInset, rowRuleEdgeStartInset, rowRuleEdgeEndInset, rowRuleInteriorStartInset, rowRuleInteriorEndInset] = rule_properties[rule_property]; test_shorthand_value(rule_property, input, { - [columnRuleEdgeStartOutset]: expected.columnRuleEdgeStartOutset, - [columnRuleEdgeEndOutset]: expected.columnRuleEdgeEndOutset, - [columnRuleInteriorStartOutset]: expected.columnRuleInteriorStartOutset, - [columnRuleInteriorEndOutset]: expected.columnRuleInteriorEndOutset, - [rowRuleEdgeStartOutset]: expected.rowRuleEdgeStartOutset, - [rowRuleEdgeEndOutset]: expected.rowRuleEdgeEndOutset, - [rowRuleInteriorStartOutset]: expected.rowRuleInteriorStartOutset, - [rowRuleInteriorEndOutset]: expected.rowRuleInteriorEndOutset, + [columnRuleEdgeStartInset]: expected.columnRuleEdgeStartInset, + [columnRuleEdgeEndInset]: expected.columnRuleEdgeEndInset, + [columnRuleInteriorStartInset]: expected.columnRuleInteriorStartInset, + [columnRuleInteriorEndInset]: expected.columnRuleInteriorEndInset, + [rowRuleEdgeStartInset]: expected.rowRuleEdgeStartInset, + [rowRuleEdgeEndInset]: expected.rowRuleEdgeEndInset, + [rowRuleInteriorStartInset]: expected.rowRuleInteriorStartInset, + [rowRuleInteriorEndInset]: expected.rowRuleInteriorEndInset, }); } } 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 shorthands getComputedStyle()</title> + <title>CSS Gaps: rule-inset 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,7 +18,7 @@ } </style> <script> - const properties = ["column-rule-outset", "row-rule-outset", "rule-outset"]; + const properties = ["column-rule-inset", "row-rule-inset", "rule-inset"]; for (const property of properties) { test_computed_value(property, "10px", "10px 10px / 10px 10px"); test_computed_value(property, "-20px", "-20px -20px / -20px -20px"); diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-invalid.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-invalid.html @@ -2,7 +2,7 @@ <html> <head> <meta charset="utf-8"> - <title>CSS Gaps: parsing rule-outset shorthands with invalid values</title> + <title>CSS Gaps: parsing rule-inset 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,7 +12,7 @@ <body> <div id="target"></div> <script> - const properties = ['column-rule-outset', 'row-rule-outset', 'rule-outset']; + const properties = ['column-rule-inset', 'row-rule-inset', 'rule-inset']; for (const property of properties) { test_invalid_value(property, 'auto'); test_invalid_value(property, 'none'); diff --git a/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-shorthand.html b/testing/web-platform/tests/css/css-gaps/parsing/rule-outset-shorthand.html @@ -2,10 +2,10 @@ <html> <head> <meta charset="utf-8"> -<title>CSS Gap Decorations: rule-outset shorthands</title> -<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-outset"> +<title>CSS Gap Decorations: rule-inset shorthands</title> +<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#propdef-rule-inset"> <meta name="assert" - content="rule-outset supports the full grammar '<length-percentage> <length-percentage>? /[<length-percentage> <length-percentage>?]?'."> + content="rule-inset 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> @@ -13,73 +13,73 @@ <body> <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'] + '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'] }; const testCases = [ { input: '0px', expected: { - ruleEdgeStartOutset: '0px', - ruleEdgeEndOutset: '0px', - ruleInteriorStartOutset: '0px', - ruleInteriorEndOutset: '0px', + ruleEdgeStartInset: '0px', + ruleEdgeEndInset: '0px', + ruleInteriorStartInset: '0px', + ruleInteriorEndInset: '0px', } }, { input: '10px', expected: { - ruleEdgeStartOutset: '10px', - ruleEdgeEndOutset: '10px', - ruleInteriorStartOutset: '10px', - ruleInteriorEndOutset: '10px' + ruleEdgeStartInset: '10px', + ruleEdgeEndInset: '10px', + ruleInteriorStartInset: '10px', + ruleInteriorEndInset: '10px' } }, { input: '50%', expected: { - ruleEdgeStartOutset: '50%', - ruleEdgeEndOutset: '50%', - ruleInteriorStartOutset: '50%', - ruleInteriorEndOutset: '50%', + ruleEdgeStartInset: '50%', + ruleEdgeEndInset: '50%', + ruleInteriorStartInset: '50%', + ruleInteriorEndInset: '50%', } }, { input: '10px 20px', expected: { - ruleEdgeStartOutset: '10px', - ruleEdgeEndOutset: '20px', - ruleInteriorStartOutset: '10px', - ruleInteriorEndOutset: '20px', + ruleEdgeStartInset: '10px', + ruleEdgeEndInset: '20px', + ruleInteriorStartInset: '10px', + ruleInteriorEndInset: '20px', } }, { input: '10px 20px / 30px', expected: { - ruleEdgeStartOutset: '10px', - ruleEdgeEndOutset: '20px', - ruleInteriorStartOutset: '30px', - ruleInteriorEndOutset: '30px', + ruleEdgeStartInset: '10px', + ruleEdgeEndInset: '20px', + ruleInteriorStartInset: '30px', + ruleInteriorEndInset: '30px', } }, { input: '10px / 20px 30px', expected: { - ruleEdgeStartOutset: '10px', - ruleEdgeEndOutset: '10px', - ruleInteriorStartOutset: '20px', - ruleInteriorEndOutset: '30px', + ruleEdgeStartInset: '10px', + ruleEdgeEndInset: '10px', + ruleInteriorStartInset: '20px', + ruleInteriorEndInset: '30px', } }, { input: '10px 20px / 30px 40px', expected: { - ruleEdgeStartOutset: '10px', - ruleEdgeEndOutset: '20px', - ruleInteriorStartOutset: '30px', - ruleInteriorEndOutset: '40px', + ruleEdgeStartInset: '10px', + ruleEdgeEndInset: '20px', + ruleInteriorStartInset: '30px', + ruleInteriorEndInset: '40px', } }, ]; @@ -89,12 +89,12 @@ const test_cases = testCases; for (const { input, expected } of test_cases) { - const [ruleEdgeStartOutset, ruleEdgeEndOutset, ruleInteriorStartOutset, ruleInteriorEndOutset] = rule_properties[rule_property]; + const [ruleEdgeStartInset, ruleEdgeEndInset, ruleInteriorStartInset, ruleInteriorEndInset] = rule_properties[rule_property]; test_shorthand_value(rule_property, input, { - [ruleEdgeStartOutset]: expected.ruleEdgeStartOutset, - [ruleEdgeEndOutset]: expected.ruleEdgeEndOutset, - [ruleInteriorStartOutset]: expected.ruleInteriorStartOutset, - [ruleInteriorEndOutset]: expected.ruleInteriorEndOutset, + [ruleEdgeStartInset]: expected.ruleEdgeStartInset, + [ruleEdgeEndInset]: expected.ruleEdgeEndInset, + [ruleInteriorStartInset]: expected.ruleInteriorStartInset, + [ruleInteriorEndInset]: expected.ruleInteriorEndInset, }); } } 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 shorthands with valid values</title> + <title>CSS Gaps: parsing rule-inset 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,7 +12,7 @@ <body> <div id="target"></div> <script> - const properties = ['column-rule-outset', 'row-rule-outset', 'rule-outset']; + const properties = ['column-rule-inset', 'row-rule-inset', 'rule-inset']; for (const property of properties) { test_valid_value(property, '0', '0px 0px / 0px 0px'); test_valid_value(property, '-20px', '-20px -20px / -20px -20px');