Difference between revisions of "Style Editor Tests"

From Inkscape Wiki
Jump to navigation Jump to search
Line 18: Line 18:


   Expected result:
   Expected result:
   1. An entry should be added in the Style dialog showing "'+' #rect10".
   1. An entry should be added in the Style dialog showing "'+' #rect10".
   2. An entry should be added to the <style> element in the XML editor: "#rect10 { ... }.
   2. An entry should be added to the <style> element in the XML editor: "#rect10 { ... }.


Line 30: Line 30:


   Expected result:
   Expected result:
   1. The "'+' #rect10" line in the Style dialog should be selected (highlighted in blue).
   1. The "'+' #rect10" line in the Style dialog should be selected (highlighted in blue).


   Status: Pass
   Status: Pass
Line 38: Line 38:
   Continue from test 2.
   Continue from test 2.
   1. Click on the canvas outside the rectangle to deselected rectangle.
   1. Click on the canvas outside the rectangle to deselected rectangle.
   2. Click on "'+' #rect10" line in Style dialog.
   2. Click on "'+' #rect10" line in Style dialog.


   Expected result:
   Expected result:
Line 51: Line 51:


   Expected behavior:
   Expected behavior:
   1. The "'+' #rect10" line in the Style dialog disappears.
   1. The "'+' #rect10" line in the Style dialog disappears.
   2. The "#rect10 { ... } line in the <style> element in the XML editor should be deleted.
   2. The "#rect10 { ... } line in the <style> element in the XML editor should be deleted.


Line 67: Line 67:


   Expected result:
   Expected result:
   1. An entry should be added in the Style dialog showing "'+' .red".
   1. An entry should be added in the Style dialog showing "'+' .red".
   2. An entry should be added to the <style> element in the XML editor: ".red { ... }.
   2. An entry should be added to the <style> element in the XML editor: ".red { ... }.
   3. A "class" attribute should be added with value "red" to the rectangle with the id of "rect10".
   3. A "class" attribute should be added with value "red" to the rectangle with the id of "rect10".


   Status: Fail: The expand tree icon () is missing. When clicked, the tree should expand and should show "ⓧ #rect10".
   Status: Fail: The expand tree icon () is missing. When clicked, the tree should expand and should show "ⓧ #rect10".


2. Select simple class selector via selecting object on canvas.
2. Select simple class selector via selecting object on canvas.
Line 80: Line 80:


   Expected result:
   Expected result:
   1. The "'+' .red" line in the Style dialog should be selected (highlighted in blue).
   1. The "'+' .red" line in the Style dialog should be selected (highlighted in blue).


   Status: Pass
   Status: Pass
Line 88: Line 88:
   Continue from test 2.
   Continue from test 2.
   1. Click on the canvas outside the rectangle to deselected rectangle.
   1. Click on the canvas outside the rectangle to deselected rectangle.
   2. Click on "'+' .red" line in Style dialog.
   2. Click on "'+' .red" line in Style dialog.


   Expected result:
   Expected result:
Line 104: Line 104:
   1. The 'class' attribute in <rect id="rect10".../> is removed. (Since 'red' was the only entry in the 'class' value, its removal causes the 'class' to be removed.)
   1. The 'class' attribute in <rect id="rect10".../> is removed. (Since 'red' was the only entry in the 'class' value, its removal causes the 'class' to be removed.)


   Status: Fail. The icon is missing so the subtree cannot be expanded to show the entry for the rectangle.
   Status: Fail. The icon is missing so the subtree cannot be expanded to show the entry for the rectangle.


5. Deletion of simple class selector.
5. Deletion of simple class selector.


   Continue from test 4 (or 1).
   Continue from test 4 (or 1).
   1. With "'+' .red" line selected in Style dialog, click on '-' button and bottom of Style dialog.
   1. With "'+' .red" line selected in Style dialog, click on '-' button and bottom of Style dialog.


   Expected behavior:
   Expected behavior:
   1. The "'+' .red" line in the Style dialog disappears.
   1. The "'+' .red" line in the Style dialog disappears.
   2. The ".red { ... } line in the <style> element in the XML editor should be deleted.
   2. The ".red { ... } line in the <style> element in the XML editor should be deleted.



Revision as of 07:40, 15 July 2016

Style Editor Tests

All tests begin by:

 1. Opening Inkscape.
 2. Opening the Style dialog (Object->Style dialog...)
 3. Opening the XML Editor dialog (Edit->XML Editor... or Shift+Ctrl+X).
 4. Expanding the <style> element content in the XML editor.

Simple ID Selector Tests

1. Add simple ID selector.

 1. Draw rectangle.
 2. With rectangle selected, click on '+' at bottom of Style dialog.
 3. In pop-up "#rect10" should appear.
 4. Click on "Add" button
 Expected result:
 1. An entry should be added in the Style dialog showing "'+' ⊞ #rect10".
 2. An entry should be added to the <style> element in the XML editor: "#rect10 { ... }.
 Status: Fail: The expand tree icon (☒) is missing. When clicked, the tree should expand and should show "ⓧ #rect10".

2. Select simple ID selector via selecting object on canvas.

 Continue from test 1.
 1. Click on the canvas outside the rectangle to deselected rectangle.
 2. Select the rectangle on the Inkscape canvas.
 Expected result:
 1. The "'+' ⊞ #rect10" line in the Style dialog should be selected (highlighted in blue).
 Status: Pass

3. Select object on canvas via using simple ID selector in Style dialog.

 Continue from test 2.
 1. Click on the canvas outside the rectangle to deselected rectangle.
 2. Click on "'+' ⊞ #rect10" line in Style dialog.
 Expected result:
 1. The rectangle object on the canvas is selected.
 Status: Pass

4. Deletion of simple ID selector.

 Continue from test 3.
 1. With "'+' #rect10" line selected in Style dialog, click on '-' button and bottom of Style dialog.
 Expected behavior:
 1. The "'+' ⊞ #rect10" line in the Style dialog disappears.
 2. The "#rect10 { ... } line in the <style> element in the XML editor should be deleted.
 Status: Pass

Simple Class Selector Tests

1. Add simple Class selector.

 1. Draw rectangle.
 2. With rectangle selected, click on '+' at bottom of Style dialog.
 3. In pop-up "#rect10" should appear.
 4. Replace "#rect10" by ".red" in pop entry.
 5. Click on "Add" button
 Expected result:
 1. An entry should be added in the Style dialog showing "'+' ⊞ .red".
 2. An entry should be added to the <style> element in the XML editor: ".red { ... }.
 3. A "class" attribute should be added with value "red" to the rectangle with the id of "rect10".
 Status: Fail: The expand tree icon (⊞) is missing. When clicked, the tree should expand and should show "ⓧ #rect10".

2. Select simple class selector via selecting object on canvas.

 Continue from test 1.
 1. Click on the canvas outside the rectangle to deselected rectangle.
 2. Select the rectangle on the Inkscape canvas.
 Expected result:
 1. The "'+' ⊞ .red" line in the Style dialog should be selected (highlighted in blue).
 Status: Pass

3. Select object on canvas via using simple class selector in Style dialog.

 Continue from test 2.
 1. Click on the canvas outside the rectangle to deselected rectangle.
 2. Click on "'+' ⊞ .red" line in Style dialog.
 Expected result:
 1. The rectangle object on the canvas is selected.
 Status: Pass

4. Removal of class selector value.

 Continue from test 3.
 1. Expand the subtree by clicking on ☒.
 2. Click on the ⓧ in front of #rect10.
 Expected behavior:
 1. The 'class' attribute in <rect id="rect10".../> is removed. (Since 'red' was the only entry in the 'class' value, its removal causes the 'class' to be removed.)
 Status: Fail. The ⊞ icon is missing so the subtree cannot be expanded to show the entry for the rectangle.

5. Deletion of simple class selector.

 Continue from test 4 (or 1).
 1. With "'+' ⊞ .red" line selected in Style dialog, click on '-' button and bottom of Style dialog.
 Expected behavior:
 1. The "'+' ⊞ .red" line in the Style dialog disappears.
 2. The ".red { ... } line in the <style> element in the XML editor should be deleted.
 Status: CRASH.

Adding Object to Class Selector Tests

 1. Select the line "'+' ⊞ .red" in Style dialog.
 2. Click on object, say #rect10, to be added to ".red" selector.
 3. With object selected, click on "+" in the beginning of selected row in Style dialog.
 Expected behavior:
 1. An entry should be added in the Style dialog showing "'-' #rect10" with "'+' ⊞ .red" as the parent row.
 2. An entry should be added to the <style> element in the XML editor: "#rect10 { ... }.
 3. A "class" attribute should be added with value "red" to the rectangle with the id of "rect10".
 4. The "red" value should not be duplicated in the "class" attribute of any other object with the "class" "red".