Wrong painting order of grid item backgrounds #34534
Description
Given the following (demo):
<!doctype html><meta charset="utf-8">
<style>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
background: yellow;
width: 384px;
}
img {
/* servo#34533 <https://github.com/servo/servo/issues/34533> */
max-width: 100%;
}
.bg {
background: lime;
justify-self: start;
align-self: start;
padding: 1em;
}
</style>
<div class="grid">
<img style="grid-area: 1 / 1 / span 1 / span 4;" src="21.b.png">
<img style="grid-area: 2 / 3 / span 1 / span 4;" src="21.b.png">
<div style="grid-area: 1 / 1;" class="bg">a</div>
<div style="grid-area: 1 / 3;" class="bg">a</div>
<div style="grid-area: 1 / 5;" class="bg">a</div>
<div style="grid-area: 2 / 2;" class="bg">a</div>
<div style="grid-area: 2 / 4;" class="bg">a</div>
<div style="grid-area: 2 / 6;" class="bg">a</div>
</div>| servo | firefox |
|---|---|
 |
 |
Servo should paint grid item backgrounds over any overlapped grid items, per this example in the spec.