Add Dynamic CSS Classes to Body

Also adds the required script tag documentation. There are no validation errors. Fixes ampproject#2761. Fixes ampproject#2747.
jridgewell · Apr 4, 2016 · f5cf66d · f5cf66d
1 parent 4b54eff
commit f5cf66d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
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
@@ -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<string>} 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
@@ -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
@@ -19,11 +19,15 @@ limitations under the License.
 <table>
   <tr>
     <td width="40%"><strong>Description</strong></td>
-    <td>Adds several dynamic CSS class names onto the HTML element.</td>
+    <td>Adds several dynamic CSS class names onto the <code>&lt;body></code> element.</td>
   </tr>
   <tr>
     <td width="40%"><strong>Availability</strong></td>
-    <td><a href="https://www.ampproject.org/docs/reference/experimental.html">Stable</a></td>
+    <td>Stable</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Required Script</strong></td>
+    <td><code>&lt;script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">&lt;/script></code></td>
   </tr>
   <tr>
     <td width="40%"><strong>Examples</strong></td>
@@ -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 `<body>` element:
 
 **amp-referrer-***