LayoutTests/inspector/dom/pseudo-element-dynamic.html - WebKit - Git at Google

 <html>
 <head>
 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
 <script>
 function test() {

     var testDOMNode = null;
     var insertedOrRemovedDOMNode = null;
     var previousInsertedDOMNode = null;

     var steps = [
         {
             name: "Add :before",
             action: function() {
                 InspectorTest.evaluateInPage("document.getElementById('x').classList.add('b')");
             }
         },
         {
             name: "Verify :before was added",
             action: function() {
                 InspectorTest.expectThat(testDOMNode.hasPseudoElements(), "#x DOMNode has pseudo elements");
                 InspectorTest.expectThat(testDOMNode.pseudoElements().size === 1, "DOMNode has 1 pseudo elements");
                 InspectorTest.expectThat(testDOMNode.beforePseudoElement(), "DOMNode has a before pseudo element");
                 InspectorTest.expectThat(!testDOMNode.afterPseudoElement(), "DOMNode does not have an after pseudo element");

                 InspectorTest.expectThat(insertedOrRemovedDOMNode === testDOMNode.beforePseudoElement(), "New DOMNode is the beforePseudoElement");
                 InspectorTest.expectThat(insertedOrRemovedDOMNode.parentNode === testDOMNode, "New DOMNode is a child of #x");
                 InspectorTest.expectThat(insertedOrRemovedDOMNode.pseudoType() === WI.DOMNode.PseudoElementType.Before, "New DOMNode is a before pseudo element");

                 previousInsertedDOMNode = insertedOrRemovedDOMNode;
                 next();
             }
         },
         {
             name: "Remove :before",
             action: function() {
                 InspectorTest.evaluateInPage("document.getElementById('x').classList.remove('b')");
             }
         },
         {
             name: "Verify :before was removed",
             action: function() {
                 InspectorTest.expectThat(!testDOMNode.hasPseudoElements(), "#x DOMNode has no pseudo elements");
                 InspectorTest.assert(testDOMNode.pseudoElements().size === 0);
                 InspectorTest.assert(!testDOMNode.beforePseudoElement());
                 InspectorTest.assert(!testDOMNode.afterPseudoElement());

                 InspectorTest.expectThat(insertedOrRemovedDOMNode === previousInsertedDOMNode, "Removed DOMNode was the before pseudo element");
                 InspectorTest.expectThat(insertedOrRemovedDOMNode.parentNode === null, "Removed DOMNode has no parent");
                 InspectorTest.expectThat(insertedOrRemovedDOMNode.pseudoType() === WI.DOMNode.PseudoElementType.Before, "Removed DOMNode was a before pseudo element");

                 previousInsertedDOMNode = null;
                 next();
             }
         },
         {
             name: "Add :after",
             action: function() {
                 InspectorTest.evaluateInPage("document.getElementById('x').classList.add('a')");
             }
         },
         {
             name: "Verify :after was added",
             action: function() {
                 InspectorTest.expectThat(testDOMNode.hasPseudoElements(), "#x DOMNode has pseudo elements");
                 InspectorTest.expectThat(testDOMNode.pseudoElements().size === 1, "DOMNode has 1 pseudo elements");
                 InspectorTest.expectThat(!testDOMNode.beforePseudoElement(), "DOMNode does not have a before pseudo element");
                 InspectorTest.expectThat(testDOMNode.afterPseudoElement(), "DOMNode has an after pseudo element");

                 InspectorTest.expectThat(insertedOrRemovedDOMNode === testDOMNode.afterPseudoElement(), "New DOMNode is the afterPseudoElement");
                 InspectorTest.expectThat(insertedOrRemovedDOMNode.parentNode === testDOMNode, "New DOMNode is a child of #x");
                 InspectorTest.expectThat(insertedOrRemovedDOMNode.pseudoType() === WI.DOMNode.PseudoElementType.After, "New DOMNode is an after pseudo element");

                 previousInsertedDOMNode = insertedOrRemovedDOMNode;
                 next();
             }
         },
         {
             name: "Remove :after",
             action: function() {
                 InspectorTest.evaluateInPage("document.getElementById('x').classList.remove('a')");
             }
         },
         {
             name: "Verify :after was removed",
             action: function() {
                 InspectorTest.expectThat(!testDOMNode.hasPseudoElements(), "#x DOMNode has no pseudo elements");
                 InspectorTest.assert(testDOMNode.pseudoElements().size === 0);
                 InspectorTest.assert(!testDOMNode.beforePseudoElement());
                 InspectorTest.assert(!testDOMNode.afterPseudoElement());

                 InspectorTest.expectThat(insertedOrRemovedDOMNode === previousInsertedDOMNode, "Removed DOMNode was the after pseudo element");
                 InspectorTest.expectThat(insertedOrRemovedDOMNode.parentNode === null, "Removed DOMNode has no parent");
                 InspectorTest.expectThat(insertedOrRemovedDOMNode.pseudoType() === WI.DOMNode.PseudoElementType.After, "Removed DOMNode was an after pseudo element");

                 previousInsertedDOMNode = null;
                 next();
             }
         },
     ];

     function next()
     {
         var step = steps.shift();
         if (step) {
             InspectorTest.log("");
             InspectorTest.log(step.name);
             step.action();
             return;
         }
         InspectorTest.completeTest();
     }

     WI.domTreeManager.requestDocument(function(documentNode) {
         WI.domTreeManager.querySelector(documentNode.id, "#x", function(nodeId) {
             testDOMNode = WI.domTreeManager.nodeForId(nodeId);
             InspectorTest.log("");
             InspectorTest.expectThat(testDOMNode, "Got DOMNode for #x");
             InspectorTest.assert(!testDOMNode.pseudoType());
             InspectorTest.expectThat(!testDOMNode.hasPseudoElements(), "DOMNode has no pseudo elements");
             InspectorTest.assert(testDOMNode.pseudoElements().size === 0);
             InspectorTest.assert(!testDOMNode.beforePseudoElement());
             InspectorTest.assert(!testDOMNode.afterPseudoElement());
             next();
         });
     });

     WI.domTreeManager.addEventListener(WI.DOMTreeManager.Event.NodeInserted, function(event) {
         // Test logging will add nodes to the test page. Ignore any elements added that are not children of our test node.
         if (event.data.parent !== testDOMNode)
             return;

         InspectorTest.log("EVENT: NodeInserted");
         insertedOrRemovedDOMNode = event.data.node;
         next();
     });

     WI.domTreeManager.addEventListener(WI.DOMTreeManager.Event.NodeRemoved, function(event) {
         InspectorTest.log("EVENT: NodeRemoved");
         insertedOrRemovedDOMNode = event.data.node;
         next();
     });
 }
 </script>
 </head>
 <body onload="runTest()">
     <p>Test for dynamic DOMNode pseudo element support, pseudo elements getting added and removed dynamically.</p>

     <style>
     .b:before { content: "before"; }
     .a:after { content: "after"; }
     </style>

     <div id="x">TEST ELEMENT</div>
 </body>
 </html>
	<html>
	<head>
	<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
	<script>
	function test() {

	var testDOMNode = null;
	var insertedOrRemovedDOMNode = null;
	var previousInsertedDOMNode = null;

	var steps = [
	{
	name: "Add :before",
	action: function() {
	InspectorTest.evaluateInPage("document.getElementById('x').classList.add('b')");
	}
	},
	{
	name: "Verify :before was added",
	action: function() {
	InspectorTest.expectThat(testDOMNode.hasPseudoElements(), "#x DOMNode has pseudo elements");
	InspectorTest.expectThat(testDOMNode.pseudoElements().size === 1, "DOMNode has 1 pseudo elements");
	InspectorTest.expectThat(testDOMNode.beforePseudoElement(), "DOMNode has a before pseudo element");
	InspectorTest.expectThat(!testDOMNode.afterPseudoElement(), "DOMNode does not have an after pseudo element");

	InspectorTest.expectThat(insertedOrRemovedDOMNode === testDOMNode.beforePseudoElement(), "New DOMNode is the beforePseudoElement");
	InspectorTest.expectThat(insertedOrRemovedDOMNode.parentNode === testDOMNode, "New DOMNode is a child of #x");
	InspectorTest.expectThat(insertedOrRemovedDOMNode.pseudoType() === WI.DOMNode.PseudoElementType.Before, "New DOMNode is a before pseudo element");

	previousInsertedDOMNode = insertedOrRemovedDOMNode;
	next();
	}
	},
	{
	name: "Remove :before",
	action: function() {
	InspectorTest.evaluateInPage("document.getElementById('x').classList.remove('b')");
	}
	},
	{
	name: "Verify :before was removed",
	action: function() {
	InspectorTest.expectThat(!testDOMNode.hasPseudoElements(), "#x DOMNode has no pseudo elements");
	InspectorTest.assert(testDOMNode.pseudoElements().size === 0);
	InspectorTest.assert(!testDOMNode.beforePseudoElement());
	InspectorTest.assert(!testDOMNode.afterPseudoElement());

	InspectorTest.expectThat(insertedOrRemovedDOMNode === previousInsertedDOMNode, "Removed DOMNode was the before pseudo element");
	InspectorTest.expectThat(insertedOrRemovedDOMNode.parentNode === null, "Removed DOMNode has no parent");
	InspectorTest.expectThat(insertedOrRemovedDOMNode.pseudoType() === WI.DOMNode.PseudoElementType.Before, "Removed DOMNode was a before pseudo element");

	previousInsertedDOMNode = null;
	next();
	}
	},
	{
	name: "Add :after",
	action: function() {
	InspectorTest.evaluateInPage("document.getElementById('x').classList.add('a')");
	}
	},
	{
	name: "Verify :after was added",
	action: function() {
	InspectorTest.expectThat(testDOMNode.hasPseudoElements(), "#x DOMNode has pseudo elements");
	InspectorTest.expectThat(testDOMNode.pseudoElements().size === 1, "DOMNode has 1 pseudo elements");
	InspectorTest.expectThat(!testDOMNode.beforePseudoElement(), "DOMNode does not have a before pseudo element");
	InspectorTest.expectThat(testDOMNode.afterPseudoElement(), "DOMNode has an after pseudo element");

	InspectorTest.expectThat(insertedOrRemovedDOMNode === testDOMNode.afterPseudoElement(), "New DOMNode is the afterPseudoElement");
	InspectorTest.expectThat(insertedOrRemovedDOMNode.parentNode === testDOMNode, "New DOMNode is a child of #x");
	InspectorTest.expectThat(insertedOrRemovedDOMNode.pseudoType() === WI.DOMNode.PseudoElementType.After, "New DOMNode is an after pseudo element");

	previousInsertedDOMNode = insertedOrRemovedDOMNode;
	next();
	}
	},
	{
	name: "Remove :after",
	action: function() {
	InspectorTest.evaluateInPage("document.getElementById('x').classList.remove('a')");
	}
	},
	{
	name: "Verify :after was removed",
	action: function() {
	InspectorTest.expectThat(!testDOMNode.hasPseudoElements(), "#x DOMNode has no pseudo elements");
	InspectorTest.assert(testDOMNode.pseudoElements().size === 0);
	InspectorTest.assert(!testDOMNode.beforePseudoElement());
	InspectorTest.assert(!testDOMNode.afterPseudoElement());

	InspectorTest.expectThat(insertedOrRemovedDOMNode === previousInsertedDOMNode, "Removed DOMNode was the after pseudo element");
	InspectorTest.expectThat(insertedOrRemovedDOMNode.parentNode === null, "Removed DOMNode has no parent");
	InspectorTest.expectThat(insertedOrRemovedDOMNode.pseudoType() === WI.DOMNode.PseudoElementType.After, "Removed DOMNode was an after pseudo element");

	previousInsertedDOMNode = null;
	next();
	}
	},
	];

	function next()
	{
	var step = steps.shift();
	if (step) {
	InspectorTest.log("");
	InspectorTest.log(step.name);
	step.action();
	return;
	}
	InspectorTest.completeTest();
	}

	WI.domTreeManager.requestDocument(function(documentNode) {
	WI.domTreeManager.querySelector(documentNode.id, "#x", function(nodeId) {
	testDOMNode = WI.domTreeManager.nodeForId(nodeId);
	InspectorTest.log("");
	InspectorTest.expectThat(testDOMNode, "Got DOMNode for #x");
	InspectorTest.assert(!testDOMNode.pseudoType());
	InspectorTest.expectThat(!testDOMNode.hasPseudoElements(), "DOMNode has no pseudo elements");
	InspectorTest.assert(testDOMNode.pseudoElements().size === 0);
	InspectorTest.assert(!testDOMNode.beforePseudoElement());
	InspectorTest.assert(!testDOMNode.afterPseudoElement());
	next();
	});
	});

	WI.domTreeManager.addEventListener(WI.DOMTreeManager.Event.NodeInserted, function(event) {
	// Test logging will add nodes to the test page. Ignore any elements added that are not children of our test node.
	if (event.data.parent !== testDOMNode)
	return;

	InspectorTest.log("EVENT: NodeInserted");
	insertedOrRemovedDOMNode = event.data.node;
	next();
	});

	WI.domTreeManager.addEventListener(WI.DOMTreeManager.Event.NodeRemoved, function(event) {
	InspectorTest.log("EVENT: NodeRemoved");
	insertedOrRemovedDOMNode = event.data.node;
	next();
	});
	}
	</script>
	</head>
	<body onload="runTest()">
	<p>Test for dynamic DOMNode pseudo element support, pseudo elements getting added and removed dynamically.</p>

	<style>
	.b:before { content: "before"; }
	.a:after { content: "after"; }
	</style>

	<div id="x">TEST ELEMENT</div>
	</body>
	</html>