Boilerplate change-

Switch from using opacity and settimeout to using visibility and keyframe animation.
ampproject · Dec 3, 2015 · 82fc726 · 82fc726
1 parent e600485
commit 82fc726
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 2 deletions.
diff --git a/src/styles.js b/src/styles.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {setStyles} from './style';
 
 /**
  * Adds the given css text to the given document.
@@ -82,7 +83,11 @@ export function makeBodyVisible(doc) {
   let interval;
   const set = () => {
     if (doc.body) {
-      doc.body.style.opacity = 1;
+      setStyles(doc.body, {
+        opacity: 1,
+        visibility: 'visible',
+        animation: 'none'
+      });
       clearInterval(interval);
     }
   };

diff --git a/test/fixtures/boilerplate-new-visibility.html b/test/fixtures/boilerplate-new-visibility.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Released AMP components</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 1s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 1s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 1s steps(1,end) 0s 1 normal both;animation:-amp-start 1s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript amp-boilerplate><style>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <script async src="/base/dist/amp.js"></script>
+</head>
+<body>
+  <h1>AMP boilerplate</h1>
+  <p>
+    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
+    "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
+  </p>
+</body>
+</html>
diff --git a/test/fixtures/boilerplate-old-opacity.html b/test/fixtures/boilerplate-old-opacity.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Released AMP components</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+
+  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
+  <script async src="/base/dist/amp.js"></script>
+</head>
+<body>
+  <h1>AMP boilerplate</h1>
+  <p>
+    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
+    "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
+  </p>
+</body>
+</html>
diff --git a/test/functional/test-styles.js b/test/functional/test-styles.js
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {getStyle} from '../../src/style';
+import * as sinon from 'sinon';
+import * as styles from '../../src/styles';
+
+describe('Styles', () => {
+  let sandbox;
+  let clock;
+
+  beforeEach(() => {
+    sandbox = sinon.sandbox.create();
+    clock = sandbox.useFakeTimers();
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+    sandbox = null;
+    clock.restore();
+    clock = null;
+  });
+
+  it('makeBodyVisible', () => {
+    styles.makeBodyVisible(document);
+    clock.tick(1000);
+    expect(document.body).to.exist;
+    expect(getStyle(document.body, 'opacity')).to.equal('1');
+    expect(getStyle(document.body, 'visibility')).to.equal('visible');
+    expect(getStyle(document.body, 'animation')).to.equal('none');
+  });
+});
diff --git a/test/integration/test-boilerplates.js b/test/integration/test-boilerplates.js
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2015 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {createFixtureIframe, expectBodyToBecomeVisible} from
+    '../../testing/iframe.js';
+import {getStyle} from '../../src/style';
+
+describe('Old Opacity Boilerplate', () => {
+
+  let fixture;
+  beforeEach(() => {
+    return createFixtureIframe(
+      'test/fixtures/boilerplate-old-opacity.html', 1000).then(f => {
+        fixture = f;
+      });
+  });
+
+  it('should show the body when opacity boilerplate is used', () => {
+    return expectBodyToBecomeVisible(fixture.win).then(() => {
+      expect(getStyle(fixture.win.document.body, 'opacity')).to.equal('1');
+    });
+  });
+});
+
+
+describe('New Visibility Boilerplate', () => {
+
+  let fixture;
+  beforeEach(() => {
+    return createFixtureIframe(
+      'test/fixtures/boilerplate-new-visibility.html', 1000).then(f => {
+        fixture = f;
+      });
+  });
+
+  it('should show the body', () => {
+    return expectBodyToBecomeVisible(fixture.win).then(() => {
+      expect(getStyle(
+          fixture.win.document.body, 'visibility')).to.equal('visible');
+      expect(getStyle(fixture.win.document.body, 'animation')).to.equal('none');
+    });
+  });
+});
diff --git a/testing/iframe.js b/testing/iframe.js
@@ -255,6 +255,9 @@ export function pollForLayout(win, count, opt_timeout) {
  */
 export function expectBodyToBecomeVisible(win) {
   return poll('expect body to become visible', () => {
-    return win.document.body && win.document.body.style.opacity == '1';
+    return win.document.body && (
+        (win.document.body.style.visibility == 'visible'
+            && win.document.body.style.opacity != '0')
+        || win.document.body.style.opacity == '1');
   });
 }