[Random Quote Machine] Layout Test 1 failing

[freecodecamp]

[Random Quote Machine] Layout Test 1 failing

[christophherr]

@no-stack-dub-sack
What I have found so far:
Function testHorizontallyCentered expects delta to be between < 3 and > -3 to return true.
https://github.com/freeCodeCamp/testable-projects-fcc/blob/master/src/project-tests/quote-machine-tests.js#L14

When a scroll bar is visible on my 13.3" display, delta is always 8.5.
(It doesn't matter whether clientWidth, offsetWidth or scrollWidth is used in quote-machine-tests.js#L10)
I added console.logs showing the values of the test variables to my codepen.

Changing the function to return delta < 9 && delta > -3 passes the test locally and (after changing the rawgit url) in the codepen .

I don't know if the original value for delta follows a best practice or if it could just be adjusted.

[no-stack-dub-sack]

@christophherr nice investigative work! Hmmm, the only issue I see with changing the delta to your suggestion, I guess, is that this solution covers your display, but will this also cover another display where the delta is greater that 8.5. Also, how large can we make the margin of error, before it's possible to fool the test even if the element is not horizontally centered.

I wonder if we can brainstorm another way of determining the element is centered that is more reliable across different displays...

[christophherr]

@no-stack-dub-sack From testing on a few different display sizes (15.6", 19" and @Enikol 24"), it seems that as long as the aspect ratio stays the same, 8.5 is the value when a scroll bar is visible (e.g. 17px being the scrollbar width).
We could check if a scrollbar is visible and change the delta range accordingly.
There is a problem when the browser window is zoomed in or out. I´ve seen variations up to +13 for delta. It looks like checking for the zoom factor of a browser window is pretty convoluted if not impossible. We might be able to check the window.devicePixelRatio but I haven't looked at how delta would have to be adjusted for variations on that.
Is this the only challenge that checks if an element is centred?

[no-stack-dub-sack]

@christophherr I believe it's the only test that looks for centered on the entire page - others test for centered within other elements.

Maybe we can go ahead and change the delta to 8.5, and put a note in the unit test copy that says "(be sure your browser is not zoomed in or out when running this test)" or something like that.

Thoughts?

[christophherr]

@no-stack-dub-sack Sounds good to me, especially if it´s the only test of its kind.
It's probably not ideal from an a11y (accessibility) point of view.
I'll submit a PR over the weekend.