Discrepancies in ‘width’ when <img> is a grid item #34533
Description
Given the following (demo):
<!doctype html><meta charset="utf-8">
<style>
.container {
width: 768px;
background: lime;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
background: yellow;
margin: 1em 0;
}
img:first-child { grid-area: 1 / 1 / span 1 / span 4; }
img:last-child { grid-area: 2 / 3 / span 1 / span 4; }
.auto img { width: auto; }
.hundred img { width: 100%; }
.max img { max-width: 100%; }
</style>
<div class="container">
<!-- each image is 512x128 (4:1) -->
<div style="width: 384px;" class="grid auto"><img src="21.b.png"><img src="21.b.png"></div>
<div style="width: 384px;" class="grid hundred"><img src="21.b.png"><img src="21.b.png"></div>
<div style="width: 384px;" class="grid max"><img src="21.b.png"><img src="21.b.png"></div>
<hr>
<div style="width: /* 384px = 768px × */ 50%;" class="grid auto"><img src="21.b.png"><img src="21.b.png"></div>
<div style="width: /* 384px = 768px × */ 50%;" class="grid hundred"><img src="21.b.png"><img src="21.b.png"></div>
<div style="width: /* 384px = 768px × */ 50%;" class="grid max"><img src="21.b.png"><img src="21.b.png"></div>
</div>| servo | firefox |
|---|---|
 |
 |
- Servo treats the ‘width: auto’ items like ‘max-width: 100%’, while Firefox leaves those items at their natural width
- Servo treats the ‘width: 100%’ items as 100% of the grid container width, while Firefox treats those items like ‘max-width: 100%’
- Servo and Firefox both treat the ‘max-width: 100%’ items as 100% of the width of ‘span 4’ × ‘1fr’
Which engine is correct?