Skip to content

Commit

Permalink
Offset: fix iframe scrollTop/Left test for IE8 and iPhone
Browse files Browse the repository at this point in the history 
* IE8 need a doctype, otherwise IE will scroll it, but will
  still show old values. It wasn't noticable before, since IE8 will
  update values if in the dev tools you swtich to "Quirks mode"
  and then back again, then this tab will always show the correct values
  even if you update it

* iPhone resize the iframe by its content regardless of
  the width, height values, meaning it's not possible to scroll
  the iframe only its parent element

Ref ae30fb6
  • Loading branch information
@markelog
markelog committed Dec 24, 2014
1 parent d632699 commit 62a333e
Showing 1 changed file with 22 additions and 8 deletions.
30 changes: 22 additions & 8 deletions test/unit/offset.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -550,17 +550,31 @@ test("fractions (see #7730 and #7885)", function() {
test("iframe scrollTop/Left (see gh-1945)", function() {
expect( 2 );

// Tests scrollTop/Left with iframes
var ifDoc = jQuery( "#iframe" )[ 0 ].contentDocument;
jQuery( "#iframe" ).css( "width", "50px" ).css( "height", "50px" );
ifDoc.write( "<div style='width: 1000px; height: 1000px;'></div>" );
ifDoc.close();

jQuery( ifDoc ).scrollTop( 200 );
jQuery( ifDoc ).scrollLeft( 500 );
// iPhone resize the iframe by its content
// meaning it's not possible to scroll the iframe only its parent element
if ( /iphone os/i.test( navigator.userAgent ) ) {
equal( true, true, "iPhone doesn't scroll the iframes" );
equal( true, true, "iPhone doesn't scroll the iframes" );

equal( jQuery( ifDoc ).scrollTop(), 200, "$($('#iframe')[0].contentDocument).scrollTop()" );
equal( jQuery( ifDoc ).scrollLeft(), 500, "$($('#iframe')[0].contentDocument).scrollLeft()" );
} else {
// Tests scrollTop/Left with iframes
jQuery( "#iframe" ).css( "width", "50px" ).css( "height", "50px" );

// Support: IE8
// Need a doctype, otherwise IE will scroll it but will still show old values
ifDoc.write( "<!DOCTYPE><div style='width: 1000px; height: 1000px;'></div>" );

This comment has been minimized.

Sign in to view

Copy link
@mgol

mgol Dec 26, 2014

Member

Why not write the correct DOCTYPE? (i.e. <!DOCTYPE html>).

This comment has been minimized.

Sign in to view

Copy link
@markelog

markelog Dec 26, 2014

Author Member

And you don't feel weird that there is no body or head elements? But doctype, yeah, we gotta fix this right away :-).

This is minimum requirement for the test.

This comment has been minimized.

Sign in to view

Copy link
@scottgonzalez

scottgonzalez Dec 26, 2014

Member

At least fixing the doctype guarantees we're in standards mode, which is a requirement for jQuery. Technically <head> and <body> are optional, though if we want a fully valid page, there should be a <title>.

This comment has been minimized.

Sign in to view

Copy link
@markelog

markelog Dec 26, 2014

Author Member

It's already guarantees that, by our tests, but you could add it if you like, the hard part is done anyway.

But if you do that, could you add it to every iframe test we have, so we could fix them all in once?

This comment has been minimized.

Sign in to view

Copy link
@arthurvr

arthurvr Dec 26, 2014

Member

Also: uppercase doctype? Isn't that against the style guide?

// Support: IE8
ifDoc.close();

jQuery( ifDoc ).scrollTop( 200 );
jQuery( ifDoc ).scrollLeft( 500 );

equal( jQuery( ifDoc ).scrollTop(), 200, "$($('#iframe')[0].contentDocument).scrollTop()" );
equal( jQuery( ifDoc ).scrollLeft(), 500, "$($('#iframe')[0].contentDocument).scrollLeft()" );
}
});

})();

0 comments on commit 62a333e

Please sign in to comment.