Fixed test

Author: dariatiurina

src/Components/Web.JS/src/Virtualize.ts

@@ -113,16 +113,13 @@ function init(dotNetHelper: DotNet.DotNetObject, spacerBefore: HTMLElement, spac
         // Check for scale property (can have separate X/Y values)
         if (computedStyle.scale && computedStyle.scale !== 'none' && computedStyle.scale !== '1') {
           const parts = computedStyle.scale.split(' ');
-          const scaleX = parseFloat(parts[0]);
-          const scaleY = parts.length > 1 ? parseFloat(parts[1]) : scaleX;
+          const scaleY = parts.length > 1 ? parseFloat(parts[1]) : parseFloat(parts[0]);
           scaleFactor *= scaleY; // Use vertical scale for vertical scrolling
         }
 
         // Check for transform property (matrix form)
         if (computedStyle.transform && computedStyle.transform !== 'none') {
-          // Parse the transform matrix using DOMMatrix to extract scaleY
           const matrix = new DOMMatrix(computedStyle.transform);
-          // For vertical scrolling, we only need the Y-axis scale factor (d/m22)
           scaleFactor *= matrix.d;
         }
         element = element.parentElement;

src/Components/test/E2ETest/Tests/VirtualizationTest.cs

@@ -2,6 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 using System.Globalization;
+using System.Linq;
 using BasicTestApp;
 using Microsoft.AspNetCore.Components.E2ETest.Infrastructure;
 using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures;
@@ -426,16 +427,79 @@ public void CanRefreshItemsProviderResultsInPlace()
             name => Assert.Equal("Person 3", name));
     }
 
-    [Fact]
-    public void CanScrollWhenAppliedScale()
+    [Theory]
+    [InlineData("1")]
+    [InlineData("2")]
+    [InlineData("0.5")]
+    public void CanScrollWhenAppliedScale(string scaleY)
     {
         Browser.MountTestComponent<VirtualizationScale>();
         var container = Browser.Exists(By.Id("virtualize"));
 
-        var people = GetPeopleNames(container);
-        Assert.True(GetPeopleNames(container).Length > 0);
-        ScrollTopToEnd(Browser, container);
-        Assert.True(GetPeopleNames(container).Length > 0);
+        Browser.True(() =>
+        {
+            try
+            {
+                return Browser.FindElement(By.Id("virtualize"))
+                    .FindElements(By.CssSelector("tbody tr.person")).Count > 0;
+            }
+            catch (StaleElementReferenceException)
+            {
+                return false;
+            }
+        });
+
+        Browser.FindElement(By.Id("scale-y-input")).Clear();
+        Browser.FindElement(By.Id("scale-y-input")).SendKeys(scaleY);
+        Browser.FindElement(By.Id("btn")).Click();
+
+        // Scroll slowly (10px increments) and check if the first visible item changes unexpectedly.
+        // If the item index goes backward (e.g., from "5" to "4") instead of
+        // staying the same or advancing, that indicates flashing.
+        const string detectFlashingScript = @"
+        var done = arguments[0];
+        (async () => {
+            const SCROLL_INCREMENT = 10;
+            let previousTopItemIndex = null;
+            const container = document.querySelector('#virtualize');
+            if (!container) {
+                done(false);
+                return;
+            }
+
+            const getTopVisibleItemIndex = () => {
+                const firstRow = container.querySelector('tbody tr.person span');
+                if (!firstRow) return null;
+                return parseInt(firstRow.textContent, 10);
+            };
+
+            while (true) {
+                const previousScrollTop = container.scrollTop;
+                container.scrollTop += SCROLL_INCREMENT;
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                const currentScrollTop = container.scrollTop;
+                if (currentScrollTop === previousScrollTop) {
+                    done(true);
+                    return;
+                }
+                const currentTopItemIndex = getTopVisibleItemIndex();
+                if (currentTopItemIndex === null) {
+                    done(false);
+                    return;
+                }
+                if (previousTopItemIndex !== null) {
+                    if (currentTopItemIndex < previousTopItemIndex) {
+                        done(false);
+                        return;
+                    }
+                }
+                previousTopItemIndex = currentTopItemIndex;
+            }
+        })();";
+
+        var jsExecutor = (IJavaScriptExecutor)Browser;
+        var noFlashingDetected = (bool)jsExecutor.ExecuteAsyncScript(detectFlashingScript);
+        Assert.True(noFlashingDetected);
     }
 
     [Theory]

src/Components/test/testassets/BasicTestApp/VirtualizationScale.razor

@@ -1,13 +1,18 @@
 <div style="scale: @ScaleX @ScaleY; transform-origin: top left;">
     <div id="virtualize" style="height: 200px; overflow: auto">
-        <Virtualize ItemsProvider="@itemsProvider">
-            <tr class="person"><span>@context.Name</span></tr>
-        </Virtualize>
+        <table>
+            <tbody>
+                <Virtualize ItemsProvider="@itemsProvider">
+                    <tr class="person"><span>@context.Id</span></tr>
+            </Virtualize>
+            </tbody>
+        </table>
     </div>
 </div>
 
-<input type="number" @bind="ScaleX" />
-<input type="number" @bind="ScaleY" />
+<input type="number" @bind="ScaleX" id="scale-x-input" />
+<input type="number" @bind="ScaleY" id="scale-y-input" />
+<button id="btn">Click</button>
 
 @code {
     internal class Person
@@ -16,8 +21,8 @@
         public string Name { get; set; } = string.Empty;
     }
 
-    public double ScaleX { get; set; } = 1.0;
-    public double ScaleY { get; set; } = 1.0;
+    public double? ScaleX { get; set; } = 1.0;
+    public double? ScaleY { get; set; } = 1.0;
 
     private ItemsProviderDelegate<Person> itemsProvider = default!;