Fix Screenshots in macOS Safari - adapt to rounded corners (#8161)

## Purpose
#8154 addresses the issue, where screenshots are not cropped on macOS
(14) Safari.
The problem is, that the screenshot mark can not be found.
This is because part of the mark is not visible because of the rounded
corners in macOS.


![312752882-4a8a5548-85e3-4805-855e-608366c74c8b](https://github.com/DevExpress/testcafe/assets/2182288/be53f18f-be1a-41ce-b432-26b68aa561e4)

## Approach
The solution is to increase `MARK_RIGHT_MARGIN` in
`src/screenshots/constants.js`.
I found that `25` is the lowest value that works for all resolutions I
was able to test.

* In order for the tests to work I parametrized the tests to depend on
`MARK_RIGHT_MARGIN`.
* ~~I enabled the screenshot-tests that were skipped in the safari
browser~~
  * ~~fix tests~~
  * ~~retina aware~~
  * ~~color-profile aware~~

## References
#8154 

## Pre-Merge TODO
- [x] Write tests for your proposed changes
- [x] Make sure that existing tests do not fail

---------

Co-authored-by: gti <support@gti.de>

src/screenshots/constants.js

@@ -5,4 +5,4 @@
 export const MARK_BYTES_PER_PIXEL = 4;
 export const MARK_LENGTH          = 32;
 export const MARK_HEIGHT          = 10;
-export const MARK_RIGHT_MARGIN    = 10;
+export const MARK_RIGHT_MARGIN    = 25;

test/server/crop-test.js

@@ -1,4 +1,10 @@
-const expect      = require('chai').expect;
+const expect = require('chai').expect;
+
+const {
+    MARK_LENGTH,
+    MARK_BYTES_PER_PIXEL,
+    MARK_RIGHT_MARGIN,
+} = require('../../lib/screenshots/constants');
 
 const {
     getClipInfoByCropDimensions,
@@ -7,23 +13,20 @@ const {
     calculateClipInfo,
 } = require('../../lib/screenshots/crop');
 
-const markSeed = [
-    0, 0, 0, 255,
-    255, 255, 255, 255,
-    0, 0, 0, 255,
-    255, 255, 255, 255,
-    0, 0, 0, 255,
-    255, 255, 255, 255,
-];
+const markSeed = Array(MARK_LENGTH).fill().flatMap((_, i) => i % 2 ? [255, 255, 255, 255] : [0, 0, 0, 255]);
 
 function getPngMock (mark = markSeed) {
-    const markSeedIndex = 6944952;
-    const width         = 1820;
-    const height        = 954;
+    const width          = 1820;
+    const height         = 954;
+    const length         = width * height * MARK_BYTES_PER_PIXEL;
+    const markSeedOffset = (MARK_LENGTH + MARK_RIGHT_MARGIN) * MARK_BYTES_PER_PIXEL;
+    const markSeedIndex  = length - markSeedOffset;
 
-    let data = '-'.repeat(markSeedIndex);
+    const dataHeader  = Buffer.from('-'.repeat(markSeedIndex));
+    const dataMark    = Buffer.from(mark);
+    const dataTrailer = Buffer.from('-'.repeat(MARK_RIGHT_MARGIN * MARK_BYTES_PER_PIXEL));
 
-    data = Buffer.concat([Buffer.from(data), Buffer.from(mark), Buffer.from(data)]);
+    const data = Buffer.concat([dataHeader, dataMark, dataTrailer]);
 
     return { width, height, data };
 }