TINY-9219: Fix broken tests on Firefox (#8158)

* TINY-9200: Fix broken tests on Firefox (#8155)

* TINY-9200: excluded source from style checking

* TINY-9200: switched table tests to use inline block over text

* TINY-9200: added check for linux firefox scrollbar widths

* TINY-9200: increased the fuzzy assert from 2 to 4 on table widths

* TINY-9200: cleanup

* TINY-9200: added check for Win 11

* TINY-9200: firefox check for Win11 scrollbars

* TINY-9200: added comment about source being hidden

* TINY-9200: added comment about Firefox being of by 4 pixels

* TINY-9200: Add fix to `TableTestUtils`

* TINY-9200: Remove Windows version check

* TINY-9200: Revert flaking test only for IE

Co-authored-by: spocke <spocke@moxiecode.com>

modules/snooker/src/test/ts/browser/ResizeTest.ts

@@ -220,7 +220,7 @@ describe('ResizeTest', () => {
     const table = SugarElement.fromHtml<HTMLTableElement>(`<table style="border-collapse: collapse; width: 800px;">
     <tbody>
     <tr>
-    <td style="width: 400px;">thisisareallylongsentencewithoutspacesthatcausescontenttooverflow</td>
+    <td style="width: 400px;"><span style="display: inline-block; width: 483px"></span></td>
     <td style="width: 400px;">B</td>
     </tr>
     <tr>

modules/snooker/src/test/ts/browser/TableSizeTest.ts

@@ -11,9 +11,9 @@ const tOptional = OptionalInstances.tOptional;
 
 describe('TableSizeTest', () => {
   const pixelTableHtml = '<table style="width: 400px; border-collapse: collapse;"><tbody><tr><td style="width: 200px"></td><td style="width: 200px"></td></tr></tbody></table>';
-  const overflowingPixelTableHtml = '<table style="width: 400px; border-collapse: collapse;"><tbody><tr><td style="width: 200px">thisisareallylongsentencewithoutspacesthatcausescontenttooverflow</td><td style="width: 200px"></td></tr></tbody></table>';
+  const overflowingPixelTableHtml = '<table style="width: 400px; border-collapse: collapse;"><tbody><tr><td style="width: 200px"><span style="display: inline-block; width: 483px"></span></td><td style="width: 200px"></td></tr></tbody></table>';
   const percentTableHtml = '<table style="width: 80%; border-collapse: collapse;"><tbody><tr><td style="width: 50%"></td><td style="width: 50%"></td></tr></tbody></table>';
-  const overflowingPercentTableHtml = '<table style="width: 80%; border-collapse: collapse;"><tbody><tr><td style="width: 50%">thisisareallylongsentencewithoutspacesthatcausescontenttooverflow</td><td style="width: 50%"></td></tr></tbody></table>';
+  const overflowingPercentTableHtml = '<table style="width: 80%; border-collapse: collapse;"><tbody><tr><td style="width: 50%"><span style="display: inline-block; width: 483px"></span></td><td style="width: 50%"></td></tr></tbody></table>';
   const noneTableHtml = '<table><tbody><tr><td></td><td></td></tr></tbody></table>';
 
   context('getTableSize', () => {

modules/sugar/src/test/ts/browser/LocationTest.ts

@@ -136,7 +136,8 @@ UnitTest.asynctest('LocationTest', (success, failure) => {
     pos = SugarLocation.viewport(body);
     assert.eq(0, pos.top);
     assert.eq(0, pos.left);
-    assert.eq(true, scrollBarWidth > 5 && scrollBarWidth < 50 || (platform.os.isOSX() && scrollBarWidth === 0), 'scroll bar width, got=' + scrollBarWidth);
+    const noVisibleScrollbarBrowser = platform.os.isOSX() || (platform.browser.isFirefox() && platform.os.isLinux());
+    assert.eq(true, scrollBarWidth > 5 && scrollBarWidth < 50 || (noVisibleScrollbarBrowser && scrollBarWidth === 0), 'scroll bar width, got=' + scrollBarWidth);
   };
 
   const disconnectedChecks = () => {

modules/sugar/src/test/ts/browser/ScrollTest.ts

@@ -135,7 +135,8 @@ UnitTest.asynctest('ScrollTest', (success, failure) => {
     const cX = Math.round(center.left);
     const cY = Math.round(center.top);
 
-    assert.eq(true, scrollBarWidth > 5 && scrollBarWidth < 50 || (platform.os.isOSX() && scrollBarWidth === 0), 'scroll bar width, got=' + scrollBarWidth);
+    const noVisibleScrollbarBrowser = platform.os.isOSX() || (platform.browser.isFirefox() && platform.os.isLinux());
+    assert.eq(true, scrollBarWidth > 5 && scrollBarWidth < 50 || (noVisibleScrollbarBrowser && scrollBarWidth === 0), 'scroll bar width, got=' + scrollBarWidth);
 
     scrollCheck(0, 0, 0, 0, doc, 'start pos');
 

modules/tinymce/src/plugins/table/test/ts/module/test/TableTestUtils.ts

@@ -1,5 +1,6 @@
 import { ApproxStructure, Assertions, Cursors, Mouse, StructAssert, UiFinder, Waiter } from '@ephox/agar';
 import { Arr, Obj } from '@ephox/katamari';
+import { PlatformDetection } from '@ephox/sand';
 import { Attribute, Checked, Class, Html, SelectorFilter, SelectorFind, SugarBody, SugarElement, Value } from '@ephox/sugar';
 import { TinyAssertions, TinyContentActions, TinyDom, TinySelections, TinyUiActions } from '@ephox/wrap-mcagar';
 import { assert } from 'chai';
@@ -52,7 +53,10 @@ const assertWidth = (editor: Editor, elm: HTMLElement, expectedWidth: number | n
   if (expectedWidth === null) {
     assert.isNull(widthData.raw, `${nodeName} width should not be set`);
   } else {
-    assert.approximately(widthData.raw, expectedWidth, 2, `${nodeName} width is ${expectedWidth} ~= ${widthData.raw}`);
+    const platform = PlatformDetection.detect();
+    // This does a approximately check with a delta of 4 to compensate for Firefox sometimes being off by 4 pixels depending on version and platform see TINY-9200 for details
+    const delta = platform.browser.isFirefox() ? 4 : 2;
+    assert.approximately(widthData.raw ?? -1, expectedWidth, delta, `${nodeName} width is ${expectedWidth} ~= ${widthData.raw}`);
   }
   assert.equal(widthData.unit, expectedUnit, `${nodeName} unit is ${expectedUnit}`);
 };