blob: c6e5d458fde16acece6bddd6cb648e06c1915665 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script src="../debugger/resources/log-active-stack-trace.js"></script>
<script>
function getProperty(name) {
let node = document.getElementById("test");
return node.style.getPropertyValue(name);
}
function setProperty(name, value) {
let node = document.getElementById("test");
if (value)
node.style.setProperty(name, value);
else
node.style.removeProperty(name);
}
function test()
{
InspectorTest.debug();
let suite = InspectorTest.createAsyncSuite("DOMBreakpoints.AttributeModified.Style");
async function checkPropertyValue(name, expectedValue) {
InspectorTest.log(`Getting '${name}'...`);
let value = await InspectorTest.evaluateInPage(`getProperty("${name}")`);
InspectorTest.expectEqual(value, expectedValue, `'${name}' should have the value '${expectedValue}'.`);
}
function addTestCase({name, propertyName, propertyValueBefore, propertyValueAfter}) {
suite.addTestCase({
name,
async test() {
await checkPropertyValue(propertyName, propertyValueBefore);
let pausedPromise = WI.debuggerManager.awaitEvent(WI.DebuggerManager.Event.Paused);
if (propertyValueAfter)
InspectorTest.log(`Setting '${propertyName}: ${propertyValueAfter};'...`);
else
InspectorTest.log(`Removing '${propertyName}'...`);
let evaluatePromise = InspectorTest.evaluateInPage(`setProperty("${propertyName}", "${propertyValueAfter}")`);
await pausedPromise;
InspectorTest.pass("Paused.");
await checkPropertyValue(propertyName, propertyValueBefore);
await WI.debuggerManager.resume();
InspectorTest.pass("Resumed.");
await evaluatePromise;
await checkPropertyValue(propertyName, propertyValueAfter);
},
});
}
addTestCase({
name: "DOMBreakpoints.AttributeModified.Style.Add",
propertyName: "display",
propertyValueBefore: "",
propertyValueAfter: "none",
});
addTestCase({
name: "DOMBreakpoints.AttributeModified.Style.ReplaceSame",
propertyName: "display",
propertyValueBefore: "none",
propertyValueAfter: "none",
});
addTestCase({
name: "DOMBreakpoints.AttributeModified.Style.ReplaceDifferent",
propertyName: "display",
propertyValueBefore: "none",
propertyValueAfter: "block",
});
addTestCase({
name: "DOMBreakpoints.AttributeModified.Style.Remove",
propertyName: "display",
propertyValueBefore: "block",
propertyValueAfter: "",
});
suite.addTestCase({
name: "DOMBreakpoints.AttributeModified.Style.Text",
async test() {
await checkPropertyValue("display", "");
let pausedPromise = WI.debuggerManager.awaitEvent(WI.DebuggerManager.Event.Paused);
InspectorTest.log(`Setting style text to ''...`);
let evaluatePromise = InspectorTest.evaluateInPage(`document.getElementById("test").style.cssText = "display: none;";`);
await pausedPromise;
InspectorTest.pass("Paused.");
await checkPropertyValue("display", "");
await WI.debuggerManager.resume();
InspectorTest.pass("Resumed.");
await evaluatePromise;
await checkPropertyValue("display", "none");
},
});
WI.domManager.requestDocument((documentNode) => {
if (!documentNode) {
InspectorTest.fail("Missing document node");
InspectorTest.completeTest();
return;
}
documentNode.querySelector("#test", async (nodeId) => {
let testNode = WI.domManager.nodeForId(nodeId);
if (!testNode) {
InspectorTest.fail("Missing #test node");
InspectorTest.completeTest();
return;
}
let promise = WI.domDebuggerManager.awaitEvent(WI.DOMDebuggerManager.Event.DOMBreakpointAdded)
.then((event) => {
InspectorTest.pass("Added attribute modified breakpoint to #test.");
});
InspectorTest.log("Adding attribute modified breakpoint to #test...");
WI.domDebuggerManager.addDOMBreakpoint(new WI.DOMBreakpoint(testNode, WI.DOMBreakpoint.Type.AttributeModified));
await promise;
InspectorTest.assert(!WI.debuggerManager.paused, "Should not be paused.");
suite.runTestCasesAndFinish();
});
});
}
</script>
</head>
<body onload="runTest()">
<p>Tests functionality of attribute modified DOM breakpoints when modifying the inline style attribute.</p>
<div id="test"></div>
</body>
</html>