3d2d396c09
Non-uniform border-radii are already supported when using a gradient background, this patch adds support for solid colors as well. The currently applied technique of using corner textures and filling the remaining area with rectangles is extended, so that each corner is padded with rectangles to the size of the largest corner. Add border-radius.js to test cases, to test non-uniform border-radii with both solid color and gradient backgrounds. https://bugzilla.gnome.org/show_bug.cgi?id=631091
54 lines
1.7 KiB
JavaScript
54 lines
1.7 KiB
JavaScript
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
|
|
|
|
const Clutter = imports.gi.Clutter;
|
|
const St = imports.gi.St;
|
|
|
|
const UI = imports.testcommon.ui;
|
|
|
|
UI.init();
|
|
let stage = Clutter.Stage.get_default();
|
|
stage.width = 640;
|
|
stage.height = 480;
|
|
|
|
let vbox = new St.BoxLayout({ vertical: true,
|
|
width: stage.width,
|
|
height: stage.height,
|
|
style: 'padding: 10px;'
|
|
+ 'spacing: 20px;'
|
|
+ 'background: #ffee88;' });
|
|
let scroll = new St.ScrollView();
|
|
scroll.add_actor(vbox);
|
|
stage.add_actor(scroll);
|
|
|
|
function addTestCase(radii, useGradient) {
|
|
let background;
|
|
if (useGradient)
|
|
background = 'background-gradient-direction: vertical;'
|
|
+ 'background-gradient-start: white;'
|
|
+ 'background-gradient-end: gray;';
|
|
else
|
|
background = 'background: white;';
|
|
|
|
vbox.add(new St.Label({ text: "border-radius: " + radii + ";",
|
|
style: 'border: 1px solid black; '
|
|
+ 'border-radius: ' + radii + ';'
|
|
+ 'padding: 5px;' + background }),
|
|
{ x_fill: false });
|
|
}
|
|
|
|
// uniform backgrounds
|
|
addTestCase(" 0px 5px 10px 15px", false);
|
|
addTestCase(" 5px 10px 15px 0px", false);
|
|
addTestCase("10px 15px 0px 5px", false);
|
|
addTestCase("15px 0px 5px 10px", false);
|
|
|
|
// gradient backgrounds
|
|
addTestCase(" 0px 5px 10px 15px", true);
|
|
addTestCase(" 5px 10px 15px 0px", true);
|
|
addTestCase("10px 15px 0px 5px", true);
|
|
addTestCase("15px 0px 5px 10px", true);
|
|
|
|
stage.show();
|
|
Clutter.main();
|
|
stage.destroy();
|