P3
When performing the following tests, is found to be rendered correctly only if the square.
test code:
-- RadialGradientTest.java --
import java.net.URI;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class RadialGradientTest extends Application {
@Override
public void start(Stage stage) throws Exception {
StackPane pane = new StackPane();
WebView browser = new WebView();
URI uri = this.getClass().getResource("/radial-gradient-test.html").toURI();
browser.getEngine().load(uri.toURL().toString());
pane.getChildren().add(browser);
Scene scene = new Scene(pane);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
-- radial-gradient-test.html --
<html>
<head>
<style type="text/css">
.landscape{
width:250px;
height:100px;
border: 1px solid black;
}
.portrait{
width:100px;
height:250px;
border: 1px solid black;
}
.square{
width:100px;
height:100px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>radial-gradient( ellipse closest-side, ..</h1>
landscape:
<div class="landscape" style="background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
portrait:
<div class="portrait" style="background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
square:
<div class="square" style="background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
<h1>radial-gradient( ellipse closest-corner, ..</h1>
landscape:
<div class="landscape" style="background: radial-gradient(ellipse closest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
portrait:
<div class="portrait" style="background: radial-gradient(ellipse closest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
square:
<div class="square" style="background: radial-gradient(ellipse closest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
<h1>radial-gradient(ellipse farthest-side, ..</h1>
landscape:
<div class="landscape" style="background: radial-gradient(ellipse farthest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
portrait:
<div class="portrait" style="background: radial-gradient(ellipse farthest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
square:
<div class="square" style="background: radial-gradient(ellipse farthest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
<h1>radial-gradient(ellipse farthest-corner, ..</h1>
landscape:
<div class="landscape" style="background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
portrait:
<div class="portrait" style="background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
square:
<div class="square" style="background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
</body>
</html>
-------------- end --------------------
test code:
-- RadialGradientTest.java --
import java.net.URI;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class RadialGradientTest extends Application {
@Override
public void start(Stage stage) throws Exception {
StackPane pane = new StackPane();
WebView browser = new WebView();
URI uri = this.getClass().getResource("/radial-gradient-test.html").toURI();
browser.getEngine().load(uri.toURL().toString());
pane.getChildren().add(browser);
Scene scene = new Scene(pane);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
-- radial-gradient-test.html --
<html>
<head>
<style type="text/css">
.landscape{
width:250px;
height:100px;
border: 1px solid black;
}
.portrait{
width:100px;
height:250px;
border: 1px solid black;
}
.square{
width:100px;
height:100px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>radial-gradient( ellipse closest-side, ..</h1>
landscape:
<div class="landscape" style="background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
portrait:
<div class="portrait" style="background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
square:
<div class="square" style="background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
<h1>radial-gradient( ellipse closest-corner, ..</h1>
landscape:
<div class="landscape" style="background: radial-gradient(ellipse closest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
portrait:
<div class="portrait" style="background: radial-gradient(ellipse closest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
square:
<div class="square" style="background: radial-gradient(ellipse closest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
<h1>radial-gradient(ellipse farthest-side, ..</h1>
landscape:
<div class="landscape" style="background: radial-gradient(ellipse farthest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
portrait:
<div class="portrait" style="background: radial-gradient(ellipse farthest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
square:
<div class="square" style="background: radial-gradient(ellipse farthest-side, red, yellow 10%, #1E90FF 50%, white);">
</div>
<h1>radial-gradient(ellipse farthest-corner, ..</h1>
landscape:
<div class="landscape" style="background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
portrait:
<div class="portrait" style="background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
square:
<div class="square" style="background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);">
</div>
</body>
</html>
-------------- end --------------------