background-clip:text probably needs a new test

[adamavenir]

Thanks for this test for background-clip:text. Unfortunately—it doesn't appear to work in Firefox 4.

Is there any way to detect specifically for "background-clip:text" instead of simply "background-clip"?

[KuraFire]

There should be, but it will have to be a separate, non-included test (for now) because background-clip: text is not a real value in the CSS Borders & Backgrounds spec (as of CR/15Feb2011).

Theoretically, what this test would do is the same as the regular background-clip test, but set explicitly with a value of "text", and then do a boolean verify that the return value still contains "text". Won’t be as fast as the standards-based background-clip test though.

[paulirish]

adam, do you want to take a crack at adapting the above test to setting and retrieving the style prop?

[adamavenir]

Will do. I'll provide or new test or post back if I get stuck.

[adamavenir]

Thanks for the help, all. Would you please verify the test below? In addition, I'm much, much stronger on the CSS end than JS, so I'd appreciate a kind smack upside the head if there's a better way to do this. :)

This returns true in the appropriate browsers for me:

<script>
    Modernizr.addTest('backgroundcliptext',function(){
        var div = document.createElement('div');
        div.style.webkitBackgroundClip = "text";
        var text = div.style.cssText.indexOf('text');
        if (text > 0) return true;
        'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){ 
            if (val+'BackgroundClip' in div.style) return true;
        });
    });
</script>

[paulirish]

adam,
i dont have the time to rewrite that atm but it wont get you want you want, exactly.

this is the style that you want: #137

but it's written as a modernizr patch and not a plugin.. so that changes things.

[paulirish]

wrote it finally!

[LoicMahieu]

It seem that it doesn't work well for IE 8.

div.style.cssText = "background-clip:text;-webkit-background-clip:text;-moz-background-clip:text;-o-background-clip:text;-ms-background-clip:text;-khtml-background-clip:text;"

IE does seem to clean 'cssText' after assignation.

I haven't test the others versions.

[LoicMahieu]

Return a false positive for Opera 11.61

[paulirish]

ruh roh. should we file a ticket against them?
can you dig into this?

[LoicMahieu]

I do not know much about [HTMLElement].style.cssText behavior.

I've tried this:

Modernizr.testStyles(' #modernizr { '+ Modernizr._prefixes.join('background-clip: text; ') +' } ', function(elem, rule){ 
    Modernizr.addTest('backgroundcliptext', (
        window.getComputedStyle ?
        getComputedStyle(elem, null).getPropertyValue('background-clip') :
        elem.currentStyle['background-clip']
    ) == 'text');
});

Seem to work well for Webkit, FF and Opera but IE elem.currentStyle['background-clip'] remain text and so the test is completed ! :s

I've not yet had the opportunity to use the other "background options" dectection features (like background-size: cover;) but, is it possible that the tests also return a false positive with IE ?

Rapidly I quickly test background-size: cover; with IE and the test is completed. A bug?

Gist for my test:
https://gist.github.com/1820503

[rbmntjs]

I am running into this too: Webkit doesn't say it supports it, but it clearly does (it's on the page). Seems buggy.

[futuraprime]

The test appears to be returning a false positive in IE 9.