subpixel-sizes-and-offsets.tentative.html (5577B)
1 <!DOCTYPE html> 2 <title>CSSOM View Module test: subpixel sizes and offsets</title> 3 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9866"> 6 <link rel="help" href="https://lists.w3.org/Archives/Public/www-style/2015Feb/0195.html"> 7 8 <div style="overflow: hidden; position: relative"> 9 <div id="target"> 10 <div id="child"></div> 11 </div> 12 </div> 13 14 <div id="log"></div> 15 <script src="/resources/testharness.js"></script> 16 <script src="/resources/testharnessreport.js"></script> 17 <script> 18 // clientWidth, offsetWidth and scrollWidth round to the nearest integer. 19 test(function() { 20 target.style.cssText = "width: 5.1px"; 21 assert_equals(target.clientWidth, 5, "clientWidth"); 22 assert_equals(target.offsetWidth, 5, "offsetWidth"); 23 assert_equals(target.scrollWidth, 5, "scrollWidth"); 24 }, "clientWidth, offsetWidth and scrollWidth round 5.1 to 5"); 25 test(function() { 26 target.style.cssText = "width: 5.5px"; 27 assert_equals(target.clientWidth, 6, "clientWidth"); 28 assert_equals(target.offsetWidth, 6, "offsetWidth"); 29 assert_equals(target.scrollWidth, 6, "scrollWidth"); 30 }, "clientWidth, offsetWidth and scrollWidth round 5.5 to 6"); 31 test(function() { 32 target.style.cssText = "width: 5.9px"; 33 assert_equals(target.clientWidth, 6, "clientWidth"); 34 assert_equals(target.offsetWidth, 6, "offsetWidth"); 35 assert_equals(target.scrollWidth, 6, "scrollWidth"); 36 }, "clientWidth, offsetWidth and scrollWidth round 5.9 to 6"); 37 38 // clientHeight, offsetHeight and scrollHeight round to the nearest integer. 39 test(function() { 40 target.style.cssText = "height: 5.1px"; 41 assert_equals(target.clientHeight, 5, "clientHeight"); 42 assert_equals(target.offsetHeight, 5, "offsetHeight"); 43 assert_equals(target.scrollHeight, 5, "scrollHeight"); 44 }, "clientHeight, offsetHeight and scrollHeight round 5.1 to 5"); 45 test(function() { 46 target.style.cssText = "height: 5.5px"; 47 assert_equals(target.clientHeight, 6, "clientHeight"); 48 assert_equals(target.offsetHeight, 6, "offsetHeight"); 49 assert_equals(target.scrollHeight, 6, "scrollHeight"); 50 }, "clientHeight, offsetHeight and scrollHeight round 5.5 to 6"); 51 test(function() { 52 target.style.cssText = "height: 5.9px"; 53 assert_equals(target.clientHeight, 6, "clientHeight"); 54 assert_equals(target.offsetHeight, 6, "offsetHeight"); 55 assert_equals(target.scrollHeight, 6, "scrollHeight"); 56 }, "clientHeight, offsetHeight and scrollHeight round 5.9 to 6"); 57 58 // offsetLeft and offsetTop round to the nearest integer. 59 test(function() { 60 target.style.cssText = "margin: 5.1px"; 61 assert_equals(target.offsetLeft, 5, "offsetLeft"); 62 assert_equals(target.offsetTop, 5, "offsetTop"); 63 }, "offsetLeft and offsetTop round 5.1 to 5"); 64 test(function() { 65 target.style.cssText = "margin: 5.5px"; 66 assert_equals(target.offsetLeft, 6, "offsetLeft"); 67 assert_equals(target.offsetTop, 6, "offsetTop"); 68 }, "offsetLeft and offsetTop round 5.5 to 6"); 69 test(function() { 70 target.style.cssText = "margin: 5.9px"; 71 assert_equals(target.offsetLeft, 6, "offsetLeft"); 72 assert_equals(target.offsetTop, 6, "offsetTop"); 73 }, "offsetLeft and offsetTop round 5.9 to 6"); 74 75 // clientLeft and clientTop round the border width to the nearest integer. 76 // Note that the computed value of a border width is snapped to device pixels, 77 // so the results can vary depending on the device pixel ratio. 78 function borderLeftWidth() { 79 return child.getBoundingClientRect().left - target.getBoundingClientRect().left; 80 } 81 function borderTopWidth() { 82 return child.getBoundingClientRect().top - target.getBoundingClientRect().top; 83 } 84 test(function() { 85 target.style.cssText = "border: 5.1px solid"; 86 assert_equals(target.clientLeft, Math.round(borderLeftWidth()), "clientLeft"); 87 assert_equals(target.clientLeft, Math.round(borderTopWidth()), "clientTop"); 88 }, "clientLeft and clientTop round 5.1"); 89 test(function() { 90 target.style.cssText = "border: 5.5px solid"; 91 assert_equals(target.clientLeft, Math.round(borderLeftWidth()), "clientLeft"); 92 assert_equals(target.clientLeft, Math.round(borderTopWidth()), "clientTop"); 93 }, "clientLeft and clientTop round 5.5"); 94 test(function() { 95 target.style.cssText = "border: 5.9px solid"; 96 assert_equals(target.clientLeft, Math.round(borderLeftWidth()), "clientLeft"); 97 assert_equals(target.clientLeft, Math.round(borderTopWidth()), "clientTop"); 98 }, "clientLeft and clientTop round 5.9"); 99 100 // Unlike the attributes above, scrollLeft and scrollTop are `double`s, 101 // so the results shouldn't be rounded. 102 child.style.cssText = "width: 50px; height: 50px"; 103 test(function() { 104 target.style.cssText = "overflow: hidden; width: 5.1px;"; 105 target.scrollTo(target.scrollWidth, target.scrollHeight); 106 assert_equals(target.scrollLeft, 44.9, "scrollLeft"); 107 assert_equals(target.scrollTop, 44.9, "scrollTop"); 108 }, "clientLeft and clientTop don't round 44.9"); 109 test(function() { 110 target.style.cssText = "overflow: hidden; width: 5.5px;"; 111 target.scrollTo(target.scrollWidth, target.scrollHeight); 112 assert_equals(target.scrollLeft, 44.5, "scrollLeft"); 113 assert_equals(target.scrollTop, 44.5, "scrollTop"); 114 }, "clientLeft and clientTop don't round 44.5"); 115 test(function() { 116 target.style.cssText = "overflow: hidden; width: 5.9px;"; 117 target.scrollTo(target.scrollWidth, target.scrollHeight); 118 assert_equals(target.scrollLeft, 44.1, "scrollLeft"); 119 assert_equals(target.scrollTop, 44.1, "scrollTop"); 120 }, "clientLeft and clientTop don't round 44.1"); 121 </script>