| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script src="../debugger/resources/breakpoint-options-utilities.js"></script> |
| <script src="../debugger/resources/log-active-stack-trace.js"></script> |
| <script src="resources/dom-breakpoint-utilities.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() |
| { |
| let suite = InspectorTest.createAsyncSuite("DOMBreakpoint.AttributeModified"); |
| |
| 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() { |
| let node = await InspectorTest.DOMBreakpoint.awaitQuerySelector("#test"); |
| await InspectorTest.DOMBreakpoint.createBreakpoint(node, WI.DOMBreakpoint.Type.AttributeModified); |
| |
| 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); |
| }, |
| teardown: InspectorTest.DOMBreakpoint.teardown, |
| }); |
| } |
| |
| addTestCase({ |
| name: "DOMBreakpoint.AttributeModified.Style.Add", |
| propertyName: "display", |
| propertyValueBefore: "", |
| propertyValueAfter: "none", |
| }); |
| addTestCase({ |
| name: "DOMBreakpoint.AttributeModified.Style.ReplaceSame", |
| propertyName: "display", |
| propertyValueBefore: "none", |
| propertyValueAfter: "none", |
| }); |
| addTestCase({ |
| name: "DOMBreakpoint.AttributeModified.Style.ReplaceDifferent", |
| propertyName: "display", |
| propertyValueBefore: "none", |
| propertyValueAfter: "block", |
| }); |
| addTestCase({ |
| name: "DOMBreakpoint.AttributeModified.Style.Remove", |
| propertyName: "display", |
| propertyValueBefore: "block", |
| propertyValueAfter: "", |
| }); |
| |
| suite.addTestCase({ |
| name: "DOMBreakpoint.AttributeModified.Style.Text", |
| async test() { |
| let node = await InspectorTest.DOMBreakpoint.awaitQuerySelector("#test"); |
| await InspectorTest.DOMBreakpoint.createBreakpoint(node, WI.DOMBreakpoint.Type.AttributeModified); |
| |
| 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"); |
| }, |
| teardown: InspectorTest.DOMBreakpoint.teardown, |
| }); |
| |
| InspectorTest.BreakpointOptions.addTestCases(suite, { |
| testCaseNamePrefix: "Style.", |
| async createBreakpoint() { |
| let node = await InspectorTest.DOMBreakpoint.awaitQuerySelector("#test"); |
| return InspectorTest.DOMBreakpoint.createBreakpoint(node, WI.DOMBreakpoint.Type.AttributeModified); |
| }, |
| async triggerBreakpoint(breakpoint) { |
| return InspectorTest.evaluateInPage(`setProperty("--test", Math.random())`); |
| }, |
| }); |
| |
| 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> |
