Uploaded image for project: 'JDK'
  1. JDK
  2. JDK-8108400

CSS Pseudo Class position in CSS file affects behavior

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Resolved
    • Priority: P4
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: fx1.3
    • Component/s: javafx
    • Labels:
      None
    • Environment:

      NetBeans 6.7.1 Vista

      Description

      Creating two CSS pseudo classes (one representing :hover, the other :pressed) in a CSS file will have different behavior depending on which appears first. In the first example, behavior is as expected. When the mouse hovers over a button, fill turns to gray. When the button is pressed, fill turns to black.

      ===== CSSOK.fx =====
      import javafx.scene.control.*;
      import javafx.scene.*;
      import javafx.stage.*;
      import javafx.scene.layout.*;

      Stage {
         scene: Scene {
            stylesheets: ["{__DIR__}CSSOK.css"]
            content: [
               Tile {
                  columns: 1, vgap: 10
                  content: [
                     Button {
                        style: "fill: red;"
                               "text-fill: white;"
                               "text: \"Sample Button 1\";"
                               "font: 24pt serif"
                     }
                     Button {
                        style: "fill: red;"
                               "text-fill: white;"
                               "text: \"Sample Button 2\";"
                               "font: 24pt serif"
                     }
                  ]
               }
            ]
         }
      }

      ===== CSSOK.css =====
      Button:hover {
         fill: gray;
      }

      Button:pressed {
         fill: black;
      }

      In the second example, Everything's the same as the preceeding FX code, except the imported CSS file is "CSSBug.css". The CSS file has reversed the order of the CSS Pseudo classes, where :pressed appears before :hover. When a mouse hovers over a button, fill turns to gray, and returns to red when the mouse leaves the control. However, when the mouse is pressed over a button, the fill does not become black as one might expect.

      ===== CSSBug.fx =====
      import javafx.scene.control.*;
      import javafx.scene.*;
      import javafx.stage.*;
      import javafx.scene.layout.*;

      Stage {
         title: "CSS precedence"
         scene: Scene {
            stylesheets: ["{__DIR__}CSSBug.css"]
            content: [
               Tile {
                  columns: 1, vgap: 10
                  content: [
                     Button {
                        style: "fill: red;"
                               "text-fill: white;"
                               "text: \"Sample Button 1\";"
                               "font: 24pt serif"
                     }
                     Button {
                        style: "fill: red;"
                               "text-fill: white;"
                               "text: \"Sample Button 2\";"
                               "font: 24pt serif"
                     }
                  ]
               }
            ]
         }
      }

      ===== CSSBug.css =====
      Button:pressed {
         fill: black;
      }

      Button:hover {
         fill: gray;
      }

        Attachments

        1. CSSBug.css
          0.1 kB
        2. CSSBug.fx
          0.8 kB
        3. CSSOK.fx
          0.8 kB

          Activity

            People

            Assignee:
            dgrieve David Grieve
            Reporter:
            jconnors James Connors (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Imported: