Add waves masks on images feature

[AnthonyLedesma]

• Closes ISBAT apply a waves mask to images #842.
• Added waves style for bottom and top of images.
• CSS is responsive and it tested and working well in Chrome, FireFox, Edge, and using mobile device emulators built into FireFox and Chrome.
• Tested using Twentynineteen, Twentyseventeen, Twentysixteen, and underscores bare bones theme.
• Future releases could feature options for SVG horizontal flip, custom colors, and different styles of SVG masks.

I was not able to figure out how to get the IE11 support working here. I was able to get a background image applied but the layering was not working as expected.

There are two bugs that I am still working on tracking down. They are both related to the image-mask not being 'contained'

When first inserted

When switching page alignment

[jrtashjian]

@paranoia1906 great work! I'm about to push a few updates that build upon what you've accomplished. We can actually use the mask css properties directly on the image which removes the need for the psuedo element being added and needing to match the width of the image. This solves all the issues you had above and also removes the need for us to hide the caption text.

As for IE11 support, mask is not a supported property and I think in this case it's ok not to have it working. I don't think it would be beneficial to add support for it either. If the browser doesn't support the mask property, it doesn't break the content and the image renders normally.

The major difference is the SVG we're using as the mask. When an SVG is used as a mask, the path added is actually the part of the image that is removed. So in order to get this working properly I made an SVG which is the reverse of the shape. So in your example above the white portion is the SVG shape whereas the new shape would be the red portion.

[jrtashjian]

One final update: fixing the style preview for that bottom wave style. I'm hiding the caption in the preview and aligning the block so we can see the bottom wave.

[jrtashjian]

Preview:

[richtabor]

I think it's fine that captions display in the preview (as core allows it). I also removed some extraneous styling that was causing some display errors in the sidebar and aren't really needed.

[kosiew]

The wave style is broken.

See http://xizunite.com/test-image/

if image does not load, please click on this link : https://d.pr/i/OPyoFi

if image does not load, please click on this link : https://d.pr/i/eGnc83