Skip to content
This repository

background-clip:text probably needs a new test #199

Closed
adambrault opened this Issue February 19, 2011 · 17 comments

9 participants

Adam Brault Paul Irish Stu Cox Faruk Ateş LoicMahieu Rob Mientjes Evan Hensleigh Divya Manian Martin Auswöger
Adam Brault

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"?

Faruk Ateş
Owner

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.

Paul Irish
Owner

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

Adam Brault

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

Adam Brault

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>
Paul Irish
Owner

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.

Paul Irish paulirish closed this in 18702be December 10, 2011
Paul Irish
Owner

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

Paul Irish paulirish reopened this February 13, 2012
Paul Irish
Owner

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

Rob Mientjes

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

Evan Hensleigh

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

Paul Irish
Owner

I've just removed the test from the repo. This'll kill it from the builder (soon) too.

For now, no test exists that is reliable. I'm happy if someone can find another one.

Divya Manian

Just today I had an epiphany and wrote on how you can fallback within CSS for background-clip: text. Feedback welcome.

Paul Irish
Owner

Nice technique of using -webkit-text-fill-color ! Very cool.

Martin Auswöger
ausi commented May 13, 2013

I think i found a reliable test method, see #925

I tested it in Chrome, Firefox, Safari, Opera, iOS and IE6 - IE10

Stu Cox
Owner

Resolved by #925.

Stu Cox stucox closed this August 06, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.