Skip to content

Commit f91db0d

Browse files
authored
fix(ui): split-pane handle overlapping iframe (#11221)
1 parent 7c7119c commit f91db0d

4 files changed

Lines changed: 94 additions & 49 deletions

File tree

‎packages/ui/client/components/BrowserIframe.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ const scale = computed(() =>
118118
container-type: size;
119119
120120
margin-top: 0.5rem;
121+
margin-inline: var(--splitpane-handle-size);
121122
}
122123
123124
#tester-ui:not([data-ready]) {

‎packages/ui/client/styles/main.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ body {
1010
--color-text-dark: #ddd;
1111
--color-text: var(--color-text-light);
1212
--background-color: #e4e4e4;
13+
--splitpane-handle-size: 5px;
1314
}
1415

1516
html.dark {
@@ -128,13 +129,13 @@ html.dark {
128129
.splitpanes--vertical > .splitpanes__splitter:before {
129130
/* make vertical scroll usable */
130131
left: 0;
131-
right: -10px;
132+
right: calc(var(--splitpane-handle-size) * -1);
132133
height: 100%;
133134
}
134135

135136
.splitpanes--horizontal > .splitpanes__splitter:before {
136137
top: 0;
137-
bottom: -10px;
138+
bottom: calc(var(--splitpane-handle-size) * -1);
138139
width: 100%;
139140
}
140141

‎test/browser/specs/projects-ui.test.ts‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎test/browser/specs/ui.test.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { describe, expect, test } from 'vitest'
2+
import { runInlineTests } from '../../test-utils'
3+
import { provider } from '../settings'
4+
5+
describe.runIf(provider.name === 'playwright')('browser ui', () => {
6+
test('enabled in projects setup (#10993)', async () => {
7+
const { stderr, exitCode, testTree } = await runInlineTests(
8+
{
9+
'basic.test.ts': /* ts */ `
10+
import { expect, test } from 'vitest'
11+
12+
test('works', () => {
13+
expect(1 + 1).toBe(2)
14+
})
15+
`,
16+
},
17+
{
18+
watch: false,
19+
reporters: 'none',
20+
projects: [
21+
{
22+
test: {
23+
browser: {
24+
enabled: true,
25+
headless: true,
26+
ui: true,
27+
provider,
28+
instances: [{ browser: 'chromium' }],
29+
},
30+
},
31+
},
32+
],
33+
},
34+
)
35+
36+
expect(stderr).toBe('')
37+
expect(exitCode).toBe(0)
38+
expect(testTree()).toMatchInlineSnapshot(`
39+
{
40+
"basic.test.ts": {
41+
"works": "passed",
42+
},
43+
}
44+
`)
45+
})
46+
47+
test('split-pane handle does not block iframe interactions (#11170)', async () => {
48+
const { stderr, exitCode, testTree } = await runInlineTests(
49+
{
50+
'button.test.ts': /* ts */ `
51+
import { expect, test, vi } from 'vitest'
52+
import { userEvent } from 'vitest/browser'
53+
54+
test('clicks on button', async () => {
55+
const spy = vi.fn()
56+
const button = document.createElement('button')
57+
button.style = 'width: 5px; height: 10px; padding: 0; border: none;'
58+
button.addEventListener('click', spy)
59+
document.body.appendChild(button)
60+
await userEvent.click(button, { position: { x: 1, y: 1 } })
61+
62+
expect(spy).toHaveBeenCalledOnce()
63+
})
64+
`,
65+
},
66+
{
67+
watch: true,
68+
reporters: 'none',
69+
browser: {
70+
enabled: true,
71+
headless: true,
72+
ui: true,
73+
provider,
74+
instances: [{ browser: 'chromium' }],
75+
viewport: { width: 50, height: 50 },
76+
},
77+
},
78+
)
79+
80+
expect(stderr).toBe('')
81+
expect(exitCode).toBe(0)
82+
expect(testTree()).toMatchInlineSnapshot(`
83+
{
84+
"button.test.ts": {
85+
"clicks on button": "passed",
86+
},
87+
}
88+
`)
89+
})
90+
})

0 commit comments

Comments
 (0)