Remove visibility hidden from veiling; add test for autofocus on input, fixes #317

Author: sorvell

src/boot.js

@@ -15,7 +15,7 @@
   var TRANSITION_TIME = 0.3;
   var style = document.createElement('style');
   style.textContent = '.' + VEILED_CLASS + ' { ' +
-      'visibility: hidden; opacity: 0; } \n' +
+      'opacity: 0; } \n' +
       '.' + UNVEIL_CLASS +  '{ ' +
       '-webkit-transition: opacity ' + TRANSITION_TIME + 's; ' +
       'transition: opacity ' + TRANSITION_TIME +'s; }\n';

test/html/styling/unveil.html

@@ -11,8 +11,14 @@
   <script src="../../../../tools/test/htmltest.js"></script>
   <script src="../../../../tools/test/chai/chai.js"></script>
   <style>
+    .polymer-veiled {
+      background-color: white;
+    }
+
     .polymer-unveil {
-      background: red;
+      background-color: red;
+      transition: all 0.3s;
+      -webkit-transition: all 0.3s;
     }
   </style>
   <script>
@@ -30,17 +36,21 @@
     <script>
       Polymer('x-test', {
         enteredView: function() {
-          chai.assert.isTrue(getComputedStyle(this).visibility == 'hidden',
-            'veiled elements are visible');
+          chai.assert.isTrue(getComputedStyle(this).opacity == '0',
+            'veiled elements are not opacity 0');
         }
       });
     </script>
   </polymer-element>
 
   <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      chai.assert.isTrue(getComputedStyle(document.body).opacity == '0',
+            'veiled elements are opacity 0');
+    });
     document.addEventListener('WebComponentsReady', function() {
-      chai.assert.isTrue(getComputedStyle(document.body).visibility == 'hidden',
-            'veiled elements are visible');
+      chai.assert.isTrue(getComputedStyle(document.body).opacity == '0',
+            'veiled elements are opacity 0');
       // test during transition
       requestAnimationFrame(function() {
         requestAnimationFrame(function() {
@@ -49,24 +59,21 @@
           chai.assert.equal(document.querySelectorAll('.polymer-unveil').length, 3,
               'element unveil class is applied when unveiling');
           var nodes = document.querySelectorAll('.polymer-unveil')
-          for (var i=0; i<nodes.length; i++) {
-            chai.assert.equal(getComputedStyle(nodes[i]).backgroundColor, 
-                'rgb(255, 0, 0)', 'user unveil style is applied');
-          }
-
         });
       });
+      var isDone;
       var endEvent = (document.documentElement.style.webkitTransition !== undefined) ?
           'webkitTransitionEnd' : 'transitionend';
       document.body.addEventListener(endEvent, function(e) {
-        if (e.target != this) {
+        if (e.target != this || isDone) {
           return;
         }
+        isDone = true;
         requestAnimationFrame(function() {
           for (var i=0, l=Polymer.veiledElements.length, elt; i<l; i++) {
             elt = document.querySelector(Polymer.veiledElements[i]);
-            chai.assert.isTrue(getComputedStyle(elt).visibility == 'visible',
-                'unveiled elements are visible');
+            chai.assert.isTrue(getComputedStyle(elt).opacity == '1',
+                'unveiled elements are not opacity 0');
           }
           chai.assert.equal(document.querySelectorAll('.polymer-veiled').length, 0,
               'element classes are cleared after unveiling');