display-computed.html (1525B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Display: getComputedStyle().display</title> 6 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> 7 <link rel="help" href="https://tabatkins.github.io/specs/css-masonry/#masonry-containers"> 8 <meta name="assert" content="position and float can change display computed value."> 9 <meta name="assert" content="display computed value is otherwise as specified."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/css/support/computed-testcommon.js"></script> 13 </head> 14 <body> 15 <div id="target"></div> 16 <script> 17 'use strict'; 18 19 // https://tabatkins.github.io/specs/css-masonry/#masonry-containers 20 test_computed_value("display", "grid-lanes"); 21 test_computed_value("display", "inline-grid-lanes"); 22 23 // https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo 24 function test_display_affected(property, value) { 25 const target = document.getElementById('target'); 26 test(() => { 27 target.style[property] = value; 28 target.style.display = 'inline-grid-lanes'; 29 assert_equals(getComputedStyle(target).display, 'grid-lanes', 'inline-grid-lanes -> grid-lanes'); 30 31 target.style[property] = ''; 32 target.style.display = ''; 33 }, property + ' ' + value + ' affects computed display'); 34 } 35 36 test_display_affected("position", "absolute"); 37 test_display_affected("position", "fixed"); 38 test_display_affected("float", "left"); 39 test_display_affected("float", "right"); 40 </script> 41 </body> 42 </html>