Investigate, Fix failing ImageAssert unit tests

[jonpryor]

When migrating to target .NET 9 (#2899), @kazo0 discovered that not all tests were actually being executed! In particular, 74 tests were not run on 90f328b (main) vs. 9206477 (from #2899), and those 74 tests were not added in #2899.

Reportedly 5e7a219 caused the missing tests to be found:

diff --git a/build/ci/stage-build-uitests-wasm.yml b/build/ci/stage-build-uitests-wasm.yml
index 9c2a9e163..125b6f25c 100644
--- a/build/ci/stage-build-uitests-wasm.yml
+++ b/build/ci/stage-build-uitests-wasm.yml
@@ -36,6 +36,7 @@ jobs:
       testResultsFormat: 'NUnit'
       testResultsFiles: '$(build.sourcesdirectory)/build/TestResult.xml'
       failTaskOnFailedTests: true
+      failTaskOnMissingResultsFile: true

Once these tests were enabled, at least 17 of them were found to be failing.

In the interest of expediency, we are ignoring the following tests:

• Given_ContentDialog.When_ComplexContentDialog
• Given_ContentDialog.When_ComplexContentDialogNavigateSecondPage
• Given_ContentDialog.When_SimpleContentDialog("SimpleDialogCodebehindWithCancelButton",0,False)
• Given_ContentDialog.When_SimpleContentDialog("SimpleDialogCodebehindWithCancelButton",3,True)
• Given_FlyoutDialog.When_FlyoutsButton("FlyoutDialogCodebehindBackgroundButton",0,False)
• Given_FlyoutDialog.When_FlyoutsButton("FlyoutDialogCodebehindButton",0,False)
• Given_FlyoutDialog.When_FlyoutsButton("FlyoutDialogCodebehindWithCancelButton",3,True)
• Given_FlyoutDialog.When_FlyoutsButton("FlyoutDialogXamlButton",0,False)
• Given_MessageDialog.When_MessageDialogFromXAML
• Given_PageNavigation.When_PageNavigationCodebehind
• Given_PageNavigation.When_PageNavigationDependsn
• Given_PageNavigation.When_PageNavigationViewModel
• Given_PageNavigation.When_PageNavigationXAML
• Given_PageNavigationRegistered.When_PageNavigationRegisteredRoot
• Given_PageNavigationRegistered.When_PageNavigationRegisteredViewModel

Investigate why these tests are failing and re-enable them.

[jonpryor]

What we've learned so far is that when you .Tap("Something"), the mouse cursor remains over Something. This may cause the "PointerOver" background color to apply to the element. Subsequent .Tap()s will move the mouse cursor.

This was demonstrated in 08accad and 9206477, and suggests that the following pattern should be avoided:

// AVOID
App.Tap("SomeButton");
var before = TakeScreenshot("before");
// do stuff
var after = TakeScreenshot("after");
ImageAssert.AreAlmostEqual(before, after);

because when before is taken, the PointerOver effect will be on SomeButton, but when after is taken, the mouse will likely not be over SomeButton, and thus the PointerOver effect won't be applied, and the images will differ.

"Okay," thinks @jonpryor, "just click something before taking the initial screenshot!":

// ???
App.Tap("SomeButton");
App.Tap("SomethingThatDoesNotRespondToClicks");
var before = TakeScreenshot("before");
// do stuff
var after = TakeScreenshot("after");
ImageAssert.AreAlmostEqual(before, after);

This did better, but still failed.

Before:

Closed

To my eyes, these look identical. To ImageAssert, they are not equal:

ImageAssert.AreEqual @ line 46
pixelTolerance: Color Cumulative tolerance of 20 | Location PerRange tolerance of 0,0 pixels.
expected: When_Dialog_Before (When_SimpleContentDialogSimpleDialogCodebehindWithCancelButton_0_False_When_Dialog_Before.png {Width=1024, Height=768}) in {X=0,Y=0,Width=1024,Height=768}
actual  : When_Dialog_Closed (When_SimpleContentDialogSimpleDialogCodebehindWithCancelButton_0_False_When_Dialog_Closed.png {Width=1024, Height=768}) in {X=0,Y=0,Width=1024,Height=768}
====================
When_Dialog_Before:
19,139: expected: [19,139] FF7262D7 | actual: [19,139] FF7F71DB
  a tolerance of 32 [Cumulative] would be required for this test to pass.
  Current: Color Cumulative tolerance of 20 | Location PerRange tolerance of 0,0 pixels.


With expectedRect:
{X=0,Y=0,Width=2147483647,Height=2147483647}
With actualRect:
{X=0,Y=0,Width=2147483647,Height=2147483647}
With expectedToActualScale:
1

Compare the images on e.g. https://www.diffchecker.com/image-compare/ and click the Difference tab, and if you look very closely, there is a difference around the border of the Content Dialogs button:

(Even knowing where it is, it's hard for me to spot the change in the Difference tab on diffchecker.com!)

That's where we're currently at.

We don't know why this is happening, though I guess it may be due to anti-aliasing?

We don't know what an appropriate fix is. We could raise the ImageAssert tolerance, but is that appropriate? Is something else happening?