diff --git a/extensions/amp-dynamic-css-classes/0.1/amp-dynamic-css-classes.js b/extensions/amp-dynamic-css-classes/0.1/amp-dynamic-css-classes.js index 480cef16c38e..f99a27614477 100644 --- a/extensions/amp-dynamic-css-classes/0.1/amp-dynamic-css-classes.js +++ b/extensions/amp-dynamic-css-classes/0.1/amp-dynamic-css-classes.js @@ -18,6 +18,7 @@ import {getService} from '../../../src/service'; import {parseUrl} from '../../../src/url'; import {viewerFor} from '../../../src/viewer'; import {vsyncFor} from '../../../src/vsync'; +import {waitForBody} from '../../../src/dom'; /** * Strips everything but the domain from referrer string. @@ -91,12 +92,14 @@ function normalizedReferrers(win) { * @param {!Array} classes */ function addDynamicCssClasses(win, classes) { - const documentElement = win.document.documentElement; - const classList = documentElement.classList; + waitForBody(win.document, () => { + const body = win.document.body; + const classList = body.classList; - for (let i = 0; i < classes.length; i++) { - classList.add(classes[i]); - } + for (let i = 0; i < classes.length; i++) { + classList.add(classes[i]); + } + }); } diff --git a/extensions/amp-dynamic-css-classes/0.1/test/test-runtime-classes.js b/extensions/amp-dynamic-css-classes/0.1/test/test-runtime-classes.js index 41406c321078..5e180eeeac45 100644 --- a/extensions/amp-dynamic-css-classes/0.1/test/test-runtime-classes.js +++ b/extensions/amp-dynamic-css-classes/0.1/test/test-runtime-classes.js @@ -24,7 +24,7 @@ const PinterestUA = 'Mozilla/5.0 (Linux; Android 5.1.1; SM-G920F' + ' Chrome/47.0.2526.100 Mobile Safari/537.36 [Pinterest/Android]'; describe('dynamic classes are inserted at runtime', () => { - let documentElement; + let body; let mockWin; let viewer; @@ -34,14 +34,14 @@ describe('dynamic classes are inserted at runtime', () => { classList.contains = function(c) { return this.indexOf(c) > -1; }; - documentElement = { - tagName: 'HTML', + body = { + tagName: 'BODY', classList: classList, }; mockWin = { document: { referrer: 'http://localhost/', - documentElement: documentElement, + body: body, }, navigator: { userAgent: '', @@ -77,22 +77,22 @@ describe('dynamic classes are inserted at runtime', () => { }); it('should include viewer class', () => { - expect(documentElement).to.have.class('amp-viewer'); + expect(body).to.have.class('amp-viewer'); }); }); describe('Normalizing Referrers', () => { it('should normalize twitter shortlinks to twitter', () => { setup(false, '', tcoReferrer); - expect(documentElement).to.have.class('amp-referrer-com'); - expect(documentElement).to.have.class('amp-referrer-twitter-com'); + expect(body).to.have.class('amp-referrer-com'); + expect(body).to.have.class('amp-referrer-twitter-com'); }); it('should normalize pinterest on android', () => { setup(false, PinterestUA, ''); - expect(documentElement).to.have.class('amp-referrer-com'); - expect(documentElement).to.have.class('amp-referrer-pinterest-com'); - expect(documentElement).to.have.class('amp-referrer-www-pinterest-com'); + expect(body).to.have.class('amp-referrer-com'); + expect(body).to.have.class('amp-referrer-pinterest-com'); + expect(body).to.have.class('amp-referrer-www-pinterest-com'); }); }); }); diff --git a/extensions/amp-dynamic-css-classes/amp-dynamic-css-classes.md b/extensions/amp-dynamic-css-classes/amp-dynamic-css-classes.md index 56a16cbe629e..0563d30ba939 100644 --- a/extensions/amp-dynamic-css-classes/amp-dynamic-css-classes.md +++ b/extensions/amp-dynamic-css-classes/amp-dynamic-css-classes.md @@ -19,11 +19,15 @@ limitations under the License. - + - + + + + + @@ -34,7 +38,7 @@ limitations under the License. ## Behavior The AMP Dynamic CSS Classes extension adds the following CSS classes -onto the HTML element: +onto the `` element: **amp-referrer-***
DescriptionAdds several dynamic CSS class names onto the HTML element.Adds several dynamic CSS class names onto the <body> element.
AvailabilityStableStable
Required Script<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
Examples