chromium/src/third_party/blink/web_tests/svg/carto.net/colourpicker.svg - manifest_repos/chromium_src - Git at Google

 <?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
     <!ATTLIST svg
     	xmlns:a3 CDATA #IMPLIED
     	a3:scriptImplementation CDATA #IMPLIED>
     <!ATTLIST script
         a3:scriptImplementation CDATA #IMPLIED>
 ]>
 <?AdobeSVGViewer save="snapshot"?>
 <svg width="100%" height="100%" viewBox="0 0 1024 768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt);">
 	<script type="text/ecmascript" xlink:href="resources/helper_functions.js" />
 	<script type="text/ecmascript" xlink:href="resources/timer.js" />
 	<script type="text/ecmascript" xlink:href="resources/mapApp.js" />
 	<script type="text/ecmascript" xlink:href="resources/slider.js" />
 	<script type="text/ecmascript" xlink:href="resources/button.js" />
 	<script type="text/ecmascript" xlink:href="resources/colourPicker.js" />
 	<script type="text/ecmascript"><![CDATA[
 		var myMapApp;
 		var cpTransBgRect;

 		function init(evt) {
 			//initialize mapApp
 			myMapApp = new mapApp(false,undefined);
 			//first some colour picker styles
 			var cpBgStyles = {"fill":"gainsboro"};
 			var cpTextStyles = {"font-family":"Arial,Helvetica","font-size":12,"fill":"dimgray"};
 			//button styles
 			var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":12};
 			var buttonStyles = {"fill":"gainsboro"};
 			var shadeLightStyles = {"fill":"white"};
 			var shadeDarkStyles = {"fill":"dimgray"};
 						//colourPicker(id,parentNode,x,y,width,height,bgstyles,textstyles,sliderSymbId,satSliderVisible,valSliderVisible,alphaSliderVisible,colValTextVisible,fillVisible,strokeVisible,startHue,endHue,nrStopVals,fillStartColor,strokeStartColor,functionToCall)
 			myMapApp.colourPickers["myColourPicker1"] = new colourPicker("colourPicker1","colourPickers",200,400,300,120,cpBgStyles,cpTextStyles,"sliderSymbol",true,true,true,true,true,true,0,360,7,"0,255,0,1","0,0,0,0.7",undefined);
 			myMapApp.colourPickers["myColourPicker2"] = new colourPicker("colourPicker2","colourPickerTransformed",500,200,300,90,cpBgStyles,cpTextStyles,"sliderSymbol",true,false,true,true,true,false,90,240,6,"0,255,255,0.5","0,0,0,1",changeBgColor);
 			myMapApp.colourPickers["myColourPicker3"] = new colourPicker("colourPicker3","colourPickers",500,200,300,100,cpBgStyles,cpTextStyles,"sliderSymbol",true,true,false,true,true,true,0,180,7,"255,0,0,1","120,120,120,1",undefined);
 			myMapApp.colourPickers["myColourPicker4"] = new colourPicker("colourPicker4","colourPickers",700,500,300,120,cpBgStyles,cpTextStyles,"sliderSymbol",true,true,true,true,false,true,0,360,7,"255,0,0,1","120,120,120,1",undefined);

 			//create ok button
 			myMapApp.buttons["okbutton"] = new button("okbutton","textbuttons",alertColorValues,"rect","OK",undefined,460,499,25,16,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
 			//create hide/show buttons
 			myMapApp.buttons["showHideButton"] = new button("showHideButton","buttons",showHideCP,"rect","Hide ColourPicker",undefined,510,442,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
 			//create set random fill button
 			myMapApp.buttons["fullbutton"] = new button("fullbutton","buttons",setRandomCol,"rect","Set Random Fill",undefined,510,470,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
 			//create set random stroke button
 			myMapApp.buttons["strokebutton"] = new button("strokebutton","buttons",setRandomCol,"rect","Set Random Stroke",undefined,510,498,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
 			//create resize and moveTo buttons
 			myMapApp.buttons["resizebutton"] = new button("resizebutton","buttons",resizeColourPicker,"rect","Randomly Resize Colour Picker",undefined,500,170,180,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
 			myMapApp.buttons["movetobutton"] = new button("movetobutton","buttons",moveColourPicker,"rect","Randomly Move Colour Picker",undefined,685,170,180,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);

 			cpTransBgRect = document.getElementById("cpTransBgRect");

 		}

 		function alertColorValues() {
 			values = myMapApp.colourPickers["myColourPicker1"].getValues();
 			alert("Fill RGBA: "+values.fill.red+","+values.fill.green+","+values.fill.blue+","+values.fill.alpha+", Stroke RGBA: "+values.stroke.red+","+values.stroke.blue+","+values.stroke.green+","+values.stroke.alpha);
 		}

 		function changeBgColor(id,values) {
 			cpTransBgRect.setAttributeNS(null,"fill-opacity",values.fill.alpha);
 			cpTransBgRect.setAttributeNS(null,"fill","rgb("+values.fill.red+","+values.fill.green+","+values.fill.blue+")");
 		}

 		function showHideCP(id,evt,buttonText) {
 			if (buttonText == "Hide ColourPicker") {
 				myMapApp.colourPickers["myColourPicker1"].hide();
 				myMapApp.buttons["okbutton"].hideButton();
 				myMapApp.buttons["showHideButton"].setTextValue("Show ColourPicker");
 			}
 			else {
 				myMapApp.colourPickers["myColourPicker1"].show();
 				myMapApp.buttons["okbutton"].showButton();
 				myMapApp.buttons["showHideButton"].setTextValue("Hide ColourPicker");
 			}
 		}

 		function resizeColourPicker(id,evt,buttonText) {
 			var width = 300 + Math.round(Math.random()*60);
 			var height = 100 + Math.round(Math.random()*30);
 			myMapApp.colourPickers["myColourPicker3"].resize(width,height);
 		}

 		function moveColourPicker(id,evt,buttonText) {
 			var x = 470 + Math.round(Math.random()*60);
 			var y = 200 + Math.round(Math.random()*50);
 			myMapApp.colourPickers["myColourPicker3"].moveTo(x,y);
 		}

 		function setRandomCol(id,evt,buttonText) {
 			var colType = "fill";
 			if (id == "strokebutton") {
 				colType = "stroke";
 			}
 			var red = Math.round(Math.random()*255);
 			var green = Math.round(Math.random()*255);
 			var blue = Math.round(Math.random()*255);
 			myMapApp.colourPickers["myColourPicker1"].setRGBAColour(colType,red,green,blue,1,false);
 		}

 ]]></script>
 	<defs>
 		<!-- Symbol for Slider -->
 		<symbol id="sliderSymbol" overflow="visible">
 			<line x1="0" y1="-10" x2="0" y2="10" stroke="dimgray" stroke-width="5" pointer-events="none"/>
 		</symbol>
 	</defs>
 	<rect x="-2000" y="-2000" width="6000" height="6000" fill="white" stroke="none" />
 	<!-- group for colourPickers -->
 	<g id="colourPickers" />
 	<!-- group for transformed colour picker -->
 	<g id="colourPickerTransformed" transform="translate(0,-400),rotate(45)">
 		<rect id="cpTransBgRect" x="490" y="190" width="320" height="110" fill="rgb(0,255,255)" fill-opacity="0.5" />
 		<text x="500" y="320" font-family="Arial,Helvetica">This colourPicker has a callBack function<tspan x="500" dy="1.2em">attached that changes the background color</tspan></text>
 	</g>
 	<g id="buttons" />
 </svg>
	<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ATTLIST svg
	xmlns:a3 CDATA #IMPLIED
	a3:scriptImplementation CDATA #IMPLIED>
	<!ATTLIST script
	a3:scriptImplementation CDATA #IMPLIED>
	]>
	<?AdobeSVGViewer save="snapshot"?>
	<svg width="100%" height="100%" viewBox="0 0 1024 768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt);">
	<script type="text/ecmascript" xlink:href="resources/helper_functions.js" />
	<script type="text/ecmascript" xlink:href="resources/timer.js" />
	<script type="text/ecmascript" xlink:href="resources/mapApp.js" />
	<script type="text/ecmascript" xlink:href="resources/slider.js" />
	<script type="text/ecmascript" xlink:href="resources/button.js" />
	<script type="text/ecmascript" xlink:href="resources/colourPicker.js" />
	<script type="text/ecmascript"><![CDATA[
	var myMapApp;
	var cpTransBgRect;

	function init(evt) {
	//initialize mapApp
	myMapApp = new mapApp(false,undefined);
	//first some colour picker styles
	var cpBgStyles = {"fill":"gainsboro"};
	var cpTextStyles = {"font-family":"Arial,Helvetica","font-size":12,"fill":"dimgray"};
	//button styles
	var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":12};
	var buttonStyles = {"fill":"gainsboro"};
	var shadeLightStyles = {"fill":"white"};
	var shadeDarkStyles = {"fill":"dimgray"};
	//colourPicker(id,parentNode,x,y,width,height,bgstyles,textstyles,sliderSymbId,satSliderVisible,valSliderVisible,alphaSliderVisible,colValTextVisible,fillVisible,strokeVisible,startHue,endHue,nrStopVals,fillStartColor,strokeStartColor,functionToCall)
	myMapApp.colourPickers["myColourPicker1"] = new colourPicker("colourPicker1","colourPickers",200,400,300,120,cpBgStyles,cpTextStyles,"sliderSymbol",true,true,true,true,true,true,0,360,7,"0,255,0,1","0,0,0,0.7",undefined);
	myMapApp.colourPickers["myColourPicker2"] = new colourPicker("colourPicker2","colourPickerTransformed",500,200,300,90,cpBgStyles,cpTextStyles,"sliderSymbol",true,false,true,true,true,false,90,240,6,"0,255,255,0.5","0,0,0,1",changeBgColor);
	myMapApp.colourPickers["myColourPicker3"] = new colourPicker("colourPicker3","colourPickers",500,200,300,100,cpBgStyles,cpTextStyles,"sliderSymbol",true,true,false,true,true,true,0,180,7,"255,0,0,1","120,120,120,1",undefined);
	myMapApp.colourPickers["myColourPicker4"] = new colourPicker("colourPicker4","colourPickers",700,500,300,120,cpBgStyles,cpTextStyles,"sliderSymbol",true,true,true,true,false,true,0,360,7,"255,0,0,1","120,120,120,1",undefined);

	//create ok button
	myMapApp.buttons["okbutton"] = new button("okbutton","textbuttons",alertColorValues,"rect","OK",undefined,460,499,25,16,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
	//create hide/show buttons
	myMapApp.buttons["showHideButton"] = new button("showHideButton","buttons",showHideCP,"rect","Hide ColourPicker",undefined,510,442,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
	//create set random fill button
	myMapApp.buttons["fullbutton"] = new button("fullbutton","buttons",setRandomCol,"rect","Set Random Fill",undefined,510,470,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
	//create set random stroke button
	myMapApp.buttons["strokebutton"] = new button("strokebutton","buttons",setRandomCol,"rect","Set Random Stroke",undefined,510,498,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
	//create resize and moveTo buttons
	myMapApp.buttons["resizebutton"] = new button("resizebutton","buttons",resizeColourPicker,"rect","Randomly Resize Colour Picker",undefined,500,170,180,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
	myMapApp.buttons["movetobutton"] = new button("movetobutton","buttons",moveColourPicker,"rect","Randomly Move Colour Picker",undefined,685,170,180,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);

	cpTransBgRect = document.getElementById("cpTransBgRect");

	}

	function alertColorValues() {
	values = myMapApp.colourPickers["myColourPicker1"].getValues();
	alert("Fill RGBA: "+values.fill.red+","+values.fill.green+","+values.fill.blue+","+values.fill.alpha+", Stroke RGBA: "+values.stroke.red+","+values.stroke.blue+","+values.stroke.green+","+values.stroke.alpha);
	}

	function changeBgColor(id,values) {
	cpTransBgRect.setAttributeNS(null,"fill-opacity",values.fill.alpha);
	cpTransBgRect.setAttributeNS(null,"fill","rgb("+values.fill.red+","+values.fill.green+","+values.fill.blue+")");
	}

	function showHideCP(id,evt,buttonText) {
	if (buttonText == "Hide ColourPicker") {
	myMapApp.colourPickers["myColourPicker1"].hide();
	myMapApp.buttons["okbutton"].hideButton();
	myMapApp.buttons["showHideButton"].setTextValue("Show ColourPicker");
	}
	else {
	myMapApp.colourPickers["myColourPicker1"].show();
	myMapApp.buttons["okbutton"].showButton();
	myMapApp.buttons["showHideButton"].setTextValue("Hide ColourPicker");
	}
	}

	function resizeColourPicker(id,evt,buttonText) {
	var width = 300 + Math.round(Math.random()*60);
	var height = 100 + Math.round(Math.random()*30);
	myMapApp.colourPickers["myColourPicker3"].resize(width,height);
	}

	function moveColourPicker(id,evt,buttonText) {
	var x = 470 + Math.round(Math.random()*60);
	var y = 200 + Math.round(Math.random()*50);
	myMapApp.colourPickers["myColourPicker3"].moveTo(x,y);
	}

	function setRandomCol(id,evt,buttonText) {
	var colType = "fill";
	if (id == "strokebutton") {
	colType = "stroke";
	}
	var red = Math.round(Math.random()*255);
	var green = Math.round(Math.random()*255);
	var blue = Math.round(Math.random()*255);
	myMapApp.colourPickers["myColourPicker1"].setRGBAColour(colType,red,green,blue,1,false);
	}

	]]></script>
	<defs>
	<!-- Symbol for Slider -->
	<symbol id="sliderSymbol" overflow="visible">
	<line x1="0" y1="-10" x2="0" y2="10" stroke="dimgray" stroke-width="5" pointer-events="none"/>
	</symbol>
	</defs>
	<rect x="-2000" y="-2000" width="6000" height="6000" fill="white" stroke="none" />
	<!-- group for colourPickers -->
	<g id="colourPickers" />
	<!-- group for transformed colour picker -->
	<g id="colourPickerTransformed" transform="translate(0,-400),rotate(45)">
	<rect id="cpTransBgRect" x="490" y="190" width="320" height="110" fill="rgb(0,255,255)" fill-opacity="0.5" />
	<text x="500" y="320" font-family="Arial,Helvetica">This colourPicker has a callBack function<tspan x="500" dy="1.2em">attached that changes the background color</tspan></text>
	</g>
	<g id="buttons" />
	</svg>