diff --git a/src/css.js b/src/css.js index 8109bfda7..1e113fde0 100644 --- a/src/css.js +++ b/src/css.js @@ -211,26 +211,35 @@ jQuery.extend( { // Don't automatically add "px" to these possibly-unitless properties cssNumber: { - "animationIterationCount": true, - "columnCount": true, - "fillOpacity": true, - "flexGrow": true, - "flexShrink": true, - "fontWeight": true, - "gridArea": true, - "gridColumn": true, - "gridColumnEnd": true, - "gridColumnStart": true, - "gridRow": true, - "gridRowEnd": true, - "gridRowStart": true, - "lineHeight": true, - "opacity": true, - "order": true, - "orphans": true, - "widows": true, - "zIndex": true, - "zoom": true + animationIterationCount: true, + aspectRatio: true, + borderImageSlice: true, + columnCount: true, + flexGrow: true, + flexShrink: true, + fontWeight: true, + gridArea: true, + gridColumn: true, + gridColumnEnd: true, + gridColumnStart: true, + gridRow: true, + gridRowEnd: true, + gridRowStart: true, + lineHeight: true, + opacity: true, + order: true, + orphans: true, + scale: true, + widows: true, + zIndex: true, + zoom: true, + + // SVG-related + fillOpacity: true, + floodOpacity: true, + stopOpacity: true, + strokeMiterlimit: true, + strokeOpacity: true }, // Add in properties whose names you wish to fix before diff --git a/test/unit/css.js b/test/unit/css.js index 6ba19542b..16edd50ba 100644 --- a/test/unit/css.js +++ b/test/unit/css.js @@ -1202,30 +1202,100 @@ if ( includesModule( "offset" ) ) { } ); } -QUnit.test( "Do not append px (trac-9548, trac-12990, gh-2792)", function( assert ) { - assert.expect( 3 ); +QUnit.test( "Do not append px (trac-9548, trac-12990, gh-2792, gh-5179)", function( assert ) { + assert.expect( 10 ); - var $div = jQuery( "
" ).appendTo( "#qunit-fixture" ); + var $div = jQuery( "
" ), + $svg = jQuery( + "" + + " " + + "" + ), + $svgPath = $svg.find( "path" ); - $div.css( "fill-opacity", 1 ); + jQuery( "#qunit-fixture" ) + .append( $div ) + .append( $svg ); - assert.equal( $div.css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" ); - - $div.css( "column-count", 1 ); - if ( $div.css( "column-count" ) !== undefined ) { - assert.equal( $div.css( "column-count" ), 1, "Do not append px to 'column-count'" ); - } else { - assert.ok( true, "No support for column-count CSS property" ); - } + // HTML $div.css( "animation-iteration-count", 2 ); if ( $div.css( "animation-iteration-count" ) !== undefined ) { - // if $div.css( "animation-iteration-count" ) return "1", - // it actually return the default value of animation-iteration-count - assert.equal( $div.css( "animation-iteration-count" ), 2, "Do not append px to 'animation-iteration-count'" ); + // if $div.css( "animation-iteration-count" ) returns "1", + // it actually returns the default value of animation-iteration-count + assert.equal( $div.css( "animation-iteration-count" ), "2", + "Does not append px to 'animation-iteration-count'" ); } else { - assert.ok( true, "No support for animation-iteration-count CSS property" ); + assert.ok( true, "No support for 'animation-iteration-count' CSS property" ); } + + // Support: Safari <15 only, iOS <15 only + // Older Safari doesn't support 'aspect-ratio' but it supports a non-standard + // 'WebkitAspectRatio' which interferes with this test. + if ( $div.css( "-webkit-aspect-ratio" ) !== "auto" ) { + $div.css( "aspect-ratio", 2 ); + console.log( "getComputedStyle( $div[ 0 ] ).aspectRatio", + getComputedStyle( $div[ 0 ] ).aspectRatio ); + window.div = $div[ 0 ]; + if ( $div.css( "aspect-ratio" ) !== undefined ) { + assert.equal( $div.css( "aspect-ratio" ), "2 / 1", + "Does not append px to 'aspect-ratio'" ); + } else { + assert.ok( true, "No support for 'aspect-ratio' CSS property" ); + } + } else { + assert.ok( true, "No support for 'aspect-ratio' CSS property (WebKit)" ); + } + + $div.css( "border-image-slice", 2 ); + if ( $div.css( "border-image-slice" ) !== undefined ) { + assert.equal( $div.css( "border-image-slice" ), "2", + "Does not append px to 'border-image-slice'" ); + } else { + assert.ok( true, "No support for 'border-image-slice' CSS property" ); + } + + $div.css( "column-count", 1 ); + if ( $div.css( "column-count" ) !== undefined ) { + assert.equal( $div.css( "column-count" ), "1", + "Does not append px to 'column-count'" ); + } else { + assert.ok( true, "No support for 'column-count' CSS property" ); + } + + $div.css( "scale", 2 ); + if ( $div.css( "scale" ) !== undefined ) { + assert.equal( $div.css( "scale" ), "2", "Does not append px to 'scale'" ); + } else { + assert.ok( true, "No support for 'scale' CSS property" ); + } + + // SVG + + $svgPath.css( "fill-opacity", 0.5 ); + assert.equal( $svgPath.css( "fill-opacity" ), "0.5", + "Does not append px to 'fill-opacity'" ); + + $svgPath.css( "flood-opacity", 0.5 ); + if ( $svgPath.css( "flood-opacity" ) !== undefined ) { + assert.equal( $svgPath.css( "flood-opacity" ), "0.5", + "Does not append px to 'flood-opacity'" ); + } else { + assert.ok( true, "No support for 'flood-opacity' CSS property" ); + } + + $svgPath.css( "stop-opacity", 0.5 ); + assert.equal( $svgPath.css( "stop-opacity" ), "0.5", + "Does not append px to 'stop-opacity'" ); + + $svgPath.css( "stroke-miterlimit", 1.5 ); + assert.equal( $svgPath.css( "stroke-miterlimit" ), "1.5", + "Does not append px to 'stroke-miterlimit'" ); + + $svgPath.css( "stroke-opacity", 0.5 ); + assert.equal( $svgPath.css( "stroke-opacity" ), "0.5", + "Does not append px to 'stroke-opacity'" ); + } );