contain-intrinsic-size-030.html (6161B)
1 <!DOCTYPE html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: scroll containers</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scroll-container"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <style> 9 .test { 10 contain: size; 11 display: inline-block; 12 padding: 0; 13 border: 5px solid; 14 } 15 .test::before { 16 content: ''; 17 display: block; 18 width: 40px; 19 height: 20px; 20 } 21 .big-contents::before { 22 width: 400px; 23 height: 200px; 24 } 25 .overflow-auto { 26 overflow: auto; 27 scrollbar-gutter: stable; 28 } 29 .overflow-scroll { 30 overflow: scroll; 31 } 32 .overflow-hidden { 33 overflow: hidden; 34 } 35 .cis-none { 36 contain-intrinsic-size: none none; 37 } 38 .cis-height { 39 contain-intrinsic-size: none 50px; 40 } 41 .cis-width { 42 contain-intrinsic-size: 100px none; 43 } 44 .cis-both { 45 contain-intrinsic-size: 100px 50px; 46 } 47 </style> 48 49 <div id="log"></div> 50 51 <div class="test small-contents overflow-auto cis-none" 52 data-expected-client-width="0" data-expected-client-height="0" 53 data-expected-scroll-width="40" data-expected-scroll-height="20"></div> 54 <div class="test small-contents overflow-auto cis-height" 55 data-expected-client-width="0" data-expected-client-height="50" 56 data-expected-scroll-width="40" data-expected-scroll-height="50"></div> 57 <div class="test small-contents overflow-auto cis-width" 58 data-expected-client-width="100" data-expected-client-height="0" 59 data-expected-scroll-width="100" data-expected-scroll-height="20"></div> 60 <div class="test small-contents overflow-auto cis-both" 61 data-expected-client-width="100" data-expected-client-height="50" 62 data-expected-scroll-width="100" data-expected-scroll-height="50"></div> 63 64 <div class="test small-contents overflow-scroll cis-none" 65 data-expected-client-width="0" data-expected-client-height="0" 66 data-expected-scroll-width="40" data-expected-scroll-height="20"></div> 67 <div class="test small-contents overflow-scroll cis-height" 68 data-expected-client-width="0" data-expected-client-height="50" 69 data-expected-scroll-width="40" data-expected-scroll-height="50"></div> 70 <div class="test small-contents overflow-scroll cis-width" 71 data-expected-client-width="100" data-expected-client-height="0" 72 data-expected-scroll-width="100" data-expected-scroll-height="20"></div> 73 <div class="test small-contents overflow-scroll cis-both" 74 data-expected-client-width="100" data-expected-client-height="50" 75 data-expected-scroll-width="100" data-expected-scroll-height="50"></div> 76 77 <div class="test small-contents overflow-hidden cis-none" 78 data-expected-client-width="0" data-expected-client-height="0" 79 data-expected-scroll-width="40" data-expected-scroll-height="20"></div> 80 <div class="test small-contents overflow-hidden cis-height" 81 data-expected-client-width="0" data-expected-client-height="50" 82 data-expected-scroll-width="40" data-expected-scroll-height="50"></div> 83 <div class="test small-contents overflow-hidden cis-width" 84 data-expected-client-width="100" data-expected-client-height="0" 85 data-expected-scroll-width="100" data-expected-scroll-height="20"></div> 86 <div class="test small-contents overflow-hidden cis-both" 87 data-expected-client-width="100" data-expected-client-height="50" 88 data-expected-scroll-width="100" data-expected-scroll-height="50"></div> 89 90 91 <div class="test big-contents overflow-auto cis-none" 92 data-expected-client-width="0" data-expected-client-height="0" 93 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 94 <div class="test big-contents overflow-auto cis-height" 95 data-expected-client-width="0" data-expected-client-height="50" 96 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 97 <div class="test big-contents overflow-auto cis-width" 98 data-expected-client-width="100" data-expected-client-height="0" 99 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 100 <div class="test big-contents overflow-auto cis-both" 101 data-expected-client-width="100" data-expected-client-height="50" 102 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 103 104 <div class="test big-contents overflow-scroll cis-none" 105 data-expected-client-width="0" data-expected-client-height="0" 106 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 107 <div class="test big-contents overflow-scroll cis-height" 108 data-expected-client-width="0" data-expected-client-height="50" 109 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 110 <div class="test big-contents overflow-scroll cis-width" 111 data-expected-client-width="100" data-expected-client-height="0" 112 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 113 <div class="test big-contents overflow-scroll cis-both" 114 data-expected-client-width="100" data-expected-client-height="50" 115 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 116 117 <div class="test big-contents overflow-hidden cis-none" 118 data-expected-client-width="0" data-expected-client-height="0" 119 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 120 <div class="test big-contents overflow-hidden cis-height" 121 data-expected-client-width="0" data-expected-client-height="50" 122 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 123 <div class="test big-contents overflow-hidden cis-width" 124 data-expected-client-width="100" data-expected-client-height="0" 125 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 126 <div class="test big-contents overflow-hidden cis-both" 127 data-expected-client-width="100" data-expected-client-height="50" 128 data-expected-scroll-width="400" data-expected-scroll-height="200"></div> 129 130 <script src="/resources/testharness.js"></script> 131 <script src="/resources/testharnessreport.js"></script> 132 <script src="/resources/check-layout-th.js"></script> 133 <script> 134 checkLayout(".test"); 135 </script>