Harmonise how the width is collected, update tests

streamlit_pdf_viewer/frontend/src/PdfViewer.vue

@@ -62,7 +62,7 @@ export default {
     });
 
     const pdfContainerStyle = computed(() => ({
-      width: `${props.args.width}px`,
+      width: props.args.width ? `${props.args.width}px` : `${maxWidth.value}px`,
       height: props.args.height ? `${props.args.height}px` : 'auto',
       overflow: 'auto',
     }));
@@ -150,21 +150,7 @@ export default {
         }
       }
 
-      if (props.args.width === null || props.args.width === undefined) {
-        maxWidth.value = window.innerWidth
-      } else if (Number.isInteger(props.args.width)) {
-        maxWidth.value = props.args.width
-
-        // If the desired width is larger than the available inner width,
-        // we should not exceed it. To be revised
-        if (window.innerWidth < maxWidth.value) {
-          maxWidth.value = window.innerWidth
-        }
-      }
-
-      // const PRINT_UNITS = 300 / 72.0
-
-      console.log("Device pixel ratio" + window.devicePixelRatio)
+      // console.log("Device pixel ratio" + window.devicePixelRatio)
       for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
         const page = await pdf.getPage(pageNumber)
         const rotation = page.rotate
@@ -216,8 +202,23 @@ export default {
       Streamlit.setFrameHeight(props.args.height || totalHeight.value);
     };
 
+    const setFrameWidth = () => {
+      if (props.args.width === null || props.args.width === undefined) {
+        maxWidth.value = window.innerWidth
+      } else if (Number.isInteger(props.args.width)) {
+        maxWidth.value = props.args.width
+
+        // If the desired width is larger than the available inner width,
+        // we should not exceed it. To be revised
+        if (window.innerWidth < maxWidth.value) {
+          maxWidth.value = window.innerWidth
+        }
+      }
+    }
+
     onMounted(() => {
       const binaryDataUrl = `data:application/pdf;base64,${props.args.binary}`;
+      setFrameWidth();
       if (props.args.rendering === "unwrap") {
         loadPdfs(binaryDataUrl)
           .then(setFrameHeight)

tests/test_embed_height.py

@@ -48,8 +48,10 @@ def test_should_render_template_check_container_size(page: Page):
     expect(pdf_container).to_be_visible()
 
     b_box = pdf_container.bounding_box()
-    assert b_box['width'] == 700
-    assert b_box['height'] > 0
+    assert round(b_box['height']) == 500
+    # Since we do not specify the width, we occupy all the available space, which should correspond to the
+    # parent element's width of the pdfContainer.
+    assert b_box['width'] == iframe_box['width']
 
     pdf_viewer = iframe_frame.locator('div[id="pdfViewer"]')
     expect(pdf_viewer).not_to_be_visible()

tests/test_embed_no_args.py

@@ -48,7 +48,9 @@ def test_should_render_template_check_container_size(page: Page):
     expect(pdf_container).to_be_visible()
 
     b_box = pdf_container.bounding_box()
-    assert b_box['width'] == 700
+    # Since we do not specify the width, we occupy all the available space, which should correspond to the
+    # parent element's width of the pdfContainer.
+    assert b_box['width'] == iframe_box['width']
     assert b_box['height'] > 0
 
     pdf_viewer = iframe_frame.locator('div[id="pdfViewer"]')

tests/test_iframe_height.py

@@ -48,7 +48,9 @@ def test_should_render_template_check_container_size(page: Page):
     expect(pdf_container).to_be_visible()
 
     b_box = pdf_container.bounding_box()
-    assert b_box['width'] == 700
+    # Since we do not specify the width, we occupy all the available space, which should correspond to the
+    # parent element's width of the pdfContainer.
+    assert b_box['width'] == iframe_box['width']
     assert b_box['height'] > 0
 
     pdf_viewer = iframe_frame.locator('div[id="pdfViewer"]')

tests/test_iframe_no_args.py

@@ -48,7 +48,9 @@ def test_should_render_template_check_container_size(page: Page):
     expect(pdf_container).to_be_visible()
 
     b_box = pdf_container.bounding_box()
-    assert b_box['width'] == 700
+    # Since we do not specify the width, we occupy all the available space, which should correspond to the
+    # parent element's width of the pdfContainer.
+    assert b_box['width'] == iframe_box['width']
     assert b_box['height'] > 0
 
     pdf_viewer = iframe_frame.locator('div[id="pdfViewer"]')

tests/test_unwrap_height.py

@@ -38,7 +38,9 @@ def test_should_render_template_check_container_size(page: Page):
     expect(pdf_container).to_be_visible()
 
     b_box = pdf_container.bounding_box()
-    assert b_box['width'] == 700
+    # Since we do not specify the width, we occupy all the available space, which should correspond to the
+    # parent element's width of the pdfContainer.
+    assert b_box['width'] == iframe_box['width']
     assert b_box['height'] == 300
 
     pdf_viewer = iframe_frame.locator('div[id="pdfViewer"]')

tests/test_unwrap_no_args.py

@@ -38,7 +38,9 @@ def test_should_render_template_check_container_size(page: Page):
     expect(pdf_container).to_be_visible()
 
     b_box = pdf_container.bounding_box()
-    assert b_box['width'] == 700
+    # Since we do not specify the width, we occupy all the available space, which should correspond to the
+    # parent element's width of the pdfContainer.
+    assert b_box['width'] == iframe_box['width']
     assert b_box['height'] > 0
 
     pdf_viewer = iframe_frame.locator('div[id="pdfViewer"]')

tests/test_unwrap_width.py

@@ -40,7 +40,7 @@ def test_should_render_template_check_container_size(page: Page):
 
     b_box = pdf_container.bounding_box()
     assert floor(b_box['width']) == 400
-    assert floor(b_box['height']) == 4216 # Firefox returns 4216.000091552734, while Chome 4216
+    assert floor(b_box['height']) == 4221 # Firefox returns 4216.000091552734, while Chome 4216
 
     pdf_viewer = iframe_frame.locator('div[id="pdfViewer"]')
     expect(pdf_viewer).to_be_visible()