Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/309409
Change subject: Copy height and width attributes from style to lazy placeholder
......................................................................
Copy height and width attributes from style to lazy placeholder
This reverses the mistake in T143768 and instead copies the dimensions
from the style attribute to the element so that a placeholder element
cannot be without dimensions.
Note I'm not 100% sure on whether this fix reintroduces T143768. If
someone is able to test this on a page with Math equations and remove
this part of the commit message I'd be very appreciative.
This avoids mistakedly loading certain elements without any dimensions
Bug: T144734
Change-Id: If2b81135d52601614803c4834dd15bde7a77aea9
---
M includes/MobileFormatter.php
M resources/mobile.startup/Skin.js
M tests/phpunit/MobileFormatterTest.php
3 files changed, 35 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/09/309409/1
diff --git a/includes/MobileFormatter.php b/includes/MobileFormatter.php
index 67d0cc9..70aa705 100644
--- a/includes/MobileFormatter.php
+++ b/includes/MobileFormatter.php
@@ -254,10 +254,18 @@
foreach ( $el->getElementsByTagName( 'img' ) as $img ) {
$parent = $img->parentNode;
- $width = $img->getAttribute( 'width' );
- $height = $img->getAttribute( 'height' );
- $dimensionsStyle = ( $width ? "width: {$width}px;" : ''
) .
- ( $height ? "height: {$height}px;" : '' );
+ $style = $img->getAttribute( 'style' );
+ $w = [];
+ $h = [];
+ preg_match( '/.*?width\: ?(.*?)[\;$]/', $style, $w );
+ preg_match( '/.*?height\: ?(.*?)[\;$]/', $style, $h );
+ $width = isset( $w[1] ) ? $w[1] :
+ ( $img->getAttribute( 'width' ) ?
$img->getAttribute( 'width' ) . 'px' : '' );
+ $height = isset( $h[1] ) ? $h[1] :
+ ( $img->getAttribute( 'height' ) ?
$img->getAttribute( 'height' ) . 'px' : '' );
+
+ $dimensionsStyle = ( $width ? "width: {$width};" : '' )
.
+ ( $height ? "height: {$height};" : '' );
// HTML only clients
$noscript = $doc->createElement( 'noscript' );
diff --git a/resources/mobile.startup/Skin.js b/resources/mobile.startup/Skin.js
index 783c8ae..49da904 100644
--- a/resources/mobile.startup/Skin.js
+++ b/resources/mobile.startup/Skin.js
@@ -221,9 +221,7 @@
if (
mw.viewport.isElementCloseToViewport( placeholder, offset ) &&
- // If a placeholder is an
inline element without a height attribute set it will record as hidden
- // to circumvent this we also
need to test the height (see T143768).
- ( $placeholder.is( ':visible' )
|| $placeholder.height() === 0 )
+ $placeholder.is( ':visible' )
) {
self.loadImage( $placeholder );
return false;
diff --git a/tests/phpunit/MobileFormatterTest.php
b/tests/phpunit/MobileFormatterTest.php
index e25881e..af9542d 100644
--- a/tests/phpunit/MobileFormatterTest.php
+++ b/tests/phpunit/MobileFormatterTest.php
@@ -45,6 +45,12 @@
};
$citeUrl = SpecialPage::getTitleFor( 'MobileCite', '0'
)->getLocalUrl();
+ $imageStyles = '<img src="math.jpg" style="vertical-align:
-3.505ex; width: 24.412ex; height:7.343ex; background:none;">';
+ $placeholderStyles = '<span class="lazy-image-placeholder" '
+ . 'style="width: 24.412ex;height: 7.343ex;" '
+ . 'data-src="math.jpg">'
+ . '</span>';
+ $noscriptStyles = '<noscript>' . $imageStyles . '</noscript>';
$originalImage = '<img alt="foo" src="foo.jpg" width="100" '
. 'height="100" srcset="foo-1.5x.jpg 1.5x, foo-2x.jpg
2x">';
$placeholder = '<span class="lazy-image-placeholder" '
@@ -109,6 +115,22 @@
$enableSections,
false, false, true,
],
+ // Test lazy loading of images with style attributes
+ [
+ '<p>text</p><h2>heading 1</h2><p>text</p>' .
$imageStyles
+ . '<h2>heading 2</h2>abc',
+ '<div class="mf-section-0"><p>text</p></div>'
+ . '<h2 class="section-heading">' .
self::SECTION_INDICATOR
+ . 'heading 1</h2>'
+ . '<div
class="mf-section-1"><p>text</p>'
+ . $noscriptStyles
+ . $placeholderStyles
+ . '</div>'
+ . '<h2 class="section-heading">' .
self::SECTION_INDICATOR
+ . 'heading 2</h2><div
class="mf-section-2">abc</div>',
+ $enableSections,
+ false, false, true,
+ ],
// https://phabricator.wikimedia.org/T130025, last
section filtered
[
'<p>text</p><h2>heading 1</h2><p>text</p>' .
$originalImage
--
To view, visit https://gerrit.wikimedia.org/r/309409
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If2b81135d52601614803c4834dd15bde7a77aea9
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
