<script src="../../../../resources/js-test-pre.js"></script>
<script src="../../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<audio src="../../../content/test.wav" controls style="width: 300px; pointer-events: none; opacity: 0;"></audio>
<div id="shadow" style="width: 300px; height: 50px;"></div>
<script type="text/javascript">

description("Testing the <code>MediaController</code> controls bar tap gesture recognizer is only enabled when fadesWhileIdle is true.");

const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
const media = document.querySelector("audio");
const mediaController = createControls(shadowRoot, media, null);
const autoHideController = mediaController.controls.autoHideController;

debug("Default state");
shouldBeFalse("autoHideController.fadesWhileIdle");
shouldBeFalse("autoHideController._tapGestureRecognizer.enabled");

autoHideController.fadesWhileIdle = true;
debug("");
debug("autoHideController.fadesWhileIdle = true")
shouldBeTrue("autoHideController.fadesWhileIdle");
shouldBeTrue("autoHideController._tapGestureRecognizer.enabled");

autoHideController.fadesWhileIdle = false;
debug("");
debug("autoHideController.fadesWhileIdle = false")
shouldBeFalse("autoHideController.fadesWhileIdle");
shouldBeFalse("autoHideController._tapGestureRecognizer.enabled");

debug("");

</script>
<script src="../../../../resources/js-test-post.js"></script>
</body>