scrollable-overflow-transform-unreachable-region.html (3720B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <title>Scrollable Overflow of a Scroll Container with Transformed Child in Unreachable Scrollable Overflow Region.</title> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#unreachable-scrollable-overflow-region"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> 7 <link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com"> 8 <script src=/resources/testharness.js></script> 9 <script src=/resources/testharnessreport.js></script> 10 <style> 11 body { margin: 0 } 12 .wrapper { 13 width: 100px; 14 height: 200px; 15 overflow: scroll; 16 } 17 .inner { 18 width: 100px; 19 height: 200px; 20 background-color: lime; 21 transform: translate(-3px, -6px) scale(1.10); 22 } 23 </style> 24 <div class="wrapper"> 25 <div class="inner"></div> 26 </div> 27 <script> 28 const wrapper = document.querySelector(".wrapper"); 29 const contentBox = { 30 width: 100, 31 height: 200, 32 }; 33 34 function getCurrentTestName(display, direction, writingMode, flexDirection, flexWrap) { 35 return `display: ${display}; ` + 36 `direction: ${direction}; ` + 37 `writing-mode: ${writingMode}; ` + 38 `flex-direction: ${flexDirection}; ` + 39 `flex-wrap: ${flexWrap};`; 40 } 41 42 for (let display of ["flow-root", "flex", "grid"]) { 43 for (let flexDirection of ["row", "row-reverse", "column", "column-reverse"]) { 44 if (flexDirection != "row" && display != "flex") { 45 // Don't bother retesting with all flexDirection values unless we're actually a flex container 46 continue; 47 } 48 for (let flexWrap of ["nowrap", "wrap-reverse"]) { 49 if (flexWrap != "nowrap" && display != "flex") { 50 // Don't bother retesting with all flexWrap values unless we're actually a flex container 51 continue; 52 } 53 for (let direction of ["ltr", "rtl"]) { 54 for (let writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl"]) { 55 wrapper.style.display = display; 56 wrapper.style.direction = direction; 57 wrapper.style.writingMode = writingMode; 58 wrapper.style.flexDirection = flexDirection; 59 wrapper.style.flexWrap = flexWrap; 60 // Suppress scrollbars because they get added to the padding are 61 // and would need to account for them in flexbox. 62 wrapper.style.scrollbarWidth = display == "flex" ? "none" : ""; 63 let vertical = writingMode.startsWith("vertical"); 64 let scrollToTop = vertical && direction == "rtl"; 65 let scrollToLeft = (!vertical && direction == "rtl") || writingMode == "vertical-rl"; 66 let flexMainAxisIsVertical = flexDirection.startsWith("row") == vertical; 67 if (display == "flex") { 68 if (flexDirection.endsWith("-reverse")) { 69 if (flexMainAxisIsVertical) { 70 scrollToTop = !scrollToTop; 71 } else { 72 scrollToLeft = !scrollToLeft; 73 } 74 } 75 if (flexWrap == "wrap-reverse") { 76 if (flexMainAxisIsVertical) { 77 scrollToLeft = !scrollToLeft; 78 } else { 79 scrollToTop = !scrollToTop; 80 } 81 } 82 } 83 currentTestName = getCurrentTestName(display, direction, writingMode, flexDirection, flexWrap); 84 test(function() { 85 assert_equals(wrapper.scrollWidth, (scrollToLeft ? 108 : 102), "scrollWidth"); 86 }, "scrollWidth of " + currentTestName); 87 test(function() { 88 assert_equals(wrapper.scrollHeight, (scrollToTop ? 216 : 204), "scrollHeight"); 89 }, "scrollHeight of " + currentTestName); 90 } 91 } 92 } 93 } 94 } 95 </script>