subpixel-transform-changes-004.html (1796B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Transforms Test: Subpixel transform changes trivial 3D</title> 5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> 7 <link rel="match" href="reference/subpixel-transform-changes-004-ref.html"> 8 <meta name="assert" content="Test checks that subpixel transform changes work as expected regardless of trivial 3D transforms."> 9 10 <div id="translateX1" style="transform: translate3d(0.12px, 0px, 0px);">transform: translate3d(0.48px, 0px, 0px);</div> 11 <div id="translateX2" style="transform: translate3d(0.56px, 0px, 0px);">transform: translate3d(3.17px, 0px, 0px);</div> 12 <div id="translateX3" style="transform: translate3d(1.87px, 0px, 0px);">transform: translate3d(0.34px, 0px, 0px);</div> 13 14 <div id="translateY1" style="transform: translate3d(0px, 0.12px, 0px);">transform: translate3d(0px, 0.48px, 0px);</div> 15 <div id="translateY2" style="transform: translate3d(0px, 0.56px, 0px);">transform: translate3d(0px, 3.17px, 0px);</div> 16 <div id="translateY3" style="transform: translate3d(0px, 1.87px, 0px);">transform: translate3d(0px, 0.34px, 0px);</div> 17 18 <script> 19 requestAnimationFrame(() => requestAnimationFrame(() => { 20 translateX1.style.transform = "translate3d(0.48px, 0px, 0px)"; 21 translateX2.style.transform = "translate3d(3.17px, 0px, 0px)"; 22 translateX3.style.transform = "translate3d(0.34px, 0px, 0px)"; 23 24 translateY1.style.transform = "translate3d(0px, 0.48px, 0px)"; 25 translateY2.style.transform = "translate3d(0px, 3.17px, 0px)"; 26 translateY3.style.transform = "translate3d(0px, 0.34px, 0px)"; 27 28 document.documentElement.classList.remove("reftest-wait"); 29 })); 30 </script> 31 </html>