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

CSS derive() function not working properly when calculating lighter color

XMLWordPrintable

    • generic
    • generic

      FULL PRODUCT VERSION :
      java version "1.8.0_102"
      Java(TM) SE Runtime Environment (build 1.8.0_102-b14)
      Java HotSpot(TM) 64-Bit Server VM (build 25.102-b14, mixed mode)

      ADDITIONAL OS VERSION INFORMATION :
      Microsoft Windows [Version 6.1.7601]

      A DESCRIPTION OF THE PROBLEM :
      Java 8 JavaFX CSS reference documentation (https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#typecolor) describes the function as:

      "Derive <derive>

      derive( <color> , <number>% )

      The derive function takes a color and computes a brighter or darker version of that color. The second parameter is the brightness offset, representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors and negative percentages indicate darker colors. A value of -100% means completely black, 0% means no change in brightness, and 100% means completely white."

      Nevertheless, when specifying a background color as e.g. derive(#7f7f7f, 100%), the result is not completely white as specified in the doc.

      Not just that the white-overlay positive extreme (i.e. overlaying a color with 100% opacity white) is not behaving correctly, also the values in between the neutral (i.e. 0%) and that white-overlay positive extreme (i.e. 100%) are not accurate. All resulting values are slightly darker than expected.

      On the other, the resulting values produced with applying a black-overlay (i.e. all negative percentage values up to and including -100%) produce accurate and expected color.

      STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
      Apply CSS to an fxml layout, e.g.:
          <stylesheets>
              <URL value="@/sample/Main.css"/>
          </stylesheets>

      Where the Main.css defines:
      .root {
        -fx-background-color: derive(#7f7f7f, 100%);
      }

      EXPECTED VERSUS ACTUAL BEHAVIOR :
      EXPECTED -
      Color-picked result should be "completely white" (i.e. #FFFFFF).
      ACTUAL -
      Color-picked result is #E5E5E5.

      REPRODUCIBILITY :
      This bug can be reproduced always.

      ---------- BEGIN SOURCE ----------
      FXML:
      <?xml version="1.0" encoding="UTF-8"?>

      <?import java.net.URL?>
      <?import javafx.scene.control.Label?>
      <?import javafx.scene.layout.HBox?>
      <?import javafx.scene.layout.Pane?>
      <HBox xmlns="http://javafx.com/javafx/8.0.112">
          <stylesheets>
              <URL value="@/sample/Main.css"/>
          </stylesheets>
          <children>
              <Pane styleClass="darker">
                  <children>
                      <Label text="derive(#7f7f7f, -100%)"/>
                  </children>
              </Pane>
              <Pane styleClass="normal">
                  <children>
                      <Label text="derive(#7f7f7f, 0%)"/>
                  </children>
              </Pane>
              <Pane styleClass="lighter">
                  <children>
                      <Label text="derive(#7f7f7f, 100%)"/>
                  </children>
              </Pane>
          </children>
      </HBox>

      CSS:
      * {
        -test-background: #7f7f7f;

        -test-background-darker: derive(-test-background, -100%);
        -test-background-normal: derive(-test-background, 0%);
        -test-background-lighter: derive(-test-background, 100%);
      }

      .root {
        -fx-min-width: 450px;
        -fx-min-height: 200px;
        -fx-border-width: 0;
        -fx-background-insets: 0;
        -fx-padding: 0;
      }

      .pane {
        -fx-pref-width: 150px;
        -fx-pref-height: 200px;
      }

      .label {
        -fx-pref-width: 150px;
        -fx-alignment: center;
        -fx-text-fill: #000;
      }

      .darker {
        -fx-background-color: -test-background-darker;
      }

      .darker > .label {
        -fx-text-fill: #ccc;
      }

      .normal {
        -fx-background-color: -test-background-normal;
      }

      .lighter {
        -fx-background-color: -test-background-lighter;
      }
      ---------- END SOURCE ----------

      CUSTOMER SUBMITTED WORKAROUND :
      Well, not actually.
      "White" can be achieved because, apparenly (and also falsly), derive() accepts percentage values higher than 100%!

      In that regard, to achieve a white result these percentages are needed, based on the input color:
      derive(#7f7f7f, 125%)
      derive(#000000, 200%)


            Unassigned Unassigned
            webbuggrp Webbug Group
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated: