Web Inspector: DOMDebugger: "Attribute Modified" breakpoints pause after the modifica...
[WebKit-https.git] / LayoutTests / inspector / dom-debugger / attribute-modified-style.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
5 <script src="../debugger/resources/log-active-stack-trace.js"></script>
6 <script>
7
8 function getProperty(name) {
9     let node = document.getElementById("test");
10     return node.style.getPropertyValue(name);
11 }
12
13 function setProperty(name, value) {
14     let node = document.getElementById("test");
15     if (value)
16         node.style.setProperty(name, value);
17     else
18         node.style.removeProperty(name);
19 }
20
21 function test()
22 {
23     InspectorTest.debug();
24
25     let suite = InspectorTest.createAsyncSuite("DOMBreakpoints.AttributeModified.Style");
26
27     async function checkPropertyValue(name, expectedValue) {
28         InspectorTest.log(`Getting '${name}'...`);
29         let value = await InspectorTest.evaluateInPage(`getProperty("${name}")`);
30         InspectorTest.expectEqual(value, expectedValue, `'${name}' should have the value '${expectedValue}'.`);
31     }
32
33     function addTestCase({name, propertyName, propertyValueBefore, propertyValueAfter}) {
34         suite.addTestCase({
35             name,
36             async test() {
37                 await checkPropertyValue(propertyName, propertyValueBefore);
38
39                 let pausedPromise = WI.debuggerManager.awaitEvent(WI.DebuggerManager.Event.Paused);
40
41                 if (propertyValueAfter)
42                     InspectorTest.log(`Setting '${propertyName}: ${propertyValueAfter};'...`);
43                 else
44                     InspectorTest.log(`Removing '${propertyName}'...`);
45                 let evaluatePromise = InspectorTest.evaluateInPage(`setProperty("${propertyName}", "${propertyValueAfter}")`);
46
47                 await pausedPromise;
48                 InspectorTest.pass("Paused.");
49
50                 await checkPropertyValue(propertyName, propertyValueBefore);
51
52                 await WI.debuggerManager.resume();
53                 InspectorTest.pass("Resumed.");
54
55                 await evaluatePromise;
56
57                 await checkPropertyValue(propertyName, propertyValueAfter);
58             },
59         });
60     }
61
62     addTestCase({
63         name: "DOMBreakpoints.AttributeModified.Style.Add",
64         propertyName: "display",
65         propertyValueBefore: "",
66         propertyValueAfter: "none",
67     });
68     addTestCase({
69         name: "DOMBreakpoints.AttributeModified.Style.ReplaceSame",
70         propertyName: "display",
71         propertyValueBefore: "none",
72         propertyValueAfter: "none",
73     });
74     addTestCase({
75         name: "DOMBreakpoints.AttributeModified.Style.ReplaceDifferent",
76         propertyName: "display",
77         propertyValueBefore: "none",
78         propertyValueAfter: "block",
79     });
80     addTestCase({
81         name: "DOMBreakpoints.AttributeModified.Style.Remove",
82         propertyName: "display",
83         propertyValueBefore: "block",
84         propertyValueAfter: "",
85     });
86
87     suite.addTestCase({
88         name: "DOMBreakpoints.AttributeModified.Style.Text",
89         async test() {
90             await checkPropertyValue("display", "");
91
92             let pausedPromise = WI.debuggerManager.awaitEvent(WI.DebuggerManager.Event.Paused);
93
94             InspectorTest.log(`Setting style text to ''...`);
95             let evaluatePromise = InspectorTest.evaluateInPage(`document.getElementById("test").style.cssText = "display: none;";`);
96
97             await pausedPromise;
98             InspectorTest.pass("Paused.");
99
100             await checkPropertyValue("display", "");
101
102             await WI.debuggerManager.resume();
103             InspectorTest.pass("Resumed.");
104
105             await evaluatePromise;
106
107             await checkPropertyValue("display", "none");
108         },
109     });
110
111     WI.domManager.requestDocument((documentNode) => {
112         if (!documentNode) {
113             InspectorTest.fail("Missing document node");
114             InspectorTest.completeTest();
115             return;
116         }
117
118         WI.domManager.querySelector(documentNode.id, "#test", async (nodeId) => {
119             let testNode = WI.domManager.nodeForId(nodeId);
120             if (!testNode) {
121                 InspectorTest.fail("Missing #test node");
122                 InspectorTest.completeTest();
123                 return;
124             }
125
126             let promise = WI.domDebuggerManager.awaitEvent(WI.DOMDebuggerManager.Event.DOMBreakpointAdded)
127             .then((event) => {
128                 InspectorTest.pass("Added attribute modified breakpoint to #test.");
129             });
130
131             InspectorTest.log("Adding attribute modified breakpoint to #test...");
132             WI.domDebuggerManager.addDOMBreakpoint(new WI.DOMBreakpoint(testNode, WI.DOMBreakpoint.Type.AttributeModified));
133             await promise;
134
135             InspectorTest.assert(!WI.debuggerManager.paused, "Should not be paused.");
136
137             suite.runTestCasesAndFinish();
138         });
139     });
140 }
141 </script>
142 </head>
143 <body onload="runTest()">
144     <p>Tests functionality of attribute modified DOM breakpoints when modifying the inline style attribute.</p>
145     <div id="test"></div>
146 </body>
147 </html>