Style Editor Tests

Style Editor Tests

See Style Editor for description of dialog.

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".

Removing Object from Class Selector Tests

 1. Select the object row (child row of "'+' ⊞ .red"), say #rect10, to be deleted from ".red" selector.
 2. Click on "-" in front of the child row #rect10.

 Expected behavior:
 1. The "ⓧ #rect10" row in the Style dialog disappears.
 2. The "#rect10 { ... } line in the <style> element in the XML editor should be deleted.
 3. The "class" attribute which had only "red" value is unset and deleted now.

Double-clicking a Selector Row

 1. Double click on any selector (id or class selector) row, say "'+' ⊞ .red" is double clicked. 
    In XML editor, its entry is ".red { fill: red; stroke: blue; }".

 Expected result:
 1. A CSS pane at the bottom of Style Dialog opens up.
 2. If the selector selected has any CSS properties, those should up in rows like: 
    "ⓧ fill: red"
    "ⓧ stroke: blue"