| Index: trunk/extensions/WebFonts/tests/qunit/ext.webfonts.tests.js |
| — | — | @@ -25,7 +25,7 @@ |
| 26 | 26 | continue; |
| 27 | 27 | } |
| 28 | 28 | cssText = lastStyleSheet.cssRules[0].cssText; |
| 29 | | - if ( cssText.indexOf( '@font-face' ) >= 0 && cssText.indexOf( fontFamilyName ) >= 0 ) { |
| | 29 | + if ( cssText.indexOf( '@font-face' ) !== -1 && cssText.indexOf( fontFamilyName ) !== -1 ) { |
| 30 | 30 | return true; |
| 31 | 31 | } |
| 32 | 32 | } |
| — | — | @@ -44,8 +44,7 @@ |
| 45 | 45 | |
| 46 | 46 | // Remove the quotes from font names |
| 47 | 47 | for ( fontIndex = 0; fontIndex < fontList.length; ++fontIndex ) { |
| 48 | | - fontList[fontIndex] = fontList[fontIndex].replace( /^["']/, '' ); |
| 49 | | - fontList[fontIndex] = fontList[fontIndex].replace( /["']$/, '' ); |
| | 48 | + fontList[fontIndex] = fontList[fontIndex].replace( /^["']/, '' ).replace( /["']$/, '' ); |
| 50 | 49 | } |
| 51 | 50 | |
| 52 | 51 | return fontList; |
| — | — | @@ -65,63 +64,66 @@ |
| 66 | 65 | } ); |
| 67 | 66 | |
| 68 | 67 | test( '-- Application of a web font to the page and its removal', function() { |
| | 68 | + // @fixme TODO: test that the right thing was written to the log |
| | 69 | + |
| 69 | 70 | if ( !mw.webfonts.isBrowserSupported ) { |
| 70 | 71 | return; |
| 71 | 72 | } |
| 72 | 73 | |
| 73 | | - expect( 18 ); |
| | 74 | + expect( 15 ); |
| 74 | 75 | |
| 75 | 76 | var invalidFont = 'NonExistingFont'; |
| 76 | 77 | strictEqual( mw.webfonts.set( invalidFont ), undefined, 'A non-existent font is not initialized' ); |
| 77 | | - // TODO: test that the right thing was written to the log |
| 78 | 78 | |
| 79 | | - var $body = $( 'body' ); |
| 80 | | - var bodyLang = $body.attr( 'lang' ); |
| | 79 | + var $doc = $( 'html' ); |
| | 80 | + var docLang = $doc.attr( 'lang' ); |
| 81 | 81 | var oldConfig = { |
| 82 | | - fontFamily: $body.css( 'font-family' ), |
| 83 | | - fontSize: $body.css( 'font-size' ) |
| | 82 | + fontFamily: $doc.css( 'font-family' ), |
| | 83 | + fontSize: $doc.css( 'font-size' ) |
| 84 | 84 | }; |
| 85 | | - var teluguFont = mw.webfonts.config.languages.te[0]; |
| 86 | | - $body.attr( 'lang', 'te' ); |
| | 85 | + var fontName = mw.webfonts.config.languages.my[2]; |
| | 86 | + $doc.attr( 'lang', 'my' ); |
| 87 | 87 | |
| | 88 | + var $body = $( 'body' ); |
| 88 | 89 | var $inputElement = $( '<input value="input content"/>' ); |
| 89 | | - var $selectElement = $( '<select><option value="foobar">Foobar</option></select>' ); |
| 90 | 90 | var $textareaElement = $( '<textarea>textarea content</textarea>' ); |
| 91 | | - $( '#qunit-fixture' ).append( $inputElement, $selectElement, $textareaElement ); |
| | 91 | + $( '#qunit-fixture' ).append( $inputElement, $textareaElement ); |
| 92 | 92 | |
| 93 | | - assertTrue( mw.webfonts.set( teluguFont ), 'Attempted to load a Telugu font for the whole page' ); |
| | 93 | + assertTrue( mw.webfonts.set( fontName ), 'Attempted to load a Telugu font for the whole page' ); |
| 94 | 94 | var fallbackFonts = 'Helvetica, Arial, sans-serif'; |
| 95 | 95 | deepEqual( oldConfig, mw.webfonts.oldconfig, 'Previous body css was saved properly' ); |
| 96 | 96 | |
| 97 | 97 | // Font application |
| 98 | | - var expectedFontFamilyValue = fontFamilyList( "'" + teluguFont + "', " + fallbackFonts ); |
| | 98 | + var expectedFontFamilyValue = fontFamilyList( "'" + fontName + "', " + fallbackFonts ); |
| 99 | 99 | deepEqual( fontFamilyList( $body.css( 'font-family' ) ), |
| 100 | 100 | expectedFontFamilyValue, 'The web font was applied to font-family of body' ); |
| 101 | 101 | deepEqual( fontFamilyList( $inputElement.css( 'font-family' ) ), |
| 102 | 102 | expectedFontFamilyValue, 'The web font was applied to font-family of input' ); |
| 103 | | - deepEqual( fontFamilyList( $selectElement.css( 'font-family' ) ), |
| 104 | | - expectedFontFamilyValue, 'The web font was applied to font-family of select' ); |
| 105 | 103 | deepEqual( fontFamilyList( $textareaElement.css( 'font-family' ) ), |
| 106 | 104 | expectedFontFamilyValue, 'The web font was applied to font-family of textarea' ); |
| 107 | 105 | |
| 108 | 106 | // Cookie set |
| 109 | | - equals( $.cookie( 'webfonts-font' ), teluguFont, 'Correct cookie for the font was set' ); |
| | 107 | + equals( $.cookie( 'webfonts-font' ), fontName, 'Correct cookie for the font was set' ); |
| 110 | 108 | |
| 111 | 109 | // Reset everything |
| 112 | 110 | strictEqual( mw.webfonts.set( false ), undefined, 'Reset body after testing font application' ); |
| 113 | | - equals( $body.css( 'font-family' ), oldConfig.fontFamily, 'Previous font-family for body was restored' ); |
| 114 | | - equals( $body.css( 'font-size' ), oldConfig.fontSize, 'Previous font-size for body was restored' ); |
| | 111 | + equals( $doc.css( 'font-family' ), oldConfig.fontFamily, 'Previous font-family for body was restored' ); |
| | 112 | + equals( $doc.css( 'font-size' ), oldConfig.fontSize, 'Previous font-size for body was restored' ); |
| 115 | 113 | equals( $inputElement.css( 'font-family' ), oldConfig.fontFamily, 'Previous font-family for body was restored' ); |
| 116 | 114 | equals( $inputElement.css( 'font-size' ), oldConfig.fontSize, 'Previous font-size for body was restored' ); |
| 117 | | - equals( $selectElement.css( 'font-family' ), oldConfig.fontFamily, 'Previous font-family for the select element was restored' ); |
| 118 | | - equals( $selectElement.css( 'font-size' ), oldConfig.fontSize, 'Previous font-size for the select element restored' ); |
| 119 | 115 | equals( $textareaElement.css( 'font-family' ), oldConfig.fontFamily, 'Previous font-family for the textarea element was restored' ); |
| 120 | 116 | equals( $textareaElement.css( 'font-size' ), oldConfig.fontSize, 'Previous font-size for the textarea element was restored' ); |
| 121 | 117 | |
| 122 | 118 | // Cookie set |
| 123 | 119 | equals( $.cookie( 'webfonts-font' ), 'none', 'The cookie was removed' ); |
| 124 | 120 | |
| 125 | | - $body.attr( 'lang', bodyLang ); |
| | 121 | + // docLang could be undefined, in which case jQuery will treat |
| | 122 | + // the invocation as a getter instead of a setter. |
| | 123 | + if ( docLang !== undefined ) { |
| | 124 | + $doc.attr( 'lang', docLang ); |
| | 125 | + } else { |
| | 126 | + $doc.removeAttr( 'lang' ); |
| | 127 | + } |
| 126 | 128 | } ); |
| 127 | 129 | |
| 128 | 130 | test( '-- Dynamic font loading', function() { |
| — | — | @@ -185,33 +187,48 @@ |
| 186 | 188 | return; |
| 187 | 189 | } |
| 188 | 190 | |
| 189 | | - expect( 11 ); |
| | 191 | + expect( 8 ); |
| 190 | 192 | |
| | 193 | + // Save |
| | 194 | + var oldFonts = mw.webfonts.fonts; |
| 191 | 195 | mw.webfonts.fonts = []; |
| 192 | 196 | |
| 193 | | - var $testElement = $( '<p>Some content</p>' ); |
| 194 | | - $( '#qunit-fixture' ).append( $testElement ); |
| | 197 | + var $qunitFixture = $( '#qunit-fixture' ); |
| | 198 | + var $latinTest = $( '<p>Some content</p>' ); |
| | 199 | + var $invalidTest = $( '<p>Some content</p>' ); |
| | 200 | + var $malayalamTest = $( '<p>Some content</p>' ); |
| 195 | 201 | |
| 196 | 202 | var latinWebFont = 'RufScript'; |
| 197 | 203 | var fallbackFonts = 'Helvetica, Arial, sans-serif'; |
| 198 | | - $testElement.attr( 'style', 'font-family: ' + latinWebFont + ', ' + fallbackFonts ); |
| | 204 | + var invalidFont = 'NonExistingFont'; |
| | 205 | + var malayalamFont = mw.webfonts.config.languages.ml[0]; |
| | 206 | + |
| | 207 | + $latinTest.css( 'font-family', latinWebFont + ', ' + fallbackFonts ); |
| | 208 | + $invalidTest.css( 'font-family', invalidFont + ', ' + fallbackFonts ); |
| | 209 | + $malayalamTest.css( 'font-family', invalidFont + ', ' + malayalamFont + ', ' + fallbackFonts ); |
| | 210 | + $qunitFixture.append( $latinTest, $invalidTest, $malayalamTest ); |
| | 211 | + |
| | 212 | + // Trigger a re-render for Chrome, |
| | 213 | + // which otherwise will not synchronize css property into a string for style="" attribute |
| | 214 | + // We don't actually use innerHTML anywhere, just triggering it will fix Chrome. |
| | 215 | + $qunitFixture.prop('innerHTML'); |
| | 216 | + |
| 199 | 217 | assertTrue( $.inArray( latinWebFont, mw.webfonts.fonts ) === -1, 'Latin font not loaded yet' ); |
| 200 | | - ok( mw.webfonts.loadFontsForFontFamilyStyle(), 'Loaded fonts from font-family' ); |
| 201 | | - assertTrue( $.inArray( latinWebFont, mw.webfonts.fonts ) >= 0, 'Latin font loaded' ); |
| 202 | | - assertTrue( isFontFaceLoaded( latinWebFont ), 'New css rule added to the document for Latin' ); |
| | 218 | + assertTrue( $.inArray( malayalamFont, mw.webfonts.fonts ) === -1, 'Fallback font not loaded yet' ); |
| 203 | 219 | |
| 204 | | - var invalidFont = 'NonExistingFont'; |
| 205 | | - $testElement.attr( 'style', 'font-family: ' + invalidFont + ', ' + fallbackFonts ); |
| 206 | | - ok( mw.webfonts.loadFontsForFontFamilyStyle(), 'Attempted to load non-existing fonts specified in font-family' ); |
| 207 | | - assertTrue( $.inArray( invalidFont, mw.webfonts.fonts ) === -1, 'Font not loaded since it is not existing, including fallback fonts' ); |
| 208 | | - assertFalse( isFontFaceLoaded( invalidFont ), 'No new css rule added to the document since the font does not exist' ); |
| | 220 | + mw.webfonts.loadFontsForFontFamilyStyle(); |
| 209 | 221 | |
| 210 | | - var malayalamFont = mw.webfonts.config.languages.ml[0]; |
| 211 | | - $testElement.attr( 'style', 'font-family: ' + invalidFont + ', ' + malayalamFont + ', ' + fallbackFonts ); |
| 212 | | - assertTrue( $.inArray( malayalamFont, mw.webfonts.fonts ) === -1, 'Fallback font not loaded yet' ); |
| 213 | | - ok( mw.webfonts.loadFontsForFontFamilyStyle(), 'Loading fonts from font-family' ); |
| 214 | | - assertTrue( $.inArray( malayalamFont, mw.webfonts.fonts ) >= 0, 'A fallback font was loaded' ); |
| 215 | | - assertTrue( isFontFaceLoaded( malayalamFont ), 'New css rule added to the document for fallback font' ); |
| | 222 | + assertTrue( $.inArray( latinWebFont, mw.webfonts.fonts ) !== -1, 'Latin font loaded' ); |
| | 223 | + assertTrue( isFontFaceLoaded( latinWebFont ), 'Latin font css rule added to the document' ); |
| | 224 | + |
| | 225 | + assertTrue( $.inArray( invalidFont, mw.webfonts.fonts ) === -1, 'NonExistingFont not loaded since it is not existing, including fallback fonts' ); |
| | 226 | + assertFalse( isFontFaceLoaded( invalidFont ), 'NonExistingFont css rule not added to the document' ); |
| | 227 | + |
| | 228 | + assertTrue( $.inArray( malayalamFont, mw.webfonts.fonts ) !== -1, 'Fallback font loaded' ); |
| | 229 | + assertTrue( isFontFaceLoaded( malayalamFont ), 'Fallback font css rule added to the document' ); |
| | 230 | + |
| | 231 | + // Restore |
| | 232 | + mw.webfonts.fonts = oldFonts; |
| 216 | 233 | } ); |
| 217 | 234 | |
| 218 | 235 | test( '-- Build the menu', function() { |
| Index: trunk/extensions/WebFonts/resources/ext.webfonts.js |
| — | — | @@ -39,8 +39,10 @@ |
| 40 | 40 | } |
| 41 | 41 | |
| 42 | 42 | // Set the web font and the fallback fonts. |
| 43 | | - // font-family of <input>, <select> and <textarea> must be changed explicitly. |
| 44 | | - $( 'body, input, select, textarea' ).css( |
| | 43 | + // font-family of <input> and <textarea> must be changed explicitly. |
| | 44 | + // @fixme TODO: Figure out a way to set font styling on <select> elements. |
| | 45 | + // (if done, also add to reset() and to unit test). |
| | 46 | + $( 'body, input, textarea' ).css( |
| 45 | 47 | 'font-family', '"' + font + '", Helvetica, Arial, sans-serif' |
| 46 | 48 | ); |
| 47 | 49 | |
| — | — | @@ -62,7 +64,7 @@ |
| 63 | 65 | * Reset the font with old configuration |
| 64 | 66 | */ |
| 65 | 67 | reset: function() { |
| 66 | | - $( 'body, input, select, textarea' ).css( { |
| | 68 | + $( 'body, input, textarea' ).css( { |
| 67 | 69 | fontFamily: mw.webfonts.oldconfig.fontFamily, |
| 68 | 70 | fontSize: mw.webfonts.oldconfig.fontSize |
| 69 | 71 | }); |
| — | — | @@ -250,13 +252,13 @@ |
| 251 | 253 | * Scan the page for tags with lang attr and load the default font |
| 252 | 254 | * for that language if available. |
| 253 | 255 | */ |
| 254 | | - loadFontsForLangAttr: function() { |
| | 256 | + loadFontsForLangAttr: function () { |
| 255 | 257 | var languages = mw.webfonts.config.languages; |
| 256 | 258 | var requested = [mw.config.get( 'wgUserVariant' ), mw.config.get( 'wgContentLanguage' ), |
| 257 | 259 | mw.config.get( 'wgUserLanguage' ), mw.config.get( 'wgPageContentLanguage' )]; |
| 258 | 260 | var fontFamily = false; |
| 259 | 261 | // Find elements with the lang attribute. |
| 260 | | - $( 'body' ).find( '*[lang]' ).each( function( i, el ) { |
| | 262 | + $( 'body' ).find( '*[lang]' ).each( function ( i, el ) { |
| 261 | 263 | // If the lang attribute value is same as one of |
| 262 | 264 | // contentLang,useLang, variant, no need to do this. |
| 263 | 265 | if( $.inArray( el.lang , requested ) === -1 ) { |
| — | — | @@ -275,12 +277,12 @@ |
| 276 | 278 | * Scan the page for tags with font-family style declarations |
| 277 | 279 | * If that font is available, embed it. |
| 278 | 280 | */ |
| 279 | | - loadFontsForFontFamilyStyle: function() { |
| | 281 | + loadFontsForFontFamilyStyle: function () { |
| 280 | 282 | // If there are tags with font-family style definition, get a list of fonts to be loaded |
| 281 | | - $( 'body' ).find( '*[style]' ).each( function( i, el ) { |
| 282 | | - if( el.style.fontFamily ) { |
| | 283 | + $( 'body' ).find( '[style]' ).each( function ( i, el ) { |
| | 284 | + if ( el.style.fontFamily ) { |
| 283 | 285 | var fontFamilyItems = el.style.fontFamily.split( ',' ); |
| 284 | | - $.each( fontFamilyItems, function( i, fontFamily ) { |
| | 286 | + $.each( fontFamilyItems, function ( i, fontFamily ) { |
| 285 | 287 | // Remove the ' characters if any. |
| 286 | 288 | fontFamily = $.trim( fontFamily.replace( /'/g, '' ) ); |
| 287 | 289 | mw.webfonts.addFont( fontFamily ); |