test_css-logic.html (2635B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id= 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug </title> 9 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 12 <script type="application/javascript" src="inspector-helpers.js"></script> 13 <script type="application/javascript"> 14 "use strict"; 15 16 const {CssLogic} = require("devtools/server/actors/inspector/css-logic"); 17 18 window.onload = function() { 19 SimpleTest.waitForExplicitFinish(); 20 runNextTest(); 21 }; 22 23 addTest(function getComputedStyle() { 24 const node = document.querySelector("#computed-style"); 25 is(CssLogic.getComputedStyle(node).getPropertyValue("width"), 26 "50px", "Computed style on a normal node works (width)"); 27 is(CssLogic.getComputedStyle(node).getPropertyValue("height"), 28 "10px", "Computed style on a normal node works (height)"); 29 30 const firstChild = new _documentWalker(node, window).firstChild(); 31 is(CssLogic.getComputedStyle(firstChild).getPropertyValue("content"), 32 "\"before\"", "Computed style on a ::before node works (content)"); 33 const lastChild = new _documentWalker(node, window).lastChild(); 34 is(CssLogic.getComputedStyle(lastChild).getPropertyValue("content"), 35 "\"after\"", "Computed style on a ::after node works (content)"); 36 37 runNextTest(); 38 }); 39 40 addTest(function getBindingElementAndPseudo() { 41 const node = document.querySelector("#computed-style"); 42 let {bindingElement, pseudo} = CssLogic.getBindingElementAndPseudo(node); 43 44 is(bindingElement, node, 45 "Binding element is the node itself for a normal node"); 46 ok(!pseudo, "Pseudo is null for a normal node"); 47 48 const firstChild = new _documentWalker(node, window).firstChild(); 49 ({ bindingElement, pseudo } = CssLogic.getBindingElementAndPseudo(firstChild)); 50 is(bindingElement, node, 51 "Binding element is the parent for a pseudo node"); 52 is(pseudo, "::before", "Pseudo is correct for a ::before node"); 53 54 const lastChild = new _documentWalker(node, window).lastChild(); 55 ({ bindingElement, pseudo } = CssLogic.getBindingElementAndPseudo(lastChild)); 56 is(bindingElement, node, 57 "Binding element is the parent for a pseudo node"); 58 is(pseudo, "::after", "Pseudo is correct for a ::after node"); 59 60 runNextTest(); 61 }); 62 63 </script> 64 </head> 65 <body> 66 <style type="text/css"> 67 #computed-style { width: 50px; height: 10px; } 68 #computed-style::before { content: "before"; } 69 #computed-style::after { content: "after"; } 70 </style> 71 <div id="computed-style"></div> 72 </body> 73 </html>