Blitz - WPT: transform-3d-scales-different-x-y-dynamic-001.html

wpt / css / css-transforms / transform-3d-scales-different-x-y-dynamic-001.html

/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html

<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8" />
<title>Raster transform 3D scales with different X and Y components changing dynamically</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="match" href="transform-3d-scales-different-x-y-dynamic-001-ref.html" />
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-7">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-scale3d" />
<meta name="assert" content="Checks that when the X and Y components of a 3D scale are changed dynamically, the result looks like when setting the value from the very beginning." />
<style>
:root {
  overflow: hidden;
}
.horizontal, .vertical {
  position: absolute;
  top: 0;
  left: 0;
}
.vertical {
  writing-mode: vertical-lr;
}
.test {
  transform-origin: 0 0;
  line-height: 20px;
  block-size: 20px;
  inline-size: max-content;
  border: 5px solid;
  border-color: blue orange;
  margin-inline-start: calc(30px * var(--index));
}
.horizontal > .test {
  transform: scale3d(var(--scale), 1, 1);
}
.vertical > .test {
  transform: scale3d(1, var(--scale), 1);
}
</style>
<body>
<script>
"use strict";
const horizontal = document.createElement("div");
horizontal.className = "vertical";
const vertical = document.createElement("div");
vertical.className = "horizontal";
document.body.append(horizontal, vertical);
const scales = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 17, 20, 25, 30].reverse();
for (let i = 0; i < scales.length; ++i) {
  const scale = scales[i];
  const htest = document.createElement("div");
  htest.className = "test";
  htest.textContent = "Lorem";
  htest.style.cssText = `--scale: ${scale}; --index: ${i+1}`;
  horizontal.appendChild(htest);
  const vtest = htest.cloneNode();
  vtest.textContent = "Ipsum";
  vertical.appendChild(vtest);
}
document.addEventListener("TestRendered", () => {
  horizontal.className = "horizontal";
  vertical.className = "vertical";
  document.documentElement.classList.remove("reftest-wait");
});
</script>
</body>
</html>

/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001-ref.html

<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
:root {
  overflow: hidden;
}
.horizontal, .vertical {
  position: absolute;
  top: 0;
  left: 0;
}
.vertical {
  writing-mode: vertical-lr;
}
.test {
  transform-origin: 0 0;
  line-height: 20px;
  block-size: 20px;
  inline-size: max-content;
  border: 5px solid;
  border-color: blue orange;
  margin-inline-start: calc(30px * var(--index));
}
.horizontal > .test {
  transform: scale3d(var(--scale), 1, 1);
}
.vertical > .test {
  transform: scale3d(1, var(--scale), 1);
}
</style>
<body>
<script>
"use strict";
const horizontal = document.createElement("div");
horizontal.className = "horizontal";
const vertical = document.createElement("div");
vertical.className = "vertical";
document.body.append(horizontal, vertical);
const scales = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 17, 20, 25, 30].reverse();
for (let i = 0; i < scales.length; ++i) {
  const scale = scales[i];
  const htest = document.createElement("div");
  htest.className = "test";
  htest.textContent = "Lorem";
  htest.style.cssText = `--scale: ${scale}; --index: ${i+1}`;
  horizontal.appendChild(htest);
  const vtest = htest.cloneNode();
  vtest.textContent = "Ipsum";
  vertical.appendChild(vtest);
}
</script>
</body>