library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-12-09 08:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tests: Make Android Browser 4.0-4.3 dimensions tests green

Browse Source 
Android Browser disregards td's box-sizing, treating it like it was content-box.
Unlike in IE, offsetHeight shares the same issue so there's no easy way to
workaround the issue without incurring high size penalty. Let's at least check
we get the size as the browser sees it.

Also, fix the nearby support comment syntax.

Closes gh-4335
This commit is contained in:
Michał Gołębiowski-Owczarek 2019-03-27 15:47:33 +01:00 committed by GitHub
parent 4455f8db4e
commit a2a73db99c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
test/unit/dimensions.js
View File

@ -757,13 +757,16 @@ QUnit.test( "outerWidth/Height for table cells and textarea with border-box in I
$firstTh = jQuery( "<th style='width: 200px;padding: 5px' />" ), $firstTh = jQuery( "<th style='width: 200px;padding: 5px' />" ),
$secondTh = jQuery( "<th style='width: 190px;padding: 5px' />" ), $secondTh = jQuery( "<th style='width: 190px;padding: 5px' />" ),
$thirdTh = jQuery( "<th style='width: 180px;padding: 5px' />" ), $thirdTh = jQuery( "<th style='width: 180px;padding: 5px' />" ),
// Support Firefox 63, Edge 16-17, Android 8, iOS 7-11
// Support: Firefox 63, Edge 16-17, Android 8, iOS 7-11
// These browsers completely ignore the border-box and height settings // These browsers completely ignore the border-box and height settings
// The computed height is instead just line-height + border // The computed height is instead just line-height + border
// Either way, what we're doing in css.js is correct // Either way, what we're doing in css.js is correct
$td = jQuery( "<td style='height: 20px;padding: 5px;border: 1px solid;line-height:18px'>text</td>" ), $td = jQuery( "<td style='height: 20px;padding: 5px;border: 1px solid;line-height:18px'>text</td>" ),
$tbody = jQuery( "<tbody />" ).appendTo( $table ), $tbody = jQuery( "<tbody />" ).appendTo( $table ),
$textarea = jQuery( "<textarea style='height: 0;padding: 2px;border: 1px solid;box-sizing: border-box' />" ).appendTo( "#qunit-fixture" ); $textarea = jQuery( "<textarea style='height: 0;padding: 2px;border: 1px solid;box-sizing: border-box' />" ).appendTo( "#qunit-fixture" );
jQuery( "<tr />" ).appendTo( $thead ).append( $firstTh ); jQuery( "<tr />" ).appendTo( $thead ).append( $firstTh );
jQuery( "<tr />" ).appendTo( $thead ).append( $secondTh ); jQuery( "<tr />" ).appendTo( $thead ).append( $secondTh );
jQuery( "<tr />" ).appendTo( $thead ).append( $thirdTh ); jQuery( "<tr />" ).appendTo( $thead ).append( $thirdTh );
@ -772,7 +775,18 @@ QUnit.test( "outerWidth/Height for table cells and textarea with border-box in I
assert.strictEqual( $firstTh.outerWidth(), 200, "First th has outerWidth 200." ); assert.strictEqual( $firstTh.outerWidth(), 200, "First th has outerWidth 200." );
assert.strictEqual( $secondTh.outerWidth(), 200, "Second th has outerWidth 200." ); assert.strictEqual( $secondTh.outerWidth(), 200, "Second th has outerWidth 200." );
assert.strictEqual( $thirdTh.outerWidth(), 200, "Third th has outerWidth 200." ); assert.strictEqual( $thirdTh.outerWidth(), 200, "Third th has outerWidth 200." );
assert.strictEqual( $td.outerHeight(), 30, "outerHeight of td with border-box should include padding." );
// Support: Android 4.0-4.3 only
// Android Browser disregards td's box-sizing, treating it like it was content-box.
// Unlike in IE, offsetHeight shares the same issue so there's no easy way to workaround
// the issue without incurring high size penalty. Let's at least check we get the size
// as the browser sees it.
if ( /android 4\.[0-3]/i.test( navigator.userAgent ) ) {
assert.ok( [ 30, 32 ].indexOf( $td.outerHeight() ) > -1,
"outerHeight of td with border-box should include padding." );
} else {
assert.strictEqual( $td.outerHeight(), 30, "outerHeight of td with border-box should include padding." );
}
assert.strictEqual( $textarea.outerHeight(), 6, "outerHeight of textarea with border-box should include padding and border." ); assert.strictEqual( $textarea.outerHeight(), 6, "outerHeight of textarea with border-box should include padding and border." );
} ); } );