diff --git a/index.html b/index.html index 56f7fbf..a81fd21 100644 --- a/index.html +++ b/index.html @@ -136,39 +136,48 @@ ?.addEventListener('click', () => prepareManualPolyfill(), { once: true, }); - document - .getElementById('apply-polyfill-manually-set1') - ?.addEventListener('click', () => { - polyfill({ - elements: [ - document.getElementById('my-style-manual-anchor'), - document.getElementById('my-style-manual-style-el'), - ], - excludeInlineStyles: true, - }); + const manualSet1Button = document.getElementById( + 'apply-polyfill-manually-set1', + ); + manualSet1Button?.addEventListener('click', (e) => { + polyfill({ + elements: [ + document.getElementById('my-style-manual-anchor'), + document.getElementById('my-style-manual-style-el'), + ], + excludeInlineStyles: true, + }).then(() => { + manualSet1Button.setAttribute('disabled', ''); }); - document - .getElementById('apply-polyfill-manually-set2') - ?.addEventListener('click', () => { - polyfill({ - elements: [ - document.getElementById('my-style-manual-anchor'), - document.getElementById('my-style-manual-link-el'), - document.getElementById('my-target-manual-inline-style'), - ], - excludeInlineStyles: true, - }); + }); + const manualSet2Button = document.getElementById( + 'apply-polyfill-manually-set2', + ); + manualSet2Button?.addEventListener('click', (e) => { + polyfill({ + elements: [ + document.getElementById('my-style-manual-anchor'), + document.getElementById('my-style-manual-link-el'), + document.getElementById('my-target-manual-inline-style'), + ], + excludeInlineStyles: true, + }).then(() => { + manualSet2Button.setAttribute('disabled', ''); }); - document - .getElementById('apply-polyfill-manually-set3') - ?.addEventListener('click', () => { - polyfill({ - elements: [ - document.getElementById('my-style-manual-anchor'), - document.getElementById('my-style-manual-style-el'), - ], - }); + }); + const manualSet3Button = document.getElementById( + 'apply-polyfill-manually-set3', + ); + manualSet3Button?.addEventListener('click', (e) => { + polyfill({ + elements: [ + document.getElementById('my-style-manual-anchor'), + document.getElementById('my-style-manual-style-el'), + ], + }).then(() => { + manualSet3Button.setAttribute('disabled', ''); }); + }); const manualBtn = document.getElementById('apply-polyfill-manually'); if (SUPPORTS_ANCHOR_POSITIONING) { @@ -187,6 +196,7 @@ ], }).then((rules) => { manualBtn.innerText = 'Polyfill Applied'; + manualBtn.setAttribute('disabled', ''); console.log(rules); }); } else { diff --git a/tests/e2e/polyfill.test.ts b/tests/e2e/polyfill.test.ts index 1ecf7ce..d689cf4 100644 --- a/tests/e2e/polyfill.test.ts +++ b/tests/e2e/polyfill.test.ts @@ -13,7 +13,8 @@ const anchorSelector = '#my-anchor-positioning'; async function applyPolyfill(page: Page) { const btn = page.locator(btnSelector); - return await btn.click(); + await btn.click(); + return await expect(btn).toBeDisabled(); } async function getElementWidth(page: Page, sel: string) { @@ -128,7 +129,9 @@ test('applies polyfill for `@position-fallback`', async ({ page }) => { }); test('applies manual polyfill', async ({ page }) => { - await page.locator('#apply-polyfill-manually').click(); + const applyButton = page.locator('#apply-polyfill-manually'); + await applyButton.click(); + await expect(applyButton).toBeDisabled(); const anchorBox = (await page.locator('#my-anchor-manual').boundingBox())!; const target1Box = (await page .locator('#my-target-manual-style-el') @@ -186,6 +189,7 @@ test('applies manual polyfill for multiple elements separately', async ({ const set2Button = page.locator('#apply-polyfill-manually-set2'); await set1Button.click(); + await expect(set1Button).toBeDisabled(); const newTarget1Box = (await page .locator('#my-target-manual-style-el') @@ -195,6 +199,7 @@ test('applies manual polyfill for multiple elements separately', async ({ expect(newTarget1Box.y + newTarget1Box.height).toBeCloseTo(anchorBox.y, 0); await set2Button.click(); + await expect(set2Button).toBeDisabled(); const newTarget2Box = (await page .locator('#my-target-manual-link-el') @@ -245,6 +250,7 @@ test('applies manual polyfill with automatic inline style polyfill', async ({ const set3Button = page.locator('#apply-polyfill-manually-set3'); await set3Button.click(); + await expect(set3Button).toBeDisabled(); const newTarget1Box = (await page .locator('#my-target-manual-style-el')