Difference between revisions of "Style Editor Tests"

From Inkscape Wiki
Jump to navigation Jump to search
 
(9 intermediate revisions by 2 users not shown)
Line 22: Line 22:
   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 { ... }.
  3. When the xpand tree icon (usually ☒ or arrow) is 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".
   Status: <span style="color:green">Pass</span>.


2. Select simple ID selector via selecting object on canvas.
2. Select simple ID selector via selecting object on canvas.
Line 34: Line 35:
   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: <span style="color:green">Pass</span>.


3. Select object on canvas via using simple ID selector in Style dialog.
3. Select object on canvas via using simple ID selector in Style dialog.
Line 45: Line 46:
   1. The rectangle object on the canvas is selected.
   1. The rectangle object on the canvas is selected.


  Status: Pass
  Status: <span style="color:green">Pass</span>.


4. Deletion of simple ID selector.
4. Deletion of simple ID selector.
Line 56: Line 57:
   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.


   Status: Pass
   Status: <span style="color:green">Pass</span>.


== Simple Class Selector Tests ==
== Simple Class Selector Tests ==
Line 72: Line 73:
   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".
  4. When the expand tree icon (usually ⊞ or arrow) is 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".
   Status: <span style="color:green">Pass</span>.


2. Select simple class selector via selecting object on canvas.
2. Select simple class selector via selecting object on canvas.
Line 84: Line 86:
   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: <span style="color:green">Pass</span>.


3. Select object on canvas via using simple class selector in Style dialog.
3. Select object on canvas via using simple class selector in Style dialog.
Line 95: Line 97:
   1. The rectangle object on the canvas is selected.
   1. The rectangle object on the canvas is selected.


   Status: Pass
   Status: <span style="color:green">Pass</span>.


4. Removal of class selector value.
4. Removal of class selector value.
Line 106: Line 108:
   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: <span style="color:red">Fail</span>. On the first click, a duplicate entry is created in the subtree.


5. Deletion of simple class selector.
5. Deletion of simple class selector.
Line 116: Line 118:
   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.
  3. The "class" attribute in the rectangle should not change.


   Status: Pass.
   Status: <span style="color:green">Pass</span>.


== Adding Object to Class Selector Tests ==
== Adding Object to Class Selector Tests ==
Line 145: Line 148:
   1. The "ⓧ #rect14" row in the Style dialog disappears.
   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.
   X. No! -> The "#rect10 { ... } line in the <style> element in the XML editor should be deleted.
        --> Shouldn't "#rect14 { ... } 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.
   2. The "class" attribute of #rect14 which had only "red" value is unset and deleted now.


Line 158: Line 162:
     "ⓧ stroke: blue"
     "ⓧ stroke: blue"
   3. If click on any row is a single-click, the CSS pane hides.
   3. If click on any row is a single-click, the CSS pane hides.
  Status: <span style="color:green">Pass</span>.


== Modifying a CSS Property from CSS Pane ==
== Modifying a CSS Property from CSS Pane ==
Line 170: Line 176:
   3. The changes are reflected in the drawing with the object having class ".red" filled with yellow color.
   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.
   All properties can be changed similarly with valid values after modifying text content.
  Status: <span style="color:green">Pass</span>.


== Adding CSS Property using CSS pane ==
== Adding CSS Property using CSS pane ==
Line 182: Line 190:
   3. The changes are reflected in the drawing with the objects', having class ".red", stroke-width set to the entered value.
   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.
   More CSS properties can be added similarly with valid values.
  Status <span style="color:red">Fail</span> (often results in .red { fill:red; ;})  (note missing property between "; ;".)


== Deleting CSS Property from CSS Pane ==
== Deleting CSS Property from CSS Pane ==
Line 193: Line 203:
     blue; }" .
     blue; }" .
   3. The fill color of objects associated with ".red" selector is unset and it is black now.
   3. The fill color of objects associated with ".red" selector is unset and it is black now.
  Status: <span style="color:green">Pass</span>.

Latest revision as of 11:37, 27 September 2016

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 { ... }.
 3. When the xpand tree icon (usually ☒ or arrow) is clicked, the tree should expand and should show "ⓧ #rect10".
 Status: Pass.

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".
 4. When the expand tree icon (usually ⊞ or arrow) is clicked, the tree should expand and should show "ⓧ #rect10".
 Status: Pass.

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. On the first click, a duplicate entry is created in the subtree.

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.
 3. The "class" attribute in the rectangle should not change.
 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.
        --> Shouldn't "#rect14 { ... } 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.
 Status: Pass.

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

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