diff --git a/src/styles.js b/src/styles.js index 3692977d4a1b..fccafde24d71 100644 --- 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 new file mode 100644 index 000000000000..34afa9c3d396 --- /dev/null +++ b/test/fixtures/boilerplate-new-visibility.html @@ -0,0 +1,19 @@ + + + + + Released AMP components + + + + + + + +

AMP boilerplate

+

+ "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..." +

+ + diff --git a/test/fixtures/boilerplate-old-opacity.html b/test/fixtures/boilerplate-old-opacity.html new file mode 100644 index 000000000000..7399789d1cbb --- /dev/null +++ b/test/fixtures/boilerplate-old-opacity.html @@ -0,0 +1,19 @@ + + + + + Released AMP components + + + + + + + +

AMP boilerplate

+

+ "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..." +

+ + diff --git a/test/functional/test-styles.js b/test/functional/test-styles.js new file mode 100644 index 000000000000..45c92e144baf --- /dev/null +++ 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 new file mode 100644 index 000000000000..69c4d24075f7 --- /dev/null +++ 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 index 5ff982c65fbe..f880992244f3 100644 --- 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'); }); }