grid-container-margin-border-padding-scrollbar-001.html (6093B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Grid: grid container's size includes border, padding and scrollbar.</title> 5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/> 6 <link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes"/> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/> 8 <meta name="assert" content="This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected."/> 9 <link rel="issue" href="https://crbug.com/532032"/> 10 <link href="/css/support/grid.css" rel="stylesheet"/> 11 <link href="/css/support/width-keyword-classes.css" rel="stylesheet"> 12 <link href="/css/support/height-keyword-classes.css" rel="stylesheet"> 13 <style> 14 .margin { 15 margin: 10px; 16 } 17 18 .border { 19 border: 5px solid black; 20 } 21 22 .padding { 23 padding: 20px; 24 } 25 26 .scroll { 27 overflow: scroll; 28 } 29 30 .item { 31 width: 100px; 32 height: 100px; 33 background: lime; 34 } 35 </style> 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script src="/resources/check-layout-th.js"></script> 39 </head> 40 <body> 41 <div class="grid min-content" data-expected-width="100" data-expected-height="100"> 42 <div class="item" data-expected-width="100" data-expected-height="100"></div> 43 </div> 44 45 <div class="grid min-content margin" data-expected-width="100" data-expected-height="100"> 46 <div class="item" data-expected-width="100" data-expected-height="100"></div> 47 </div> 48 49 <div class="grid min-content border" data-expected-width="110" data-expected-height="110"> 50 <div class="item" data-expected-width="100" data-expected-height="100"></div> 51 </div> 52 53 <div class="grid min-content padding" data-expected-width="140" data-expected-height="140"> 54 <div class="item" data-expected-width="100" data-expected-height="100"></div> 55 </div> 56 57 <div class="grid min-content scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100"> 58 <div class="item" data-expected-width="100" data-expected-height="100"></div> 59 </div> 60 61 <div class="grid min-content margin border" data-expected-width="110" data-expected-height="110"> 62 <div class="item" data-expected-width="100" data-expected-height="100"></div> 63 </div> 64 65 <div class="grid min-content margin padding" data-expected-width="140" data-expected-height="140"> 66 <div class="item" data-expected-width="100" data-expected-height="100"></div> 67 </div> 68 69 <div class="grid min-content margin scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100"> 70 <div class="item" data-expected-width="100" data-expected-height="100"></div> 71 </div> 72 73 <div class="grid min-content border padding" data-expected-width="150" data-expected-height="150"> 74 <div class="item" data-expected-width="100" data-expected-height="100"></div> 75 </div> 76 77 <div class="grid min-content border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110"> 78 <div class="item" data-expected-width="100" data-expected-height="100"></div> 79 </div> 80 81 <div class="grid min-content padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140"> 82 <div class="item" data-expected-width="100" data-expected-height="100"></div> 83 </div> 84 85 <div class="grid min-content margin border padding" data-expected-width="150" data-expected-height="150"> 86 <div class="item" data-expected-width="100" data-expected-height="100"></div> 87 </div> 88 89 <div class="grid min-content margin border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110"> 90 <div class="item" data-expected-width="100" data-expected-height="100"></div> 91 </div> 92 93 <div class="grid min-content margin padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140"> 94 <div class="item" data-expected-width="100" data-expected-height="100"></div> 95 </div> 96 97 <div class="grid min-content border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150"> 98 <div class="item" data-expected-width="100" data-expected-height="100"></div> 99 </div> 100 101 <div class="grid min-content margin border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150"> 102 <div class="item" data-expected-width="100" data-expected-height="100"></div> 103 </div> 104 105 <!-- This div is only for measuring scrollbar size --> 106 <div id="measure" style="overflow: scroll;"> 107 <div style="min-height: 300px;"></div> 108 </div> 109 110 <script> 111 var measure = document.getElementById('measure'); 112 var scrollbarWidth = measure.offsetWidth - measure.clientWidth; 113 var scrollbarHeight = measure.offsetHeight - measure.clientHeight; 114 115 // Here are the data-test-width-without-scrollbar (and height) attributes of all 116 // elements that have the "scroll" class. Things that contribute to the expected 117 // sizes are: 118 // 119 // - width: 120 // padding{Left,Right}, border{Left,Right}, element width and its scrollbarWidth. 121 // 122 // - height: 123 // padding{Top,Bottom}, border{Top, Bottom}, element width and its scrollbarHeight. 124 // 125 // The data-expected-width (and height) attributes are dynamically set to the elements 126 // so that we can ensure the scrollbar sizes are calculated in an engine-agnostic way. 127 var elements = document.getElementsByClassName("scroll"); 128 for (var i = 0; i < elements.length; i++) { 129 const expectedWidth = parseInt(elements[i].getAttribute("data-test-width-without-scrollbar")); 130 const expectedHeight = parseInt(elements[i].getAttribute("data-test-height-without-scrollbar")); 131 elements[i].setAttribute("data-expected-width", expectedWidth + scrollbarWidth); 132 elements[i].setAttribute("data-expected-height", expectedHeight + scrollbarHeight); 133 } 134 135 checkLayout('.grid'); 136 </script> 137 138 </body> 139 </html>