third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-keyframes.html - Issue 1577723002: Devtools: Add editable keyframes to the styles sidebar pane

Side by Side Diff: third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-keyframes.html

Issue 1577723002: Devtools: Add editable keyframes to the styles sidebar pane (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/inspector/elements/styles-4/keyframes-source-offsets-expected.txt ('k') | third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-keyframes-expected.txt » ('j') | third_party/WebKit/Source/core/inspector/InspectorStyleSheet.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <html>	1 <html>

2 <head>	2 <head>

	3

	4 <link rel="stylesheet" href="../styles/resources/keyframes.css">

	5

	6 <script src="../../../http/tests/inspector/inspector-test.js"></script>

	7 <script src="../../../http/tests/inspector/elements-test.js"></script>

3 <style>	8 <style>

4 #inspected {	9 @keyframes animName {

5 color: green;	10 from, 20% {

	11 margin-left: 200px;

	12 color: red;

	13 }

	14 to {

	15 margin-left: 500px;

	16 }

6 }	17 }

7 </style>	18 </style>

8 <script src="../../../http/tests/inspector/inspector-test.js"></script>

9 <script src="../../../http/tests/inspector/elements-test.js"></script>

10 <script>	19 <script>

11

12 function test()	20 function test()

13 {	21 {

14 InspectorTest.selectNodeAndWaitForStyles("inspected", step1);	22 InspectorTest.selectNodeAndWaitForStyles("element", step1);

15	23

16 function step1()	24 function step1()

17 {	25 {

18 InspectorTest.addResult("=== Before selector modification ===");	26 InspectorTest.addResult("=== Before key modification ===");

19 InspectorTest.dumpSelectedElementStyles(true);	27 InspectorTest.dumpSelectedElementStyles(true);

20 var section = InspectorTest.firstMatchedStyleSection();	28 var section = WebInspector.panels.elements.sidebarPanes.styles._sectionB locks[1].sections[1];

21 section.startEditingSelector();	29 section.startEditingSelector();

22 section._selectorElement.textContent = "#inspected, #other";	30 section._selectorElement.textContent = "1%";

23 section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Ent er"));	31 section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Ent er"));

24 InspectorTest.selectNodeAndWaitForStyles("other", step2);	32 InspectorTest.waitForSelectorCommitted(step2);

25 }	33 }

26	34

27 function step2()	35 function step2()

28 {	36 {

29 InspectorTest.addResult("=== After selector modification ===");	37 InspectorTest.addResult("=== After key modification ===");

30 InspectorTest.dumpSelectedElementStyles(true);	38 InspectorTest.dumpSelectedElementStyles(true);

31 InspectorTest.domModel.undo();	39 InspectorTest.domModel.undo();

32 InspectorTest.selectNodeAndWaitForStyles("inspected", step3);	40 InspectorTest.waitForStyles("element", step3, true);

33 }	41 }

34	42

35 function step3()	43 function step3()

36 {	44 {

37 InspectorTest.addResult("=== After undo ===");	45 InspectorTest.addResult("=== After undo ===");

38 InspectorTest.dumpSelectedElementStyles(true);	46 InspectorTest.dumpSelectedElementStyles(true);

39	47

40 InspectorTest.domModel.redo();	48 InspectorTest.domModel.redo();

41 InspectorTest.selectNodeAndWaitForStyles("other", step4);	49 InspectorTest.waitForStyles("element", step4, true);

42 }	50 }

43	51

44 function step4()	52 function step4()

45 {	53 {

46 InspectorTest.addResult("=== After redo ===");	54 InspectorTest.addResult("=== After redo ===");

47 InspectorTest.dumpSelectedElementStyles(true);	55 InspectorTest.dumpSelectedElementStyles(true);

48 InspectorTest.completeTest();	56 InspectorTest.completeTest();

49 }	57 }

50 }	58 }

51

52 </script>	59 </script>

53 </head>	60 </head>

54	61

55 <body onload="runTest()">	62 <body onload="runTest()">

	63 <div id="element"></div>

56 <p>	64 <p>

57 Tests that setting selector text can be undone.	65 Tests that keyframes are shown in styles pane.

58 </p>	66 </p>

59	67

60 <div id="inspected"></div>

61 <div id="other"></div>

62

63 </body>	68 </body>

64 </html>	69 </html>

OLD	NEW