Add Quick View image load test

Now we have the QuickView <webview> infra to detect the 'loaded' state
of thew <webview> content, add a <file-safe-media> image test and also
check the <webview> renders its content on a transparent black body.

Bug: 891150
Change-Id: I8e6aac85ce09e0fcbe0cbba660630d1427e2962b
Reviewed-on: https://chromium-review.googlesource.com/c/1263678Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#596989}

ui/file_manager/integration_tests/file_manager/quick_view.js

@@ -550,3 +550,65 @@ testcase.openQuickViewBackgroundColorHtml = function() {
     },
   ]);
 };
+
+/**
+ * Tests opening Quick View containing an image.
+ */
+testcase.openQuickViewImage = function() {
+  const caller = getCaller();
+  let appId;
+
+  /**
+   * The <webview> resides in the <files-safe-media type="image"> shadow DOM,
+   * which is a child of the #quick-view shadow DOM.
+   */
+  const webView = ['#quick-view', 'files-safe-media[type="image"]', 'webview'];
+
+  StepsRunner.run([
+    // Open Files app on Downloads containing ENTRIES.smallJpeg.
+    function() {
+      setupAndWaitUntilReady(
+          null, RootPath.DOWNLOADS, this.next, [ENTRIES.smallJpeg], []);
+    },
+    // Open the file in Quick View.
+    function(results) {
+      appId = results.windowId;
+      const openSteps = openQuickViewSteps(appId, ENTRIES.smallJpeg.nameText);
+      StepsRunner.run(openSteps).then(this.next);
+    },
+    // Wait for the Quick View <webview> to load and display its content.
+    function() {
+      function checkWebViewImageLoaded(elements) {
+        let haveElements = Array.isArray(elements) && elements.length === 1;
+        if (haveElements)
+          haveElements = elements[0].styles.display.includes('block');
+        if (!haveElements || elements[0].attributes.loaded !== '')
+          return pending(caller, 'Waiting for <webview> to load.');
+        return;
+      }
+      repeatUntil(function() {
+        return remoteCall
+            .callRemoteTestUtil(
+                'deepQueryAllElements', appId, [webView, ['display']])
+            .then(checkWebViewImageLoaded);
+      }).then(this.next);
+    },
+    // Get the <webview> document.body backgroundColor style.
+    function() {
+      const getBackgroundStyle =
+          'window.getComputedStyle(document.body).backgroundColor';
+      remoteCall
+        .callRemoteTestUtil(
+            'deepExecuteScriptInWebView', appId, [webView, getBackgroundStyle])
+        .then(this.next);
+    },
+    // Check: the <webview> body backgroundColor should be transparent black.
+    function(backgroundColor) {
+      chrome.test.assertEq('rgba(0, 0, 0, 0)', backgroundColor[0]);
+      this.next();
+    },
+    function() {
+      checkIfNoErrorsOccured(this.next);
+    },
+  ]);
+};