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

CSS Pseudo Class position in CSS file affects behavior

    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 (Inactive)
              Reporter:
              jconnors James Connors (Inactive)
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Imported: