grid.html (1217B)
1 <!doctype html> 2 <title>button with grid/inline-grid</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 #inline-grid { display: inline-grid } 7 #grid { display: grid } 8 #ref > div { display: grid } 9 #inline-grid, #grid, #ref > div { grid-template: auto auto / auto auto } 10 </style> 11 <button id=inline-grid><div>1</div><div>2</div><div>3</div><div>4</div></button> 12 <button id=grid><div>1</div><div>2</div><div>3</div><div>4</div></button> 13 <button id=ref><div><div>1</div><div>2</div><div>3</div><div>4</div></div></button> 14 <script> 15 const ref = document.getElementById('ref'); 16 const expectedWidth = ref.clientWidth; 17 const expectedHeight = ref.clientHeight; 18 for (const elm of [document.getElementById('inline-grid'), 19 document.getElementById('grid')]) { 20 test(() => { 21 // check that grid is supported 22 const gridValue = elm.id; 23 assert_equals(getComputedStyle(elm).display, gridValue, `${gridValue} is not supported`); 24 const width = elm.clientWidth; 25 const height = elm.clientHeight; 26 assert_equals(width, expectedWidth, 'clientWidth'); 27 assert_equals(height, expectedHeight, 'clientHeight'); 28 }, elm.id); 29 } 30 </script>