Bug 1541253 - Test cases for CSS visibility propagation. r=tnikkel
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Fri, 10 May 2019 10:35:45 +0000
changeset 532201 c052518818dff9b913814d785606a0d11ec65e4e
parent 532200 57c522abe28f6d78f646d90c720022057205666c
child 532202 a22ba2fa077a0b0f9fc21bc0b1bcbb6737331f74
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstnikkel
bugs1541253
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1541253 - Test cases for CSS visibility propagation. r=tnikkel There are three test cases; 1) Two iframes are swapped 2) Changing the visibility of the parent document doesn't clobber a child document's visibility in the case where the child document has been hidden by another element in the parent document 3) an iframe is initially inside a visibility:hidden element in the parent document Depends on D26253 Differential Revision: https://phabricator.services.mozilla.com/D27842
layout/base/tests/chrome/chrome.ini
layout/base/tests/chrome/frame_css_visibility_propagation.html
layout/base/tests/chrome/test_css_visibility_propagation.xul
layout/base/tests/chrome/window_css_visibility_propagation-1.html
layout/base/tests/chrome/window_css_visibility_propagation-2.html
layout/base/tests/chrome/window_css_visibility_propagation-3.html
layout/base/tests/chrome/window_css_visibility_propagation-4.html
--- a/layout/base/tests/chrome/chrome.ini
+++ b/layout/base/tests/chrome/chrome.ini
@@ -51,8 +51,15 @@ skip-if = (os == "linux" && bits == 32) 
 [test_printpreview_bug396024.xul]
 skip-if = (verify && (os == 'win'))
 [test_printpreview_bug482976.xul]
 skip-if = (verify && (os == 'win'))
 [test_scrolling_repaints.html]
 [test_will_change.html]
 skip-if = webrender
 [test_getClientRectsAndTexts.html]
+[test_css_visibility_propagation.xul]
+support-files =
+  window_css_visibility_propagation-1.html
+  window_css_visibility_propagation-2.html
+  window_css_visibility_propagation-3.html
+  window_css_visibility_propagation-4.html
+  frame_css_visibility_propagation.html
new file mode 100644
--- /dev/null
+++ b/layout/base/tests/chrome/frame_css_visibility_propagation.html
@@ -0,0 +1,1 @@
+<button id="button">Button</button>
new file mode 100644
--- /dev/null
+++ b/layout/base/tests/chrome/test_css_visibility_propagation.xul
@@ -0,0 +1,171 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="chrome://global/skin"?>
+<?xml-stylesheet type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
+<script src="chrome://mochikit/content/tests/SimpleTest/AddTask.js"/>
+<body xmlns="http://www.w3.org/1999/xhtml"></body>
+<script>
+<![CDATA[
+const baseURL = "chrome://mochitests/content/chrome/layout/base/tests/chrome/";
+
+// Tests that iframe visibility is updated when it's swapped.
+add_task(async () => {
+  // Open two new windows to swap iframes.
+  const window1 =
+      window.open(baseURL + "window_css_visibility_propagation-1.html",
+                  "_blank", "chrome");
+  const window2 =
+      window.open(baseURL + "window_css_visibility_propagation-2.html",
+                  "_blank", "chrome");
+
+  const loadWindow1 =
+      new Promise(resolve => window1.addEventListener("load", resolve));
+  const loadWindow2 =
+      new Promise(resolve => window2.addEventListener("load", resolve));
+
+  await Promise.all([ loadWindow1, loadWindow2 ]);
+
+  // Hide the parent of iframe2.
+  let parent = window2.document.getElementById("parent");
+  parent.style.visibility = "hidden";
+  parent.getBoundingClientRect();
+
+  const iframe2 = window2.document.querySelector("iframe");
+  let target = iframe2.contentDocument.getElementById("button");
+  target.focus();
+
+  // iframe2 is now in a visibility:hidden element in window2,
+  // so that Element.focus() shouldn't work.
+  isnot(iframe2.contentDocument.activeElement, target,
+        "Element.focus() shouldn't work in invisible iframe");
+
+  // Make the parent visible.
+  parent.style.visibility = "";
+  parent.getBoundingClientRect();
+
+  target.focus();
+
+  // iframe2 is visible now, so focus() should work.
+  is(iframe2.contentDocument.activeElement, target,
+     "Element.focus() should work in visible iframe");
+
+  target.blur();
+  isnot(iframe2.contentDocument.activeElement, target,
+        "The target element shouldn't be activeElement");
+
+  // Swap the content in iframe1 for the content in iframe2.
+  const iframe1 = window1.document.querySelector("iframe");
+  iframe1.swapFrameLoaders(iframe2);
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  target = iframe1.contentDocument.getElementById("button");
+  target.focus();
+
+  // iframe1 is in a visibility:hidden element in window1,
+  // so that Element.focus() shouldn't work.
+  isnot(iframe1.contentDocument.activeElement, target,
+        "Element.focus() shouldn't work in invisible iframe");
+
+  parent = window1.document.getElementById("parent");
+  parent.style.visibility = "visible";
+  parent.getBoundingClientRect();
+
+  target.focus();
+
+  // Now iframe1 is in a visibility:visible element, so that
+  // Element.focus() should just work.
+  is(iframe1.contentDocument.activeElement, target,
+     "Element.focus() should work in visible iframe");
+
+  window1.close();
+  window2.close();
+});
+
+// Tests that ancestor's visibility change doesn't clobber child
+// iframe's visibility if the child iframe is hidden by an
+// element in the ancestor document.
+add_task(async () => {
+  const tabReady = new Promise(resolve => {
+    window.addEventListener("message", event => {
+      if (event.data == "ready") {
+        resolve();
+      }
+    }, { once: true });
+  });
+  const tabWindow =
+      window.open(baseURL + "window_css_visibility_propagation-3.html");
+  await tabReady;
+
+  const childIFrame = tabWindow.document.querySelector("iframe");
+
+  const grandChildIFrame =
+      childIFrame.contentDocument.querySelector("iframe");
+  let target = grandChildIFrame.contentDocument.getElementById("button");
+  target.focus();
+
+  is(grandChildIFrame.contentDocument.activeElement, target,
+     "Element.focus() should work in visible iframe");
+  target.blur();
+
+  // Hide the parent element of the grand child iframe.
+  let parent = childIFrame.contentDocument.getElementById("parent");
+  parent.style.visibility = "hidden";
+  parent.getBoundingClientRect();
+
+  target.focus();
+
+  isnot(grandChildIFrame.contentDocument.activeElement, target,
+        "Element.focus() shouldn't work in invisible iframe");
+
+  // Hide the parent element of the child iframe.
+  parent = tabWindow.document.getElementById("parent");
+  parent.style.visibility = "hidden";
+  parent.getBoundingClientRect();
+
+  target.focus();
+
+  isnot(grandChildIFrame.contentDocument.activeElement, target,
+        "Element.focus() shouldn't work in invisible iframe");
+
+  // Make the parent element of the child iframe visible.
+  parent.style.visibility = "visible";
+  parent.getBoundingClientRect();
+
+  target.focus();
+
+  // Even if the child iframe is visible, but still the grand child is
+  // hidden by the parent element of the grand child iframe so that
+  // we can't focus to the element in the grand child iframe.
+  isnot(grandChildIFrame.contentDocument.activeElement, target,
+        "Element.focus() shouldn't work in invisible iframe");
+
+  tabWindow.close();
+});
+
+// Tests that an iframe is initially hidden by a visibility:hidden element in
+// the parent document.
+add_task(async () => {
+  const tabReady = new Promise(resolve => {
+    window.addEventListener("message", event => {
+      if (event.data == "ready") {
+        resolve();
+      }
+    }, { once: true });
+  });
+  const tabWindow =
+      window.open(baseURL + "window_css_visibility_propagation-4.html");
+  await tabReady;
+
+  const iframe = tabWindow.document.querySelector("iframe");
+  let target = iframe.contentDocument.getElementById("button");
+  target.focus();
+
+  isnot(iframe.contentDocument.activeElement, target,
+        "Element.focus() shouldn't work in invisible iframe");
+
+  tabWindow.close();
+});
+]]>
+</script>
+</window>
new file mode 100644
--- /dev/null
+++ b/layout/base/tests/chrome/window_css_visibility_propagation-1.html
@@ -0,0 +1,3 @@
+<div id="parent" style="visibility: hidden">
+  <iframe src="about:mozilla"/>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/base/tests/chrome/window_css_visibility_propagation-2.html
@@ -0,0 +1,3 @@
+<div id="parent">
+  <iframe src="frame_css_visibility_propagation.html"/>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/base/tests/chrome/window_css_visibility_propagation-3.html
@@ -0,0 +1,3 @@
+<div id="parent">
+  <iframe onload="opener.postMessage('ready');" src="window_css_visibility_propagation-2.html"/>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/base/tests/chrome/window_css_visibility_propagation-4.html
@@ -0,0 +1,3 @@
+<div id="parent" style="visibility:hidden">
+  <iframe onload="opener.postMessage('ready');" src="frame_css_visibility_propagation.html"/>
+</div>