WIP: Add test page for issue #3496 and fix Edge autofocus bug

material-components · Sep 2, 2018 · 42dd975 · 42dd975
1 parent c7654af
commit 42dd975
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 0 deletions.
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -404,6 +404,15 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/02/18_08_57_688/spec/mdc-select/issues/3230.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-select/issues/3496.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/02/19_06_54_751/spec/mdc-select/issues/3496.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/02/18_27_17_064/spec/mdc-select/issues/3496.html.windows_chrome_68.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/02/19_06_54_751/spec/mdc-select/issues/3496.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/02/18_27_17_064/spec/mdc-select/issues/3496.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/02/18_27_17_064/spec/mdc-select/issues/3496.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-switch/classes/baseline.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/07/23/18_31_44_533/spec/mdc-switch/classes/baseline.html",
     "screenshots": {

diff --git a/test/screenshot/spec/fixture.js b/test/screenshot/spec/fixture.js
@@ -47,6 +47,7 @@ class TestFixture {
     this.fontsLoaded.then(() => {
       console.log('Fonts loaded!');
       this.measureMobileViewport_();
+      this.autoFocus_();
       this.notifyWebDriver_();
     });
   }
@@ -117,6 +118,28 @@ remove the 'test-viewport--mobile' class from the '<main class="test-viewport">'
     }
   }
 
+  /** @private */
+  autoFocus_() {
+    // Edge doesn't always focus `<select autofocus>` elements correctly.
+    // E.g., the "golden" image on the left of this screenshot test report:
+    // https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/02/19_06_54_751/report/report.html
+    const autoFocusEls = [].filter.call(document.querySelectorAll('[autofocus]'), (el) => {
+      const style = getComputedStyle(el);
+      if (style.visibility === 'hidden' || style.display === 'none' || style.opacity < 0.1) {
+        return false;
+      }
+      const rect = el.getBoundingClientRect();
+      if (rect.height === 0 || rect.width === 0) {
+        return false;
+      }
+      return true;
+    });
+    const autoFocusEl = autoFocusEls[0];
+    if (autoFocusEl && document.activeElement !== autoFocusEl) {
+      autoFocusEl.focus();
+    }
+  }
+
   /** @private */
   notifyWebDriver_() {
     document.body.setAttribute('data-fonts-loaded', '');

diff --git a/test/screenshot/spec/mdc-select/issues/3496.html b/test/screenshot/spec/mdc-select/issues/3496.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2018 Google Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Issue 3496 - MDC Web Screenshot Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.select.css">
+    <link rel="stylesheet" href="../../../out/mdc.typography.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-select/fixture.css">
+  </head>
+
+  <body class="test-container mdc-typography">
+    <main class="test-viewport test-viewport--mobile">
+      <div class="test-layout">
+
+        <!-- This tests that select suppresses IE's default blue background on focus -->
+        <!-- See https://github.com/material-components/material-components-web/issues/3496 -->
+        <div class="test-cell test-cell--select">
+          <div class="mdc-select mdc-select--outlined">
+            <select class="mdc-select__native-control" id="my-select" autofocus>
+              <option value="grains" selected>
+                Bread, Cereal, Rice, and Pasta
+              </option>
+              <option value="vegetables" disabled>
+                Vegetables
+              </option>
+            </select>
+            <div class="mdc-notched-outline mdc-notched-outline--notched">
+              <svg>
+                <path class="mdc-notched-outline__path"/>
+              </svg>
+            </div>
+            <div class="mdc-notched-outline__idle"></div>
+          </div>
+        </div>
+
+      </div>
+    </main>
+
+    <!-- Automatically provides/replaces `Promise` if missing or broken. -->
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
+    <script src="../../../out/material-components-web.js"></script>
+    <script src="../../../out/spec/fixture.js"></script>
+    <script src="../../../out/spec/mdc-select/fixture.js"></script>
+  </body>
+</html>