Callout: Replace visual regression test of Callout attached to an ifr…

…ame to one where the Callout is attached to a rectangle (#17490)

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [ ] Include a change request file using `$ yarn change`

#### Description of changes

`Callout`: Replace visual regression test of `Callout` attached to an iframe to one where the `Callout` is attached to a rectangle.

apps/vr-tests/src/stories/z_Callout.stories.tsx

@@ -1,6 +1,4 @@
 // NOTE: filename is prefixed with z_ to make callout tests run last to avoid instability
-/* eslint-disable react/self-closing-comp, jsx-a11y/iframe-has-title */
-
 import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
 import { storiesOf } from '@storybook/react';
@@ -156,61 +154,26 @@ storiesOf('Callout', module)
       {calloutContent}
     </Callout>
   ))
-  .addStory('Rendering callout attached to an element inside of an iframe', () => {
-    const iframeRef = React.useRef<HTMLIFrameElement | null>(null);
-    const [target, setTarget] = React.useState({
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-    });
-
-    React.useEffect(() => {
-      if (iframeRef.current) {
-        const iframe = iframeRef.current;
-        const iframeWindow = iframe.contentWindow;
-        if (iframeWindow) {
-          iframeWindow.onload = () => {
-            const iframeDocument = iframeWindow.document;
-            const button = iframeDocument.getElementById('button1');
-            if (button) {
-              button!.style.border = '1px solid red';
-
-              const iframeRect = iframe.getBoundingClientRect();
-              const buttonRect = button!.getBoundingClientRect();
-              setTarget({
-                left: iframeRect.x + buttonRect.x,
-                top: iframeRect.y + buttonRect.y,
-                right: iframeRect.x + buttonRect.x + buttonRect.width,
-                bottom: iframeRect.y + buttonRect.y + buttonRect.height,
-              });
-            }
-          };
-        }
-      }
-    });
+  .addStory('Rendering callout attached to a rectangle', () => {
+    const rectangle = {
+      left: 50,
+      right: 150,
+      top: 50,
+      bottom: 100,
+    };
+    const divStyles: React.CSSProperties = {
+      background: 'red',
+      position: 'absolute',
+      left: rectangle.left,
+      top: rectangle.top,
+      width: rectangle.right - rectangle.left,
+      height: rectangle.bottom - rectangle.top,
+    };
 
     return (
       <>
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <iframe
-          ref={iframeRef}
-          id="iframe"
-          srcDoc="<br /><br /><br /><br /><br /><br /><button id='button1'>HELLO</button>"
-        ></iframe>
-        <br />
-        <Callout {...defaultProps} target={target}>
+        <div style={divStyles} />
+        <Callout {...defaultProps} target={rectangle}>
           {calloutContent}
         </Callout>
       </>