diff --git a/tests/Browser/DataTest.php b/tests/Browser/DataTest.php index 882abebd..94ba3acd 100644 --- a/tests/Browser/DataTest.php +++ b/tests/Browser/DataTest.php @@ -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}).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); +});