CSS properties background-size & background-position don't seem to work.

[Gozala]

Here is the an html file that can be used to reproduce the issue:

<style>
.progress {
  display: block;
  width: 100%;
  height: 40px;
  overflow: hidden;

  background-color: inherit;
  background-image: linear-gradient(135deg, #4A90E2 calc(100% - 40px), transparent calc(100% - 40px));
  background-size: 0;
  background-position: 0 20px;
  background-repeat: no-repeat;
}

.progress .value {
  display: block;
  width: calc(100% + 40px);
  height: inherit;
  background-color: inherit;
  background-image: inherit;
  outline: 1px solid red;
}

</style>
<div class="progress" max="100" value="80">
  <div class="value" style="transform: translateX(-20%)"></div>
</div>

above page in servo renders as:

In other engines it renders as:

Difference is that other engines take background-size: 0 into account and there for outer elements background is not displayed while inner element's is.

Now removing background-size property reveals another issue, which is background-position is also not taken into account. In servo removing background-size has no effect. while in other engines it renders as follows:

One more odd behavior observed in servo is revealed by resizing window, when window size is increased at some point .progress element seems to overflow under something not sure under what or why though.

[nox]

This still happens.

[pyfisch]

This now renders in servo like in other engines. See #19554.