diff --git a/src/supported-value.js b/src/supported-value.js index 53316dcb..14c24159 100644 --- a/src/supported-value.js +++ b/src/supported-value.js @@ -75,12 +75,28 @@ export default function supportedValue(property, value) { if (transitionProperties[property]) { prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback) } else if (el.style[property] === '') { + const prePrefixedValue = prefixedValue + // Value with a vendor prefix. prefixedValue = prefix.css + prefixedValue // Hardcode test to convert "flex" to "-ms-flexbox" for IE10. if (prefixedValue === '-ms-flex') el.style[property] = '-ms-flexbox' + // Change "strech" and "fill" values to "fill-available" and prefix them correctly + if ( + prePrefixedValue === 'stretch' || + prePrefixedValue === 'fill' || + prePrefixedValue === 'fill-available' + ) { + prefixedValue = 'fill-available' + if (prefix.js === 'Moz') { + prefixedValue = '-moz-available' + } else if (prefix.js !== 'ms' || prefix.browser === 'edge') { + prefixedValue = '-webkit-fill-available' + } + } + // Test prefixed value. el.style[property] = prefixedValue diff --git a/src/supported-value.test.js b/src/supported-value.test.js index a047a5b2..8871ef60 100644 --- a/src/supported-value.test.js +++ b/src/supported-value.test.js @@ -78,5 +78,37 @@ describe('css-vendor', () => { prefix.js === 'ms' && prefix.browser !== 'edge' ? false : value ) }) + + it('should return known fill-available value prefixed', () => { + let value = 'fill-available' + if (prefix.js === 'Moz') { + value = '-moz-available' + } else if (prefix.js !== 'ms' || prefix.browser === 'edge') { + value = '-webkit-fill-available' + } + expect(supportedValue('width', 'fill-available')).to.eql( + prefix.js === 'ms' ? false : `${value}` + ) + }) + + it('should return known stretch value prefixed', () => { + let value = 'fill-available' + if (prefix.js === 'Moz') { + value = '-moz-available' + } else if (prefix.js !== 'ms' || prefix.browser === 'edge') { + value = '-webkit-fill-available' + } + expect(supportedValue('width', 'stretch')).to.eql(prefix.js === 'ms' ? false : `${value}`) + }) + + it('should return known fill value prefixed', () => { + let value = 'fill-available' + if (prefix.js === 'Moz') { + value = '-moz-available' + } else if (prefix.js !== 'ms' || prefix.browser === 'edge') { + value = '-webkit-fill-available' + } + expect(supportedValue('width', 'fill')).to.eql(prefix.js === 'ms' ? false : `${value}`) + }) }) })