Last-child pseudo selector test #304
Conversation
Cool! LGTM. i'll pull once this gets a few more eyes. |
This could be shortened quite a bit by using the exposed methods, you could write it like this: Modernizr.testStyles("#modernizr :last-child{width:200px;display:block}",function(elem){
return elem.lastChild.offsetWidth === 200;
},1); I haven't thoroughly tested it but it could be a start? |
is that |
also i guess you're lucky since #modernizr has a child of the style attribute, right? thats why this children-dependent thing works with this api? |
Yeah you're right can probably scrap that last arg, it's injecting an extra div but we don't really need it. |
yeah style is a child of the #modernizr element, that's why I add display:block so offsetWidth will return an actual value. |
@ryanseddon you need to children to test against each other, as the :last-child slector selects ALL chiildren in Safari up to and including 3 (see http://reference.sitepoint.com/css/pseudoclass-lastchild). EDIT: Oops, hit the close button by mistake. |
@ryanseddon As @laustdeleuran said, we need multiple children in order to prevent a false positive in Safari 3.0 and below. Without having the ability to test in Safari 3.0 or less I can't say for sure, but in theory this could work: Modernizr.testStyles("#modernizr div {width:100px} #modernizr :last-child{width:200px;display:block}", function(elem) {
return elem.lastChild.offsetWidth > elem.firstChild.offsetWidth;
}, 1); As @paulirish established modernizr injects a style element. This is done in the end just before the innerHTML, making the style tag the last child. The idea is that if we put in a div that will become a child of #modernizr too, and thus will get selected by Safari 3.0 and less. EDIT: Fixed codeblock |
@emilchristensen Codeblocks are done with four spaces preceding each line of code! :) |
Doesn't work for me :( But it seems 4 spaces works. EDIT: Now it works! Just had to play around with it abit! 4 spaces before each line inside the 3 backticks seemed to do the trick :) (Sry I'm new on the comments section on GitHub) |
:) no worries, emil. |
What happened to this test? Will it be included? |
we are waiting for this PR to be updated with the new revised (and smaller) test.. emil and laust were looking to tackle it this weekend i believe. |
Yeah. Heading off to london in a minute, tho, so wont get around to test till mid next week. Hope that's sufficient :) |
Sry - bad craziness all around when I got back from London (both personal and work). I've ported the above test to http://jsfiddle.net/laustdeleuran/3rEVe/ We've tested all modern browsers on both PC and Mac (Chrome, FireFox, Opera, Safari, IE9), and the test work perfectly. Also works in Chrome 7, FireFox 3.6 IE7 and IE8 on Windows. Edge-cases (Safari 2, FireFox2 and IE6) haven't been tested yet in this new version, but how thorough do you need me to be? There's a bit of work involved getting near those version, as I don't have them "at hand". |
Awesome, I just tested in IE6 and FF2 and the test is returning what I expected. Have you updated the pull request? |
@ryanseddon perfect! Haven't updated the request yet, but will (hopefully today) - I just need to get @emilchristensen to help me with this Github thing (which kind of challenges my nerdiness :)) |
Any updates on this test? I would like to have this included in Modernizr and happy to help with it. |
I'll chuck a vote in favour of this as well. |
@laustdeleuran and @emilchristensen can we get this PR updated? thanks! |
Yeah. Will talk to emil about it on monday. Sorry. Have been swanped with fredag den 11. maj 2012 skrev Paul Irish :
Mvh. Laust Johan Deleuran |
Test in Opera 9 (first version of Opera 9) and correctly fails. |
awesome. pulling. |
Last-child pseudo selector test
* 'master' of github.com:Modernizr/Modernizr: (256 commits) adding metadata for lastchild selector test. ref Modernizr#304 death to the URL scheme! update Modernizer.flexbox to support both WD and LC implementations. fixes Modernizr#611 Revert "new flexbox test got shuffled because the property was renamed. fixes Modernizr#611" reverting so i can accept myakura's patch instead. whitespace changes in unit tests. thank you editorconfig. new flexbox test got shuffled because the property was renamed. fixes Modernizr#611 phantomjs toString()s a window different than Chrome does.. adding .editorconfig to normalize on whitespace standards. Don't assume injected style elem is always the last, fixes Modernizr#588 Function.prototype.bind polyfill tests. whitespace in test suite improve fn.bind polyfill formatting. fix linting error. whitespace fixes Add backgroundPositionXY check optimizing test using Modernizr.testStyles() as suggested by @ryanseddon removing unneccessary variable and declaration Adding test for SubPixel Font Rendering update documentation and remove buggyinteractivevalidation flag (fixes Issue Modernizr#584) Updated to new version, ref. Modernizr#304 (comment) Removing the `testBundle` method fixes Modernizr#585 - Affects fontface, touch, csstransforms3d and generatedcontent tests - Changed csstransforms3d to only inject an element an media query if needed and only have webkit and non prefixed values, see line 646. - Touch test only injects and element if first statement fails, see line 439. ...
Last-child pseudo selector test
* 'master' of github.com:Modernizr/Modernizr: (256 commits) adding metadata for lastchild selector test. ref Modernizr#304 death to the URL scheme! update Modernizer.flexbox to support both WD and LC implementations. fixes Modernizr#611 Revert "new flexbox test got shuffled because the property was renamed. fixes Modernizr#611" reverting so i can accept myakura's patch instead. whitespace changes in unit tests. thank you editorconfig. new flexbox test got shuffled because the property was renamed. fixes Modernizr#611 phantomjs toString()s a window different than Chrome does.. adding .editorconfig to normalize on whitespace standards. Don't assume injected style elem is always the last, fixes Modernizr#588 Function.prototype.bind polyfill tests. whitespace in test suite improve fn.bind polyfill formatting. fix linting error. whitespace fixes Add backgroundPositionXY check optimizing test using Modernizr.testStyles() as suggested by @ryanseddon removing unneccessary variable and declaration Adding test for SubPixel Font Rendering update documentation and remove buggyinteractivevalidation flag (fixes Issue Modernizr#584) Updated to new version, ref. Modernizr#304 (comment) Removing the `testBundle` method fixes Modernizr#585 - Affects fontface, touch, csstransforms3d and generatedcontent tests - Changed csstransforms3d to only inject an element an media query if needed and only have webkit and non prefixed values, see line 646. - Touch test only injects and element if first statement fails, see line 439. ...
If I just include modernizr will :last-child just work on a ie8 stylesheet? I done that and it didn't work. |
@es6Test - If you selected HTML5Shiv, though, HTML5Shiv (not Modernizr) makes the browser recognize HTML5 elements as unknown elements (as opposed to empty nodes that cannot be laid out using CSS). |
I see, I usually just do that by checking if the api is not undefined with vanillajs. |
@es6Test - for JavaScript features, this is pretty easy, yes. For prefixed CSS properties, for example, it gets trickier. |
I don't know how this is merged into Modernizr, but I've added the last-child pseudo selector test the feature-detection folder. The script has been tested in FireFox 3.0+, Chrome 7, 10, 11,12, IE6-9, Safari 4.0+ and Opera 11.
It would probably be a good idea to test the script in FireFox 1.0-2.0 and Safari 1.3-2.0. I haven't been able to perform test in those browsers.