flex.html (2295B)
1 <!doctype html> 2 <title>button with flex/inline-flex</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 #inline-flex { display: inline-flex } 7 #flex { display: flex } 8 #ref > div { display: flex } 9 10 #flexstart { 11 border: none; 12 padding: 0; 13 display: flex; 14 align-items: flex-start; 15 height: 3em; 16 } 17 18 #stretch { 19 border: none; 20 padding: 0; 21 display: flex; 22 align-items: stretch; 23 height: 3em; 24 } 25 26 #no-align-items { 27 border: none; 28 padding: 0; 29 display: flex; 30 height: 3em; 31 } 32 </style> 33 <button id=inline-flex><div>1</div><div>2</div><div>3</div><div>4</div></button> 34 <button id=flex><div>1</div><div>2</div><div>3</div><div>4</div></button> 35 <button id=ref><div><div>1</div><div>2</div><div>3</div><div>4</div></div></button> 36 37 <div><button id="flexstart"><span id="flexstart-item">abc</span></button></div> 38 39 <div><button id="stretch"><span id="stretch-item">abc</span></button></div> 40 <div><button id="no-align-items"><span id="no-align-items-item">abc</span></button></div> 41 <script> 42 const ref = document.getElementById('ref'); 43 const expectedWidth = ref.clientWidth; 44 const expectedHeight = ref.clientHeight; 45 for (const elm of [document.getElementById('inline-flex'), 46 document.getElementById('flex')]) { 47 test(() => { 48 // check that flex is supported 49 const flexValue = elm.id; 50 assert_equals(getComputedStyle(elm).display, flexValue, `${flexValue} is not supported`); 51 const width = elm.clientWidth; 52 const height = elm.clientHeight; 53 assert_equals(width, expectedWidth, 'clientWidth'); 54 assert_equals(height, expectedHeight, 'clientHeight'); 55 }, elm.id); 56 } 57 58 // crbug.com/700029 59 test(() => { 60 assert_equals(document.getElementById('flexstart').offsetTop, 61 document.getElementById('flexstart-item').offsetTop); 62 }, 'align-items:flex-start should work'); 63 64 // crbug.com/1004163 65 test(() => { 66 assert_equals(document.getElementById('stretch').offsetHeight, 67 document.getElementById('stretch-item').offsetHeight); 68 }, 'align-items:stretch should work'); 69 70 // crbug.com/40681980 71 test(() => { 72 assert_equals(document.getElementById('no-align-items').offsetHeight, 73 document.getElementById('no-align-items-item').offsetHeight); 74 }, 'No align-items should work as stretch'); 75 </script>