🐛 Page Size Onresize get correct page dimensions for store service (#…

…37435)

* fixed page size bug, will now get the correct page size from the store serivce

* fixed pageSizeBug

* added page resize fix

* added fixes

* removed newlines

* added in default case

* added set page size on viewport resize event

* added back page id

* remove newline

* updated comment

* refactored code and added optimzaed statement

* added unit tests

* added nullable operator

* added better null checks to getlayoutbox

* stored layout box in dispatch

* removed quoted keys since moved away from closure compiler

* remove width from polyfill function

* removed null check

* added back in null check

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

@@ -347,14 +347,6 @@ export class AmpStory extends AMP.BaseElement {
     // prerendering, because of a height incorrectly set to 0.
     this.mutateElement(() => {});
 
-    if (
-      !this.win.CSS?.supports?.('height: 1dvh') &&
-      !getStyle(this.win.document.documentElement, '--story-dvh')
-    ) {
-      this.getViewport().onResize((size) => this.polyfillDvh_(size));
-      this.polyfillDvh_(this.getViewport().getSize());
-    }
-
     const pageId = this.getInitialPageId_();
     if (pageId) {
       const page = this.element.querySelector(
@@ -448,6 +440,18 @@ export class AmpStory extends AMP.BaseElement {
     if (this.maybeLoadStoryDevTools_()) {
       return;
     }
+
+    const needsDvhPolyfill =
+      !this.win.CSS?.supports?.('height: 1dvh') &&
+      !getStyle(this.win.document.documentElement, '--story-dvh');
+
+    const onResize = (size) => {
+      needsDvhPolyfill && this.polyfillDvh_(size);
+      this.onViewportResize_();
+    };
+
+    this.getViewport().onResize(onResize);
+    onResize(this.getViewport().getSize());
   }
 
   /**
@@ -1490,16 +1494,28 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   polyfillDvh_(size) {
-    const {height, width} = size;
-    if (height === 0 && width === 0) {
+    const {height} = size;
+    if (height === 0) {
       return;
     }
-    this.storeService_.dispatch(Action.SET_PAGE_SIZE, {height, width});
     setImportantStyles(this.win.document.documentElement, {
       '--story-dvh': px(height / 100),
     });
   }
 
+  /**
+   * Handles resize events and sets the store service's width and height.
+   * @private
+   */
+  onViewportResize_() {
+    const page = this.element.querySelector(`amp-story-page[active]`);
+    const layoutBox = page?./*OK*/ getLayoutBox();
+    this.storeService_.dispatch(Action.SET_PAGE_SIZE, {
+      width: layoutBox?.width,
+      height: layoutBox?.height,
+    });
+  }
+
   /**
    * Adds an orientation=landscape|portrait attribute.
    * If the story doesn't explicitly support landscape via the opt-in attribute,