transform-translate-background-002.html (1052B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Transforms: Dynamically translate gradient background on root element</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-rendering"> 7 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=988446"> 8 <link rel="match" href="transform-translate-background-001-ref.html"> 9 <meta name="assert" content="Checks that the linear gradient is not modified when you dynamically translate the root element. The test passes if you see only green."> 10 <script src="/common/reftest-wait.js"></script> 11 <style> 12 html { 13 background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%); 14 overflow: hidden; 15 } 16 </style> 17 <div style="height: 400vh;"></div> 18 <script> 19 requestAnimationFrame(() => requestAnimationFrame(() => { 20 document.documentElement.style.transform = "translate(0, -250vh)"; 21 takeScreenshot(); 22 })); 23 </script> 24 </html>