negative-overflow-002.html (2162B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1114306"> 3 <style> 4 .container { 5 width: 100px; height: 100px; 6 overflow: scroll; 7 border: solid 3px; 8 display: inline-flex; 9 padding: 10px; 10 gap: 10px; 11 align-items: start; 12 margin: 10px; 13 vertical-align: bottom; 14 } 15 16 .item { 17 min-width: 110px; min-height: 110px; 18 background: cyan; 19 } 20 21 .container:hover::before { 22 position: fixed; 23 top: 0; left: 0; 24 font-size: 10px; 25 content: attr(style); 26 background: yellow; 27 direction: ltr; 28 writing-mode: horizontal-tb; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 <body onload="checkLayout('.container')"> 35 <script> 36 const writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; 37 const directions = ['ltr', 'rtl']; 38 const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse']; 39 const flexWraps = ['nowrap', 'wrap', 'wrap-reverse']; 40 41 for (let writingMode of writingModes) { 42 for (let direction of directions) { 43 for (let flexDirection of flexDirections) { 44 for (let flexWrap of flexWraps) { 45 let container = document.createElement('div'); 46 container.className = 'container'; 47 container.style.writingMode = writingMode; 48 container.style.direction = direction; 49 container.style.flexDirection = flexDirection; 50 container.style.flexWrap = flexWrap; 51 52 for (let i = 0; i < 3; i++) { 53 let item = document.createElement('div'); 54 item.className = 'item'; 55 item.textContent = (i+1); 56 container.appendChild(item); 57 } 58 59 let bias = writingMode == 'horizontal-tb'; 60 if (flexWrap != 'nowrap') { 61 bias = !bias; 62 } 63 if (flexDirection == 'row' || flexDirection == 'row-reverse') { 64 bias = !bias; 65 } 66 container.setAttribute('data-expected-scroll-width', bias ? 130 : 370); 67 container.setAttribute('data-expected-scroll-height', bias ? 370 : 130); 68 69 document.body.appendChild(container); 70 } 71 } 72 } 73 } 74 </script>