<!DOCTYPE HTML> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id= --> <head> <meta charset="utf-8"> <title>Test for Bug </title> <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> <script type="application/javascript;version=1.8" src="inspector-helpers.js"></script> <script type="application/javascript;version=1.8"> const {CssLogic} = require("devtools/server/css-logic"); window.onload = function() { SimpleTest.waitForExplicitFinish(); runNextTest(); } addTest(function findAllCssSelectors() { var nodes = document.querySelectorAll('*'); for (var i = 0; i < nodes.length; i++) { var selector = CssLogic.findCssSelector(nodes[i]); var matches = document.querySelectorAll(selector); is(matches.length, 1, 'There is a single match: ' + selector); is(matches[0], nodes[i], 'The selector matches the correct node: ' + selector); } runNextTest(); }); addTest(function findCssSelectorNotContainedInDocument() { var unattached = document.createElement("div"); unattached.id = "unattached"; try { CssLogic.findCssSelector(unattached); ok (false, "Unattached node did not throw") } catch(e) { ok(e, "Unattached node throws an exception"); } var unattachedChild = document.createElement("div"); unattached.appendChild(unattachedChild); try { CssLogic.findCssSelector(unattachedChild); ok (false, "Unattached child node did not throw") } catch(e) { ok(e, "Unattached child node throws an exception"); } var unattachedBody = document.createElement("body"); try { CssLogic.findCssSelector(unattachedBody); ok (false, "Unattached body node did not throw") } catch(e) { ok(e, "Unattached body node throws an exception"); } runNextTest(); }); addTest(function findCssSelector() { let data = [ "#one", "#" + CSS.escape("2"), ".three", "." + CSS.escape("4"), "#find-css-selector > div:nth-child(5)", "#find-css-selector > p:nth-child(6)", ".seven", ".eight", ".nine", ".ten", "div.sameclass:nth-child(11)", "div.sameclass:nth-child(12)", "div.sameclass:nth-child(13)", "#" + CSS.escape("!, \", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \\, ], ^, `, {, |, }, ~"), ]; let container = document.querySelector("#find-css-selector"); is (container.children.length, data.length, "Container has correct number of children."); for (let i = 0; i < data.length; i++) { let node = container.children[i]; is (CssLogic.findCssSelector(node), data[i], "matched id for index " + (i-1)); } runNextTest(); }); addTest(function getComputedStyle() { let node = document.querySelector("#computed-style"); is (CssLogic.getComputedStyle(node).getPropertyValue("width"), "50px", "Computed style on a normal node works (width)"); is (CssLogic.getComputedStyle(node).getPropertyValue("height"), "10px", "Computed style on a normal node works (height)"); let firstChild = new _documentWalker(node, window).firstChild(); is (CssLogic.getComputedStyle(firstChild).getPropertyValue("content"), "\"before\"", "Computed style on a ::before node works (content)"); let lastChild = new _documentWalker(node, window).lastChild(); is (CssLogic.getComputedStyle(lastChild).getPropertyValue("content"), "\"after\"", "Computed style on a ::after node works (content)"); runNextTest(); }); addTest(function getBindingElementAndPseudo() { let node = document.querySelector("#computed-style"); var {bindingElement, pseudo} = CssLogic.getBindingElementAndPseudo(node); is (bindingElement, node, "Binding element is the node itself for a normal node"); ok (!pseudo, "Pseudo is null for a normal node"); let firstChild = new _documentWalker(node, window).firstChild(); var {bindingElement, pseudo} = CssLogic.getBindingElementAndPseudo(firstChild); is (bindingElement, node, "Binding element is the parent for a pseudo node"); is (pseudo, ":before", "Pseudo is correct for a ::before node"); let lastChild = new _documentWalker(node, window).lastChild(); var {bindingElement, pseudo} = CssLogic.getBindingElementAndPseudo(lastChild); is (bindingElement, node, "Binding element is the parent for a pseudo node"); is (pseudo, ":after", "Pseudo is correct for a ::after node"); runNextTest(); }); </script> </head> <body> <div id="find-css-selector"> <div id="one"></div> <!-- Basic ID --> <div id="2"></div> <!-- Escaped ID --> <div class="three"></div> <!-- Basic Class --> <div class="4"></div> <!-- Escaped Class --> <div attr="5"></div> <!-- Only an attribute --> <p></p> <!-- Nothing unique --> <div class="seven seven"></div> <!-- Two classes with same name --> <div class="eight eight2"></div> <!-- Two classes with different names --> <!-- Two elements with the same id - should not use ID --> <div class="nine" id="nine-and-ten"></div> <div class="ten" id="nine-and-ten"></div> <!-- Three elements with the same id - should use class and nth-child instead --> <div class="sameclass" id="11-12-13"></div> <div class="sameclass" id="11-12-13"></div> <div class="sameclass" id="11-12-13"></div> <!-- Special characters --> <div id="!, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^, `, {, |, }, ~"></div> </div> <style type="text/css"> #computed-style { width: 50px; height: 10px; } #computed-style::before { content: "before"; } #computed-style::after { content: "after"; } </style> <div id="computed-style"></div> </body> </html>