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

WebView's gradient fill may not render correctly

    XMLWordPrintable

    Details

    • Subcomponent:
      web
    • CPU:
      x86_64
    • OS:
      os_x

      Description

      ADDITIONAL SYSTEM INFORMATION :
      macOS BigSur 11.5.2
      openjdk 11.0.13
      openjfx 18

      A DESCRIPTION OF THE PROBLEM :
      WebView's gradient fill may not render correctly.

      OpenJFX 18's WebView may not render gradient fills correctly; OpenJFX 17 does not have this problem.

      The scope of this problem is considered to be large, and if you are using WebView, it will be a disincentive to upgrade to 18.

      The following experimental results suggest that the problem is caused by changes in the Native code, not the Java code.

      I was able to avoid this problem by simply replacing it with the libwebkit.dylib file built with the snapshot of 2021-05-05 in my development environment.

      Looks like the effect of one of the following three changes, possibly 8268849.

      * 2021/8/17 - 8272329: Cherry pick GTK WebKit 2.32.3 changes
      * 2021/7/14 - 8268849: Update to 612.1 version of WebKit
      * 2021/6/23 - 8268915: WebKit build fails with Xcode 12.5



      STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
      Launch the attached test application.

      EXPECTED VERSUS ACTUAL BEHAVIOR :
      EXPECTED -
      The rendering of the attached HTML file matches the web browser.
      ACTUAL -
      * linear-gradient : OK
      * linear-gradient + tile: NG
      * linear-gradient + border: NG
      * linear-gradient + tile + border: NG
      * radial-gradient: OK
      * radial-gradient + tile: NG
      * radial-gradient + border: NG
      * radial-gradient + tile + border: NG
      * fill: OK
      * fill + tile: OK
      * fill + border: OK
      * fill + tile + border: OK


      ---------- BEGIN SOURCE ----------
      import java.net.URI;

      import javafx.application.Application;
      import javafx.scene.Scene;
      import javafx.scene.layout.BorderPane;
      import javafx.scene.web.WebView;
      import javafx.stage.Stage;

      public class WebGradientTest extends Application{

      @Override
      public void start(Stage primaryStage) throws Exception {

      WebView webView = new WebView();
      BorderPane root = new BorderPane(webView);
      Scene scene = new Scene(root, 900, 800);

      URI uri = this.getClass().getResource("/test-gradient.html").toURI();

      webView.getEngine().load(uri.toURL().toString());


      primaryStage.setScene(scene);
      primaryStage.show();
      }

      public static void main(String[] args) {
      Application.launch(args);
      }
      }

      -------

      <html>
      <head>
      <style>
      h2{font-size:10pt;font-weight:normal}
      .lgra{
      background-image:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
              linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
              linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
      width: 240px;
      height: 30px;
      }
      .rgra{
          background-image: radial-gradient(circle, red 20%, yellow 50%, skyblue 100%);
      width: 240px;
      height: 30px;
      }
      .fill{
      background-color:red;
      width: 240px;
      height: 30px;
      }
      .tile{
      background-size: 15px 15px;
      }
      .border{
      border: 1px solid black;
      }
      </style>
      </head>
      <body>
      <h2>linear-gradient</h2>
      <div class="lgra"></div>
      <h2>linear-gradient + tile</h2>
      <div class="lgra tile"></div>
      <h2>linear-gradient + border</h2>
      <div class="lgra border"></div>
      <h2>linear-gradient + tile + border</h2>
      <div class="lgra tile border"></div>
      <h2>radial-gradient</h2>
      <div class="rgra"></div>
      <h2>radial-gradient + tile</h2>
      <div class="rgra tile"></div>
      <h2>radial-gradient + border</h2>
      <div class="rgra border"></div>
      <h2>radial-gradient + tile + border</h2>
      <div class="rgra tile border"></div>
      <h2>fill</h2>
      <div class="fill"></div>
      <h2>fill + tile</h2>
      <div class="fill tile"></div>
      <h2>fill + border</h2>
      <div class="fill border"></div>
      <h2>fill + tile + border</h2>
      <div class="fill tile border"></div>
      </body>
      </html>
      ---------- END SOURCE ----------

      FREQUENCY : always


        Attachments

          Issue Links

            Activity

              People

              Assignee:
              jbhaskar Jay Bhaskar
              Reporter:
              webbuggrp Webbug Group
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

                Dates

                Created:
                Updated: