CSS mask vs. background unexpected ordering

Question

I have observed there is a significant difference in ordering when using CSS background-* vs. mask-*. Here is an example:

<style>
.cover {
    position: absolute;
    left: 30px;
    top: 0;
    width: 100px;
    height: 100px;
    background: green;
}

.iconBackground {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect fill="blue" width="100%" height="100%"/></svg>');
    width: 50px;
    height: 50px;
}

.iconMask {
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect fill="blue" width="100%" height="100%"/></svg>');
    background: red;
    width: 50px;
    height: 50px;
}

</style>

<div class="cover">cover</div>
<div class="iconBackground">iconBackground</div>
<div class="iconMask">iconMask</div>

I would expect that both .iconBackground (blue) and .iconMask (red) would be rendered behind .cover (green), but instead .iconMask is rendered over .cover. I find it unexpected that using mask style would change the layout ordering.

This seems to be working the same on chrome 120, edge, firefox, safari 17.2 etc. so that seems intentional. However,

1. I wonder if there is any piece of documentation mentioning this behaviour?
2. Is there any mask-* related style that would render my .iconMask behind .cover?