browser_changes_declaration_duplicate.js (3640B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that adding duplicate declarations to the Rule view is shown in the Changes panel. 7 8 const TEST_URI = ` 9 <style type='text/css'> 10 div { 11 } 12 </style> 13 <div></div> 14 `; 15 16 add_task(async function () { 17 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 18 const { inspector, view: ruleView } = await openRuleView(); 19 const { document: doc, store } = selectChangesView(inspector); 20 21 await selectNode("div", inspector); 22 await testAddDuplicateDeclarations(ruleView, store, doc); 23 await testChangeDuplicateDeclarations(ruleView, store, doc); 24 await testRemoveDuplicateDeclarations(ruleView, store, doc); 25 }); 26 27 async function testAddDuplicateDeclarations(ruleView, store, doc) { 28 info(`Test that adding declarations with the same property name and value 29 are both tracked.`); 30 31 let onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 32 info("Add CSS declaration"); 33 await addProperty(ruleView, 1, "color", "red"); 34 info("Wait for the change to be tracked"); 35 await onTrackChange; 36 37 onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 38 info("Add duplicate CSS declaration"); 39 await addProperty(ruleView, 1, "color", "red"); 40 info("Wait for the change to be tracked"); 41 await onTrackChange; 42 43 await waitFor(() => { 44 const decls = getAddedDeclarations(doc); 45 return decls.length == 2 && decls[1].value == "red"; 46 }, "Two declarations were tracked as added"); 47 const addDecl = getAddedDeclarations(doc); 48 is(addDecl[0].value, "red", "First declaration has correct property value"); 49 is( 50 addDecl[0].value, 51 addDecl[1].value, 52 "First and second declarations have identical property values" 53 ); 54 } 55 56 async function testChangeDuplicateDeclarations(ruleView, store, doc) { 57 info( 58 "Test that changing one of the duplicate declarations won't change the other" 59 ); 60 const prop = getTextProperty(ruleView, 1, { color: "red" }); 61 62 info("Change the value of the first of the duplicate declarations"); 63 const onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 64 await setProperty(ruleView, prop, "black"); 65 info("Wait for the change to be tracked"); 66 await onTrackChange; 67 68 await waitFor( 69 () => getAddedDeclarations(doc).length == 2, 70 "Two declarations were tracked as added" 71 ); 72 const addDecl = getAddedDeclarations(doc); 73 is(addDecl[0].value, "black", "First declaration has changed property value"); 74 is( 75 addDecl[1].value, 76 "red", 77 "Second declaration has not changed property value" 78 ); 79 } 80 81 async function testRemoveDuplicateDeclarations(ruleView, store, doc) { 82 info(`Test that removing the first of the duplicate declarations 83 will not remove the second.`); 84 85 const prop = getTextProperty(ruleView, 1, { color: "black" }); 86 87 info("Remove first declaration"); 88 const onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 89 await removeProperty(ruleView, prop); 90 info("Wait for the change to be tracked"); 91 await onTrackChange; 92 93 await waitFor( 94 () => getAddedDeclarations(doc).length == 1, 95 "One declaration was tracked as added" 96 ); 97 const addDecl = getAddedDeclarations(doc); 98 const removeDecl = getRemovedDeclarations(doc); 99 // Expect no remove operation tracked because it cancels out the original add operation. 100 is(removeDecl.length, 0, "No declaration was tracked as removed"); 101 is(addDecl.length, 1, "Just one declaration left tracked as added"); 102 is( 103 addDecl[0].value, 104 "red", 105 "Leftover declaration has property value of the former second declaration" 106 ); 107 }