https://github.com/oslego/css-masking-test-files

Test files to check support of CSS Masking `clip-path` and `mask-image` properties.
https://github.com/oslego/css-masking-test-files

Last synced: about 1 month ago
JSON representation

Test files to check support of CSS Masking `clip-path` and `mask-image` properties.

• Host: GitHub
• URL: https://github.com/oslego/css-masking-test-files
• Owner: oslego
• Created: 2014-09-24T20:09:41.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-09-25T11:33:42.000Z (over 10 years ago)
• Last Synced: 2024-10-14T12:49:07.448Z (3 months ago)
• Size: 172 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Test files for [CSS Masking](http://dev.w3.org/fxtf/css-masking-1) `clip-path` and `mask` support.

[support matrix](https://github.com/awgreenblatt/css-graphics)

# Notes

- Chrome and WebKit [bug with coordinate space](https://code.google.com/p/chromium/issues/detail?id=417370) when referencing SVG ``. (workaround: set `-webkit-transform: translate(0,0);` on HTML element).

- `mask` used to be a SVG-only CSS property. It is evolving to be a shorthand of `mask-image`, `mask-size`, `mask-mode`, etc for both SVG & HTML.

- Firefox supports referencing SVG `` elements for masking HTML, but not images.

- Change mask type (luminance or alpha) with CSS property `mask-source-type` (behind flag in Chrome, prefixed in WebKit), not `mask-mode`?? (`mask-type` is an attribute for the SVG `` element).

## Expected results

Fully compliant browsers for `clip-path` and `mask` must clip each box to a circle.