Product Landing page layout tests #2 & #3 not recognizing CSS rules in local development about testable-projects-fcc

[CollinPerkins]

@aaronRhodebeck I am having the same problem. I have no issues with the rest of the tests.

[no-stack-dub-sack]

@aaronRhodebeck @CollinPerkins Just curious - if you add a second flex rule and a second media query in your local environment, do the tests pass?

This could be something to do with the way the total css is ultimately looped through in codepen vs. locally. We are testing that 2 rules exist, because at least in the codepen environment it also loops through mochas css rules.

p.s. glad you are testing these out locally, we haven't had too many people do this yet. I've done it myself with most projects, but not all, and that was within the dev environment of this project, so not sure how that might affect it.

[Christian-Paul]

@no-stack-dub-sack Just did some probing and I think I found the problem.

The CSSStyleSheet object's cssRules property has a value of null when testing locally. Interestingly, the cssRules property fills out properly when testing it in the development environment.

I believe this is happening because of this security feature:
https://bugs.chromium.org/p/chromium/issues/detail?id=143626

I'm not sure how we can work around this.

Edit: Looks like this issue is present in firefox as well: the tests' error message is a firefox securityerror "The operation is insecure"

[Christian-Paul]

@no-stack-dub-sack If the user puts the styles in the same file as their html, the tests can access the css and work properly. They could either use a bundler (probably overkill for such a small/early project) or include the css in a style tag in the html (not the best practice).

Barring that, I think we'd have to scrap those tests and check for responsiveness some other way.

[aaronRhodebeck]

After doing a little more testing, it is definitely due to the cross-site scripting security features in Chrome. Ironically, if you use Firefox, the cssRules come through for any local stylesheets, however, the external stylesheets throw security errors.

And it's a mute point because at the moment, none of the layout tests work in Firefox, at least in my local environment. On CodePen in Firefox, the first layout test passes the second two do not, which is the same behavior as Chrome in my local environment.

This code works to push media queries to the array in Firefox, from a local stylesheet (basically the same as the code in the test):

function getStylesheets() {
    var stylesheets = [];
    for (var i = 0; i < document.styleSheets.length; i++) {
        stylesheets.push(document.styleSheets[i]);
    }
    return stylesheets;
}

function getStylesFromStylesheet(stylesheet) {
    var mediaRules = [];
    for (var i = 0, len = stylesheet.cssRules.length; i < len; i++) {
        if (stylesheet.cssRules[i].type === 4) {
            mediaRules.push(stylesheet.cssRules[i]);
        }
    }
    return mediaRules;
}

It appears you can get around the security error with a try/catch block, but I don't know how helpful anything in Firefox is going to be.

[no-stack-dub-sack]

@Christian-Paul ughhh... this project is turning out to be a nightmare in some ways. Accounting for everything is going to be like nearly impossible. Not sure what the best fix is here. Perhaps your suggestion from above about putting the css in the HTML itself for those specific projects - not sure where the best place to indicate that would be.

Have any other thoughts on testing responsiveness without these tests?

[tchaffee]

@no-stack-dub-sack @aaronRhodebeck @CollinPerkins I cloned this repo and tested locally and all tests passed. Perhaps something has been fixed since this issue was opened? Can one of you test locally to see if you can still repeat the problem?

[tchaffee]

@no-stack-dub-sack @aaronRhodebeck @CollinPerkins I'm closing this since I haven't heard back from anyone about reproducing the problem. If one of you can reproduce, please feel free to reopen.

[leonardkoh]

Had the same issue HTML file does not want to recognise the linked CSS file.
Adding style tags to the HTML fixed it for me.
<style type="text/css"> @media (max-width: 500px) { #header { display: flex; } } </style>

[akiko-pusu]

This is just a FYI:
I saw the same issue on my local machine. My workaround is see the contents via local http server.

I think this is caused from Chrome’s security policy, CORS, in case trying to see local contents via file:// protocol.

# example
$ open -a Google\ Chrome terget-page.html

And all the tests are passed in case access the contents through http server locally.
In my case, run the php’s build-in server.

# example
$ php -S 127.0.0.1:3000 &
$ open -a Google\ Chrome http://127.0.0.1:3000/landing-page.html

(You can use python -m SimpleHTTPServer 3000 or node.js http-server)

Here is a screenshot when I accessed the contents via file:// protocol.
Tests except dealing with CSSStyleSheet object are passed.
In my debug console, DOMException happened when CSSStyleSheet.cssRules ( t.cssRules ) was called.

   // Related function
    var U = r(1)
      , V = r.n(U)
      , K = r(2)
      , Y = r.n(K)
      , z = r(4)
      , X = r.n(z)
      , J = function(e) {
        return [].slice.call(e).reduce(function(e, t) {
            try {
                if (t.cssRules) {  // exception raised.
                    var r = [].slice.call(t.cssRules).filter(function(e) {
                        return e.type === CSSRule.STYLE_RULE || e.type === CSSRule.MEDIA_RULE
                    });
                    e.push.apply(e, X()(r))
                }
            } catch (e) {
                if (!(e instanceof DOMException)) // catch here.
                    throw e
            }
            return e
        }, [])
    }

Example project is: https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/

• First, I could passed all the tests of my project on CODEPEN, which is cloned from https://codepen.io/freeCodeCamp/full/RKRbwL

  • As you know, the browser I use is Chrome and all the contents are on the server side. (Through
    https protocol)

• Second, I store the same files and wrote codes on my local machine.

  • Also I copied test script on CDN locally.
  • I could see almost the same look and feel in my local browser, and run the FCC’s test.

But some of tests related to layout tests were failed.

Hope this comment would be any help :)