raster-scale-perspective-001-ref.html

<!DOCTYPE HTML>
<meta charset=UTF-8>
<style>

div.test {
  will-change: transform;
  transform-origin: top left;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 100%;
  position: absolute;
}

div.cover {
  position: absolute;
  width: 58px;
  height: 58px;
  border: 2px solid blue;
}

</style>

<body>

<script>

const test_count = 10;
const tests_per_row = 5;

for (let index = 0; index < test_count; ++index) {
  const y = Math.floor(index / tests_per_row);
  const x = index - (y * tests_per_row);

  let div = document.createElement("div");
  div.className = "test";
  div.style.left = `${x * 100}px`;
  div.style.top = `${y * 100}px`;
  const size = "60px";
  div.style.width = size;
  div.style.height = size;

  /* This should work with "1/" rather than "2/", but doesn't */
  const stop_length = 2/(Math.sqrt(2));
  div.style.backgroundImage = `repeating-linear-gradient(120deg, white 0px, white ${stop_length}px, black ${stop_length}px, black ${2 * stop_length}px)`;

  document.body.appendChild(div);

  div = document.createElement("div");
  div.className = "cover";
  div.style.left = `${x * 100 - 1}px`;
  div.style.top = `${y * 100 - 1}px`;
  document.body.appendChild(div);
}

</script>

chromium/third_party/blink/web_tests/wpt_internal/css/css-transforms/raster-scale-perspective-001-ref.html