From 075a880bd8b716cb09f940a55de1c3dfbeb09df3 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 28 Sep 2022 10:28:39 +1000 Subject: [PATCH 1/2] Follow up for #44502 and #43526 Adding unit tests for outline properties --- packages/style-engine/src/test/index.js | 34 ++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js index d01eba6428474b..f4b045182c6cab 100644 --- a/packages/style-engine/src/test/index.js +++ b/packages/style-engine/src/test/index.js @@ -73,13 +73,19 @@ describe( 'generate', () => { letterSpacing: '12px', textTransform: 'uppercase', }, + outline: { + offset: '2px', + width: '4px', + style: 'dashed', + color: 'red', + }, }, { selector: '.some-selector', } ) ).toEqual( - ".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }" + ".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }" ); } ); @@ -234,6 +240,12 @@ describe( 'getCSSRules', () => { letterSpacing: '12px', textTransform: 'uppercase', }, + outline: { + offset: '2px', + width: '4px', + style: 'dashed', + color: 'red', + }, }, { selector: '.some-selector', @@ -255,6 +267,26 @@ describe( 'getCSSRules', () => { key: 'backgroundColor', value: '#555555', }, + { + key: 'outlineColor', + selector: '.some-selector', + value: 'red', + }, + { + key: 'outlineStyle', + selector: '.some-selector', + value: 'dashed', + }, + { + key: 'outlineOffset', + selector: '.some-selector', + value: '2px', + }, + { + key: 'outlineWidth', + selector: '.some-selector', + value: '4px', + }, { selector: '.some-selector', key: 'marginRight', From 9cf37007f769d3cbaf1cfbece550942cbea639e4 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 28 Sep 2022 11:53:14 +1000 Subject: [PATCH 2/2] Property order --- packages/style-engine/src/test/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js index f4b045182c6cab..ee9e997798dcfa 100644 --- a/packages/style-engine/src/test/index.js +++ b/packages/style-engine/src/test/index.js @@ -268,23 +268,23 @@ describe( 'getCSSRules', () => { value: '#555555', }, { - key: 'outlineColor', selector: '.some-selector', + key: 'outlineColor', value: 'red', }, { - key: 'outlineStyle', selector: '.some-selector', + key: 'outlineStyle', value: 'dashed', }, { - key: 'outlineOffset', selector: '.some-selector', + key: 'outlineOffset', value: '2px', }, { - key: 'outlineWidth', selector: '.some-selector', + key: 'outlineWidth', value: '4px', }, {