position-sticky-parsing.html (1611B)
1 <!DOCTYPE html> 2 <title>Position value 'sticky' should be a valid value</title> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#position-property" /> 4 <meta name="assert" content="This test checks that setting position to 'sticky' 5 should be allowed." /> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <!-- We need something to create elements in. --> 11 <body></body> 12 13 <script> 14 const displayTypes = [ 15 'block', 16 'inline', 17 'run-in', 18 'flow', 19 'flow-root', 20 'table', 21 'flex', 22 'grid', 23 'ruby', 24 'subgrid', 25 'list-item', 26 'table-row-group', 27 'table-header-group', 28 'table-footer-group', 29 'table-row', 30 'table-cell', 31 'table-caption', 32 // Sticky does not apply to table-column or table-column-group, but the 33 // computed value should still be sticky. 34 'table-column', 35 'table-column-group', 36 'ruby-base', 37 'ruby-text', 38 'ruby-base-container', 39 'ruby-text-container', 40 'contents', 41 'none', 42 ]; 43 44 test(() => { 45 for (displayValue of displayTypes) { 46 let div = document.createElement('div'); 47 let style = `position: sticky; display: ${displayValue};`; 48 div.setAttribute('style', style); 49 document.body.appendChild(div); 50 51 // We only check display values that the browser under test recognizes. 52 if (div.style.display == displayValue) { 53 assert_equals(getComputedStyle(div).position, 'sticky', 54 `Expected sticky to be valid for display: ${displayValue}`); 55 } 56 document.body.removeChild(div); 57 } 58 }, 'The value of sticky for the position property should be parsed correctly'); 59 </script>