Note: There are several lazy loaded images bugs T207929, T199351, T209183. We'll probably want to fix these 3 bugs together.
=== Steps to Reproduce
# Visit https://en.m.wikipedia.org/wiki/2018_FIFA_World_Cup
# Scroll quickly to the bottom of the page
=== Expected Results
- Images load in place without shifting contents
=== Actual Results
- Images sometimes shift the contents horizontally and vertically:
{F23621457, size=full}
=== Environments Observed
**Browser Version **
- Chromium v66.0.3359.181
**OS Version**
- Ubuntu v18.04
**Device Model**
- Desktop
**Device Language**
- English
= Precursor
Ensure T197188 and T200518 is estimated and also on the sprint board.
= Developer notes
Original HTML (ignoring noscript)
```
<span style="white-space:nowrap">
<span class="flagicon">
<span class="lazy-image-placeholder" style="width: 23px;height: 15px;" data-src="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/23px-Flag_of_Tunisia.svg.png" data-alt="" data-width="23" data-height="15" data-srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/35px-Flag_of_Tunisia.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/45px-Flag_of_Tunisia.svg.png 2x" data-class="thumbborder"> </span>
</span>
<a href="/wiki/Tunisia_national_football_team" title="Tunisia national football team">Tunisia</a>
</span>
```
is replaced with
```
<span style="white-space:nowrap">
<span class="flagicon">
<img class="thumbborder image-lazy-loaded" width="23" height="15" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/23px-Flag_of_Tunisia.svg.png" alt="" style="width: 23px;height: 15px;" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/35px-Flag_of_Tunisia.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/45px-Flag_of_Tunisia.svg.png 2x"> </span>
<a href="/wiki/Tunisia_national_football_team" title="Tunisia national football team">Tunisia</a>
</span>
```
The issue here is the thumbborder class adds a border to the image which changes the height and width of the image.
Let's ensure the lazy loaded image placeholder retains this thumbborder.
e.g.
```
<span class="lazy-image-placeholder"
```
becomes
```
<span class="lazy-image-placeholder thumbborder"
```
https://gerrit.wikimedia.org/r/448415 pulls out the LazyImageTransform from the MobileFormatter.
Right now we don't inspect the classes of the img tag - only the style.
Another root of issue is inconsistency in css between img and lazy-image-placeholder.
```lang=less
.content img {
vertical-align: middle;
}
```
The thing is that originally placeholder is a span that dynamically changed on img. Therefore css rule starts working after that and causes that shift.
See: https://gerrit.wikimedia.org/g/mediawiki/skins/MinervaNeue/+/146cb2bb3b3acb3c0c3da84e97fc2f585cd95230/resources/skins.minerva.content.styles/images.less
= Acceptance criteria
[] When creating the lazy-image-placeholder copy across the thumbborder class if it exists.
[] To minimise risk, do not copy across other classes, but let's ensure our solution allows expansion in future in case other classes need to be copied across
[] Make sure to add a test case to the new LazyImageTransform class.
== QA Results - Beta - Aug 8, 2020
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- | ----- |
| 1 | ❌ | T199351#6370886 |
== QA Results - Beta - Aug 17, 2020
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- | ----- |
| 1 | ❌ | T199351#6391790 |
== QA Results - Beta - Aug 24, 2020
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- | ----- |
| 1 | ✅ | T199351#6408055 |
== QA Results - Prod - Aug 26, 2020
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- | ----- |
| 1 | :x: | T199351#6414848 |
== QA Results - Prod - Aug 27, 2020
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- | ----- |
| 1 | :x: | T199351#6417638 |
== QA Results - Prod - Aug 27, 2020
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- | ----- |
| 1 | ✅ | T199351#6418022 |