scroll-offsets-fractional-zoom.html (1756B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface"> 6 <meta name="assert" content="This test checks that the scroll offsets behave as expected on fractional zoom situations."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 .scrollable-area { 11 width: 100px; 12 height: 100px; 13 overflow: scroll; 14 } 15 .content { 16 width: 500px; 17 height: 500px; 18 background: lightgrey; 19 } 20 </style> 21 <div id="target" class="scrollable-area"> 22 <div class="content"></div> 23 </div> 24 <script> 25 function runTest(zoom, x, y) { 26 // Scroll offsets might be snapped to device pixels for performance or 27 // rendering quality. Since scroll{Top,Left} round, we need to allow up to 28 // 1px of difference with the expected value. 29 const EPSILON = 1; 30 31 target.scrollTo(x, y); 32 test(() => { 33 assert_approx_equals(target.scrollLeft, x, EPSILON, `scrollLeft should be ${x}`); 34 }, `scrollLeft after scrollTo(${x}, ${y}) with 'zoom: ${zoom}'`); 35 test(() => { 36 assert_approx_equals(target.scrollTop, y, EPSILON, `scrollTop should be ${y}`); 37 }, `scrollTop after scrollTo(${x}, ${y}) with 'zoom: ${zoom}'`); 38 } 39 40 function runTests(zoom) { 41 target.style.zoom = zoom; 42 43 runTest(zoom, 0, 0); 44 runTest(zoom, 1, 2); 45 runTest(zoom, 13, 61); 46 runTest(zoom, 75, 100); 47 } 48 49 runTests(0.75); 50 runTests(0.9); 51 runTests(1); 52 runTests(1.13); 53 runTests(1.25); 54 runTests(1.5); 55 runTests(1.9); 56 runTests(2); 57 runTests(3.33); 58 </script>