fieldset-flexbox.html (2282B)
1 <!DOCTYPE html> 2 <title>fieldset and CSS Flexbox</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: flex; 8 justify-content: space-around; 9 margin: 0; 10 padding: 0; 11 border: none 12 } 13 #test-inline, #ref-inline { display: inline-flex } 14 legend { 15 float: left; /* Makes it not the "rendered legend" */ 16 padding: 0; 17 } 18 </style> 19 <fieldset id=test> 20 <legend>1</legend> 21 <div>2</div> 22 <div>3</div> 23 <div>4</div> 24 <div>5</div> 25 <div>6</div> 26 <div>7</div> 27 <div>8</div> 28 <div>9</div> 29 </fieldset> 30 <hr> 31 <div id=ref> 32 <legend>1</legend> 33 <div>2</div> 34 <div>3</div> 35 <div>4</div> 36 <div>5</div> 37 <div>6</div> 38 <div>7</div> 39 <div>8</div> 40 <div>9</div> 41 </div> 42 <hr> 43 <fieldset id=test-inline> 44 <legend>1</legend> 45 <div>2</div> 46 <div>3</div> 47 <div>4</div> 48 <div>5</div> 49 <div>6</div> 50 <div>7</div> 51 <div>8</div> 52 <div>9</div> 53 </fieldset> 54 <div id=ref-inline> 55 <div>1</div> 56 <div>2</div> 57 <div>3</div> 58 <div>4</div> 59 <div>5</div> 60 <div>6</div> 61 <div>7</div> 62 <div>8</div> 63 <div>9</div> 64 </div> 65 <script> 66 test(() => { 67 const testElm = document.getElementById('test'); 68 const refElm = document.getElementById('ref'); 69 assert_equals(getComputedStyle(testElm).height, 70 getComputedStyle(refElm).height, 'height'); 71 assert_equals(testElm.querySelector('legend').offsetTop, 72 testElm.querySelector('div').offsetTop, 'offsetTop') 73 }, "Flex"); 74 75 test(() => { 76 const testElm = document.getElementById('test-inline'); 77 const refElm = document.getElementById('ref-inline'); 78 assert_equals(getComputedStyle(testElm).height, 79 getComputedStyle(refElm).height, 'height'); 80 assert_equals(testElm.querySelector('legend').offsetTop, 81 testElm.querySelector('div').offsetTop, 'offsetTop') 82 83 }, "Inline flex"); 84 85 test(() => { 86 const testElm = document.getElementById('test'); 87 testElm.style.flexDirection = 'row'; 88 const item0 = testElm.querySelectorAll('div')[0]; 89 const item1 = testElm.querySelectorAll('div')[1]; 90 assert_equals(item0.offsetTop, item1.offsetTop); 91 92 testElm.style.flexDirection = 'column'; 93 assert_true(item0.offsetTop < item1.offsetTop); 94 }, "Dynamic change of flex-direction"); 95 </script>