Comments (5)
@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.
from testable-projects-fcc.
@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...
from testable-projects-fcc.
@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?
from testable-projects-fcc.
@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?
from testable-projects-fcc.
@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.
from testable-projects-fcc.
Related Issues (20)
- test issue when i'm working with survey project , test shows test failed list of tribute page HOT 1
- Test failing but test requirement has been met HOT 1
- getting an error on product landing page #landing test. it says the navbar should always be at the top of the page. the navbar is at the top of my page but i am still receiving the error. HOT 1
- FCC Personal Portfolio - Can't get Layout #3 test to pass regarding navbar and viewport HOT 2
- project verification script not detecting required id tags in my code HOT 1
- User Story #11: Within the form, there is a submit input with a corresponding id="submit" HOT 1
- Test scripts are not correct HOT 1
- Personal Portfolio Project Bugs
- i think this is bog, 3 hour i am trying HOT 1
- Pomodoro Clock #15 Test of "25 + 5" Test Suite May Be Yielding Incorrect Results HOT 3
- Survey Form Test Issues
- FCC: Tribute Page
- Potrfolio tests: typo in #Content test number 4
- the test is not running HOT 1
- Markdown Preview tests not compatible with Vue HOT 1
- TypeError: Cannot read property '1' of null for Pomodoro clock. Why?????!!!!!!! HOT 1
- Issue with image running Tribute Page tests HOT 2
- Dependency Dashboard
- Build a JavaScript Calculator tests typo HOT 3
- incomplete fix for 25+5 with React@18 in #1485
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from testable-projects-fcc.