<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Choose the correct gradient repeat count even when there's a non-identity pattern matrix</title>

<style>

html {
  overflow: hidden;
}

div {
  box-sizing: border-box;
  width: 240px;
  height: 320px;

  /* Scale a 240x320 gradient down by a factor of 8 into a 30x40 border image. */
  /* 240x320 gives a diagonal of 400px, so we should get 5 repetitions of a 80px long gradient. */
  /* tan(36.8698976deg) == 240 / 320 */
  border-left: 30px solid;
  border-top: 40px solid;
  border-image: repeating-linear-gradient(-36.8698976deg, blue, blue 40px, lime 40px, lime 80px);
}

</style>

<div></div>