michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:    http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: // Tests that there is a transform being applied to the tabs as they zoom in
michael@0: // and out.
michael@0: 
michael@0: let tab, frontChanged, transformChanged;
michael@0: 
michael@0: function test() {
michael@0:   waitForExplicitFinish();
michael@0: 
michael@0:   window.addEventListener("tabviewshown", onTabViewWindowLoaded, false);
michael@0:   TabView.toggle();
michael@0: }
michael@0: 
michael@0: function onTabViewWindowLoaded() {
michael@0:   window.removeEventListener("tabviewshown", onTabViewWindowLoaded, false);
michael@0: 
michael@0:   let contentWindow = document.getElementById("tab-view").contentWindow;
michael@0:   tab = contentWindow.UI.getActiveTab();
michael@0:   ok(tab, "We have an active tab");
michael@0: 
michael@0:   frontChanged = transformChanged = false;
michael@0:   tab.$container[0].addEventListener("DOMAttrModified", checkForFrontAddition,
michael@0:                                      false);
michael@0:   tab.$canvas[0].addEventListener("DOMAttrModified", checkForTransformAddition,
michael@0:                                   false);
michael@0: 
michael@0:   window.addEventListener("tabviewhidden", onTabViewHidden, false);
michael@0:   TabView.toggle();
michael@0: }
michael@0: 
michael@0: function checkForFrontAddition(aEvent) {
michael@0:   if (aEvent.attrName == "class" &&
michael@0:       aEvent.target.classList.contains("front")) {
michael@0:     frontChanged = true;
michael@0:   }
michael@0: }
michael@0: 
michael@0: function checkForTransformAddition(aEvent) {
michael@0:   if (aEvent.attrName == "style" && aEvent.target.style.transform) {
michael@0:     transformChanged = true;
michael@0:   }
michael@0: }
michael@0: 
michael@0: function onTabViewHidden() {
michael@0:   window.removeEventListener("tabviewhidden", onTabViewHidden, false);
michael@0: 
michael@0:   ok(frontChanged, "the CSS class 'front' was added while zooming in");
michael@0:   ok(transformChanged, "the CSS class 'transform' was modified while " +
michael@0:      "zooming in");
michael@0: 
michael@0:   frontChanged = transformChanged = false;
michael@0:   tab.$container[0].removeEventListener("DOMAttrModified",
michael@0:                                         checkForFrontAddition, false);
michael@0:   tab.$container[0].addEventListener("DOMAttrModified", checkForFrontRemoval,
michael@0:                                      false);
michael@0: 
michael@0:   window.addEventListener("tabviewshown", onTabViewShownAgain, false);
michael@0:   TabView.toggle();
michael@0: }
michael@0: 
michael@0: function checkForFrontRemoval(aEvent) {
michael@0:   if (aEvent.attrName == "class" &&
michael@0:       !aEvent.target.classList.contains("front")) {
michael@0:     frontChanged = true;
michael@0:   }
michael@0: }
michael@0: 
michael@0: function onTabViewShownAgain() {
michael@0:   window.removeEventListener("tabviewshown", onTabViewShownAgain, false);
michael@0: 
michael@0:   ok(frontChanged, "the CSS class 'front' was removed while zooming out");
michael@0:   ok(transformChanged, "the CSS class 'transform' was removed while zooming " +
michael@0:      "out");
michael@0: 
michael@0:   tab.$container[0].removeEventListener("DOMAttrModified",
michael@0:                                         checkForFrontRemoval, false);
michael@0:   tab.$canvas[0].removeEventListener("DOMAttrModified",
michael@0:                                      checkForTransformAddition, false);
michael@0: 
michael@0:   window.addEventListener("tabviewhidden", onTabViewHiddenAgain, false);
michael@0:   TabView.toggle();
michael@0: }
michael@0: 
michael@0: function onTabViewHiddenAgain() {
michael@0:   window.removeEventListener("tabviewhidden", onTabViewHiddenAgain, false);
michael@0: 
michael@0:   finish();
michael@0: }
michael@0: