From 090d2e00c939f1b1e7b4b29c63fb6eef129ca56b Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Wed, 28 Sep 2022 13:48:02 +1000
Subject: [PATCH] Style engine: add JS unit tests for outline properties
 (#44518)

* Follow up for #44502 and #43526
Adding unit tests for outline properties

* Property order
---
 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 d01eba6428474..ee9e997798dcf 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',
 			},
+			{
+				selector: '.some-selector',
+				key: 'outlineColor',
+				value: 'red',
+			},
+			{
+				selector: '.some-selector',
+				key: 'outlineStyle',
+				value: 'dashed',
+			},
+			{
+				selector: '.some-selector',
+				key: 'outlineOffset',
+				value: '2px',
+			},
+			{
+				selector: '.some-selector',
+				key: 'outlineWidth',
+				value: '4px',
+			},
 			{
 				selector: '.some-selector',
 				key: 'marginRight',