kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: follow the pseudo attr value in firefox computed style (#34525)

This commit is contained in:
Pavel Feldman 2025-01-28 14:37:04 -08:00 committed by GitHub
parent b27945d045
commit 7fd0c3e254
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/playwright-core/src/server/injected/roleUtils.ts
View File

@ -354,27 +354,34 @@ export function getPseudoContent(element: Element, pseudo: '::before' | '::after
if (cache?.has(element))
return cache?.get(element) || '';
const pseudoStyle = getElementComputedStyle(element, pseudo);
const content = getPseudoContentImpl(pseudoStyle);
const content = getPseudoContentImpl(element, pseudoStyle);
if (cache)
cache.set(element, content);
return content;
}
function getPseudoContentImpl(pseudoStyle: CSSStyleDeclaration | undefined) {
function getPseudoContentImpl(element: Element, pseudoStyle: CSSStyleDeclaration | undefined) {
// Note: all browsers ignore display:none and visibility:hidden pseudos.
if (!pseudoStyle || pseudoStyle.display === 'none' || pseudoStyle.visibility === 'hidden')
return '';
const content = pseudoStyle.content;
let resolvedContent: string | undefined;
if ((content[0] === '\'' && content[content.length - 1] === '\'') ||
(content[0] === '"' && content[content.length - 1] === '"')) {
const unquoted = content.substring(1, content.length - 1);
resolvedContent = content.substring(1, content.length - 1);
} else if (content.startsWith('attr(') && content.endsWith(')')) {
// Firefox does not resolve attribute accessors in content.
const attrName = content.substring('attr('.length, content.length - 1).trim();
resolvedContent = element.getAttribute(attrName) || '';
}
if (resolvedContent !== undefined) {
// SPEC DIFFERENCE.
// Spec says "CSS textual content, without a space", but we account for display
// to pass "name_file-label-inline-block-styles-manual.html"
const display = pseudoStyle.display || 'inline';
if (display !== 'inline')
return ' ' + unquoted + ' ';
return unquoted;
return ' ' + resolvedContent + ' ';
return resolvedContent;
}
return '';
}

15
tests/library/role-utils.spec.ts
View File

@ -495,6 +495,21 @@ test('should not include hidden pseudo into accessible name', async ({ page }) =
expect.soft(await getNameAndRole(page, 'a')).toEqual({ role: 'link', name: 'hello hello' });
});
test('should resolve pseudo content from attr', async ({ page }) => {
await page.setContent(`
<style>
.stars:before {
display: block;
content: attr(data-hello);
}
</style>
<a href="http://example.com">
<div class="stars" data-hello="hello">world</div>
</a>
`);
expect(await getNameAndRole(page, 'a')).toEqual({ role: 'link', name: 'hello world' });
});
test('should ignore invalid aria-labelledby', async ({ page }) => {
await page.setContent(`
<label>