Rewrite negative responsive units. (ampproject#23204)

Author: gmajoulet

extensions/amp-story/1.0/amp-story.js

@@ -491,7 +491,7 @@ export class AmpStory extends AMP.BaseElement {
       this.initializeMediaQueries_(mediaQueryEls);
     }
 
-    const styleEl = document.querySelector('style[amp-custom]');
+    const styleEl = this.win.document.querySelector('style[amp-custom]');
 
     if (styleEl) {
       this.rewriteStyles_(styleEl);
@@ -537,10 +537,10 @@ export class AmpStory extends AMP.BaseElement {
     // ../../../extensions/amp-animation/0.1/web-animations.js
     this.mutateElement(() => {
       styleEl.textContent = styleEl.textContent
-        .replace(/([\d.]+)vh/gim, 'calc($1 * var(--story-page-vh))')
-        .replace(/([\d.]+)vw/gim, 'calc($1 * var(--story-page-vw))')
-        .replace(/([\d.]+)vmin/gim, 'calc($1 * var(--story-page-vmin))')
-        .replace(/([\d.]+)vmax/gim, 'calc($1 * var(--story-page-vmax))');
+        .replace(/(-?[\d.]+)vh/gim, 'calc($1 * var(--story-page-vh))')
+        .replace(/(-?[\d.]+)vw/gim, 'calc($1 * var(--story-page-vw))')
+        .replace(/(-?[\d.]+)vmin/gim, 'calc($1 * var(--story-page-vmin))')
+        .replace(/(-?[\d.]+)vmax/gim, 'calc($1 * var(--story-page-vmax))');
     });
   }
 

extensions/amp-story/1.0/test/test-amp-story.js

@@ -1549,6 +1549,50 @@ describes.realWin(
       });
     });
 
+    describe('amp-story rewriteStyles', () => {
+      beforeEach(() => {
+        toggleExperiment(win, 'amp-story-responsive-units', true);
+      });
+
+      afterEach(() => {
+        toggleExperiment(win, 'amp-story-responsive-units', false);
+      });
+
+      it('should rewrite vw styles', () => {
+        createPages(story.element, 1, ['cover']);
+        const styleEl = win.document.createElement('style');
+        styleEl.setAttribute('amp-custom', '');
+        styleEl.textContent = 'foo {transform: translate3d(100vw, 0, 0);}';
+        win.document.head.appendChild(styleEl);
+
+        story.buildCallback();
+
+        return story.layoutCallback().then(() => {
+          expect(styleEl.textContent).to.equal(
+            'foo {transform: ' +
+              'translate3d(calc(100 * var(--story-page-vw)), 0, 0);}'
+          );
+        });
+      });
+
+      it('should rewrite negative vh styles', () => {
+        createPages(story.element, 1, ['cover']);
+        const styleEl = win.document.createElement('style');
+        styleEl.setAttribute('amp-custom', '');
+        styleEl.textContent = 'foo {transform: translate3d(-100vh, 0, 0);}';
+        win.document.head.appendChild(styleEl);
+
+        story.buildCallback();
+
+        return story.layoutCallback().then(() => {
+          expect(styleEl.textContent).to.equal(
+            'foo {transform: ' +
+              'translate3d(calc(-100 * var(--story-page-vh)), 0, 0);}'
+          );
+        });
+      });
+    });
+
     describe('amp-story branching', () => {
       beforeEach(() => {
         toggleExperiment(win, 'amp-story-branching', true);