TS 74 CSSEditor

CSS Editor Test Specification for "NetBeans 7.4"

Author: "Vladimir Riha"
Version: "1.0"
Last update: "26th June 2013"
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 black and ulr(...) orange."
    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"


Test suite: "Code completion"

  1. "Selectors completion"
    1. Create a new CSS file
    2. Press Ctrl+Space
    • EXPECTED RESULT: "HTML elements are offered"
  2. "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."
  3. "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."
  4. "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."
  5. "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."
  6. "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."
  7. 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
    3. Color chooser window should be opened
    4. Select some color and submit the dialog.
    5. A hexadecimal code of the color should be generated (#aabbcc)
    6. Switch into other CSS rule, type background-color: and invoke code completion.
    7. Color chooser should be also offered, but also the color previously generated should be offered
    • EXPECTED RESULT: 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."
  8. "Import code completion"
    1. Create a new CSS file and in the same folder create a new folder "test" with another CSS file inside
    2. type
      @import ""
      in the first CSS file
    3. invoke code completion inside the quotes
    • EXPECTED RESULT: "List of files/folders in current directory is offered, type t to reduce the list to all starting with t. Finish completion for the test folder, press / and invoke cc again. File should be offered "
  9. "Navigation from import"
    1. Use the files from previous case
    2. Press Ctrl+Left Click on value of the import statement
    • EXPECTED RESULT: "Imported CSS file is opened in editor"

Test suite: "Navigator" and "CSS Styles"

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. Try the same and make sure that CSS Styles acts the same as Navigator."
  1. "Navigation"
    1. "Double click some node in navigator."
    • EXPECTED RESULT: "Cursor position should be move to selected rule in text editor. Try the same and make sure that CSS Styles acts the same as Navigator."


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

File:Prop.png

    • 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


Test suite: CSS Styles window

  • some of the test cases below have to be tested in two "modes" (based on how CSS Styles is populated)
    • offline: simply open css file in NetBeans, CSS Styles is opened and populated with CSS rule the cursor is in
    • online: run some html file and populate CSS Styles and CSS Styles based on your selection of element (in Browser DOM or using Inspect mode)
  • by default, all cases should be tested in both mode if not said otherwise
  • If you are also testing inspection covered by other specification, then there is no need to test online cases

File:Ts73_csseditor_styles.png

  1. "[online] Selection styles"
    1. Run css.html file from the sample project in browser (test both, Chrome & JavaFX)
    2. Turn Selection Mode on
    3. Select the title "NetBeans Testing App".
    • EXPECTED RESULT: "CSS Styles window shows in Property Summary list of applied properties to the title. Note (and make sure) that if you select some element in Browser DOM window, CSS Styles Window and Properties window are populated as well"
  2. "[online] Property Summary interaction"
    1. Having selected heading from the previous step, check that border is expandable (issue 219487)
    2. If you click on some property in Property Summary, Rule Editor section is populated and shows css rule where the selected property is defined (try "font-size" and "color" and make sure Rule Editor section shows different rules)
    3. If you double click on some item, the appropriate file with the CSS property definition is opened in editor
    4. Invoke right click context menu on some item in CSS Styles and select Go To Source.
    • EXPECTED RESULT: "The appropriate file with the CSS property definition is opened in editor"
  3. "[online] Style Rules section"
    1. Having selected heading from the previous step, check that Styles shows list of applied css rules for given element
    2. If you click on some rule in Style Rules, CSS Styles is populated and shows the selected css rule
    3. If you double click on some item, the appropriate file with the CSS property definition is opened in editor
    4. Invoke right click context menu on some item in Styles and select Go To Source.
    • EXPECTED RESULT: "The appropriate file with the CSS property definition is opened in editor"
  4. "[online] Indication of state of CSS properties"
    1. Run css.html in sample project
    2. File:Ts73_csseditor_re.png
    3. Select some li item in Browser DOM and click on "body" na Styles
    • EXPECTED RESULT: "Applied css properties are black, overriden are black crossed, unknown by browser (or erroneous) are red and unused are gray crossed"


  1. "[online] Media query information"
    1. Select some element with css conditioned via CSS3 Media Query
    2. File:Ts73_csseditor_mq.png
  2. EXPECTED RESULT:"CSS Styles window displays the query together with rule name"
  1. "[online] CSS Styles: Document View"
    1. In CSS Styles window, switch to Document
    2. There is a list of all applied css files
    3. Each file can be expanded to show all rules defined inside it
    4. Try double click and context menu action to go to source as above
    5. Type some search parameter
    • EXPECTED RESULT: "Everything works. If you specify some search parameter, list is reduced to matching items. If you click on some rule, Rule Editor section is populated"
  2. "[online] Rule Editor section and CSS Styles interaction"
    1. Select some property in Property Summary in Selection view
    2. Rule Editor section should display all properties from the rule where the selected property is defined
    3. Edit some property in the Rule Editor section.
    • EXPECTED RESULT: "Everything works. Properties can be modified directly from the Rule Editor section. It should work the same if you select some DOM element (right column) or rule (left column) from Style Cascade section. If you switch to Document View and select some rule, Rule Editor section lists all properties from the given rule"
  3. "[online] Highlight elements affected by property"
    1. Select some property in Property Summary in Selection view while Inspect mode is on
    2. All elements, that are affected by the rule where this property belongs, are outlined (green dashed border)
    3. Click on some style in Styles section.
    • EXPECTED RESULT: Result is the same, affected elements in browser are highlighted
  4. "Property declaration in tooltip"
    1. Hover over some property in Rule Editor section
    • EXPECTED RESULT: Tooltip shows line number and file where the property is declared
  5. "[online] Go To Source from Selection section"
    1. Double click on some property in Selection Summary section
    • EXPECTED RESULT: Appropriate css file is opened and it is scrolled to correct line
  6. "Control toolbar in Rule Editor section"
    1. Select some element either from Browser DOM window or using Select Mode
    2. File:Ts73_csseditor_toolbar.png
    3. Select some of its styles from CSS Styles
    4. Rule Editor section is populated. You can see action icons on the top with following actions: Add Property , Edit CSS Rules (in Applied Styles section), Filter (the magnifier icon).
    5. Edit some property in the Rule Editor section.
    • EXPECTED RESULT: "Try each of this action and make sure the you can add property to the rule add a new rule to the file. Field "Stylesheet" has to correspond with stylesheet where the selected rule is defined. "At Rule" lists @media queries in css file and allows to insert a rule to the specific @media query. Try offline mode too. Try the 3 icons for changing the way which and how css properties are displayed"

Test suite: Edit CSS Rules in HTML files

  • try all cases offline and online (in case of offline usage, Edit CSS Rule is available after switching to Document View in CSS Styles)
  • All run actions are expected to happen in browser with NetBeans integration.

File:TS_73_HTMLEditor_editrule.png

  1. Modify CSS Rules I
    1. Run some html file, e.g. in sample project
    2. Right click on some element in Browser DOM or in HTML source
    3. Select Edit CSS Rules
    4. Dialog similar to the one above is opened
    5. Modify some selector and make sure preview shows the desired expected result
    6. Modify class and confirm
    • EXPECTED RESULT: "Class attribute of the selected element has changed as expected. If you create a new class rule, it was inserted to the selected css file. Try also inserting to selected @media query section"
  2. Modify CSS Rules II
    1. Run some html file, e.g. in sample project
    2. Right click on some element in Browser DOM or in HTML source
    3. Select Edit CSS Rules
    4. Select Compound selector
    5. Selector value is prefiled based on editor position in DOM structure
    6. Confirm
    • EXPECTED RESULT: "Compound rule (e.g. "html body div") was inserted to the selected css file"
  3. "Simple list of values in Add Property and Rule Editor section"
    1. Select some item in Browser DOM and some of its styles in CSS Styles
    2. Rule Editor section is populated with given rule
    • EXPECTED RESULT: "Test that for some know properties there is a list of possible values (color, float etc.) and also there is "none". If you select none then the property is removed from the rule. Try offline mode as well"
  4. "Rule Editor section - Add Property"
    1. Open /stylesheets/base.css in the sample project
    2. Place cursor inside some rule. Rule Editor section window should open and show all properties in the rule
    3. Click to the last row with "Add Property" text
    4. List of possible properties is offered
    5. Try to filter out properties using the filter text field
    6. Select e.g. color and some value
    7. Confirm changes with "Enter"
    • EXPECTED RESULT: "Everything works. New property added. Try online mode as well
  5. "Filter content of Rule Editor section"
    1. Having selected heading from the previous step, check that Styles shows list of applied css rules for given element
    2. If you click on some rule in Styles, Rule Editor section is populated and shows the selected css rule
    3. Try all 4 filters: Show all css properties, Show property categories, Natural sort and Alphabetical sort
    • EXPECTED RESULT: "Properties in Rule Editor section are sorted as expected. Try it in offline mode too."
  6. "Editing number value property"
    1. Run some html file
    2. Select some element that has css rule with some number-based property (e.g. padding, margin etc.)
    3. Select this property in CSS Styles so it is populated to Rule Editor section
    4. Place cursor to the "value column" in Rule Editor section for this property
    5. Press arrow buttons up and down
    • EXPECTED RESULT: "The value is increasing/decreasing and you can see instant changes in browser. Try it in offline mode too."
  7. "Editing color based property"
    1. Run some html file
    2. Select some element that has css rule with some color based property (e.g. color, background-color etc.)
    3. Select this property in CSS Styles so it is populated to Rule Editor section
    4. Place cursor to the "value column" in Rule Editor section for this property
    5. Press the "triangle" icon
    6. List of colors is offered, pick some and make sure the element is changed
    • EXPECTED RESULT: "The color is changed, try to use color chooser (at the beginning of the list) as well "
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