Test suite: "New CSS"

1. "New CSS document"
   1. "Use File | New Project... to create new Web Application project located in your NetBeansProjects directory."
   2. "Invoke File | New File... from main menu."
   3. "Select Web category and Cascading Style Sheet as file type. Push Next >."
   4. "Type style into File Name, change Folder field to src\java\CSS and press Finish."
• EXPECTED RESULT: "New style.css file is opened in an editor containing only definition of root selector with display attribute. CSS Style Builder pane should be open under the text editor. Root selector should be shown in navigator."
2. "Syntax highlighting"
   1. "Type @import url("netbeans.css"); into editor."
   2. "@import should be highlighted in bold blue color as it is a keyword."
   3. "Copy whole content of style.css document into clipboard."
   4. "Press CTRL+A in the editor and then invoke Edit | Paste from main menu."
   5. "Editor should replace its content with text from clipboard. Compare the syntax highlighting with this picture: "
• EXPECTED RESULT: "Proper colors should be used for keywords (bold blue), selectors (bold dark green), properties (blue), comments (dark green) and plain text (black)."
3. "Show and Hide Style Builder"
   1. "Style builder should be shown after creating new CSS file."
   2. "Push menu item Window|Other|CSS Style Builder."
   3. "CSS Style Builder should disappear."
   4. "Push menu item Window|Other|CSS Preview."
   5. "CSS Preview should appear."
   6. "Try to change window possition by moving catching if for a title and moving it anywhere else."
   7. "Try to hide both windows using "x" button in right corner.
• EXPECTED RESULT: "CSS Style Builder editor and CSS Preview should appear."

Test suite: "Editing rules"

1. "Create a rule"
   1. "Right click the editor pane with an open CSS file."
   2. "Select HTML element: radio button. HTML element: selection box should become enabled."
   3. "Choose a table element in HTML element selection box."
   4. "Click > to add table element between generated rules."
   5. "Push OK button to generate a rule."
   6. "Another way how to create new rule is to push Create Rule button at Toolbar panel"
• EXPECTED RESULT: "New table rule should be generated and highlighted in CSS editor a focus should be inserted between '{' '}' brackets. The rule name should be shown in navigator window."
2. "Setting element font"
   1. "Click on Font label at left pane of CSS Style Builder."
   2. "Font label should be highlighted and font setting should be open in right pane of CSS Style Builder."
   3. "Select some font family in CSS Style Builder."
   4. "New line should be generated in text editor with font-family attribute name and selected value."
   5. "Set font size and unit to cm on right side of CSS Style Builder. font-size attribute should be generated into text editor with selected value and cm units."
   6. "Set Style combo box to italic. font-style attribute should be generated in CSS text editor with italic value."
   7. "Set Color combo box to silver. color attribute should be generated in CSS text editor with silver value."
   8. "Check Underline and Overline check boxes as a Text decoration. New attribute text-decoration should be generated in CSS text editor with both values."
• EXPECTED RESULT: "Every change in CSS visual editor should be migrated into text editor and no error should be highlighted in text editor."
3. "Creating font family"
   1. "Push Edit... button near font family edit box to edit a font family."
   2. "Edit Font Family dialog should appear. Press New button to create new Font Family."
   3. "Select Courier font and press > to add it between selected fonts."
   4. "Change Fonts to Web Fonts in Available combo box."
   5. "Select Georgia font and press > to add it between selected fonts."
   6. "Change Available to Families and add Monospace family between selected fonts."
   7. "Select Georgia between Selected fonts and move it on first position using Up button."
   8. "Press OK to close Font Family editor dialog."
• EXPECTED RESULT: "Newly created font family should be visible between all font families in CSS visual editor."
4. "Creating font family without new"
   1. "Type in text editor: a:link{font-family: 'My family'}."
• EXPECTED RESULT: "New font family containing 'My family' should be created during typing."
5. "Deleting font family"
   1. "Push Edit... button near font family edit box to edit a font family."
   2. "Edit Font Family dialog should appear. Select some family and press Delete button to delete selected font family."
   3. "Press OK to close Font Family editor dialog."
• EXPECTED RESULT: "Deleted font family should not be visible between all font families in CSS visual editor."
6. "Selecting exact color"
   1. "Press left mouse button at Color chooser near Color combo box."
   2. "Choose color dialog should appear with a color palette."
   3. "Select your preferred color."
   4. "Press OK button to submit selected color."
• EXPECTED RESULT: "Color chooser should be filled with selected color, it's RGB code should be filled in Color combo box and color attribute should be set in CSS text editor."
7. "Setting other element attributes"
   1. "Click on Background label at left pane of CSS Style Builder."
   2. "Change background color new attribute background-color should be generated in CSS text editor."
   3. "Change tile, scroll, ... attributes and verify it well generated in CSS text editor."
   4. "Repeat preceding steps with Text Block, Border, Margin and Position labels."
• EXPECTED RESULT: "All changes in CSS visual editor should generate corresponding code in text editor. There should be no error and no warning in generated code."

Test suite: "Code editing"

1. "Atributes autocompletion"
   1. "Right click the editor pane with an open CSS file."
   2. "Select HTML element: radio button. Choose a caption element in HTML element selection box. Press OK button."
   3. "Type a and press Ctrl+Space to invoke code completion."
• EXPECTED RESULT: "azimuth" should be completed since it's the only one possibility to be offered by code completion."
2. "Code completion"
   1. "Press Ctrl + Z twice to undo last changes."
   2. "Type t and press Ctrl + Space to invoke code completion."
   3. "Six items should be invoked in code completion window. Type o to reduce code completion list."
   4. "Only top item should stay in code completion window. Press Enter."
• EXPECTED RESULT: "top attribute should be completed."
3. "Values completion"
   1. "Type color: | somewhere inside a rule."
   2. "Press Ctrl + Space to invoke code completion at possition of |."
   3. "Colors should be proposed. Select green and press Enter."
   4. "Green value should be completed. Use different attributes, verify correct values."
• EXPECTED RESULT: "Values should be proposed in the semantic context of an attribute. Selecting a value in code completion, value should be completed in editor at the right place."
4. "Values decoration"
   1. "Type color: | somewhere inside a rule."
   2. "Press Ctrl + Space to invoke code completion at possition of |."
   3. "Colors should be proposed. Each color should have colored rectangle near it according to name."
   4. "Remove previously typed text."
   5. "Type font-weight: | somewhere inside a rule."
   6. "Press Ctrl + Space to invoke code completion at possition of |."
   7. "Font weight values should be proposed, normal should be italic, since it is a default value of font-weight."
• EXPECTED RESULT: "Values should be proposed in the semantic context of an attribute. Colors should have corresponding color rectangle mark, default values (if any) should be italic."
5. "Values semantic completion"
   1. "Type background: | somewhere inside a rule."
   2. "Press Ctrl + Space to invoke code completion at possition of |."
   3. "Items from background-possition, background-repeat or color should be proposed. Select bottom item and press Enter."
   4. "Bottom should be completed, press Space and invoke code completion again.
   5. "The list of items should be reduced - no bottom and no top items from background-possition should be on the list."
   6. "Select some other item from background-possition and complete it. Press Space and invoke code completion again."
   7. "No item from background-possition should be on the list."
   8. "Use different CSS properties and verify the code completion works correctly according to semantics of CSS rule - you can use the documentation window above code completion window with description to see the correct semantics of CSS rule.
• EXPECTED RESULT: "Values should be proposed in the semantic context of an attribute."
6. "Help window"
   1. "Type fo| somewhere inside a rule."
   2. "Press Ctrl + Space to invoke code completion at possition of |."
   3. "Code completion should invoke together with help window containg information about font."
   4. "Move down through the completion list. Help window content should be changed according to the selected completion item."
• EXPECTED RESULT: "Help window should be invoked with code completion and it should give more detail info about completed items."
7. "Code reformatting"
   1. "Pres Ctrl + A to select all content of CSS editor."
   2. "Press Shift + Tab to break indentation of code in CSS editor."
   3. "Press Ctr + Shift + F to call code reformatting."
• EXPECTED RESULT: "Code should be reformatted and attributes should be indented."
8. "Code folding"
   1. "Move your cursor position into body of caption element rule. Press Ctrl+ -."
   2. "caption element rule should be collapsed."
   3. "Press Ctrl + Shift + - to collapse all folds."
   4. "Move your mouse over .... A window showing content of the folded code should be shown."
   5. "Press Ctrl + Shift + + to expand all folds."
   6. "Create new rule as described in Editing rules / Create a rule category."
• EXPECTED RESULT: "New code fold should be created around newly created rule."
9. "Indentation"
   1. "Type a{|} somewhere into CSS text editor and press Enter at possition of '|'."
   2. "New empty line should be created, cursor should be indented and end bracket '}' should be moved one line lower."
   3. "Type color: black and press Enter."
• EXPECTED RESULT: "New line should be created and cursor should be indented below first character of the previous line."
10. "Bracket completion"
    1. "Type a| somewhere into CSS text editor and press { at possition of '|'."
    2. "End bracket '}' should be added automatically. Type } to add closing bracket.
    3. "The automatically added should be overwritten."
• EXPECTED RESULT: "End bracket should be added automatically, but it should not be added twice if it's added by user as well. The same should be working for single quots ' and double quots ""
11. "Line comment/uncomment"
    1. "Set cursor at some line in CSS file press Ctrl + /. The line should get commented."
    2. "Press Ctrl + / again the line should gen uncommented.
• EXPECTED RESULT: "Line comment should commement/ uncomment the actual cursor line."
12. "Selection comment/uncomment"
    1. "Select piece of code in CSS file press Ctrl + /. The selection should get commented."
    2. "Set cursor into the commented area and press Ctrl + / . The commented area should get uncommented.
    3. "Create two commented areas. Select code section covering pieces of both of them. Press Ctrl + / . Both sections should get merged.
• EXPECTED RESULT: "Selection commement / uncomment action should work as intuitively as possible. See Toggle Comment spec"
13. "Select code action"
    1. Set cursor at your some CSS attribute value. Press Alt + Shift + .. The attribute value should get selected.
    2. Press Alt + Shift + . for second time. Both the attribute name and value should get selected.
    3. Press Alt + Shift + . for third time. Whole rule should get selected.
    4. Press Alt + Shift + ,. The selection should be reduced back to attribute name and value.
    5. Press Alt + Shift + , for second time. The selection should be reduced back just to attribute value.
• EXPECTED RESULT: "The code selection should enalarge and reduce the selection in code blocks."

Test suite: "Navigator"

1. "New node"
   1. "Type: img{} at the last line of CSS text editor."
   2. "New navigator node called img should appear."
   3. "Press Ctrl + Z to undo last changes. img node in navigator should disappear."
• EXPECTED RESULT: "Navigator should create a node for each rule."
2. "Navigation"
   1. "Double click some node in navigator."
• EXPECTED RESULT: "Cursor position should be move to selected rule in text editor."

Test suite: "Options"

1. "Coloring options"
   1. "Use menu Tools/Options. Select Fonts & Colors pane. Select Cascading Style Sheet as a Language."
   2. "Choose selector category and set the color to red. Press OK to close the Options dialog."
• EXPECTED RESULT: "The color of all selectors should be changed to red. Try to restart IDE -> new coloring should permanent."

Test suite: "Actions"

1. "Check CSS"
   1. "..."
• EXPECTED RESULT: "...."

1. "Copy HTML style"
   1. "..."
• EXPECTED RESULT: "...."

1. "Copy XML style"
   1. "..."
• EXPECTED RESULT: "...."

Test suite: "Error highlighting"

1. "Error highlighting"
   1. "Type .5hallo{} } in text CSS editor."
   2. "Syntax error should be highlighted, because of two }."
   3. "Type @import uri("netbeans.css");. Syntax error should be highlighted."
   4. "Change uri to url -> syntax error should disapear."
   5. "Type month { text-align: right color: #00FF00 }. Syntax error should be highlighted because of missing semicolon."
   6. "Type day { color_: rgb(256,0,256) }. Unknown property name warning should be shown."
• EXPECTED RESULT: "All syntax errors should be highlighted."