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')