Add hairline test. #1769

Merged
merged 1 commit into from Nov 26, 2015

Projects

None yet

2 participants

@strarsis
Contributor

This PR adds a test for CSS hairlines support in the browser.
I also found this blog post very useful for explaining CSS hairlines
and how to test for support (test is derived from it): http://dieulot.net/css-retina-hairline

With best regards

@patrickkettner patrickkettner commented on an outdated diff Nov 26, 2015
test/browser/integration/caniuse.js
@@ -65,6 +65,7 @@ window.caniusecb = function(caniuse) {
geolocation: 'geolocation',
getrandomvalues: 'getrandomvalues',
getusermedia: 'stream',
+ hairline: 'hairline',
@patrickkettner
patrickkettner Nov 26, 2015 Member

I am not seeing this on caniuse - can you remove unlessI am missing something

@patrickkettner patrickkettner commented on the diff Nov 26, 2015
feature-detects/css/hairline.js
@@ -0,0 +1,20 @@
+/*! {
+ "name": "hairline",
+ "property": "hairline",
+ "tags": ["css"],
+ "authors": ["strarsis"],
+ "notes": [{
+ "name": "Blog post about CSS retina hairlines",
+ "href": "http://dieulot.net/css-retina-hairline"
+ },{
+ "name": "Derived from",
+ "href": "https://gist.github.com/dieulot/520a49463f6058fbc8d1"
+ }]
+}
@patrickkettner
patrickkettner Nov 26, 2015 Member

can you add a description as to what hairline is? I don't think the naming is super well known

@patrickkettner patrickkettner commented on an outdated diff Nov 26, 2015
feature-detects/css/hairline.js
+/*! {
+ "name": "hairline",
+ "property": "hairline",
+ "tags": ["css"],
+ "authors": ["strarsis"],
+ "notes": [{
+ "name": "Blog post about CSS retina hairlines",
+ "href": "http://dieulot.net/css-retina-hairline"
+ },{
+ "name": "Derived from",
+ "href": "https://gist.github.com/dieulot/520a49463f6058fbc8d1"
+ }]
+}
+!*/ define(['Modernizr', 'testStyles'], function(Modernizr, testStyles) {
+ Modernizr.addTest('hairline', function() {
+ return testStyles('#modernizr {border:.5px solid transparent;}', function(elem) {
@patrickkettner
patrickkettner Nov 26, 2015 Member

no need for a trailing semicolon

@patrickkettner patrickkettner commented on an outdated diff Nov 26, 2015
feature-detects/css/hairline.js
+ "name": "hairline",
+ "property": "hairline",
+ "tags": ["css"],
+ "authors": ["strarsis"],
+ "notes": [{
+ "name": "Blog post about CSS retina hairlines",
+ "href": "http://dieulot.net/css-retina-hairline"
+ },{
+ "name": "Derived from",
+ "href": "https://gist.github.com/dieulot/520a49463f6058fbc8d1"
+ }]
+}
+!*/ define(['Modernizr', 'testStyles'], function(Modernizr, testStyles) {
+ Modernizr.addTest('hairline', function() {
+ return testStyles('#modernizr {border:.5px solid transparent;}', function(elem) {
+ return elem.offsetHeight == 1;
@patrickkettner
patrickkettner Nov 26, 2015 Member

triple equals please

@patrickkettner
Member

couple of small nits, then lgtm. After you are done, could you rebase down to a single commit? Thanks!

@strarsis strarsis Add hairline test.
17f451e
@strarsis
Contributor

Fixed + squashed.

With best regards

@patrickkettner patrickkettner merged commit ece4566 into Modernizr:master Nov 26, 2015

2 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment