You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
3.9 KiB
156 lines
3.9 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>Test SVG mask</title> |
|
<script> |
|
var dojoConfig = { |
|
async: true, |
|
isDebug: true, |
|
packageMap: [{ |
|
name: 'doh', |
|
location: 'util/doh' |
|
}], |
|
gfxRenderer: 'svg' |
|
} |
|
</script> |
|
<script type="text/javascript" src="../../../dojo/dojo.js"></script> |
|
<script type="text/javascript"> |
|
require([ |
|
"doh/runner", |
|
"dojox/gfx", |
|
"dojox/gfx/svg_mask", |
|
'dojo/domReady!' |
|
], function(doh, gfx){ |
|
|
|
var surface = null; |
|
function setUpSurface(){ |
|
surface = gfx.createSurface('canvas', 500, 500); |
|
} |
|
function tearDownSurface(){ |
|
surface.destroy(); |
|
surface = null; |
|
} |
|
|
|
doh.register("svg.mask", [ |
|
{ |
|
name: "Surface.createMask", |
|
setUp: setUpSurface, |
|
tearDown: tearDownSurface, |
|
runTest: function(t){ |
|
var mask = surface.createMask({}); |
|
doh.assertTrue(mask.parent = surface); |
|
doh.assertTrue(mask.rawNode.parentNode === surface.defNode); |
|
} |
|
},{ |
|
name: "Shape.setMask(mask)", |
|
setUp: setUpSurface, |
|
tearDown: tearDownSurface, |
|
runTest: function(t){ |
|
var rect = surface.createRect({}), |
|
mask = surface.createMask({}); |
|
|
|
doh.assertEqual(null, rect.getMask()); |
|
rect.setMask(mask); |
|
doh.assertEqual(mask, rect.getMask()); |
|
doh.assertEqual('url(#' + mask.shape.id + ')', rect.rawNode.getAttribute('mask')); |
|
} |
|
},{ |
|
name: "Shape.setMask(null)", |
|
setUp: setUpSurface, |
|
tearDown: tearDownSurface, |
|
runTest: function(t){ |
|
var rect = surface.createRect({}), |
|
mask = surface.createMask({}); |
|
|
|
doh.assertEqual(null, rect.getMask()); |
|
rect.setMask(mask); |
|
doh.assertEqual(mask, rect.getMask()); |
|
rect.setMask(null); |
|
doh.assertEqual(null, rect.getMask()); |
|
doh.assertFalse(rect.rawNode.hasAttribute('mask')); |
|
} |
|
},{ |
|
name: "Mask.setShape(shapeWithId)", |
|
setUp: setUpSurface, |
|
tearDown: tearDownSurface, |
|
runTest: function(t){ |
|
var mask = surface.createMask({}); |
|
|
|
var shape = { |
|
id: 'a-mask-id', |
|
x: 1, |
|
y: 2, |
|
width: 3, |
|
height: 4 |
|
}; |
|
mask.setShape(shape); |
|
|
|
var rawNode = mask.rawNode; |
|
for(var key in shape){ |
|
doh.assertEqual(shape[key], rawNode.getAttribute(key)); |
|
} |
|
} |
|
},{ |
|
name: "Mask.setShape(shapeWithoutId)", |
|
setUp: setUpSurface, |
|
tearDown: tearDownSurface, |
|
runTest: function(t){ |
|
var mask = surface.createMask({}); |
|
|
|
var shape = { |
|
x: 1, |
|
y: 2, |
|
width: 3, |
|
height: 4 |
|
}; |
|
mask.setShape(shape); |
|
|
|
var actualShape = mask.getShape(); |
|
doh.assertTrue('id' in actualShape); |
|
doh.assertEqual(actualShape.id, mask.rawNode.getAttribute('id')); |
|
} |
|
},{ |
|
name: "Surface.remove(mask)", |
|
setUp: setUpSurface, |
|
tearDown: tearDownSurface, |
|
runTest: function(t){ |
|
var mask = surface.createMask({}); |
|
surface.remove(mask); |
|
doh.assertEqual(null, mask.parent); |
|
doh.assertEqual(null, mask.rawNode.parentNode); |
|
} |
|
},{ |
|
name: "Surface.add(mask)", |
|
setUp: setUpSurface, |
|
tearDown: tearDownSurface, |
|
runTest: function(t){ |
|
var mask = surface.createMask({}); |
|
surface.remove(mask); |
|
surface.add(mask); |
|
doh.assertEqual(surface, mask.parent); |
|
doh.assertEqual(surface.defNode, mask.rawNode.parentNode); |
|
} |
|
}, |
|
{ |
|
name: "Mask.createXxx/add/remove", |
|
setUp: setUpSurface, |
|
tearDown: tearDownSurface, |
|
runTest: function(t){ |
|
var mask = surface.createMask({}); |
|
var rect = mask.createRect({}); |
|
doh.assertEqual(mask, rect.getParent()); |
|
mask.remove(rect); |
|
doh.assertEqual(null, rect.getParent()); |
|
mask.add(rect); |
|
doh.assertEqual(mask, rect.getParent()); |
|
} |
|
} |
|
]); |
|
doh.run(); |
|
}); |
|
</script> |
|
</head> |
|
<body> |
|
<div id="canvas"></div> |
|
</body> |
|
</html>
|
|
|