WordPress.org
Get WordPress

Make WordPress Core

Changeset 37034


Ignore:
Timestamp:
03/18/2016 07:44:50 PM (9 years ago)
Author:
azaozz
Message:

Responsive Images: the src of the image has to be first in the srcset, because of a bug in iOS8. Update the unit tests to reflect the changes.

Props jaspermdegroot, joemcgill, azaozz.
Fixes #35030.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/media.php

    r37022 r37034  
    10681068     */
    10691069    foreach ( $image_sizes as $image ) {
     1070        $is_src = false;
    10701071
    10711072        // Check if image meta isn't corrupted.
    … …  
    10761077        // If the file name is part of the `src`, we've confirmed a match.
    10771078        if ( ! $src_matched && false !== strpos( $image_src, $dirname . $image['file'] ) ) {
    1078             $src_matched = true;
     1079            $src_matched = $is_src = true;
    10791080        }
    10801081
    … …  
    10881089         * that file is in the 'src' attribute.
    10891090         */
    1090         if ( $max_srcset_image_width && $image['width'] > $max_srcset_image_width &&
    1091             false === strpos( $image_src, $image['file'] ) ) {
    1092 
     1091        if ( $max_srcset_image_width && $image['width'] > $max_srcset_image_width && ! $is_src ) {
    10931092            continue;
    10941093        }
    … …  
    11101109        if ( abs( $constrained_size[0] - $expected_size[0] ) <= 1 && abs( $constrained_size[1] - $expected_size[1] ) <= 1 ) {
    11111110            // Add the URL, descriptor, and value to the sources array to be returned.
    1112             $sources[ $image['width'] ] = array(
     1111            $source = array(
    11131112                'url'        => $image_baseurl . $image['file'],
    11141113                'descriptor' => 'w',
    11151114                'value'      => $image['width'],
    11161115            );
     1116
     1117            // The 'src' image has to be the first in the 'srcset', because of a bug in iOS8. See #35030.
     1118            if ( $is_src ) {
     1119                $sources = array( $image['width'] => $source ) + $sources;
     1120            } else {
     1121                $sources[ $image['width'] ] = $source;
     1122            }
    11171123        }
    11181124    }

  • trunk/tests/phpunit/tests/media.php

    r37022 r37034  
    834834     * Helper function to get image size array from size "name"
    835835     */
    836     function _get_image_size_array_from_name( $size_name ) {
    837         switch ( $size_name ) {
    838             case 'thumbnail':
    839                 return array( 150, 150 );
    840             case 'medium':
    841                 return array( 300, 225 );
    842             case 'medium_large':
    843                 return array( 768, 576 );
    844             case 'large':
    845                 return array( 1024, 768 );
    846             case 'full':
    847                 return array( 1600, 1200 ); // actual size of ../data/images/test-image-large.png
    848             default:
    849                 return array( 800, 600 ); // soft-resized image
    850         }
     836    function _get_image_size_array_from_meta( $image_meta, $size_name ) {
     837        $array = false;
     838
     839        if ( is_array( $image_meta ) ) {
     840            if ( 'full' === $size_name && isset( $image_meta['width'] ) && isset( $image_meta['height'] ) ) {
     841                $array = array( $image_meta['width'], $image_meta['height'] );
     842            } elseif ( isset( $image_meta['sizes'][ $size_name ]['width'] ) && isset( $image_meta['sizes'][ $size_name ]['height'] ) ) {
     843                $array = array( $image_meta['sizes'][ $size_name ]['width'], $image_meta['sizes'][ $size_name ]['height'] );
     844            }
     845        }
     846
     847        return $array;
     848    }
     849
     850    /**
     851     * Helper function to move the src image to the first position in the expected srcset string.
     852     */
     853    function _src_first( $srcset, $src_url, $src_width ) {
     854        $src_string = $src_url . ' ' . $src_width . 'w';
     855        $src_not_first = ', ' . $src_string;
     856
     857        if ( strpos( $srcset, $src_not_first ) ) {
     858            $srcset = str_replace( $src_not_first, '', $srcset );
     859            $srcset = $src_string . ', ' . $srcset;
     860        }
     861
     862        return $srcset;
    851863    }
    852864
    … …  
    871883        }
    872884
    873         $expected = "";
     885        $expected = '';
     886
     887        foreach ( $image_meta['sizes'] as $name => $size ) {
     888            // Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4.
     889            if ( in_array( $name, $intermediates ) ) {
     890                $expected .= $uploads_dir_url . $year_month . '/' . $size['file'] . ' ' . $size['width'] . 'w, ';
     891            }
     892        }
     893
     894        // Add the full size width at the end.
     895        $expected .= $uploads_dir_url . $image_meta['file'] . ' ' . $image_meta['width'] .'w';
     896
     897        foreach ( $intermediates as $int ) {
     898            $image_url = wp_get_attachment_image_url( self::$large_id, $int );
     899            $size_array = $this->_get_image_size_array_from_meta( $image_meta, $int );
     900            $expected_srcset = $this->_src_first( $expected, $image_url, $size_array[0] );
     901            $this->assertSame( $expected_srcset, wp_calculate_image_srcset( $size_array, $image_url, $image_meta ) );
     902        }
     903    }
     904
     905    /**
     906     * @ticket 33641
     907     */
     908    function test_wp_calculate_image_srcset_no_date_uploads() {
     909        global $_wp_additional_image_sizes;
     910
     911        // Disable date organized uploads
     912        add_filter( 'upload_dir', '_upload_dir_no_subdir' );
     913
     914        // Make an image.
     915        $filename = DIR_TESTDATA . '/images/test-image-large.png';
     916        $id = self::factory()->attachment->create_upload_object( $filename );
     917
     918        $image_meta = wp_get_attachment_metadata( $id );
     919        $uploads_dir_url = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/';
     920
     921        // Set up test cases for all expected size names.
     922        $intermediates = array( 'medium', 'medium_large', 'large', 'full' );
     923
     924        foreach ( $_wp_additional_image_sizes as $name => $additional_size ) {
     925            if ( ! $_wp_additional_image_sizes[$name]['crop'] || 0 === $_wp_additional_image_sizes[$name]['height'] ) {
     926                $intermediates[] = $name;
     927            }
     928        }
     929
     930        $expected = '';
     931
     932        foreach ( $image_meta['sizes'] as $name => $size ) {
     933            // Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4.
     934            if ( in_array( $name, $intermediates ) ) {
     935                $expected .= $uploads_dir_url . $size['file'] . ' ' . $size['width'] . 'w, ';
     936            }
     937        }
     938
     939        // Add the full size width at the end.
     940        $expected .= $uploads_dir_url . $image_meta['file'] . ' ' . $image_meta['width'] .'w';
     941
     942        foreach ( $intermediates as $int ) {
     943            $size_array = $this->_get_image_size_array_from_meta( $image_meta, $int );
     944            $image_url = wp_get_attachment_image_url( $id, $int );
     945            $expected_srcset = $this->_src_first( $expected, $image_url, $size_array[0] );
     946            $this->assertSame( $expected_srcset, wp_calculate_image_srcset( $size_array, $image_url, $image_meta ) );
     947        }
     948
     949        // Remove the attachment
     950        wp_delete_attachment( $id );
     951        remove_filter( 'upload_dir', '_upload_dir_no_subdir' );
     952    }
     953
     954    /**
     955     * @ticket 33641
     956     */
     957    function test_wp_calculate_image_srcset_with_edits() {
     958        // For this test we're going to mock metadata changes from an edit.
     959        // Start by getting the attachment metadata.
     960        $image_meta = wp_get_attachment_metadata( self::$large_id );
     961        $image_url = wp_get_attachment_image_url( self::$large_id, 'medium' );
     962        $size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
     963
     964        // Copy hash generation method used in wp_save_image().
     965        $hash = 'e' . time() . rand(100, 999);
     966
     967        $filename_base = basename( $image_meta['file'], '.png' );
     968
     969        // Add the hash to the image URL
     970        $image_url = str_replace( $filename_base, $filename_base . '-' . $hash, $image_url );
     971
     972        // Replace file paths for full and medium sizes with hashed versions.
     973        $image_meta['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['file'] );
     974        $image_meta['sizes']['medium']['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['sizes']['medium']['file'] );
     975        $image_meta['sizes']['medium_large']['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['sizes']['medium_large']['file'] );
     976        $image_meta['sizes']['large']['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['sizes']['large']['file'] );
     977
     978        // Calculate a srcset array.
     979        $sizes = explode( ', ', wp_calculate_image_srcset( $size_array, $image_url, $image_meta ) );
     980
     981        // Test to confirm all sources in the array include the same edit hash.
     982        foreach ( $sizes as $size ) {
     983            $this->assertTrue( false !== strpos( $size, $hash ) );
     984        }
     985    }
     986
     987    /**
     988     * @ticket 35106
     989     */
     990    function test_wp_calculate_image_srcset_with_absolute_path_in_meta() {
     991        global $_wp_additional_image_sizes;
     992
     993        $year_month = date('Y/m');
     994        $image_meta = wp_get_attachment_metadata( self::$large_id );
     995        $uploads_dir_url = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/';
     996
     997        // Set up test cases for all expected size names.
     998        $intermediates = array( 'medium', 'medium_large', 'large', 'full' );
     999
     1000        // Add any soft crop intermediate sizes.
     1001        foreach ( $_wp_additional_image_sizes as $name => $additional_size ) {
     1002            if ( ! $_wp_additional_image_sizes[$name]['crop'] || 0 === $_wp_additional_image_sizes[$name]['height'] ) {
     1003                $intermediates[] = $name;
     1004            }
     1005        }
     1006
     1007        $expected = '';
    8741008
    8751009        foreach( $image_meta['sizes'] as $name => $size ) {
    … …  
    8831017        $expected .= $uploads_dir_url . $image_meta['file'] . ' ' . $image_meta['width'] .'w';
    8841018
     1019        // Prepend an absolute path to simulate a pre-2.7 upload
     1020        $image_meta['file'] = 'H:\home\wordpress\trunk/wp-content/uploads/' . $image_meta['file'];
     1021
    8851022        foreach ( $intermediates as $int ) {
    8861023            $image_url = wp_get_attachment_image_url( self::$large_id, $int );
    887             $size_array = $this->_get_image_size_array_from_name( $int );
    888             $this->assertSame( $expected, wp_calculate_image_srcset( $size_array, $image_url, $image_meta ) );
    889         }
    890     }
    891 
    892     /**
    893      * @ticket 33641
    894      */
    895     function test_wp_calculate_image_srcset_no_date_uploads() {
    896         global $_wp_additional_image_sizes;
    897 
    898         // Disable date organized uploads
    899         add_filter( 'upload_dir', '_upload_dir_no_subdir' );
    900 
    901         // Make an image.
    902         $filename = DIR_TESTDATA . '/images/test-image-large.png';
    903         $id = self::factory()->attachment->create_upload_object( $filename );
    904 
    905         $image_meta = wp_get_attachment_metadata( $id );
    906         $uploads_dir_url = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/';
    907 
    908         // Set up test cases for all expected size names.
    909         $intermediates = array( 'medium', 'medium_large', 'large', 'full' );
    910 
    911         foreach ( $_wp_additional_image_sizes as $name => $additional_size ) {
    912             if ( ! $_wp_additional_image_sizes[$name]['crop'] || 0 === $_wp_additional_image_sizes[$name]['height'] ) {
    913                 $intermediates[] = $name;
    914             }
    915         }
    916 
    917         $expected = "";
    918 
    919         foreach( $image_meta['sizes'] as $name => $size ) {
    920             // Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4.
    921             if ( in_array( $name, $intermediates ) ) {
    922                 $expected .= $uploads_dir_url . $size['file'] . ' ' . $size['width'] . 'w, ';
    923             }
    924         }
    925 
    926         // Add the full size width at the end.
    927         $expected .= $uploads_dir_url . $image_meta['file'] . ' ' . $image_meta['width'] .'w';
    928 
    929         foreach ( $intermediates as $int ) {
    930             $size_array = $this->_get_image_size_array_from_name( $int );
    931             $image_url = wp_get_attachment_image_url( $id, $int );
    932             $this->assertSame( $expected, wp_calculate_image_srcset( $size_array, $image_url, $image_meta ) );
    933         }
    934 
    935         // Remove the attachment
    936         wp_delete_attachment( $id );
    937         remove_filter( 'upload_dir', '_upload_dir_no_subdir' );
    938     }
    939 
    940     /**
    941      * @ticket 33641
    942      */
    943     function test_wp_calculate_image_srcset_with_edits() {
    944         // For this test we're going to mock metadata changes from an edit.
    945         // Start by getting the attachment metadata.
    946         $image_meta = wp_get_attachment_metadata( self::$large_id );
    947         $image_url = wp_get_attachment_image_url( self::$large_id, 'medium' );
    948         $size_array = $this->_get_image_size_array_from_name( 'medium' );
    949 
    950         // Copy hash generation method used in wp_save_image().
    951         $hash = 'e' . time() . rand(100, 999);
    952 
    953         $filename_base = basename( $image_meta['file'], '.png' );
    954 
    955         // Add the hash to the image URL
    956         $image_url = str_replace( $filename_base, $filename_base . '-' . $hash, $image_url );
    957 
    958         // Replace file paths for full and medium sizes with hashed versions.
    959         $image_meta['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['file'] );
    960         $image_meta['sizes']['medium']['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['sizes']['medium']['file'] );
    961         $image_meta['sizes']['medium_large']['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['sizes']['medium_large']['file'] );
    962         $image_meta['sizes']['large']['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['sizes']['large']['file'] );
    963 
    964         // Calculate a srcset array.
    965         $sizes = explode( ', ', wp_calculate_image_srcset( $size_array, $image_url, $image_meta ) );
    966 
    967         // Test to confirm all sources in the array include the same edit hash.
    968         foreach ( $sizes as $size ) {
    969             $this->assertTrue( false !== strpos( $size, $hash ) );
    970         }
    971     }
    972 
    973     /**
    974      * @ticket 35106
    975      */
    976     function test_wp_calculate_image_srcset_with_absolute_path_in_meta() {
    977         global $_wp_additional_image_sizes;
    978 
    979         $year_month = date('Y/m');
    980         $image_meta = wp_get_attachment_metadata( self::$large_id );
    981         $uploads_dir_url = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/';
    982 
    983         // Set up test cases for all expected size names.
    984         $intermediates = array( 'medium', 'medium_large', 'large', 'full' );
    985 
    986         // Add any soft crop intermediate sizes.
    987         foreach ( $_wp_additional_image_sizes as $name => $additional_size ) {
    988             if ( ! $_wp_additional_image_sizes[$name]['crop'] || 0 === $_wp_additional_image_sizes[$name]['height'] ) {
    989                 $intermediates[] = $name;
    990             }
    991         }
    992 
    993         $expected = '';
    994 
    995         foreach( $image_meta['sizes'] as $name => $size ) {
    996             // Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4.
    997             if ( in_array( $name, $intermediates ) ) {
    998                 $expected .= $uploads_dir_url . $year_month . '/' . $size['file'] . ' ' . $size['width'] . 'w, ';
    999             }
    1000         }
    1001 
    1002         // Add the full size width at the end.
    1003         $expected .= $uploads_dir_url . $image_meta['file'] . ' ' . $image_meta['width'] .'w';
    1004 
    1005         // Prepend an absolute path to simulate a pre-2.7 upload
    1006         $image_meta['file'] = 'H:\home\wordpress\trunk/wp-content/uploads/' . $image_meta['file'];
    1007 
    1008         foreach ( $intermediates as $int ) {
    1009             $image_url = wp_get_attachment_image_url( self::$large_id, $int );
    1010             $size_array = $this->_get_image_size_array_from_name( $int );
    1011             $this->assertSame( $expected, wp_calculate_image_srcset( $size_array, $image_url, $image_meta ) );
    1012         }
     1024            $size_array = $this->_get_image_size_array_from_meta( $image_meta, $int );
     1025            $expected_srcset = $this->_src_first( $expected, $image_url, $size_array[0] );
     1026            $this->assertSame( $expected_srcset, wp_calculate_image_srcset( $size_array, $image_url, $image_meta ) );
     1027        }
    10131028    }
    10141029
    … …  
    11241139        );
    11251140
    1126         $expected_srcset = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-300x150.png 300w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-768x384.png 768w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-1024x512.png 1024w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test.png 2000w';
     1141        $expected_srcset = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test.png 2000w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-300x150.png 300w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-768x384.png 768w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-1024x512.png 1024w';
    11271142
    11281143        $this->assertSame( $expected_srcset, wp_calculate_image_srcset( $size_array, $image_src, $image_meta ) );
    … …  
    12271242        $expected = "";
    12281243
    1229         foreach( $image_meta['sizes'] as $name => $size ) {
     1244        foreach ( $image_meta['sizes'] as $name => $size ) {
    12301245            // Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4.
    12311246            if ( in_array( $name, $intermediates ) ) {
    … …  
    12361251        $expected .= $uploads_dir . $image_meta['file'] . ' ' . $image_meta['width'] .'w';
    12371252
    1238         $this->assertSame( $expected, $srcset );
     1253        $expected_srcset = $this->_src_first( $expected, $uploads_dir . $image_meta['file'], $size_array[0] );
     1254
     1255        $this->assertSame( $expected_srcset, $srcset );
    12391256    }
    12401257
    … …  
    12741291     */
    12751292    function test_wp_get_attachment_image_sizes() {
    1276         // Test sizes against the default WP sizes.
    1277         $intermediates = array('thumbnail', 'medium', 'medium_large', 'large');
     1293        // Test sizes against the default WP sizes.
     1294        $intermediates = array('thumbnail', 'medium', 'medium_large', 'large');
    12781295
    12791296        // Make sure themes aren't filtering the sizes array.
    12801297        remove_all_filters( 'wp_calculate_image_sizes' );
    12811298
    1282         foreach( $intermediates as $int_size ) {
    1283             $image = wp_get_attachment_image_src( self::$large_id, $int_size );
     1299        foreach( $intermediates as $int_size ) {
     1300            $image = wp_get_attachment_image_src( self::$large_id, $int_size );
    12841301
    12851302            $expected = '(max-width: ' . $image[1] . 'px) 100vw, ' . $image[1] . 'px';
    … …  
    12951312    function test_wp_calculate_image_sizes() {
    12961313        // Test sizes against the default WP sizes.
    1297         $intermediates = array('thumbnail', 'medium', 'medium_large', 'large');
    1298         $image_meta = wp_get_attachment_metadata( self::$large_id );
     1314        $intermediates = array( 'thumbnail', 'medium', 'medium_large', 'large' );
     1315        $image_meta = wp_get_attachment_metadata( self::$large_id );
    12991316
    13001317        // Make sure themes aren't filtering the sizes array.
    13011318        remove_all_filters( 'wp_calculate_image_sizes' );
    13021319
    1303         foreach( $intermediates as $int_size ) {
    1304             $size_array = $this->_get_image_size_array_from_name( $int_size );
    1305             $image_src = $image_meta['sizes'][$int_size]['file'];
     1320        foreach ( $intermediates as $int_size ) {
     1321            $size_array = $this->_get_image_size_array_from_meta( $image_meta, $int_size );
     1322            $image_src = $image_meta['sizes'][ $int_size ]['file'];
    13061323            list( $width, $height ) = $size_array;
    13071324
    … …  
    13181335    function test_wp_make_content_images_responsive() {
    13191336        $image_meta = wp_get_attachment_metadata( self::$large_id );
    1320         $size_array = $this->_get_image_size_array_from_name( 'medium' );
     1337        $size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
    13211338
    13221339        $srcset = sprintf( 'srcset="%s"', wp_get_attachment_image_srcset( self::$large_id, $size_array, $image_meta ) );
    … …  
    14511468    function test_wp_make_content_images_responsive_schemes() {
    14521469        $image_meta = wp_get_attachment_metadata( self::$large_id );
    1453         $size_array = $this->_get_image_size_array_from_name( 'medium' );
     1470        $size_array = $this->_get_image_size_array_from_meta( $image_meta, 'medium' );
    14541471
    14551472        $srcset = sprintf( 'srcset="%s"', wp_get_attachment_image_srcset( self::$large_id, $size_array, $image_meta ) );
    … …  
    14811498
    14821499        $this->assertSame( $expected, $actual );
    1483 }
     1500    }
    14841501
    14851502    /**
    … …  
    15181535        $_SERVER['HTTPS'] = 'on';
    15191536
    1520         $expected = 'https://' . WP_TESTS_DOMAIN . '/wp-content/uploads/test-300x150.jpg 300w, https://' . WP_TESTS_DOMAIN . '/wp-content/uploads/test-1024x512.jpg 1024w, https://' . WP_TESTS_DOMAIN . '/wp-content/uploads/test.jpg 1200w';
     1537        $expected = 'https://' . WP_TESTS_DOMAIN . '/wp-content/uploads/test-1024x512.jpg 1024w, https://' . WP_TESTS_DOMAIN . '/wp-content/uploads/test-300x150.jpg 300w, https://' . WP_TESTS_DOMAIN . '/wp-content/uploads/test.jpg 1200w';
    15211538        $actual   = wp_calculate_image_srcset( $size_array, $image_url, $image_meta );
    15221539
Note: See TracChangeset for help on using the changeset viewer.