| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <script src="../../../http/tests/inspector/inspector-test.js"></script> | 3 <script src="../../../http/tests/inspector/inspector-test.js"></script> |
| 4 <script src="../../../http/tests/inspector/elements-test.js"></script> | 4 <script src="../../../http/tests/inspector/elements-test.js"></script> |
| 5 <script src="./styles-update-links.js"></script> |
| 6 <style> |
| 7 #pseudo::after { |
| 8 pseudo-property: "12"; |
| 9 color: red; |
| 10 } |
| 11 |
| 12 #pseudo::after { |
| 13 border: 1px solid black; |
| 14 } |
| 15 |
| 16 #pseudo::before { |
| 17 color: blue; |
| 18 } |
| 19 </style> |
| 5 <script> | 20 <script> |
| 6 | 21 |
| 7 function test() | 22 function test() |
| 8 { | 23 { |
| 9 InspectorTest.runTestSuite([ | 24 InspectorTest.runTestSuite([ |
| 10 function selectInitialNode(next) | 25 function selectInitialNode(next) |
| 11 { | 26 { |
| 12 InspectorTest.selectNodeAndWaitForStyles("inspected", next); | 27 InspectorTest.selectNodeAndWaitForStyles("container", next); |
| 13 }, | |
| 14 | |
| 15 function editSelector(next) | |
| 16 { | |
| 17 var section = InspectorTest.firstMatchedStyleSection(); | |
| 18 section.startEditingSelector(); | |
| 19 section._selectorElement.textContent = "#inspected, .INSERTED-OTHER-
SELECTOR"; | |
| 20 InspectorTest.waitForSelectorCommitted(next); | |
| 21 section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent(
"Enter")); | |
| 22 }, | 28 }, |
| 23 | 29 |
| 24 function testDisableProperty(next) | 30 function testDisableProperty(next) |
| 25 { | 31 { |
| 26 var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("color"
); | 32 var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("border
"); |
| 27 InspectorTest.waitForStyleApplied(onPropertyDisabled); | 33 InspectorTest.waitForStyleApplied(onPropertyDisabled); |
| 28 treeItem._toggleEnabled({ target: { checked: false }, consume: funct
ion() { } }); | 34 treeItem._toggleEnabled({ target: { checked: false }, consume: funct
ion() { } }); |
| 29 | 35 |
| 30 function onPropertyDisabled() | 36 function onPropertyDisabled() |
| 31 { | 37 { |
| 32 InspectorTest.addResult("\n\n#### AFTER PROPERTY DISABLED ####\n
\n"); | 38 InspectorTest.addResult("\n\n#### AFTER PROPERTY DISABLED ####\n
\n"); |
| 33 InspectorTest.dumpSelectedElementStyles(true, false, true); | 39 InspectorTest.dumpSelectedElementStyles(true, false, true); |
| 34 next(); | 40 var rules = InspectorTest.getMatchedRules(); |
| 41 InspectorTest.validateRuleRanges("container", rules, next); |
| 35 } | 42 } |
| 36 } | 43 } |
| 37 ]); | 44 ]); |
| 38 } | 45 } |
| 39 </script> | 46 </script> |
| 40 <style> | 47 <link rel="stylesheet" href="../styles/resources/styles-update-links-2.css"></li
nk> |
| 41 #inspected { | 48 <link rel="stylesheet" href="../styles/resources/styles-update-links.css"></link
> |
| 42 color: red; | |
| 43 } | |
| 44 </style> | |
| 45 </head> | 49 </head> |
| 46 | 50 |
| 47 <body onload="runTest()"> | 51 <body onload="runTest()"> |
| 48 <p> | 52 <p> |
| 49 Verifies that sequence of setting selector and disabling property works. | 53 Tests that links are updated properly after disabling property. |
| 50 </p> | 54 </p> |
| 51 | 55 |
| 52 <div id="inspected">Red text here.</div> | 56 <div id="container" class="left-intact should-change"> |
| 57 Red text here. |
| 58 </div> |
| 59 |
| 60 <div id="other"></div> |
| 61 |
| 62 <section id="pseudo"></div> |
| 53 | 63 |
| 54 </body> | 64 </body> |
| 55 </html> | 65 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2182393003:
DevTools: split inspector/elements/styles-4/styles-update-links.html into 4 tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master