test_styles-layout.html (3411B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test for Bug 1175040 - PageStyleActor.getLayout</title> 6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 8 <script type="application/javascript" src="inspector-helpers.js"></script> 9 <script type="application/javascript"> 10 "use strict"; 11 12 window.onload = function() { 13 SimpleTest.waitForExplicitFinish(); 14 runNextTest(); 15 }; 16 17 let gWalker = null; 18 let gStyles = null; 19 20 addTest(async function() { 21 const url = document.getElementById("inspectorContent").href; 22 const { target } = await attachURL(url); 23 const inspector = await target.getFront("inspector"); 24 gWalker = inspector.walker; 25 gStyles = await inspector.getPageStyle(); 26 runNextTest(); 27 }); 28 29 addTest(function() { 30 ok(gStyles.getLayout, "The PageStyleActor has a getLayout method"); 31 runNextTest(); 32 }); 33 34 addAsyncTest(async function() { 35 const node = await gWalker.querySelector(gWalker.rootNode, "#layout-element"); 36 const layout = await gStyles.getLayout(node, {}); 37 38 const properties = ["width", "height", 39 "margin-top", "margin-right", "margin-bottom", 40 "margin-left", "padding-top", "padding-right", 41 "padding-bottom", "padding-left", "border-top-width", 42 "border-right-width", "border-bottom-width", 43 "border-left-width", "z-index", "box-sizing", "display", 44 "position"]; 45 for (const prop of properties) { 46 ok((prop in layout), "The layout object returned has " + prop); 47 } 48 49 runNextTest(); 50 }); 51 52 addAsyncTest(async function() { 53 const node = await gWalker.querySelector(gWalker.rootNode, "#layout-element"); 54 const layout = await gStyles.getLayout(node, {}); 55 56 const expected = { 57 "box-sizing": "border-box", 58 "position": "absolute", 59 "z-index": "2", 60 "display": "block", 61 "width": 50, 62 "height": 50, 63 "margin-top": "10px", 64 "margin-right": "20px", 65 "margin-bottom": "30px", 66 "margin-left": "0px", 67 }; 68 69 for (const name in expected) { 70 is(layout[name], expected[name], "The " + name + " property is correct"); 71 } 72 73 runNextTest(); 74 }); 75 76 addAsyncTest(async function() { 77 const node = await gWalker.querySelector(gWalker.rootNode, 78 "#layout-auto-margin-element"); 79 80 let layout = await gStyles.getLayout(node, {}); 81 ok(!("autoMargins" in layout), 82 "By default, getLayout doesn't return auto margins"); 83 84 layout = await gStyles.getLayout(node, {autoMargins: true}); 85 ok(("autoMargins" in layout), 86 "getLayout does return auto margins when asked to"); 87 is(layout.autoMargins.left, "auto", "The left margin is auto"); 88 is(layout.autoMargins.right, "auto", "The right margin is auto"); 89 ok(!layout.autoMargins.bottom, "The bottom margin is not auto"); 90 ok(!layout.autoMargins.top, "The top margin is not auto"); 91 92 runNextTest(); 93 }); 94 95 addTest(function() { 96 gStyles = gWalker = null; 97 runNextTest(); 98 }); 99 100 </script> 101 </head> 102 <body> 103 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1175040">Mozilla Bug 1175040</a> 104 <a id="inspectorContent" target="_blank" href="inspector-styles-data.html">Test Document</a> 105 <p id="display"></p> 106 <div id="content" style="display: none"></div> 107 <pre id="test"> 108 </pre> 109 </body> 110 </html>