diff --git a/tests/Browser/NavigationTest.php b/tests/Browser/NavigationTest.php
index 5b03570d..a0d3bea7 100644
--- a/tests/Browser/NavigationTest.php
+++ b/tests/Browser/NavigationTest.php
@@ -117,6 +117,28 @@ it('starts the rail collapsed across the expanded class and expands it in the la
     navigationReady($page->refresh())->assertScript(railWidth(256));
 });
 
+it('morphs the rail header FAB between collapsed (icon only) and extended (with its label)', function () {
+    $fab = "document.querySelector('[data-md-navigation-rail-fab-row] [data-md-fab]')";
+    $label = "document.querySelector('[data-md-navigation-rail-fab-row] [data-md-fab] > span')";
+
+    $page = shellPage(840)
+        // Collapsed: the label is clipped to nothing, and the FAB is a plain square icon button —
+        // navigation-rail.css's [data-md-fab] > span and [data-md-fab][data-md-extended] rules.
+        ->assertScript("getComputedStyle({$label}).opacity === '0'")
+        ->assertScript("getComputedStyle({$label}).maxWidth === '0px'")
+        ->assertScript("Math.round({$fab}.getBoundingClientRect().width) === Math.round({$fab}.getBoundingClientRect().height)");
+
+    $page->click('[data-md-navigation-rail-menu]')
+        // The label's width and the FAB's own shape both spring on the rail's spatial-default
+        // transition; wait past it for the settled, extended end state.
+        ->wait(0.6)
+        ->assertScript("getComputedStyle({$label}).opacity === '1'")
+        ->assertScript("parseFloat(getComputedStyle({$label}).maxWidth) > 0")
+        ->assertScript("{$fab}.getBoundingClientRect().width > {$fab}.getBoundingClientRect().height")
+        ->assertSee('Compose')
+        ->assertNoJavaScriptErrors();
+});
+
 it('expands the rail from large, and keeps it collapsed across a reload from the first paint', function () {
     firstPaintProbe();