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: Pass.

Adding Object to Class Selector Tests

 Continue from test 1 in previous section (after creation of ".red" selector). 
 1. Select the line "'+' ⊞ .red" in Style dialog.
 2. Add another rectangle to the drawing.
 3. With new rectangle 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 "'-' #rect14" with "'+' ⊞ .red" as the parent row.
 X. NO! -> An entry should be added to the <style> element in the XML editor: "#rect14 { ... }. (The selector ".red" will match #rect14 as it is a class selector. Adding "#rect14 { ... } is adding a new "id" selector.)
 2. A "class" attribute should be added with value "red" to the rectangle with the id of "rect14".
 3. 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

 Starting at end of previous test:
 1. Select the object row (child row of "'+' ⊞ .red") #rect14, to be deleted from ".red" selector. The representation 
    can be viewed as:
    "'+' ⊞ .red"
    "ⓧ      #rect10"
    "ⓧ      #rect14"
 2. Click on "ⓧ" in front of the child row #rect14.

 Expected behavior:
 1. The "ⓧ #rect14" row in the Style dialog disappears.
 X. No! -> The "#rect10 { ... } line in the <style> element in the XML editor should be deleted.
 2. The "class" attribute of #rect14 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"
 3. If click on any row is a single-click, the CSS pane hides.

Modifying a CSS Property from CSS Pane

 1. Follow steps from "Double-clicking a Selector Row" to open CSS pane.
 2. Select the property row, say "ⓧ fill: red".
 3. Being selected, click again on the row "ⓧ fill: red" and cursor appears implying editing mode.
 4. Modify the text, say the modified text is "fill: yellow" and press Enter.

 Expected result:
 1. The updated property row is "ⓧ fill: yellow".
 2. In XML editor, its updated entry is ".red { fill: yellow; stroke: blue; }".
 3. The changes are reflected in the drawing with the object having class ".red" filled with yellow color.
 All properties can be changed similarly with valid values after modifying text content.

Adding CSS Property using CSS pane

 1. Follow steps from "Double-clicking a Selector Row" to open CSS pane.
 2. Click on '+' at bottom of CSS pane, an empty row "ⓧ     " appears.
 3. Select the row and click on it and cursor appears implying editing mode.
 4. Add a property, say "stroke-width: 5px" and press Enter.

 Expected result:
 1. The new property row in CSS pane is "ⓧ stroke-width: 5px".
 2. In XML editor, its updated entry is ".red { fill: yellow; stroke: blue; stroke-width: 5px; }".
 3. The changes are reflected in the drawing with the objects', having class ".red", stroke-width set to the entered value.
 More CSS properties can be added similarly with valid values.

 Status Fail (often results in .red { fill:red; ;})  (note missing property between "; ;".)

Deleting CSS Property from CSS Pane

 1. Follow steps from "Double-clicking a Selector Row" to open CSS pane.
 2. Select the property row, say "ⓧ fill: red".
 3. The row being selected, click on ⓧ in the row "ⓧ fill: red".

 Expected result:
 1. The "ⓧ fill:red" row in the CSS pane disappears.
 2. The ".red { fill: red; stroke: blue; }" line in the <style> element in the XML editor is modified to ".red { stroke: 
    blue; }" .
 3. The fill color of objects associated with ".red" selector is unset and it is black now.