noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cover a selected table row keeping its fill under hover and focus

Browse Source 
Plan step 36 browser-test run, reviewer checklist. Only a plain,
opening/closing sanity check existed for a selected row's background;
this proves the state layer mixes over the secondary-container fill
rather than in place of it, on the showcase's design-review.mp4 row —
the same guarantee list.css already has, from a real hover and focus
in the browser rather than only the Feature-level CSS declarations.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 23:00:42 +02:00
co-authored by Claude Sonnet 5
parent 17a575c753
commit b7f120af98
1 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/DataTest.php
+29
View File
@@ -147,3 +147,32 @@ it('shows a page step\'s keyboard focus ring, from md-focus-ring', function () {
->assertScript("getComputedStyle({$step}).outlineStyle === 'solid'") ->assertScript("getComputedStyle({$step}).outlineStyle === 'solid'")
->assertScript("getComputedStyle({$step}).outlineWidth === '3px'"); ->assertScript("getComputedStyle({$step}).outlineWidth === '3px'");
}); });
it('keeps a selected table row\'s fill under the hover and focus tint', function () {
$page = visit('/material/data')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$selected = "document.querySelector('#data tr[data-md-list-row][aria-selected=\"true\"]')";
$plain = "document.querySelector('#data tr[data-md-list-row]:not([aria-selected=\"true\"])')";
$restBackground = $page->script("getComputedStyle({$selected}).backgroundColor");
$page->hover('#data tr[data-md-list-row][aria-selected="true"]');
$selectedHoverBackground = $page->script("getComputedStyle({$selected}).backgroundColor");
$page->hover('#data tr[data-md-list-row]:not([aria-selected="true"]) >> nth=0');
$plainHoverBackground = $page->script("getComputedStyle({$plain}).backgroundColor");
// The hover tint mixes over the row's own fill (`--md-list-row-fill`, table.css/list-item.css):
// the selected row's secondary-container stays under it, so its hover colour differs from both
// its own resting colour and a plain row's hover, which has no fill to keep.
expect($selectedHoverBackground)->not->toBe($restBackground)
->and($selectedHoverBackground)->not->toBe($plainHoverBackground);
$page->script("{$selected}.querySelector('[data-md-list-open]').focus()");
$selectedFocusBackground = $page->script("getComputedStyle({$selected}).backgroundColor");
expect($selectedFocusBackground)->not->toBe($restBackground)
->and($selectedFocusBackground)->not->toBe($selectedHoverBackground);
});