Modal (horizontal) recentering test fails off when scrollbar is present

[rylabo]

Viewing the test page on Firefox has all tests pass except the one that checks the left position. The tests will all pass in responsive design mode, but not in normal viewing mode.

To reproduce:

• Open the test page in Firefox, not in responsive design view
• Resizing the entire browser window and refreshing will still reproduce the error

The test seems to be always off by exactly 7px, no matter what size the browser window is in. Here's the output:

modal recentering

AssertionError: left should be nearby: expected 761.5 to be close to 768.5 +/- 1AssertionError@bower_components/chai/chai.js:5553:18
[3]</module.exports/Assertion.prototype.assert@bower_components/chai/chai.js:206:13
closeTo@bower_components/chai/chai.js:1798:5
[10]</module.exports/ctx[name]@bower_components/chai/chai.js:4192:18
[6]</module.exports/assert.closeTo@bower_components/chai/chai.js:3374:5
[email protected]:31:5
@suite.js:268:9

[EDIT Apr 19, 2017]: This happens in every browser I've tried under Linux, including Chrome, Opera, and Vivaldi

[rylabo]

This strikes me as a minor glitch. Perhaps I can submit a pull request changing the test to +/-10px?

[samthor]

I feel like the +/- 1px was mostly to deal with Retina-ness and bring off-by-one. 10px seems extreme. Is there another styling reason why this is failing?

On Tue., 18 Apr. 2017, 21:22 Ryan Laboucane, [email protected] wrote:

This strikes me as a minor glitch. Perhaps I can submit a pull request changing the test to +/-10px?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/GoogleChrome/dialog-polyfill/issues/140#issuecomment-294791983, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHRkMiyyVltBog6k88rOFrCUzaGKHQDks5rxJ0CgaJpZM4M_vBQ .

[rylabo]

Somewhat, but I've narrowed it down, this block seems to be causing the error:

test('modal recentering', function() {
    ...
    big.style.height = '200vh';  // 2x view height
    document.body.appendChild(big); // <-- THIS ONE throws centering out of whack
    ...

This line changes the body width by.. 14px, which is the width of the scroll bar.

So basically, it seems like horizontal centering isn't actually happening relative to the viewport.

[rylabo]

And, I've found a good analysis why...

tl;dr version:

All major browsers except Safari deviate from the CSS spec on their implementations of fixedpositioning, opting to position relative to the containing element as opposed to the viewport.

[rylabo]

I guess there are one of two proposals I would have at this point:

1. Alter the test to check for centering based on the limitations presented by the browser. Undoubtedly the easier option, but it would involve implementing a feature check to find out how much the scroll bar displaces fixed positioned elements, and testing the centering accounting for that.

2. Modify the code to center based on the actual viewport. This would be the more CSS compliant solution, but would mean that we would now be styling from the script rather than pure CSS.