report: set minimum width of element screenshot preview (#13856)

GoogleChrome · Apr 19, 2022 · d8ec876 · d8ec876
1 parent fafe5b3
commit d8ec876
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 29 deletions.
diff --git a/report/assets/styles.css b/report/assets/styles.css
diff --git a/report/assets/templates.html b/report/assets/templates.html
@@ -893,16 +893,17 @@
 <template id="elementScreenshot">
   <div class="lh-element-screenshot">
     <div class="lh-element-screenshot__content">
-      <div class="lh-element-screenshot__mask">
-        <svg height="0" width="0">
-          <defs>
-            <clipPath clipPathUnits="objectBoundingBox"></clipPath>
-            <!-- clipPath filled by ElementScreenshotRenderer.renderClipPath -->
-          </defs>
-        </svg>
+      <div class="lh-element-screenshot__image">
+        <div class="lh-element-screenshot__mask">
+          <svg height="0" width="0">
+            <defs>
+              <clipPath clipPathUnits="objectBoundingBox"></clipPath>
+              <!-- clipPath filled by ElementScreenshotRenderer.renderClipPath -->
+            </defs>
+          </svg>
+        </div>
+        <div class="lh-element-screenshot__element-marker"></div>
       </div>
-      <div class="lh-element-screenshot__image"></div>
-      <div class="lh-element-screenshot__element-marker"></div>
     </div>
   </div>
 </template>

diff --git a/report/renderer/components.js b/report/renderer/components.js
diff --git a/report/renderer/element-screenshot-renderer.js b/report/renderer/element-screenshot-renderer.js
@@ -252,9 +252,6 @@ export class ElementScreenshotRenderer {
       {width: screenshot.width, height: screenshot.height}
     );
 
-    const contentEl = dom.find('div.lh-element-screenshot__content', containerEl);
-    contentEl.style.top = `-${elementPreviewSizeDC.height}px`;
-
     const imageEl = dom.find('div.lh-element-screenshot__image', containerEl);
     imageEl.style.width = elementPreviewSizeDC.width + 'px';
     imageEl.style.height = elementPreviewSizeDC.height + 'px';

diff --git a/report/test/renderer/element-screenshot-renderer-test.js b/report/test/renderer/element-screenshot-renderer-test.js
@@ -65,16 +65,16 @@ describe('ElementScreenshotRenderer', () => {
     /* eslint-disable max-len */
     expect(htmlFormatted).toMatchInlineSnapshot(`
 " 
-<div class=\\"lh-element-screenshot__content\\" style=\\"top: -500px;\\"> 
+<div class=\\"lh-element-screenshot__content\\"> 
+<div class=\\"lh-element-screenshot__image\\" style=\\"width: 500px; height: 500px; background-position-y: 0px; background-position-x: 0px; background-size: 1000px 1000px;\\"> 
 <div class=\\"lh-element-screenshot__mask\\" style=\\"width: 500px; height: 500px; clip-path: url(#clip-0);\\"> 
 <svg height=\\"0\\" width=\\"0\\"> <defs> 
 <clipPath clipPathUnits=\\"objectBoundingBox\\" id=\\"clip-0\\">
 <polygon points=\\"0,0             1,0            1,0.1          0,0.1\\"></polygon>
 <polygon points=\\"0,0.7     1,0.7    1,1               0,1\\"></polygon>
 <polygon points=\\"0,0.1        0.1,0.1 0.1,0.7 0,0.7\\"></polygon>
 <polygon points=\\"0.5,0.1 1,0.1       1,0.7       0.5,0.7\\"></polygon></clipPath>  </defs> </svg> </div> 
-<div class=\\"lh-element-screenshot__image\\" style=\\"width: 500px; height: 500px; background-position-y: 0px; background-position-x: 0px; background-size: 1000px 1000px;\\"></div> 
-<div class=\\"lh-element-screenshot__element-marker\\" style=\\"width: 200px; height: 300px; left: 50px; top: 50px;\\"></div> </div> "
+<div class=\\"lh-element-screenshot__element-marker\\" style=\\"width: 200px; height: 300px; left: 50px; top: 50px;\\"></div> </div> </div> "
 `);
     /* eslint-enable max-len */
   });