some more transition tests, albeit somewhat ugly

src/generators/dom/visitors/Element/addTransitions.js

@@ -22,7 +22,7 @@ export default function addTransitions ( generator, block, state, node, intro, o
 
 		block.builders.outro.addBlock( deindent`
 			${name}.run( ${name}.t, 0, function () {
-				detachNode( ${state.name} );
+				${generator.helper( 'detachNode' )}( ${state.name} );
 				${block.component}.fire( 'outro.end', { node: ${state.name} });
 				if ( --${block.alias( 'outros' )} === 0 ) ${block.alias( 'outrocallback' )}();
 				${name} = null;
@@ -63,7 +63,7 @@ export default function addTransitions ( generator, block, state, node, intro, o
 			block.builders.outro.addBlock( deindent`
 				${outroName} = ${wrapTransition}( ${state.name}, ${fn}, ${snippet}, false, null );
 				${outroName}.run( 1, 0, function () {
-					detachNode( ${state.name} );
+					${generator.helper( 'detachNode' )}( ${state.name} );
 					${block.component}.fire( 'outro.end', { node: ${state.name} });
 					if ( --${block.alias( 'outros' )} === 0 ) ${block.alias( 'outrocallback' )}();
 				});

test/runtime/samples/transition-js-if-block-bidi/_config.js

@@ -0,0 +1,40 @@
+export default {
+	test ( assert, component, target, window ) {
+		global.count = 0;
+		let now = 0;
+		let callback;
+
+		window.performance = { now: () => now };
+		global.requestAnimationFrame = cb => callback = cb;
+
+		component.set({ visible: true });
+		assert.equal( global.count, 1 );
+		const div = target.querySelector( 'div' );
+		assert.equal( div.foo, 0 );
+
+		now = 300;
+		callback();
+		assert.equal( div.foo, 0.75 );
+
+		component.set({ visible: false });
+		assert.equal( global.count, 1 );
+
+		now = 500;
+		callback();
+		assert.equal( div.foo, 0.25 );
+
+		component.set({ visible: true });
+		now = 700;
+		callback();
+		assert.equal( div.foo, 0.75 );
+
+		now = 800;
+		callback();
+		assert.equal( div.foo, 1 );
+
+		now = 900;
+		callback();
+
+		component.destroy();
+	}
+};

test/runtime/samples/transition-js-if-block-bidi/main.html

@@ -0,0 +1,19 @@
+{{#if visible}}
+	<div transition:foo>foo bidi</div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				global.count += 1;
+				return {
+					duration: 400,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-if-block-intro-outro/_config.js

@@ -0,0 +1,62 @@
+export default {
+	test ( assert, component, target, window ) {
+		let now = 0;
+		let callback;
+
+		window.performance = { now: () => now };
+		global.requestAnimationFrame = cb => callback = cb;
+
+		component.set({ visible: true });
+		let div = target.querySelector( 'div' );
+		assert.equal( div.foo, 0 );
+
+		now = 200;
+		callback();
+		assert.equal( div.foo, 0.5 );
+
+		now = 400;
+		callback();
+		assert.equal( div.foo, 1 );
+
+		now = 500;
+		callback();
+		assert.equal( div.foo, 1 );
+
+		component.set({ visible: false });
+		now = 600;
+		callback();
+		assert.equal( div.foo, 1 );
+		assert.equal( div.bar, 0.75 );
+
+		now = 900;
+		callback();
+		assert.equal( div.foo, 1 );
+		assert.equal( div.bar, 0 );
+
+		// test outro before intro complete
+		now = 1000;
+		component.set({ visible: true });
+		div = target.querySelector( 'div' );
+		callback();
+
+		now = 1200;
+		callback();
+		assert.equal( div.foo, 0.5 );
+
+		component.set({ visible: false });
+		now = 1300;
+		callback();
+		assert.equal( div.foo, 0.75 );
+		assert.equal( div.bar, 0.75 );
+
+		now = 1400;
+		callback();
+		assert.equal( div.foo, 1 );
+		assert.equal( div.bar, 0.5 );
+
+		now = 2000;
+		callback();
+
+		component.destroy();
+	}
+};

test/runtime/samples/transition-js-if-block-intro-outro/main.html

@@ -0,0 +1,27 @@
+{{#if visible}}
+	<div in:foo out:bar>foo then bar</div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo: function ( node, params ) {
+				return {
+					duration: 400,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			},
+
+			bar: function ( node, params ) {
+				return {
+					duration: 400,
+					tick: t => {
+						node.bar = t;
+					}
+				};
+			}
+		}
+	};
+</script>

test/runtime/samples/transition-js-if-block-intro/_config.js

@@ -18,6 +18,9 @@ export default {
 		callback();
 		assert.equal( window.getComputedStyle( div ).opacity, 1 );
 
+		now = 500;
+		callback();
+
 		component.destroy();
 	}
 };