test_position_float_display.html (3764B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1038929 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1038929</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script type="text/javascript" src="property_database.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 </head> 13 <body> 14 <a target="_blank" 15 href="https://bugzilla.mozilla.org/show_bug.cgi?id=1038929">Mozilla Bug 1038929</a> 16 <p id="display"></p> 17 <div id="content" style="display: none"> 18 <div id="float-left" style="float: left"></div> 19 <div id="float-right" style="float: right"></div> 20 <div id="position-absolute" style="position: absolute"></div> 21 <div id="position-fixed" style="position: fixed"></div> 22 </div> 23 <pre id="test"> 24 <script type="application/javascript"> 25 26 /** 27 * Test for Bug 1038929: Test that "display" on a floated or absolutely/fixed 28 * position node is correctly converted to a block display as given in the table 29 * in CSS 2.1 9.7. 30 */ 31 32 // Maps from display value to expected conversion when floated/positioned 33 // This loosely follows the spec in CSS 2.1 section 9.7. Except for "other" 34 // values which the spec says should be "same as specified." For these, we do 35 // whatever the spec for the value itself says. 36 var mapping = { 37 "inline": "block", 38 "table-row-group": "block", 39 "table-column": "block", 40 "table-column-group": "block", 41 "table-header-group": "block", 42 "table-footer-group": "block", 43 "table-row": "block", 44 "table-cell": "block", 45 "table-caption": "block", 46 "inline-block": "block", 47 "block ruby": "block ruby", 48 "ruby": "block ruby", 49 "ruby-base": "block", 50 "ruby-base-container": "block", 51 "ruby-text": "block", 52 "ruby-text-container": "block", 53 "flex": "flex", 54 "grid": "grid", 55 "none": "none", 56 "table": "table", 57 "inline-grid": "grid", 58 "inline-flex": "flex", 59 "inline-table": "table", 60 "block": "block", 61 "contents": "contents", 62 "flow-root": "flow-root", 63 // Note: this is sometimes block 64 "list-item": "list-item", 65 "inline list-item": "list-item", 66 "inline flow-root list-item": "list-item", 67 }; 68 69 function test_display_value(val) 70 { 71 var floatLeftElem = document.getElementById("float-left"); 72 floatLeftElem.style.display = val; 73 var floatLeftConversion = window.getComputedStyle(floatLeftElem).display; 74 floatLeftElem.style.display = ""; 75 76 var floatRightElem = document.getElementById("float-right"); 77 floatRightElem.style.display = val; 78 var floatRightConversion = window.getComputedStyle(floatRightElem).display; 79 floatRightElem.style.display = ""; 80 81 var posAbsoluteElem = document.getElementById("position-absolute"); 82 posAbsoluteElem.style.display = val; 83 var posAbsoluteConversion = window.getComputedStyle(posAbsoluteElem).display; 84 posAbsoluteElem.style.display = ""; 85 86 var posFixedElem = document.getElementById("position-fixed"); 87 posFixedElem.style.display = val; 88 var posFixedConversion = window.getComputedStyle(posFixedElem).display; 89 posFixedElem.style.display = ""; 90 91 if (mapping[val]) { 92 is(floatLeftConversion, mapping[val], 93 "Element display should be converted when floated left"); 94 is(floatRightConversion, mapping[val], 95 "Element display should be converted when floated right"); 96 is(posAbsoluteConversion, mapping[val], 97 "Element display should be converted when absolutely positioned"); 98 is(posFixedConversion, mapping[val], 99 "Element display should be converted when fixed positioned"); 100 } else { 101 ok(false, "missing rules for display value " + val); 102 } 103 } 104 105 var displayInfo = gCSSProperties.display; 106 displayInfo.initial_values.forEach(test_display_value); 107 displayInfo.other_values.forEach(test_display_value); 108 109 </script> 110 </pre> 111 </body> 112 </html>