| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 | 3 |
| 4 <link rel="stylesheet" href="../styles/resources/keyframes.css"> | 4 <link rel="stylesheet" href="../styles/resources/keyframes.css"> |
| 5 | 5 |
| 6 <script src="../../../http/tests/inspector/inspector-test.js"></script> | 6 <script src="../../../http/tests/inspector/inspector-test.js"></script> |
| 7 <script src="../../../http/tests/inspector/elements-test.js"></script> | 7 <script src="../../../http/tests/inspector/elements-test.js"></script> |
| 8 <style> | 8 <style> |
| 9 @keyframes animName { | 9 @keyframes animName { |
| 10 from, 20% { | 10 from, 20% { |
| (...skipping 22 matching lines...) Expand all Loading... |
| 33 continue; | 33 continue; |
| 34 InspectorTest.addResult(property.name + ":" + property.value + (
property.important ? " !important" : "") + (("parsedOk" in property) ? " non-par
sed" : "") +" @" + InspectorTest.rangeText(property.range)); | 34 InspectorTest.addResult(property.name + ":" + property.value + (
property.important ? " !important" : "") + (("parsedOk" in property) ? " non-par
sed" : "") +" @" + InspectorTest.rangeText(property.range)); |
| 35 } | 35 } |
| 36 } | 36 } |
| 37 } | 37 } |
| 38 | 38 |
| 39 InspectorTest.selectNodeWithId("element", step1); | 39 InspectorTest.selectNodeWithId("element", step1); |
| 40 | 40 |
| 41 function step1(node) | 41 function step1(node) |
| 42 { | 42 { |
| 43 InspectorTest.CSSAgent.getCSSAnimationsForNode(node.id, onCSSAnimations.
bind(null, node.id)); | 43 InspectorTest.CSSAgent.getMatchedStylesForNode(node.id, onCSSAnimations.
bind(null, node.id)); |
| 44 } | 44 } |
| 45 | 45 |
| 46 function onCSSAnimations(nodeId, error, rules) | 46 function onCSSAnimations(nodeId, error, inlinePayload, attributesPayload, ma
tchedPayload, pseudoPayload, inheritedPayload, animationsPayload) |
| 47 { | 47 { |
| 48 for (var i = 0; i < rules.length; ++i) | 48 for (var i = 0; i < animationsPayload.length; ++i) |
| 49 dumpRule(rules[i]); | 49 dumpRule(animationsPayload[i]); |
| 50 | 50 |
| 51 InspectorTest.addResult("\n>> Modifying keyframe rule"); | 51 InspectorTest.addResult("\n>> Modifying keyframe rule"); |
| 52 var style = new WebInspector.CSSStyleDeclaration(InspectorTest.cssModel,
null, rules[1].keyframes[0].style, WebInspector.CSSStyleDeclaration.Type.Regula
r); | 52 var style = new WebInspector.CSSStyleDeclaration(InspectorTest.cssModel,
null, animationsPayload[1].keyframes[0].style, WebInspector.CSSStyleDeclaration
.Type.Regular); |
| 53 style.setText("width: 123px"); | 53 style.setText("width: 123px"); |
| 54 | 54 |
| 55 InspectorTest.CSSAgent.getCSSAnimationsForNode(nodeId, onModifiedAnimati
ons); | 55 InspectorTest.CSSAgent.getMatchedStylesForNode(nodeId, onModifiedAnimati
ons); |
| 56 } | 56 } |
| 57 | 57 |
| 58 function onModifiedAnimations(error, rules) | 58 function onModifiedAnimations(error, inlinePayload, attributesPayload, match
edPayload, pseudoPayload, inheritedPayload, animationsPayload) |
| 59 { | 59 { |
| 60 for (var i = 0; i < rules.length; ++i) | 60 for (var i = 0; i < animationsPayload.length; ++i) |
| 61 dumpRule(rules[i]); | 61 dumpRule(animationsPayload[i]); |
| 62 InspectorTest.completeTest(); | 62 InspectorTest.completeTest(); |
| 63 } | 63 } |
| 64 } | 64 } |
| 65 | 65 |
| 66 </script> | 66 </script> |
| 67 </head> | 67 </head> |
| 68 | 68 |
| 69 <body onload="runTest()"> | 69 <body onload="runTest()"> |
| 70 <div id="element"></div> | 70 <div id="element"></div> |
| 71 <p> | 71 <p> |
| 72 Tests that proper data and start/end offset positions are reported for CSS keyfr
ames. | 72 Tests that proper data and start/end offset positions are reported for CSS keyfr
ames. |
| 73 </p> | 73 </p> |
| 74 | 74 |
| 75 </body> | 75 </body> |
| 76 </html> | 76 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1577723002:
Devtools: Add editable keyframes to the styles sidebar pane (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master