display-other.html (2035B)
1 <!doctype html> 2 <title>button with other display values</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 body { margin: 0 } 7 .float { width: 100px; height: 100px; float: left; background: blue; margin: 10px } 8 </style> 9 <div class=float></div> 10 <button id=button style="display: block;"><div class=float></div></button><span id=after>after</span> 11 <script> 12 // These should all behave as flow-root. 13 const displayValues = ['run-in', 'flow', 'flow-root', 'table', 'list-item', 14 'table-row-group', 'table-header-group', 'table-footer-group', 15 'table-row', 'table-cell', 'table-column-group', 'table-column', 16 'table-caption', 'ruby-base', 'ruby-text', 'ruby-base-container', 17 'ruby-text-container']; 18 const button = document.getElementById('button'); 19 const after = document.getElementById('after'); 20 function getValues() { 21 return { 22 buttonLeft: button.offsetLeft, 23 buttonTop: button.offsetTop, 24 buttonWidth: button.clientWidth, 25 buttonHeight: button.clientHeight, 26 afterLeft: after.offsetLeft, 27 afterTop: after.offsetTop, 28 }; 29 } 30 const expected = getValues(); 31 test(t => { 32 assert_equals(expected.buttonLeft, 120, 'buttonLeft'); 33 assert_equals(expected.buttonTop, 0, 'buttonTop'); 34 assert_greater_than_equal(expected.buttonWidth, 120, 'buttonWidth'); 35 assert_greater_than_equal(expected.buttonHeight, 120, 'buttonHeight'); 36 assert_equals(expected.afterLeft, 0, 'afterLeft'); 37 assert_greater_than_equal(expected.afterTop, 120, 'afterTop'); 38 }, 'display: block'); 39 for (const val of displayValues) { 40 test(t => { 41 t.add_cleanup(() => { 42 button.style.display = 'block'; 43 }); 44 assert_true(CSS.supports(`display: ${val}`), `display: ${val} is not supported`); 45 button.style.display = val; 46 const values = getValues(); 47 for (const prop in values) { 48 assert_equals(values[prop], expected[prop], prop); 49 } 50 }, `display: ${val}`); 51 } 52 </script>