	<!doctype html>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>Firefox Test Page</title>
	<meta name="viewport" content="width=device-width">
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<style>
	div {
	transform: translate(0);
	}
	div.important {
	transform: translate(0)!important;
	}
	video {
	width: 100%;
	max-width: 100%;
	}
	</style>
	</head>

	<body>
	<h1>
	<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1055977">Bug 1055977</a> - Fullscreen video disappears when using CSS transform on parent element
	</h1>

	<h2>Instructions:</h2>
	<ol>
	<li>Click Play</li>
	<li>Click Fullscreen</li>
	<li>Video should switch to fullscreen-mode and work fine</li>
	<li>Exit fullscreen-mode</li>
	<li><a href="#">Toggle the <code>!important</code> on the <code>div</code>'s <code>transform</code></a></li>
	<li>Click the Fullscreen button</li>
	<li>Audio should continue, but the video should disappear</li>
	</ol>

	<div>
	<video controls>
	<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
	<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
	</video>
	</div>


	<script>
	var div = document.querySelector('div'),
	toggle = document.querySelector('li > a');
	toggle.addEventListener('click', function(e){
	if (div.className.match('important')) {
	div.className = '';
	} else {
	div.className = 'important';
	}
	e.preventDefault();
	}, false);
	</script>

	</body>
	</html>