TS 60 CSSeditor

CSS Editor Test Specification for "NetBeans 6.0"

Author: "Jindrich Sedek", updates by "Vladimir Riha"
Version: "3.0"
Last update: "1st November 2011"
Introduction: " This document contains procedures for testing CSS editor. "
Comments: "In progress! This document expect you having a Web server registered in NetBeans."
CSS specifiaction: http://www.w3.org/TR/CSS2/

Contents


Test suite: "New CSS"

Purpose: "This test suite checks that syntax highlighting in CSS editor is correct."
Setup: "No preparation is necessary for this test suite."


  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 Other 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_TS_60_CSSeditor.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."
  1. "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 Sample 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: Image:snapshot1_TS_60_CSSeditor.png"
    • EXPECTED RESULT: "Proper colors should be used for keywords (bold blue), selectors (bold dark green), properties (blue), comments (dark green) and plain text (black). No errors or warning should be showed"
  1. "Show and Hide Style Builder"
    1. "Style builder should be shown after creating new CSS file."
    2. "Push menu item Window|Other|CSS Preview."
    3. "CSS Preview should appear."
    4. "Try to change window possition by moving catching if for a title and moving it anywhere else."
    5. "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"

Purpose: "This test suite checks that creating rule in CSS editor is correct"
Setup: "Just an open CSS file in editor is needed for this test suite"

  1. "Create a rule"
    1. "Right click in the editor pane with an open CSS file and select Insert Code and Css Rule."
    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."
  1. "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."
  1. "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 Close to close Font Family editor dialog."
    • EXPECTED RESULT: "Newly created font family should be visible between all font families in CSS visual editor."
  1. "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."
  1. "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 Close to close Font Family editor dialog."
    • EXPECTED RESULT: "Deleted font family should not be visible between all font families in CSS visual editor."
  1. "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 hexadecimal code should be filled in Color combo box and color attribute should be set in CSS text editor."
  1. "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 completion"

  1. "Atributes autocompletion"
    1. "Right click the editor pane with an open CSS file and select Insert Code and Css Rule."
    2. "Select HTML element: radio button. Choose a caption element in HTML element selection box. Press OK button."
    3. "Type ca and press Ctrl+Space to invoke code completion."
    • EXPECTED RESULT: "caption-side" is the only matching choice and it should be autocompleted."
  2. "Code completion"
    1. "Press Ctrl + Z twice to undo last changes."
    2. "Type t and press Ctrl + Space to invoke code completion."
    3. "Items that starts with "t" should be offered 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."
    • EXPECTED RESULT: "Values should be proposed in the semantic context of an attribute. Colors should have corresponding color rectangle mark."
  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. CSS colors code completion
    1. Type color: | somewhere inside a CSS rule and invoke code completion.
    2. color chooser option should be offered as the first on the list, press Enter to invoke color chooser
    • Color chooser window should be opened.
    1. Select some color and submit the dialog.
    • A hexadecimal code of the color should be generated (##aabbcc)
    1. Switch into other CSS rule, type background-color: and invoke code completion.
    • Color chooser should be also offered, but also the color previously generated should be offered.
    1. Verify that already used colors are accessible in code completion and using them generates correct CSS color value in hexadecimal code.
  1. "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."

Test suite: "Code editing"

Purpose: "This test suite checks that it's possible to edit css file easily."
Setup: "Just an open CSS file in editor is needed for this test suite."

  1. "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 Alt + Shift + F to call code reformatting."
    • EXPECTED RESULT: "Code should be reformatted and attributes should be indented."
  2. "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."
  3. "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."Image:indentation_TS_60_CSSeditor.png
    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."
  4. "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 "'"
  5. "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."
  6. "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"
  7. "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"

Purpose: This test suite checks that navigator follows CSS code editing .
Setup: No preparation is necessary for this test suite except having web project open and CSS style created.

  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."
  1. "Navigation"
    1. "Double click some node in navigator."
    • EXPECTED RESULT: "Cursor position should be move to selected rule in text editor."


Test suite: "Options"

Purpose: This test suite checks right behavior of CSS editor options.
Setup: No preparation is necessary for this test suite except having web project open and CSS style created.

  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"

Purpose: This test suite checks right behavior of CSS editor action.
Setup: No preparation is necessary for this test suite except having web project open and CSS style created.

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




Test suite: "Error highlighting"

Purpose: This test suite checks that error highlighting works well in CSS editor.
Setup: No preparation is necessary for this test suite except having web project open and CSS style created.

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


Test suite: "CSS3 support"

Purpose: "This test suite checks CSS3 support."
Setup: Open css file in editor

  1. "Code Completion - new properties"
    1. Create new class selector ".test{}", place enter between brackets and hit enter.
    2. Type "tr" and invoke code completion
    3. List of items should be offered
    • EXPECTED RESULT: Transform is among the offered items, focus it using arrow button. Help window should be displayed with information that this item is from CSS3. Check the same behavior for some other properties - text-shadow, word-wrap..."

  1. "Code Completion - pseudo classes"
    1. Type "div:" in CSS file (outside of any selector) and invoke cc
    2. List of pseudo classes (default, checked...) is offered. Press Enter
    • EXPECTED RESULT: "List of pseudo classes is offered, after pressing enter "active" is inserted. Complete brackets. No errors are shown "
  1. "Code Completion - pseudo elements"
    1. Type "div::" in CSS file (outside of any selector) and invoke cc
    2. List of pseudo elements (after, before, selection...) is offered. Press Enter
    • EXPECTED RESULT: "List of pseudo elements is offered, after pressing enter "after" is inserted. Complete brackets. No errors are shown "
  1. "Namespaces"
    1. On the first line of css file, type "@" and invoke cc
    2. "@namespace" is among offed items, select it and press enter
    3. @namespace is completed, complete the code so the result looks like this:
 @namespace nb "http://www.netbeans.org"; 
    1. Type "nb|div{}".
    • EXPECTED RESULT: "The first part of selector ("nb
  1. "Code Completion - namespaces"
    1. Declare several namespaces, for example:
    @namespace nb "http://www.netbeans.org";
    @namespace nbw "http://wiki.netbeans.org";
    1. on a new line, type "html|" (with the "|" character) and invoke code completion
    • EXPECTED RESULT: "Namespaces are offered and their url is displayed"
  1. "New syntax support"
    1. Paste following code into the css file:
nb|root { 
    display: block;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;    
}
    • EXPECTED RESULT: "Syntax highlighting works as expected"
  1. "Vendor specific properties"
    1. Inside some selecter, type "-" and invoke cc
    • EXPECTED RESULT: "CC offers items that starts with "-". If some item starts with "-moz", then in help window Firefox icon is colored and others are grey. If it starts with "-webkit", then Chrome or Safari icons are colored (doesn't have to be at the same time since Chrome doesn't support everything like Safari and otherwise) and the rest are gray"
  1. "CSS Code Navigator"
    1. Create new CSS file
    2. CSS Code Navigator should be opened (otherwise open it by Windows|Navigating|Navigator)
    3. Create some selectors (ids, classes, html elements, namespaces etc.)
    • EXPECTED RESULT: "Code Navigator should reflect the content of current CSS file. Double click on some item in Navigator causes cursor to be placed in the editor window at the place the selected item


Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo