display-with-float-dynamic.html (1438B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Computed float value of flex/grid items</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers"> 6 <meta name="assert" content="computed float value of flex/grid items should be as specified"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <div id="flex" style="display:flex;"> 11 <div id="flex-item"></div> 12 </div> 13 <div id="grid" style="display:grid;"> 14 <div id="grid-item"> 15 </div> 16 <script> 17 function setFloatFor(id, float) { 18 document.getElementById(id).style.cssFloat = float; 19 } 20 function getFloatFor(id) { 21 return window.getComputedStyle(document.getElementById(id)).getPropertyValue("float"); 22 } 23 function setDisplayBlock(id) { 24 document.getElementById(id).style.display = "block"; 25 } 26 test(function() { 27 assert_equals(getFloatFor("flex-item"), "none"); 28 assert_equals(getFloatFor("grid-item"), "none"); 29 30 setFloatFor("flex-item", "left"); 31 setFloatFor("grid-item", "right"); 32 assert_equals(getFloatFor("flex-item"), "left"); 33 assert_equals(getFloatFor("grid-item"), "right"); 34 35 setDisplayBlock("grid"); 36 setDisplayBlock("flex"); 37 assert_equals(getFloatFor("flex-item"), "left"); 38 assert_equals(getFloatFor("grid-item"), "right"); 39 }, "computed style for float"); 40 </script>