New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add datalist test #146

Closed
jamesarosen opened this Issue Nov 16, 2010 · 10 comments

Comments

Projects
None yet
5 participants
@jamesarosen

I'd like to know whether the browser has native datalist support. I'm not exactly sure how to represent this as a Modernizr test, but the following works with jQuery:

var datalist = $('<datalist id="_modernizrDatalist" />')
               .appendTo('body');
var input    = $('<input list="_modernizrDatalist" id="_modernizrDatalistInput" />')
               .appendTo('body');
datalistSupport = typeof($('#_modernizrDatalistInput').attr('list')) === 'object'

Non-supporting browsers will ignore the attribute or leave it as a string. Supporting browsers will return the actual HTMLDataListElement object.

I tried emulating this with document.createElement but couldn't get the supporting browsers (Opera 9.5+) to make the link.

@aFarkas

This comment has been minimized.

Show comment
Hide comment
@aFarkas

aFarkas Dec 14, 2010

Member

I'm also interested to see, how you do a test. Safari 5.0.3 does seem to have implemented all property interfaces (list on input and options on datalist + display-style on datalist). But they didn't have implemented the UI, so no real feature.

Member

aFarkas commented Dec 14, 2010

I'm also interested to see, how you do a test. Safari 5.0.3 does seem to have implemented all property interfaces (list on input and options on datalist + display-style on datalist). But they didn't have implemented the UI, so no real feature.

@aFarkas

This comment has been minimized.

Show comment
Hide comment
@aFarkas

aFarkas Dec 17, 2010

Member

I found valid test for this:

$.support.datalistProp = ('list' in document.createElement('input') && 'options' in document.createElement('datalist'));
//supports full datalist
$.support.datalist = ($.support.datalistProp && window.HTMLDataListElement);
Member

aFarkas commented Dec 17, 2010

I found valid test for this:

$.support.datalistProp = ('list' in document.createElement('input') && 'options' in document.createElement('datalist'));
//supports full datalist
$.support.datalist = ($.support.datalistProp && window.HTMLDataListElement);
@jamesarosen

This comment has been minimized.

Show comment
Hide comment
@jamesarosen

jamesarosen Dec 17, 2010

Great stuff, aFarkas!

Great stuff, aFarkas!

@miketaylr

This comment has been minimized.

Show comment
Hide comment
@miketaylr

miketaylr Jan 8, 2011

Awesome. I'm just going to use !!(document.createElement('datalist') && window.HTMLDataListElement) because I'm lazy. Thanks!

Awesome. I'm just going to use !!(document.createElement('datalist') && window.HTMLDataListElement) because I'm lazy. Thanks!

@gmoulin

This comment has been minimized.

Show comment
Hide comment
@gmoulin

gmoulin Jun 23, 2011

Fennec (Firefox Mobile), version 2.1.1 have a false positive for datalist support

the tag is supported but there is no UI implemented for it...

gmoulin commented Jun 23, 2011

Fennec (Firefox Mobile), version 2.1.1 have a false positive for datalist support

the tag is supported but there is no UI implemented for it...

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Dec 11, 2011

Member

Just tried these on testling...

test code:

var test = require('testling');

test('datalist', function (t) {


    var options     = 'options' in document.createElement('datalist')
    var listoptions = ('list' in document.createElement('input') && 'options' in document.createElement('datalist'))
    var globalobj   = !!window.HTMLDataListElement;
    var shivglobobj = !!(document.createElement('datalist') && window.HTMLDataListElement)

    t.log(['basic `"options" in` check :', options     ])
    t.log(['also checking `"list" in`..:', listoptions ])
    t.log(['window.HTMLDataListElement :', globalobj   ]);
    t.log(['shiv + constructor ^       :', shivglobobj ]);

    t.end();

});

results:



iexplore/6.0       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]
iexplore/7.0       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]
iexplore/8.0       
  Log: ["window.HTMLDataListElement :",false]
  Log: ["basic `\"options\" in` check :",false]
  Log: ["shiv + constructor ^       :",false]
  Log: ["also checking `\"list\" in`..:",false]
iexplore/9.0       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]


chrome/13.0        
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["shiv + constructor ^       :",false]
  Log: ["window.HTMLDataListElement :",false]
chrome/14.0        
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]
chrome/15.0        
  Log: ["basic `\"options\" in` check :",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["shiv + constructor ^       :",false]
chrome/canary       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["shiv + constructor ^       :",false]


opera/10.0         
  Log: ["shiv + constructor ^       :",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
opera/10.5         
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
opera/11.0         
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]
opera/11.5         
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]
  Log: ["window.HTMLDataListElement :",true]
opera/next         
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]


safari/5.0.5       
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["shiv + constructor ^       :",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["basic `\"options\" in` check :",true]
safari/5.1         
  Log: ["shiv + constructor ^       :",false]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["window.HTMLDataListElement :",false]



firefox/4.0         0/0    0 % ok
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["shiv + constructor ^       :",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["window.HTMLDataListElement :",true]
firefox/5.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]
firefox/6.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]
firefox/7.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]
firefox/8.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]


Demo page:

also

Member

paulirish commented Dec 11, 2011

Just tried these on testling...

test code:

var test = require('testling');

test('datalist', function (t) {


    var options     = 'options' in document.createElement('datalist')
    var listoptions = ('list' in document.createElement('input') && 'options' in document.createElement('datalist'))
    var globalobj   = !!window.HTMLDataListElement;
    var shivglobobj = !!(document.createElement('datalist') && window.HTMLDataListElement)

    t.log(['basic `"options" in` check :', options     ])
    t.log(['also checking `"list" in`..:', listoptions ])
    t.log(['window.HTMLDataListElement :', globalobj   ]);
    t.log(['shiv + constructor ^       :', shivglobobj ]);

    t.end();

});

results:



iexplore/6.0       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]
iexplore/7.0       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]
iexplore/8.0       
  Log: ["window.HTMLDataListElement :",false]
  Log: ["basic `\"options\" in` check :",false]
  Log: ["shiv + constructor ^       :",false]
  Log: ["also checking `\"list\" in`..:",false]
iexplore/9.0       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]


chrome/13.0        
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["shiv + constructor ^       :",false]
  Log: ["window.HTMLDataListElement :",false]
chrome/14.0        
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]
chrome/15.0        
  Log: ["basic `\"options\" in` check :",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["shiv + constructor ^       :",false]
chrome/canary       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["shiv + constructor ^       :",false]


opera/10.0         
  Log: ["shiv + constructor ^       :",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
opera/10.5         
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
opera/11.0         
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]
opera/11.5         
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]
  Log: ["window.HTMLDataListElement :",true]
opera/next         
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]


safari/5.0.5       
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["shiv + constructor ^       :",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["basic `\"options\" in` check :",true]
safari/5.1         
  Log: ["shiv + constructor ^       :",false]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["window.HTMLDataListElement :",false]



firefox/4.0         0/0    0 % ok
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["shiv + constructor ^       :",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["window.HTMLDataListElement :",true]
firefox/5.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]
firefox/6.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]
firefox/7.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]
firefox/8.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]


Demo page:

also

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Dec 11, 2011

Member

So.. summary...

  • Safari port of webkit (but not chrome) implements the new additions to the <input> but not the datalist element and it certainly doesnt work there.
  • FF is all peachy (including mobile)
  • Chrome doesnt touch the stuff (but will.. crbug.com/20226)
  • Opera is all Peachy
  • Apparently IE10 supports it but testing IE10 is so ridiculously hard I can't be bothered

And Modernizr technically already has a test for this... Modernizr.input.list which false positives in Safari...

What this means is that we'll augment the list test to also do the shiv'd constructor technique that @miketaylr provided. Dig?

Member

paulirish commented Dec 11, 2011

So.. summary...

  • Safari port of webkit (but not chrome) implements the new additions to the <input> but not the datalist element and it certainly doesnt work there.
  • FF is all peachy (including mobile)
  • Chrome doesnt touch the stuff (but will.. crbug.com/20226)
  • Opera is all Peachy
  • Apparently IE10 supports it but testing IE10 is so ridiculously hard I can't be bothered

And Modernizr technically already has a test for this... Modernizr.input.list which false positives in Safari...

What this means is that we'll augment the list test to also do the shiv'd constructor technique that @miketaylr provided. Dig?

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Dec 11, 2011

Member

Reported the safari false positive here: http://webk.it/74252

Member

paulirish commented Dec 11, 2011

Reported the safari false positive here: http://webk.it/74252

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Dec 12, 2011

Member

Closed by cb98fb9 Boom.

then in 6d6d14e I made it more obvious we already have datalist in the core tests.

Member

paulirish commented Dec 12, 2011

Closed by cb98fb9 Boom.

then in 6d6d14e I made it more obvious we already have datalist in the core tests.

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Apr 23, 2012

Member

http://demo.agektmr.com/datalist/ it's in canary now.

but fails our feature detect. i'm working with the chrome engineer to resolve that. :)

Member

paulirish commented Apr 23, 2012

http://demo.agektmr.com/datalist/ it's in canary now.

but fails our feature detect. i'm working with the chrome engineer to resolve that. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment