From 16dafba153ab62baef7b4895c857e8efe0b33407 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 6 Jan 2022 15:19:16 -0800
Subject: [PATCH] fix(html): prevent image diff from flickering (#11184)

---
 packages/html-reporter/src/testResultView.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/html-reporter/src/testResultView.tsx b/packages/html-reporter/src/testResultView.tsx
index 82a3650414..0a6c5a85a4 100644
--- a/packages/html-reporter/src/testResultView.tsx
+++ b/packages/html-reporter/src/testResultView.tsx
@@ -122,16 +122,23 @@ const ImageDiff: React.FunctionComponent<{
  diff?: TestAttachment,
 }> = ({ actual, expected, diff }) => {
   const [selectedTab, setSelectedTab] = React.useState<string>('actual');
+  const diffElement = React.useRef<HTMLImageElement>(null);
   const tabs = [];
   tabs.push({
     id: 'actual',
     title: 'Actual',
-    render: () => <img src={actual.path}/>
+    render: () => <img src={actual.path} onLoad={() => {
+      if (diffElement.current)
+        diffElement.current.style.minHeight = diffElement.current.offsetHeight + 'px';
+    }}/>
   });
   tabs.push({
     id: 'expected',
     title: 'Expected',
-    render: () => <img src={expected.path}/>
+    render: () => <img src={expected.path} onLoad={() => {
+      if (diffElement.current)
+        diffElement.current.style.minHeight = diffElement.current.offsetHeight + 'px';
+    }}/>
   });
   if (diff) {
     tabs.push({
@@ -140,7 +147,7 @@ const ImageDiff: React.FunctionComponent<{
       render: () => <img src={diff.path}/>
     });
   }
-  return <div className='vbox' data-testid='test-result-image-mismatch'>
+  return <div className='vbox' data-testid='test-result-image-mismatch' ref={diffElement}>
     <TabbedPane tabs={tabs} selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
   </div>;
 };