From f7e4d0d3d857bfe18b7e9dfacd1c27ffab04425c Mon Sep 17 00:00:00 2001
From: Chris Chua <chris.sirhc@gmail.com>
Date: Sun, 28 Mar 2021 18:55:32 -0700
Subject: [PATCH] add test

---
 src/runtime/internal/style_manager.ts         |  4 +--
 src/runtime/internal/transitions.ts           |  8 ++++--
 .../_config.js                                | 23 ++++++++++++++++
 .../main.svelte                               | 27 +++++++++++++++++++
 4 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 test/runtime/samples/transition-css-in-out-in-with-static/_config.js
 create mode 100644 test/runtime/samples/transition-css-in-out-in-with-static/main.svelte

diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts
index 687987148c02..1481a8be8e2e 100644
--- a/src/runtime/internal/style_manager.ts
+++ b/src/runtime/internal/style_manager.ts
@@ -18,8 +18,8 @@ function hash(str: string) {
 	return hash >>> 0;
 }
 
-export function create_static_rule(node: Element & ElementCSSInlineStyle, rule: string, uid: number = 0) {
-	const className = `__svelte_${hash(rule)}_${uid}`;
+export function create_static_rule(node: Element & ElementCSSInlineStyle, rule: string) {
+	const className = `__svelte_${hash(rule)}`;
 	const doc = node.ownerDocument as ExtendedDoc;
 	active_docs.add(doc);
 	const stylesheet = doc.__svelte_stylesheet || (doc.__svelte_stylesheet = doc.head.appendChild(element('style') as HTMLStyleElement).sheet as CSSStyleSheet);
diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts
index 33b35e4c5170..5ba094942a0d 100644
--- a/src/runtime/internal/transitions.ts
+++ b/src/runtime/internal/transitions.ts
@@ -92,7 +92,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 			static_css
 		} = config || null_transition;
 
-		if (static_css) static_class_name = create_static_rule(node, static_css, uid++);
+		if (static_css) static_class_name = create_static_rule(node, static_css);
 		if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
 		tick(0, 1);
 
@@ -157,6 +157,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
 	let config = fn(node, params);
 	let running = true;
+	let static_class_name;
 	let animation_name;
 
 	const group = outros;
@@ -169,9 +170,11 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 			duration = 300,
 			easing = linear,
 			tick = noop,
-			css
+			css,
+			static_css
 		} = config || null_transition;
 
+		if (static_css) static_class_name = create_static_rule(node, static_css);
 		if (css) animation_name = create_rule(node, 1, 0, duration, delay, easing, css);
 
 		const start_time = now() + delay;
@@ -223,6 +226,7 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 
 			if (running) {
 				if (animation_name) delete_rule(node, animation_name);
+				if (static_class_name) delete_static_rule(node, static_class_name);
 				running = false;
 			}
 		}
diff --git a/test/runtime/samples/transition-css-in-out-in-with-static/_config.js b/test/runtime/samples/transition-css-in-out-in-with-static/_config.js
new file mode 100644
index 000000000000..43937f199e42
--- /dev/null
+++ b/test/runtime/samples/transition-css-in-out-in-with-static/_config.js
@@ -0,0 +1,23 @@
+export default {
+	test({ assert, component, target, window, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+
+		assert.equal(div.className, '__svelte_2375698960');
+		assert.equal(div.style.animation, '__svelte_3809512021_0 100ms linear 0ms 1 both');
+
+		raf.tick(50);
+		component.visible = false;
+
+		// both in and out styles
+		assert.equal(div.className, '__svelte_2375698960 __svelte_1786671888');
+		assert.equal(div.style.animation, '__svelte_3809512021_0 100ms linear 0ms 1 both, __svelte_3750847757_0 100ms linear 0ms 1 both');
+
+		raf.tick(75);
+		component.visible = true;
+
+		// reset original styles
+		assert.equal(div.style.animation, '__svelte_3809512021_1 100ms linear 0ms 1 both');
+		assert.equal(div.className, '__svelte_2375698960');
+	}
+};
diff --git a/test/runtime/samples/transition-css-in-out-in-with-static/main.svelte b/test/runtime/samples/transition-css-in-out-in-with-static/main.svelte
new file mode 100644
index 000000000000..71cf88c06699
--- /dev/null
+++ b/test/runtime/samples/transition-css-in-out-in-with-static/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 100,
+			static_css: 'display: block',
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+
+	function bar() {
+		return {
+			duration: 100,
+			static_css: 'display: inline-block',
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:foo out:bar></div>
+{/if}
\ No newline at end of file