From 0ba93366ff1429d0b0f602ae6c2b6ca64d2b66f5 Mon Sep 17 00:00:00 2001
From: Jiri Swen <jiri.ei@hotmail.com>
Date: Thu, 19 Nov 2020 09:56:05 +0100
Subject: [PATCH 1/8] Allow user defined focused outline offset to be 0

---
 src/floating-focus.js   | 3 +--
 src/floating-focus.scss | 5 +++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/floating-focus.js b/src/floating-focus.js
index af70626..1b5cec1 100644
--- a/src/floating-focus.js
+++ b/src/floating-focus.js
@@ -187,8 +187,7 @@ export default class FloatingFocus {
 
 	getFloaterPosition(target) {
 		const targetStyle = window.getComputedStyle(target);
-		// default 4 px padding
-		const padding = parseFloat(targetStyle.outlineOffset) || 4;
+		const padding = parseFloat(targetStyle.outlineOffset);
 
 		const rect = target.getBoundingClientRect();
 		this.previousTargetRect = rect;
diff --git a/src/floating-focus.scss b/src/floating-focus.scss
index 85fc0e1..5ef1388 100644
--- a/src/floating-focus.scss
+++ b/src/floating-focus.scss
@@ -46,3 +46,8 @@
 		border: 0 !important;
 	}
 }
+
+.floating-focus-enabled :focus, .floating-focus-enabled .focus {
+	// default 4px padding. Can be overwritten
+	outline-offset: 4px;
+}

From 4778f4ea97006f365f0bafc4330dce832683a78d Mon Sep 17 00:00:00 2001
From: Jiri Swen <jiri.ei@hotmail.com>
Date: Thu, 19 Nov 2020 10:01:45 +0100
Subject: [PATCH 2/8] Add some outline styling test stuff to example.html

---
 example/index.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/example/index.html b/example/index.html
index ab8dcf6..287e43b 100644
--- a/example/index.html
+++ b/example/index.html
@@ -73,7 +73,13 @@
 		label {
 			position: relative;
 			overflow: hidden;
-			outline-style: dashed !important;
+		}
+
+		.file-upload-label.focus {
+			outline-offset: 8px;
+			outline-color: orange;
+			outline-width: 2px;
+			outline-style: dashed;
 		}
 
 		input[type="file"] {
@@ -109,7 +115,7 @@
 	<input type="text">
 	<input type="text">
 
-	<label id="file-upload-label">
+	<label id="file-upload-label" class="file-upload-label">
 		<input type="file" focus-target="file-upload-label"/>
 		Please upload a file
 	</label>

From 667a3f3fc3a0ab9006bf70046204290b8a2e2ef1 Mon Sep 17 00:00:00 2001
From: Jiri Swen <jiri.ei@hotmail.com>
Date: Thu, 19 Nov 2020 10:08:28 +0100
Subject: [PATCH 3/8] Account for outlineOffset being null

---
 src/floating-focus.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/floating-focus.js b/src/floating-focus.js
index 872b4b6..fc13ab6 100644
--- a/src/floating-focus.js
+++ b/src/floating-focus.js
@@ -188,7 +188,7 @@ export default class FloatingFocus {
 
 	getFloaterPosition(target) {
 		const targetStyle = window.getComputedStyle(target);
-		const padding = parseFloat(targetStyle.outlineOffset);
+		const padding = parseFloat(targetStyle.outlineOffset || '4px');
 
 		const rect = target.getBoundingClientRect();
 		this.previousTargetRect = rect;

From 6727c5ceec6634cca2fcb145935ec7465ee79fb4 Mon Sep 17 00:00:00 2001
From: Jiri Swen <jiri.ei@hotmail.com>
Date: Thu, 19 Nov 2020 10:34:49 +0100
Subject: [PATCH 4/8] Make default outline offset 0px

---
 src/floating-focus.js   | 2 +-
 src/floating-focus.scss | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/floating-focus.js b/src/floating-focus.js
index fc13ab6..d8335f0 100644
--- a/src/floating-focus.js
+++ b/src/floating-focus.js
@@ -188,7 +188,7 @@ export default class FloatingFocus {
 
 	getFloaterPosition(target) {
 		const targetStyle = window.getComputedStyle(target);
-		const padding = parseFloat(targetStyle.outlineOffset || '4px');
+		const padding = parseFloat(targetStyle.outlineOffset || '0px');
 
 		const rect = target.getBoundingClientRect();
 		this.previousTargetRect = rect;
diff --git a/src/floating-focus.scss b/src/floating-focus.scss
index 5ef1388..85fc0e1 100644
--- a/src/floating-focus.scss
+++ b/src/floating-focus.scss
@@ -46,8 +46,3 @@
 		border: 0 !important;
 	}
 }
-
-.floating-focus-enabled :focus, .floating-focus-enabled .focus {
-	// default 4px padding. Can be overwritten
-	outline-offset: 4px;
-}

From d30d78726661d6c55565b806f1904f8ba6b12b78 Mon Sep 17 00:00:00 2001
From: Jiri Swen <jiri.ei@hotmail.com>
Date: Thu, 19 Nov 2020 10:35:23 +0100
Subject: [PATCH 5/8] Give example test case outline-offset 0, to test that
 functionality

---
 example/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/index.html b/example/index.html
index 287e43b..81f7d6d 100644
--- a/example/index.html
+++ b/example/index.html
@@ -76,7 +76,7 @@
 		}
 
 		.file-upload-label.focus {
-			outline-offset: 8px;
+			outline-offset: 0;
 			outline-color: orange;
 			outline-width: 2px;
 			outline-style: dashed;

From a514e0bbcbc5227faa6d69b42f4a3fb0e6e81c2c Mon Sep 17 00:00:00 2001
From: Jiri Swen <jiri.ei@hotmail.com>
Date: Thu, 19 Nov 2020 10:52:08 +0100
Subject: [PATCH 6/8] Update test case

---
 src/floating-focus.spec.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/floating-focus.spec.js b/src/floating-focus.spec.js
index 980ac67..8c3552e 100644
--- a/src/floating-focus.spec.js
+++ b/src/floating-focus.spec.js
@@ -312,7 +312,8 @@ describe('Floating focus', () => {
 		const target = document.createElement('div');
 		const floater = floatingFocus.constructFloatingElement();
 		const targetStyle = window.getComputedStyle(target);
-		const padding = targetStyle.outlineOffset || 4;
+		targetStyle.outlineOffset = 4;
+		const padding = targetStyle.outlineOffset;
 
 		const rect = {
 			left: 42,

From 27594219ae07b286407eab99de90d07bba2703e4 Mon Sep 17 00:00:00 2001
From: Jiri Swen <jiri.ei@hotmail.com>
Date: Thu, 19 Nov 2020 10:56:46 +0100
Subject: [PATCH 7/8] Add test case for outline offset 0

---
 src/floating-focus.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/floating-focus.spec.js b/src/floating-focus.spec.js
index 8c3552e..0c809b3 100644
--- a/src/floating-focus.spec.js
+++ b/src/floating-focus.spec.js
@@ -307,12 +307,12 @@ describe('Floating focus', () => {
 		expect(floater.style.borderBottomLeftRadius).toBe(targetStyle.borderBottomLeftRadius);
 	});
 
-	it('Should reposition \'floater\' based on target position', () => {
+	it.each([4, 0])('Should reposition \'floater\' based on target position -- outline offset %d', (outlineOffset) => {
 		const floatingFocus = new FloatingFocus();
 		const target = document.createElement('div');
 		const floater = floatingFocus.constructFloatingElement();
 		const targetStyle = window.getComputedStyle(target);
-		targetStyle.outlineOffset = 4;
+		targetStyle.outlineOffset = outlineOffset;
 		const padding = targetStyle.outlineOffset;
 
 		const rect = {

From aae10f44138160e1b999a0646935715e9da60139 Mon Sep 17 00:00:00 2001
From: Jiri Swen <jiri.ei@hotmail.com>
Date: Thu, 19 Nov 2020 11:23:54 +0100
Subject: [PATCH 8/8] Slightly simplify test

---
 src/floating-focus.spec.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/floating-focus.spec.js b/src/floating-focus.spec.js
index 0c809b3..f1279eb 100644
--- a/src/floating-focus.spec.js
+++ b/src/floating-focus.spec.js
@@ -313,7 +313,6 @@ describe('Floating focus', () => {
 		const floater = floatingFocus.constructFloatingElement();
 		const targetStyle = window.getComputedStyle(target);
 		targetStyle.outlineOffset = outlineOffset;
-		const padding = targetStyle.outlineOffset;
 
 		const rect = {
 			left: 42,
@@ -328,8 +327,8 @@ describe('Floating focus', () => {
 
 		expect(floater.style.left).toBe(`${rect.left + rect.width / 2}px`);
 		expect(floater.style.top).toBe(`${rect.top + rect.height / 2}px`);
-		expect(floater.style.width).toBe(`${rect.width + padding * 2 }px`);
-		expect(floater.style.height).toBe(`${rect.height + padding * 2}px`);
+		expect(floater.style.width).toBe(`${rect.width + outlineOffset * 2 }px`);
+		expect(floater.style.height).toBe(`${rect.height + outlineOffset * 2}px`);
 	});
 
 	it('Should automatically reposition the \'floater\' when the target element\'s position changes', async () => {