fieldset-grid.html (1927B)
1 <!DOCTYPE html> 2 <title>fieldset and CSS Grid</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 #test, #ref, #test-inline, #ref-inline { 7 display: grid; 8 grid-template-columns: auto 50px auto; 9 grid-template-rows: auto 50px auto; 10 margin: 0; 11 padding: 0; 12 border: none 13 } 14 #test-inline, #ref-inline { display: inline-grid } 15 legend { 16 float: left; /* Makes it not the "rendered legend" */ 17 padding: 0; 18 } 19 </style> 20 <fieldset id=test> 21 <legend>1</legend> 22 <div>2</div> 23 <div>3</div> 24 <div>4</div> 25 <div>5</div> 26 <div>6</div> 27 <div>7</div> 28 <div>8</div> 29 <div>9</div> 30 </fieldset> 31 <hr> 32 <div id=ref> 33 <div>1</div> 34 <div>2</div> 35 <div>3</div> 36 <div>4</div> 37 <div>5</div> 38 <div>6</div> 39 <div>7</div> 40 <div>8</div> 41 <div>9</div> 42 </div> 43 <hr> 44 <fieldset id=test-inline> 45 <legend>1</legend> 46 <div>2</div> 47 <div>3</div> 48 <div>4</div> 49 <div>5</div> 50 <div>6</div> 51 <div>7</div> 52 <div>8</div> 53 <div>9</div> 54 </fieldset> 55 <div id=ref-inline> 56 <div>1</div> 57 <div>2</div> 58 <div>3</div> 59 <div>4</div> 60 <div>5</div> 61 <div>6</div> 62 <div>7</div> 63 <div>8</div> 64 <div>9</div> 65 </div> 66 <script> 67 test(() => { 68 const testElm = document.getElementById('test'); 69 const refElm = document.getElementById('ref'); 70 assert_equals(getComputedStyle(testElm).height, 71 getComputedStyle(refElm).height, 'height'); 72 assert_equals(testElm.querySelector('legend').offsetTop, 73 testElm.querySelector('div').offsetTop, 'offsetTop') 74 }, "Grid"); 75 76 test(() => { 77 const testElm = document.getElementById('test-inline'); 78 const refElm = document.getElementById('ref-inline'); 79 assert_equals(getComputedStyle(testElm).height, 80 getComputedStyle(refElm).height, 'height'); 81 assert_equals(testElm.querySelector('legend').offsetTop, 82 testElm.querySelector('div').offsetTop, 'offsetTop') 83 84 }, "Inline grid"); 85 </script>