Bug 1492746 [wpt PR 13102] - Several fixes to manual fullscreen tests…

…, a=testonly

Automatic update from web-platform-testsSeveral fixes to manual fullscreen tests (#13102)

These tests are made to start after onload so that iframe content
doesn't change anymore:
* fullscreen/api/element-ready-check-containing-iframe-manual.html
* fullscreen/api/element-ready-check-not-allowed-manual.html
* fullscreen/api/element-request-fullscreen-and-exit-iframe-manual.html
* fullscreen/model/move-to-fullscreen-iframe-manual.html

fullscreen/rendering/ua-style-iframe-manual.html is updated to check
each subproperties individually rather than shorthand properties.

fullscreen/api/element-request-fullscreen-timing-manual.html is changed
so that the second test starts after an animation frame to work around
Gecko throttling rAF before the first paint.

Related bugs:
https://bugzilla.mozilla.org/show_bug.cgi?id=1493878
w3c/csswg-drafts#2529
--

wpt-commits: b3c7bf4261939cd1aba9b3264152a718b634ffa7
wpt-pr: 13102

UltraBlame original commit: 4c97e39c26a7f0ea4a0714fc8a7c77e21734ed0e

testing/web-platform/tests/fullscreen/api/document-exit-fullscreen-timing-manual.html

@@ -20,7 +20,7 @@
     const events = [];
     const callback = t.step_func(event => {
       // fullscreenElement should have changed before either event is fired.
-      assert_equals(document.fullscreenElement, null, `fullscreenElement in {event.type} event`);
+      assert_equals(document.fullscreenElement, null, `fullscreenElement in ${event.type} event`);
       events.push(event.type);
       if (event.type == 'fullscreenchange') {
         step_timeout(t.unreached_func('timer callback'));

testing/web-platform/tests/fullscreen/api/element-ready-check-containing-iframe-manual.html

@@ -7,18 +7,19 @@
 <iframe allowfullscreen></iframe>
 <iframe allowfullscreen></iframe>
 <script>
-async_test(function(t)
-{
-    var iframes = document.getElementsByTagName("iframe");
-    trusted_request(t, iframes[0].contentDocument.body, document.body);
-    iframes[0].contentDocument.onfullscreenchange = t.step_func(function()
-    {
-        assert_equals(document.fullscreenElement, iframes[0]);
-        trusted_request(t, iframes[1].contentDocument.body, iframes[0].contentDocument.body);
-        iframes[1].contentDocument.onfullscreenchange = t.step_func_done(function() {
-            assert_equals(document.fullscreenElement, iframes[1]);
-        });
-        iframes[1].contentDocument.onfullscreenerror = t.unreached_func("fullscreenchange error");
-    });
-});
+// wait for load event to avoid https://bugzil.la/1493878
+window.onload = function() {
+  async_test(function(t) {
+      var iframes = document.getElementsByTagName("iframe");
+      trusted_request(t, iframes[0].contentDocument.body, document.body);
+      iframes[0].contentDocument.onfullscreenchange = t.step_func(function() {
+          assert_equals(document.fullscreenElement, iframes[0]);
+          trusted_request(t, iframes[1].contentDocument.body, iframes[0].contentDocument.body);
+          iframes[1].contentDocument.onfullscreenchange = t.step_func_done(function() {
+              assert_equals(document.fullscreenElement, iframes[1]);
+          });
+          iframes[1].contentDocument.onfullscreenerror = t.unreached_func("fullscreenchange error");
+      });
+  });
+};
 </script>

testing/web-platform/tests/fullscreen/api/element-ready-check-not-allowed-manual.html

@@ -6,14 +6,16 @@
 <div id="log"></div>
 <iframe></iframe>
 <script>
-async_test(function(t)
-{
-    var iframe = document.querySelector("iframe");
-    document.onfullscreenchange = t.unreached_func("document fullscreenchange event");
-    document.onfullscreenerror = t.unreached_func("document fullscreenerror event");
-    iframe.contentDocument.onfullscreenchange = t.unreached_func("iframe fullscreenchange event");
-    iframe.contentDocument.onfullscreenerror = t.step_func_done();
-    assert_false(iframe.contentDocument.fullscreenEnabled, "fullscreen enabled flag");
-    trusted_request(t, iframe.contentDocument.body, document.body);
-});
+// wait for load event to avoid https://bugzil.la/1493878
+window.onload = function() {
+  async_test(function(t) {
+      var iframe = document.querySelector("iframe");
+      document.onfullscreenchange = t.unreached_func("document fullscreenchange event");
+      document.onfullscreenerror = t.unreached_func("document fullscreenerror event");
+      iframe.contentDocument.onfullscreenchange = t.unreached_func("iframe fullscreenchange event");
+      iframe.contentDocument.onfullscreenerror = t.step_func_done();
+      assert_false(iframe.contentDocument.fullscreenEnabled, "fullscreen enabled flag");
+      trusted_request(t, iframe.contentDocument.body, document.body);
+  });
+};
 </script>

testing/web-platform/tests/fullscreen/api/element-request-fullscreen-and-exit-iframe-manual.html

@@ -6,37 +6,40 @@
 <div id="log"></div>
 <iframe allowfullscreen></iframe>
 <script>
-async_test(t => {
-  const iframe = document.querySelector('iframe');
-  const iframeDoc = iframe.contentDocument;
-  const iframeBody = iframeDoc.body;
+// wait for load event to avoid https://bugzil.la/1493878
+window.onload = function() {
+  async_test(t => {
+    const iframe = document.querySelector('iframe');
+    const iframeDoc = iframe.contentDocument;
+    const iframeBody = iframeDoc.body;
 
-  let count = 0;
-  document.onfullscreenchange = iframeDoc.onfullscreenchange = t.step_func(event => {
-    count++;
-    assert_between_inclusive(count, 1, 4, 'number of fullscreenchange events');
-    // Both when entering and exiting, the fullscreenchange event is fired first
-    // on the outer document and then on the iframe's document. This is because
-    // the events are fired in animation frame tasks, which run in "frame tree"
-    // order.
-    const expected = {
-      target: count == 1 || count == 3 ? iframe : iframeBody,
-      outerFullscreenElement: count <= 2 ? iframe : null,
-      innerFullscreenElement: count <= 2 ? iframeBody : null,
-    };
-    assert_equals(event.target, expected.target, 'event target');
-    assert_equals(document.fullscreenElement, expected.outerFullscreenElement, 'outer fullscreenElement');
-    assert_equals(iframeDoc.fullscreenElement, expected.innerFullscreenElement, 'inner fullscreenElement');
-    if (count == 2) {
-      iframeDoc.exitFullscreen();
-    } else if (count == 4) {
-      // Done, but set timeout to fail on extra events.
-      step_timeout(t.step_func_done());
-    }
-  });
-  document.onfullscreenerror = t.unreached_func('fullscreenerror event');
-  iframeDoc.onfullscreenerror = t.unreached_func('iframe fullscreenerror event');
+    let count = 0;
+    document.onfullscreenchange = iframeDoc.onfullscreenchange = t.step_func(event => {
+      count++;
+      assert_between_inclusive(count, 1, 4, 'number of fullscreenchange events');
+      // Both when entering and exiting, the fullscreenchange event is fired first
+      // on the outer document and then on the iframe's document. This is because
+      // the events are fired in animation frame tasks, which run in "frame tree"
+      // order.
+      const expected = {
+        target: count == 1 || count == 3 ? iframe : iframeBody,
+        outerFullscreenElement: count <= 2 ? iframe : null,
+        innerFullscreenElement: count <= 2 ? iframeBody : null,
+      };
+      assert_equals(event.target, expected.target, 'event target');
+      assert_equals(document.fullscreenElement, expected.outerFullscreenElement, 'outer fullscreenElement');
+      assert_equals(iframeDoc.fullscreenElement, expected.innerFullscreenElement, 'inner fullscreenElement');
+      if (count == 2) {
+        iframeDoc.exitFullscreen();
+      } else if (count == 4) {
+        // Done, but set timeout to fail on extra events.
+        step_timeout(t.step_func_done());
+      }
+    });
+    document.onfullscreenerror = t.unreached_func('fullscreenerror event');
+    iframeDoc.onfullscreenerror = t.unreached_func('iframe fullscreenerror event');
 
-  trusted_request(t, iframeBody, iframeBody);
-});
+    trusted_request(t, iframeBody, iframeBody);
+  });
+};
 </script>

testing/web-platform/tests/fullscreen/api/element-request-fullscreen-timing-manual.html

@@ -28,21 +28,25 @@
 }, 'Timing of fullscreenchange and resize events');
 
 async_test(t => {
-  var promise = document.createElement('a').requestFullscreen();
-  var promise_executed = false;
-  if (promise) {
-    promise.catch(()=>{promise_executed = true; });
-  } else {
-    // if promises aren't supported treat it as executed.
-    promise_executed = true;
-  }
+  // Gecko throttles requestAnimationFrame before the first paint, so
+  // wrap the test to work around that.
+  requestAnimationFrame(t.step_func(() => {
+    var promise = document.createElement('a').requestFullscreen();
+    var promise_executed = false;
+    if (promise) {
+      promise.catch(()=>{promise_executed = true; });
+    } else {
+      // if promises aren't supported treat it as executed.
+      promise_executed = true;
+    }
 
-  // If fullscreenerror is an animation frame event, then animation frame
-  // callbacks should be run after it is fired, before the timer callback.
-  document.onfullscreenerror = t.step_func(() => {
-    assert_true(promise_executed, "promise executed");
-    step_timeout(t.unreached_func('timer callback'));
-    requestAnimationFrame(t.step_func_done());
-  });
+    // If fullscreenerror is an animation frame event, then animation frame
+    // callbacks should be run after it is fired, before the timer callback.
+    document.onfullscreenerror = t.step_func(() => {
+      assert_true(promise_executed, "promise executed");
+      step_timeout(t.unreached_func('timer callback'));
+      requestAnimationFrame(t.step_func_done());
+    });
+  }));
 }, 'Timing of fullscreenerror event');
 </script>

testing/web-platform/tests/fullscreen/model/move-to-fullscreen-iframe-manual.html

@@ -5,33 +5,36 @@
 <script src="../trusted-click.js"></script>
 <iframe allowfullscreen></iframe>
 <script>
-async_test(t => {
-  const iframe = document.querySelector('iframe');
-  const iframeDoc = iframe.contentDocument;
+// wait for load event to avoid https://bugzil.la/1493878
+window.onload = function() {
+  async_test(t => {
+    const iframe = document.querySelector('iframe');
+    const iframeDoc = iframe.contentDocument;
 
-  // Enter fullscreen for the iframe's body element.
-  trusted_request(t, iframeDoc.body, iframeDoc.body);
-  document.onfullscreenchange = t.step_func(() => {
-    assert_equals(document.fullscreenElement, iframe, "document's initial fullscreen element");
-    assert_equals(iframeDoc.fullscreenElement, iframeDoc.body, "iframe's initial fullscreen element");
+    // Enter fullscreen for the iframe's body element.
+    trusted_request(t, iframeDoc.body, iframeDoc.body);
+    document.onfullscreenchange = t.step_func(() => {
+      assert_equals(document.fullscreenElement, iframe, "document's initial fullscreen element");
+      assert_equals(iframeDoc.fullscreenElement, iframeDoc.body, "iframe's initial fullscreen element");
 
-    // Then, move the outer document's body into the iframe. This is an unusual
-    // thing to do, but means that the iframe is removed from its document and
-    // should trigger fullscreen exit.
-    iframeDoc.documentElement.appendChild(document.body);
+      // Then, move the outer document's body into the iframe. This is an unusual
+      // thing to do, but means that the iframe is removed from its document and
+      // should trigger fullscreen exit.
+      iframeDoc.documentElement.appendChild(document.body);
 
-    // If we exit in an orderly fashion, that's all one can ask for.
-    document.onfullscreenchange = t.step_func_done(() => {
-      assert_equals(document.fullscreenElement, null, "document's final fullscreen element");
+      // If we exit in an orderly fashion, that's all one can ask for.
+      document.onfullscreenchange = t.step_func_done(() => {
+        assert_equals(document.fullscreenElement, null, "document's final fullscreen element");
 
-      // Because the iframe was removed, its browsing context was discarded and
-      // its contentDocument has become null. Because that browsing context was
-      // neither a descendant browsing context nor had an active document,
-      // nothing at all was done with it in the exit fullscreen algorithm, so
-      // its fullscreenElement is unchanged.
-      assert_equals(iframe.contentDocument, null, "iframe's content document");
-      assert_equals(iframeDoc.fullscreenElement, iframeDoc.body, "iframe's final fullscreen element");
+        // Because the iframe was removed, its browsing context was discarded and
+        // its contentDocument has become null. Because that browsing context was
+        // neither a descendant browsing context nor had an active document,
+        // nothing at all was done with it in the exit fullscreen algorithm, so
+        // its fullscreenElement is unchanged.
+        assert_equals(iframe.contentDocument, null, "iframe's content document");
+        assert_equals(iframeDoc.fullscreenElement, iframeDoc.body, "iframe's final fullscreen element");
+      });
     });
   });
-});
+};
 </script>

testing/web-platform/tests/fullscreen/rendering/ua-style-iframe-manual.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>User-agent levels style sheet defaults for iframe</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../trusted-click.js"></script>
+<style>
+iframe {
+  border: 1px solid blue;
+  padding: 1px;
+  /* transform is also tested because of https://crbug.com/662393 */
+  transform: scale(0.5);
+}
+</style>
+<div id="log"></div>
+<div id="ancestor"><iframe></iframe></div>
+<script>
+function assert_dir_properties(style, propBase, value, state) {
+  for (let dir of ["Top", "Right", "Bottom", "Left"]) {
+    let prop = propBase.replace('{}', dir);
+    assert_equals(style[prop], value, `${state} ${prop} style`);
+  }
+}
+
+async_test(t => {
+  const ancestor = document.getElementById('ancestor');
+  const iframe = ancestor.firstChild;
+
+  const initialStyle = getComputedStyle(iframe);
+  assert_dir_properties(initialStyle, 'border{}Width', '1px', 'initial');
+  assert_dir_properties(initialStyle, 'border{}Style', 'solid', 'initial');
+  assert_dir_properties(initialStyle, 'border{}Color', 'rgb(0, 0, 255)', 'initial');
+  assert_dir_properties(initialStyle, 'padding{}', '1px', 'initial');
+  assert_equals(initialStyle.transform, 'matrix(0.5, 0, 0, 0.5, 0, 0)', 'initial transform style');
+
+  trusted_request(t, iframe);
+
+  document.addEventListener('fullscreenchange', t.step_func_done(() => {
+    const fullscreenStyle = getComputedStyle(iframe);
+    assert_dir_properties(fullscreenStyle, 'border{}Width', '0px', 'fullscreen');
+    assert_dir_properties(fullscreenStyle, 'border{}Style', 'none', 'fullscreen');
+    assert_dir_properties(fullscreenStyle, 'border{}Color', 'rgb(0, 0, 0)', 'fullscreen');
+    assert_dir_properties(fullscreenStyle, 'padding{}', '0px', 'fullscreen');
+    assert_equals(fullscreenStyle.transform, 'none', 'fullscreen transform style');
+  }));
+});
+</script>