accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
142 lines (119 loc) • 4.31 kB
HTML
<html>
<!--
Copyright 2007 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>Graphics Advanced Coordinates Demo Page</title>
<script type="text/javascript" src="../../base.js"></script>
<script type="text/javascript">
goog.require('goog.dom');
goog.require('goog.graphics');
goog.require('goog.graphics.ext');
</script>
<script type="text/javascript">
var group;
function drawElements() {
var graphics = new goog.graphics.ext.Graphics(2000, 2000);
group = new goog.graphics.ext.Group(graphics);
group.setLeft(20, true);
group.setTop(20, true);
group.setWidth(600, true);
group.setHeight(200);
// Basic shapes
var fill = new goog.graphics.SolidFill('yellow');
var stroke = new goog.graphics.Stroke(2, 'green');
var bg = new goog.graphics.SolidFill('#eeeeee');
var outline = new goog.graphics.Stroke(1, '#333333');
var background = new goog.graphics.ext.Rectangle(group);
background.setLeft(0, true);
background.setTop(0, true);
background.setWidth('100%', true);
background.setHeight('100%');
background.setStroke(outline);
background.setFill(bg);
var rect = new goog.graphics.ext.Rectangle(group);
rect.setLeft('-5px', true);
rect.setTop('-5px', true);
rect.setWidth('10px', true);
rect.setHeight('10px');
rect.setStroke(stroke);
rect.setFill(fill);
rect = new goog.graphics.ext.Rectangle(group);
rect.setRight('-5px', true);
rect.setTop('-5px', true);
rect.setWidth('10px', true);
rect.setHeight('10px');
rect.setStroke(stroke);
rect.setFill(fill);
rect = new goog.graphics.ext.Rectangle(group);
rect.setRight('-5px', true);
rect.setBottom('-5px', true);
rect.setWidth('10px', true);
rect.setHeight('10px');
rect.setStroke(stroke);
rect.setFill(fill);
rect = new goog.graphics.ext.Rectangle(group);
rect.setLeft('-5px', true);
rect.setBottom('-5px', true);
rect.setWidth('10px', true);
rect.setHeight('10px');
rect.setStroke(stroke);
rect.setFill(fill);
var image = new goog.graphics.ext.Image(group,
'http://www.google.com/intl/en_ALL/images/logo.gif');
image.setRight(10, true);
image.setTop(10, true);
image.setWidth('276px', true);
image.setHeight('110px');
var ellipse = new goog.graphics.ext.Ellipse(group);
ellipse.setCenter(0, true);
ellipse.setMiddle(0, true);
ellipse.setWidth('10%', true);
ellipse.setHeight('80%');
ellipse.setStroke(stroke);
ellipse.setFill(fill);
ellipse = new goog.graphics.ext.Ellipse(group);
ellipse.setCenter(0, true);
ellipse.setMiddle(0, true);
ellipse.setWidth(120, true);
ellipse.setHeight(60);
ellipse.setStroke(stroke);
ellipse.setFill(fill);
var path = new goog.graphics.ext.Path().moveTo(0, 0).lineTo(20, 0).
lineTo(10, 20).close();
var shape = new goog.graphics.ext.Shape(group, path);
shape.setLeft(10, true);
shape.setTop(10, true);
shape.setWidth('10%', true);
shape.setHeight('10%');
shape.setStroke(stroke);
shape.setFill(fill);
shape = new goog.graphics.ext.Shape(group, path, true);
shape.setLeft(40, true);
shape.setTop(10, true);
shape.setWidth('10%', true);
shape.setHeight('10%');
shape.setStroke(stroke);
shape.setFill(fill);
graphics.render(document.body);
}
</script>
</head>
<body onload="drawElements()">
<div style="position: absolute; top: 400px">
<p>
W: <input type="text" name="width" value="600"
onchange="group.setWidth(this.value)">
H: <input type="text" name="height" value="200"
onchange="group.setHeight(this.value)">
R: <input type="text" name="rotation" value="0"
onchange="group.setRotation(this.value)">
</p>
<p>The front ellipse is sized based on absolute units. The back ellipse is
sized based on percentage of the parent.</p>
</div>
</body>
</html>