Skip to content
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

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

Closed
adamavenir opened this issue Feb 20, 2011 · 21 comments
Closed

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

adamavenir opened this issue Feb 20, 2011 · 21 comments

Comments

@adamavenir
Copy link

@adamavenir adamavenir commented Feb 20, 2011

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
Copy link
Member

@KuraFire KuraFire commented Feb 20, 2011

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
Copy link
Member

@paulirish paulirish commented Feb 20, 2011

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

@adamavenir
Copy link
Author

@adamavenir adamavenir commented Feb 20, 2011

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

@adamavenir
Copy link
Author

@adamavenir adamavenir commented Feb 20, 2011

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
Copy link
Member

@paulirish paulirish commented Feb 22, 2011

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 paulirish closed this in 18702be Dec 11, 2011
@paulirish
Copy link
Member

@paulirish paulirish commented Dec 11, 2011

wrote it finally!

@LoicMahieu
Copy link

@LoicMahieu LoicMahieu commented Feb 6, 2012

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
Copy link

@LoicMahieu LoicMahieu commented Feb 13, 2012

Return a false positive for Opera 11.61

@paulirish paulirish reopened this Feb 13, 2012
@paulirish
Copy link
Member

@paulirish paulirish commented Feb 13, 2012

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

@LoicMahieu
Copy link

@LoicMahieu LoicMahieu commented Feb 13, 2012

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
Copy link

@rbmntjs rbmntjs commented Mar 29, 2012

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
Copy link

@futuraprime futuraprime commented Apr 17, 2012

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

paulirish added a commit that referenced this issue Apr 17, 2012
@paulirish
Copy link
Member

@paulirish paulirish commented Apr 17, 2012

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.

@nimbupani
Copy link

@nimbupani nimbupani commented Feb 3, 2013

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

@paulirish
Copy link
Member

@paulirish paulirish commented Feb 4, 2013

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

@ausi
Copy link
Contributor

@ausi 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

@stucox
Copy link
Member

@stucox stucox commented Aug 6, 2013

Resolved by #925.

@stucox stucox closed this Aug 6, 2013
patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015
patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015
@fraserpage
Copy link

@fraserpage fraserpage commented Jan 21, 2016

This test is giving a false positive in Microsoft Edge.

@phistuck
Copy link
Contributor

@phistuck phistuck commented Jan 21, 2016

@fraserpage - Edge actually does support it, but with a -webkit- prefix, for compatibility.
https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10945389-background-clip-text

@fraserpage
Copy link

@fraserpage fraserpage commented Jan 21, 2016

Interesting. Thanks @phistuck

@pauldraper
Copy link

@pauldraper pauldraper commented May 2, 2019

but with a -webkit- prefix, for compatibility

🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet