Add test

pages/select/select.test.page.tsx

@@ -76,13 +76,10 @@ export default function SelectPage() {
       <ScreenshotArea>
         <Box padding="l">
           <Box padding="s">
-            <div style={{ height: '700px' }}></div>
+            <div style={{ height: '500px', backgroundColor: 'lightblue' }}>500px space above the select</div>
             <Box variant="h1">Overflow test</Box>
             <Box variant="p">Dropdown should not be rendered beyond the container with overflow hidden</Box>
-            <div
-              id="smallest_container"
-              style={{ overflow: 'hidden', blockSize: '500px', padding: 0, backgroundColor: 'red' }}
-            >
+            <div id="smallest_container" style={{ overflow: 'hidden', blockSize: '500px', padding: 0 }}>
               <div style={{ overflow: 'hidden', blockSize: '900px' }}>
                 <Select
                   id="select_overflow"

src/select/__integ__/select.test.ts

@@ -112,6 +112,21 @@ test(
   })
 );
 
+test(
+  'should not scroll the container',
+  useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await page.setWindowSize({ height: 700, width: 1100 });
+    await browser.url('/#/light/select/select.test');
+    const select = createWrapper().findSelect('#select_overflow');
+    const triggerSelector = select.findTrigger().toSelector();
+    const { top: containerScrollTop } = await page.getBoundingBox('#select_overflow');
+    await page.click(triggerSelector);
+    const { top: containerScrollTopAfter } = await page.getBoundingBox('#select_overflow');
+    expect(containerScrollTop).toEqual(containerScrollTopAfter);
+  })
+);
+
 test(
   'allows the select to be opened and closed using space',
   useBrowser(async browser => {