Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
firefox: style tags in hidden iframes do not apply css
See original GitHub issueIssue Description
This is for the feature/curriculum-expansion branch only when run locally, and NOT the staging branch.
For several challenges (challengeType: 0, using the code editor with the mobile-phone output layout), the jQuery method .css() doesn’t seem to be accessing the styles applied in a style tag in the given code. This is affecting any assert tests that use a pattern of assert($('selector').css('propertyToCheck') == 'valueToCompare', 'message: ...');.Here’s an example:
<style>
h2 {
position: relative;
top: 15px;
}
</style>
<body>
<h1>On Being Well-Positioned</h1>
<h2 class="testCode">Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>
<script>
console.log($('h2').attr('class')); // Works great, returns testCode
console.log($('h2').css('position')); // returns undefined
console.log($('h2').css('top')); // returns undefined
</script>
Related assert tests that aren’t passing:
assert($('h2').css('position') == 'relative', 'message: Add a CSS rule to specify that the <code>h2</code> has a <code>position</code> set to <code>relative</code>.');
assert($('h2').css('top') == '15px', 'message: Use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.');
Browser Information
- Browser Name, Version: Firefox 48.0.1
- Operating System: Mac OS X, El Capitan v10.11.3
- Mobile, Desktop, or Tablet:
Issue Analytics
- State:
- Created 7 years ago
- Comments:22 (20 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
We run tests in a separate hidden iframe is to get around a whole host of issues with running user code multiple times for tests.
In the future I would like to run each tests in it’s own environment, so this would not be a solution.
Alternatively we could try hiding the iframe in another fashion, such as making it
position: absolute; top: -9999999999999, left: -999999999;and putting it in zero width div with overflow hidden. Would this get around that issue?@QuincyLarson Can you elaborate on how not pulling in the libraries is the underlying issue here? Seeing as though it works fine in Chrome, and other jQuery tests (as long as they don’t involve the
.css()method).I looked into the issue a bit, and here’s what I found: There’s an open issue over at the jQuery repo: https://github.com/jquery/jquery/issues/3514 The underlying Firefox issue: https://bugzilla.mozilla.org/show_bug.cgi?id=548397 In summary, we can’t get the styles in Firefox from
display: none;iframe. The reason why this isn’t a problem on the live site is that on there, tests are being run in the visible iframe, rather than an iframe specifically for the tests. @BerkeleyTrue Would running tests in the visible iframe be possible in the beta? Could that be a solution?There’s a caveat with @Greenheart’s suggested solution. Though I’m a big fan of vanilla JavaScript, it won’t save us here. Using the style property is not the proper way to get the style: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style#Getting_style_information I put together a little demo to demonstrate the difference between the two: http://codepen.io/systimotic/pen/ryLJBy?editors=1011
getComputedStylewould also not help, as it has the same issue as the jQuery solution. Interestingly, I couldn’t get the.styletests to work in any browser. This may indicate that I did something wrong in my demo. @Greenheart any input?I’d love to get this working quickly. The amount of issues we’ve had on this is insane.