tests: Fix scrolling in border.js and border-radius.js
In both tests the scrolled actor's width was fixed to the stage width, so that the scroll bars ended up outside the visible area. Fix by adding an outer container with a fixed width and expanding the scroll view to fill the available area.
This commit is contained in:
parent
7eec8a899a
commit
e3aab2a90f
@ -10,15 +10,18 @@ let stage = Clutter.Stage.get_default();
|
||||
stage.width = 640;
|
||||
stage.height = 480;
|
||||
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;'
|
||||
+ 'background: #ffee88;' });
|
||||
style: 'background: #ffee88;' });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let scroll = new St.ScrollView();
|
||||
scroll.add_actor(vbox);
|
||||
stage.add_actor(scroll);
|
||||
vbox.add(scroll, { expand: true });
|
||||
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
|
||||
function addTestCase(radii, useGradient) {
|
||||
let background;
|
||||
@ -29,11 +32,11 @@ function addTestCase(radii, useGradient) {
|
||||
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 });
|
||||
box.add(new St.Label({ text: "border-radius: " + radii + ";",
|
||||
style: 'border: 1px solid black; '
|
||||
+ 'border-radius: ' + radii + ';'
|
||||
+ 'padding: 5px;' + background }),
|
||||
{ x_fill: false });
|
||||
}
|
||||
|
||||
// uniform backgrounds
|
||||
|
@ -10,63 +10,66 @@ let stage = Clutter.Stage.get_default();
|
||||
stage.width = 640;
|
||||
stage.height = 480;
|
||||
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;'
|
||||
+ 'background: #ffee88;' });
|
||||
style: 'background: #ffee88;' });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let scroll = new St.ScrollView();
|
||||
scroll.add_actor(vbox);
|
||||
stage.add_actor(scroll);
|
||||
vbox.add(scroll, { expand: true });
|
||||
|
||||
vbox.add(new St.Label({ text: "Hello World",
|
||||
style: 'border: 1px solid black; '
|
||||
+ 'padding: 5px;' }));
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
|
||||
vbox.add(new St.Label({ text: "Hello Round World",
|
||||
style: 'border: 3px solid green; '
|
||||
+ 'border-radius: 8px; '
|
||||
+ 'padding: 5px;' }));
|
||||
box.add(new St.Label({ text: "Hello World",
|
||||
style: 'border: 1px solid black; '
|
||||
+ 'padding: 5px;' }));
|
||||
|
||||
vbox.add(new St.Label({ text: "Hello Background",
|
||||
style: 'border: 3px solid green; '
|
||||
+ 'border-radius: 8px; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 5px;' }));
|
||||
box.add(new St.Label({ text: "Hello Round World",
|
||||
style: 'border: 3px solid green; '
|
||||
+ 'border-radius: 8px; '
|
||||
+ 'padding: 5px;' }));
|
||||
|
||||
vbox.add(new St.Label({ text: "Hello Translucent Black Border",
|
||||
style: 'border: 3px solid rgba(0, 0, 0, 0.4); '
|
||||
+ 'background: white; ' }));
|
||||
|
||||
vbox.add(new St.Label({ text: "Hello Translucent Background",
|
||||
style: 'background: rgba(255, 255, 255, 0.3);' }));
|
||||
box.add(new St.Label({ text: "Hello Background",
|
||||
style: 'border: 3px solid green; '
|
||||
+ 'border-radius: 8px; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 5px;' }));
|
||||
|
||||
vbox.add(new St.Label({ text: "Border, Padding, Content: 20px" }));
|
||||
box.add(new St.Label({ text: "Hello Translucent Black Border",
|
||||
style: 'border: 3px solid rgba(0, 0, 0, 0.4); '
|
||||
+ 'background: white; ' }));
|
||||
|
||||
box.add(new St.Label({ text: "Hello Translucent Background",
|
||||
style: 'background: rgba(255, 255, 255, 0.3);' }));
|
||||
|
||||
box.add(new St.Label({ text: "Border, Padding, Content: 20px" }));
|
||||
|
||||
let b1 = new St.BoxLayout({ vertical: true,
|
||||
style: 'border: 20px solid black; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 20px;' });
|
||||
vbox.add(b1);
|
||||
box.add(b1);
|
||||
|
||||
b1.add(new St.BoxLayout({ width: 20, height: 20,
|
||||
style: 'background: black' }));
|
||||
|
||||
vbox.add(new St.Label({ text: "Translucent big blue border, with rounding",
|
||||
style: 'border: 20px solid rgba(0, 0, 255, 0.2); '
|
||||
+ 'border-radius: 10px; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 10px;' }));
|
||||
box.add(new St.Label({ text: "Translucent big blue border, with rounding",
|
||||
style: 'border: 20px solid rgba(0, 0, 255, 0.2); '
|
||||
+ 'border-radius: 10px; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 10px;' }));
|
||||
|
||||
vbox.add(new St.Label({ text: "Transparent border",
|
||||
style: 'border: 20px solid transparent; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 10px;' }));
|
||||
box.add(new St.Label({ text: "Transparent border",
|
||||
style: 'border: 20px solid transparent; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 10px;' }));
|
||||
|
||||
vbox.add(new St.Label({ text: "Border Image",
|
||||
style_class: "border-image",
|
||||
style: "padding: 10px;" }));
|
||||
box.add(new St.Label({ text: "Border Image",
|
||||
style_class: "border-image",
|
||||
style: "padding: 10px;" }));
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
|
Loading…
Reference in New Issue
Block a user