How to use createElementNS method in Playwright Internal
Best JavaScript code snippet using playwright-internal
TEI.js
Source:TEI.js 
...159 "magazineArticle":true,160 "newspaperArticle":true,161 "conferencePaper":true};162 var isAnalytic = analyticItemTypes[item.itemType] ? true : false;163 var bibl = teiDoc.createElementNS(ns.tei, "biblStruct");164 bibl.setAttribute("type", item.itemType);165 if(Zotero.getOption("Generate XML IDs")){166 if(!generatedItems[item.itemID]){ 167 var xmlid = genXMLId(item);168 bibl.setAttributeNS(ns.xml, "xml:id", xmlid);169 exportedXMLIds[xmlid] = bibl;170 }171 else{172 var xmlid = "#" + generatedItems[item.itemID].getAttributeNS(ns.xml, "id");173 var myXmlid = "zoteroItem_" + item.itemID;174 bibl.setAttribute("sameAs", xmlid);175 bibl.setAttributeNS(ns.xml, "xml:id", myXmlid);176 exportedXMLIds[myXmlid] = bibl;177 }178 }179 generatedItems[item.itemID] = bibl;180 /** CORE FIELDS **/181 182 var monogr = teiDoc.createElementNS(ns.tei, "monogr");183 var analytic = null;184 var series = null;185 // create title or monogr186 if(isAnalytic){187 analytic = teiDoc.createElementNS(ns.tei, "analytic")188 bibl.appendChild(analytic);189 bibl.appendChild(monogr);190 var analyticTitle = teiDoc.createElementNS(ns.tei, "title");191 analyticTitle.setAttribute("level", "a");192 analytic.appendChild(analyticTitle);193 if(item.title){194 analyticTitle.appendChild(teiDoc.createTextNode(item.title));195 }196 // there should be a publication title!197 if(item.publicationTitle){198 var pubTitle = teiDoc.createElementNS(ns.tei, "title");199 if(item.itemType == "journalArticle"){200 pubTitle.setAttribute("level", "j");201 }202 else{203 pubTitle.setAttribute("level", "m");204 }205 pubTitle.appendChild(teiDoc.createTextNode(item.publicationTitle));206 monogr.appendChild(pubTitle);207 }208 // nonetheless if the user pleases this has to be possible209 else if(!item.conferenceName){210 var pubTitle = teiDoc.createElementNS(ns.tei, "title");211 pubTitle.setAttribute("level", "m");212 monogr.appendChild(pubTitle);213 }214 }215 else {216 bibl.appendChild(monogr);217 if(item.title){218 var title = teiDoc.createElementNS(ns.tei, "title");219 title.setAttribute("level", "m");220 title.appendChild(teiDoc.createTextNode(item.title));221 monogr.appendChild(title);222 }223 else if(!item.conferenceName){224 var title = teiDoc.createElementNS(ns.tei, "title");225 monogr.appendChild(title);226 }227 }228 // add name of conference229 if(item.conferenceName){230 var conferenceName = teiDoc.createElementNS(ns.tei, "title");231 conferenceName.setAttribute("type", "conferenceName");232 conferenceName.appendChild(teiDoc.createTextNode(item.conferenceName));233 monogr.appendChild(conferenceName);234 }235 // itemTypes in Database do unfortunately not match fields236 // of item237 if(item.series || item.seriesTitle){238 series = teiDoc.createElementNS(ns.tei, "series");239 bibl.appendChild(series);240 if(item.series){241 var title = teiDoc.createElementNS(ns.tei, "title");242 title.setAttribute("level", "s");243 title.appendChild(teiDoc.createTextNode(item.series));244 series.appendChild(title);245 }246 if(item.seriesTitle){247 var seriesTitle = teiDoc.createElementNS(ns.tei, "title");248 seriesTitle.setAttribute("level", "s");249 seriesTitle.setAttribute("type", "alternative");250 seriesTitle.appendChild(teiDoc.createTextNode(item.seriesTitle));251 series.appendChild(seriesTitle);252 }253 if(item.seriesText){254 var seriesText = teiDoc.createElementNS(ns.tei, "note");255 seriesText.setAttribute("type", "description");256 seriesText.appendChild(teiDoc.createTextNode(item.seriesText));257 series.appendChild(seriesText);258 }259 if(item.seriesNumber){260 var seriesNumber = teiDoc.createElementNS(ns.tei, "biblScope");261 seriesNumber.setAttribute("type", "vol");262 seriesNumber.appendChild(teiDoc.createTextNode(item.seriesNumber));263 series.appendChild(seriesNumber);264 }265 }266 // creators are all people only remotely involved into the creation of267 // a resource268 for(var i in item.creators){269 var role = '';270 var curCreator = '';271 var curRespStmt = null;272 var type = item.creators[i].creatorType;273 if(type == "author"){274 curCreator = teiDoc.createElementNS(ns.tei, "author");275 }276 else if (type == "editor"){277 curCreator = teiDoc.createElementNS(ns.tei, "editor");278 }279 else if (type == "seriesEditor"){280 curCreator = teiDoc.createElementNS(ns.tei, "editor");281 }282 else if (type == "bookAuthor"){283 curCreator = teiDoc.createElementNS(ns.tei, "author");284 }285 else {286 curRespStmt = teiDoc.createElementNS(ns.tei, "respStmt");287 var resp = teiDoc.createElementNS(ns.tei, "resp");288 resp.appendChild(teiDoc.createTextNode(type));289 curRespStmt.appendChild(resp);290 curCreator = teiDoc.createElementNS(ns.tei, "persName");291 curRespStmt.appendChild(curCreator);292 }293 // add the names of a particular creator294 if(item.creators[i].firstName){295 var forename = teiDoc.createElementNS(ns.tei, "forename");296 forename.appendChild(teiDoc.createTextNode(item.creators[i].firstName));297 curCreator.appendChild(forename);298 }299 if(item.creators[i].lastName){300 var surname = null;301 if(item.creators[i].firstName){302 surname = teiDoc.createElementNS(ns.tei, "surname");303 }304 else{305 surname = teiDoc.createElementNS(ns.tei, "name");306 }307 surname.appendChild(teiDoc.createTextNode(item.creators[i].lastName));308 curCreator.appendChild(surname);309 }310 // make sure the right thing gets added311 if(curRespStmt){312 curCreator = curRespStmt;313 }314 //decide where the creator shall appear315 if(type == "seriesEditor" && series){316 series.appendChild(curCreator);317 }318 else if(isAnalytic && (type != 'editor' && type != 'bookAuthor')){319 // assuming that only authors go here320 analytic.appendChild(curCreator);321 }322 else{323 monogr.appendChild(curCreator);324 }325 }326 if(item.edition){327 var edition = teiDoc.createElementNS(ns.tei, "edition");328 edition.appendChild(teiDoc.createTextNode(item.edition));329 monogr.appendChild(edition);330 }331 // software332 else if (item.version){333 var edition = teiDoc.createElementNS(ns.tei, "edition");334 edition.appendChild(teiDoc.createTextNode(item.version));335 monogr.appendChild(edition);336 }337 //create the imprint338 var imprint = teiDoc.createElementNS(ns.tei, "imprint");339 monogr.appendChild(imprint);340 if(item.place){341 var pubPlace = teiDoc.createElementNS(ns.tei, "pubPlace");342 pubPlace.appendChild(teiDoc.createTextNode(item.place));343 imprint.appendChild(pubPlace);344 }345 if(item.volume){346 var volume = teiDoc.createElementNS(ns.tei, "biblScope");347 volume.setAttribute("type","vol");348 volume.appendChild(teiDoc.createTextNode(item.volume));349 imprint.appendChild(volume);350 }351 if(item.issue){352 var issue = teiDoc.createElementNS(ns.tei, "biblScope");353 issue.setAttribute("type","issue");354 issue.appendChild(teiDoc.createTextNode(item.issue));355 imprint.appendChild(issue);356 }357 if(item.section){358 var section = teiDoc.createElementNS(ns.tei, "biblScope");359 section.setAttribute("type","chap");360 section.appendChild(teiDoc.createTextNode(item.section));361 imprint.appendChild(section);362 }363 if(item.pages){364 var pages = teiDoc.createElementNS(ns.tei, "biblScope");365 pages.setAttribute("type","pp");366 pages.appendChild(teiDoc.createTextNode(item.pages));367 imprint.appendChild(pages);368 }369 if(item.publisher){370 var publisher = teiDoc.createElementNS(ns.tei, "publisher");371 publisher.appendChild(teiDoc.createTextNode(item.publisher));372 imprint.appendChild(publisher);373 }374 if(item.date){375 var date = Zotero.Utilities.strToDate(item.date);376 var imprintDate = teiDoc.createElementNS(ns.tei, "date");377 if(date.year) {378 imprintDate.appendChild(teiDoc.createTextNode(date.year));379 }380 else{381 imprintDate.appendChild(teiDoc.createTextNode(item.date));382 }383 imprint.appendChild(imprintDate);384 }385 // flag unpublished if there is no date | publisher | place386 if(!(item.date || item.publisher || item.place)){387 publisher = teiDoc.createComment(" no publisher, publication date or place given ");388 imprint.appendChild(publisher);389 }390 if(item.accessDate){391 var note = teiDoc.createElementNS(ns.tei, "note");392 note.setAttribute("type", "accessed");393 note.appendChild(teiDoc.createTextNode(item.accessDate));394 imprint.appendChild(note);395 }396 if(item.url){397 var note = teiDoc.createElementNS(ns.tei, "note");398 note.setAttribute("type", "url");399 note.appendChild(teiDoc.createTextNode(item.url));400 imprint.appendChild(note);401 }402 if(item.thesisType){403 var note = teiDoc.createElementNS(ns.tei, "note");404 note.setAttribute("type", "thesisType");405 note.appendChild(teiDoc.createTextNode(item.thesisType));406 imprint.appendChild(note);407 }408 //export notes409 if(Zotero.getOption("exportNotes")) {410 for(var n in item.notes) {411 // do only some basic cleaning of the html412 // strip HTML tags413 var noteText = Zotero.Utilities.cleanTags(item.notes[n].note);414 // unescape remaining entities -> no double escapes415 noteText = Zotero.Utilities.unescapeHTML(noteText);416 var note = teiDoc.createElementNS(ns.tei, "note");417 note.appendChild(teiDoc.createTextNode(noteText));418 bibl.appendChild(note);419 }420 }421 //export tags, if available422 if(Zotero.getOption("Export Tags") && item.tags && item.tags.length > 0) {423 var tags = teiDoc.createElementNS(ns.tei, "note");424 tags.setAttribute("type","tags");425 for(var n in item.tags) {426 var tag = teiDoc.createElementNS(ns.tei, "note");427 tag.setAttribute("type", "tag");428 tag.appendChild(teiDoc.createTextNode(item.tags[n].tag));429 tags.appendChild(tag);430 }431 bibl.appendChild(tags);432 }433 // the canonical reference numbers434 if(item.ISBN){435 var idno = teiDoc.createElementNS(ns.tei, "idno");436 idno.setAttribute("type", "ISBN");437 idno.appendChild(teiDoc.createTextNode(item.ISBN));438 bibl.appendChild(idno);439 }440 if(item.ISSN){441 var idno = teiDoc.createElementNS(ns.tei, "idno");442 idno.setAttribute("type", "ISSN");443 idno.appendChild(teiDoc.createTextNode(item.ISSN));444 bibl.appendChild(idno);445 }446 if(item.DOI){447 var idno = teiDoc.createElementNS(ns.tei, "idno");448 idno.setAttribute("type", "DOI");449 idno.appendChild(teiDoc.createTextNode(item.DOI));450 bibl.appendChild(idno);451 }452 if(item.callNumber){453 var idno = teiDoc.createElementNS(ns.tei, "idno");454 idno.setAttribute("type", "callNumber");455 idno.appendChild(teiDoc.createTextNode(item.callNumber));456 bibl.appendChild(idno);457 }458 return bibl;459}460function generateCollection(collection, teiDoc){461 var listBibl;462 var children = collection.children ? collection.children : collection.descendents;463 if(children.length > 0){464 listBibl = teiDoc.createElementNS(ns.tei, "listBibl");465 var colHead = teiDoc.createElementNS(ns.tei, "head");466 colHead.appendChild(teiDoc.createTextNode(collection.name));467 listBibl.appendChild(colHead);468 for each(var child in children){469 if(child.type == "collection"){470 listBibl.appendChild(generateCollection(child, teiDoc));471 }472 else if(allItems[child.id]){473 listBibl.appendChild(generateItem(allItems[child.id], teiDoc));474 }475 }476 }477 return listBibl;478}479function generateTEIDocument(listBibls, teiDoc){480 var text = teiDoc.createElementNS(ns.tei, "text");481 var body = teiDoc.createElementNS(ns.tei, "body");482 teiDoc.documentElement.appendChild(text);483 text.appendChild(body);484 for each(var lb in listBibls){485 body.appendChild(lb);486 }487 return teiDoc;488}489function doExport() {490 Zotero.debug("starting TEI-XML export");491 Zotero.setCharacterSet("utf-8");492 Zotero.debug("TEI-XML Exporting items");493 // Initialize XML Doc494 var parser = new DOMParser();495 var teiDoc = // <TEI/>496 parser.parseFromString('<TEI xmlns="http://www.tei-c.org/ns/1.0"><teiHeader><fileDesc><titleStmt><title>Exported from Zotero</title></titleStmt><publicationStmt><p>unpublished</p></publicationStmt><sourceDesc><p>Generated from Zotero database</p></sourceDesc></fileDesc></teiHeader></TEI>', 'application/xml'); 497 var item = null;498 while(item = Zotero.nextItem()){499 allItems[item.itemID] = item;500 }501 var collection = Zotero.nextCollection();502 var listBibls = new Array();503 if(Zotero.getOption("Export Collections") && collection){504 var curListBibl = generateCollection(collection, teiDoc);505 if(curListBibl){506 listBibls.push(curListBibl);507 }508 while(collection = Zotero.nextCollection()){509 curListBibl = generateCollection(collection, teiDoc);510 if(curListBibl){511 listBibls.push(curListBibl);512 }513 }514 }515 else {516 var listBibl = teiDoc.createElementNS(ns.tei, "listBibl");517 for each(var item in allItems){518 //skip attachments519 if(item.itemType == "attachment"){520 continue;521 }522 listBibl.appendChild(generateItem(item, teiDoc));523 }524 listBibls.push(listBibl);525 }526 var outputElement;527 if(Zotero.getOption("Full TEI Document")){528 outputElement = generateTEIDocument(listBibls, teiDoc);529 }530 else{531 if(listBibls.length > 1){532 outputElement = teiDoc.createElementNS(ns.tei, "listBibl");533 for each(var lb in listBibls){534 outputElement.appendChild(lb);535 }536 }537 else if(listBibls.length == 1){538 outputElement = listBibls[0];539 }540 else{541 outputElement = teiDoc.createElement("empty");542 }543 }544 // write to file.545 Zotero.write('<?xml version="1.0" encoding="UTF-8"?>'+"\n");546 var serializer = new XMLSerializer();...
svg-use.js
Source:svg-use.js
...6 var svgNS = 'http://www.w3.org/2000/svg';7 var xlinkNS = 'http://www.w3.org/1999/xlink';8 9 function buildSVG( main ) {10 var svg = document.createElementNS( svgNS, 'svg' );11 svg.style.position = 'absolute';12 svg.style.left = '0';13 svg.style.top = '0';14 svg.setAttribute( 'width', main.width() );15 svg.setAttribute( 'height', main.height() );16 main.append( svg );17 return svg;18 }19 20 function buildRect() {21 var rect = document.createElementNS( svgNS, 'rect' );22 23 rect.setAttribute( 'x', 0 );24 rect.setAttribute( 'y', 0 );25 rect.setAttribute( 'width', 20 );26 rect.setAttribute( 'height', 20 );27 rect.setAttribute( 'rx', 0 );28 rect.setAttribute( 'ry', 0 );29 30 rect.setAttribute( 'style', 'fill: #f00; stroke: #000;' );31 32 return rect;33 }34 35 function addUse( parent, id ) {36 var use = document.createElementNS( svgNS, 'use' );37 use.setAttributeNS( xlinkNS, 'xlink:href', '#' + id );38 parent.appendChild( use );39 }40 41 // groups (none, basic, complete) / simple (none, complete)42 43 var basicN = 200;44 45 phet.tests.svgUseSimpleNone = function( main ) {46 var svg = buildSVG( main );47 48 var rects = [];49 for ( var i = 0; i < basicN; i++ ) {50 var rect = buildRect();51 rects.push( rect );52 svg.appendChild( rect );53 }54 55 // return step function56 return function( timeElapsed ) {57 for ( var k = 0; k < basicN; k++ ) {58 rects[k].setAttribute( 'x', ( Math.random() - 0.5 ) * 400 + main.width() / 2 );59 rects[k].setAttribute( 'y', ( Math.random() - 0.5 ) * 400 + main.height() / 2 );60 }61 // group[0].transform.baseVal.getItem( 0 ).setMatrix( matrix.toSVGMatrix() );62 }63 };64 65 phet.tests.svgUseSimpleDuplicated = function( main ) {66 var svg = buildSVG( main );67 68 var defs = document.createElementNS( svgNS, 'defs' );69 svg.appendChild( defs );70 71 var uses = [];72 for ( var i = 0; i < basicN; i++ ) {73 var rect = buildRect();74 rect.setAttribute( 'id', i );75 defs.appendChild( rect );76 var use = document.createElementNS( svgNS, 'use' );77 use.setAttributeNS( xlinkNS, 'xlink:href', '#' + i );78 svg.appendChild( use );79 uses.push( use );80 }81 82 // return step function83 return function( timeElapsed ) {84 for ( var k = 0; k < basicN; k++ ) {85 uses[k].setAttribute( 'x', ( Math.random() - 0.5 ) * 400 + main.width() / 2 );86 uses[k].setAttribute( 'y', ( Math.random() - 0.5 ) * 400 + main.height() / 2 );87 }88 // group[0].transform.baseVal.getItem( 0 ).setMatrix( matrix.toSVGMatrix() );89 }90 };91 92 phet.tests.svgUseSimpleComplete = function( main ) {93 var svg = buildSVG( main );94 95 var defs = document.createElementNS( svgNS, 'defs' );96 svg.appendChild( defs );97 98 var rect = buildRect();99 rect.setAttribute( 'id', 'rr' );100 defs.appendChild( rect );101 102 var uses = [];103 for ( var i = 0; i < basicN; i++ ) {104 var use = document.createElementNS( svgNS, 'use' );105 use.setAttributeNS( xlinkNS, 'xlink:href', '#rr' );106 svg.appendChild( use );107 uses.push( use );108 }109 110 // return step function111 return function( timeElapsed ) {112 for ( var k = 0; k < basicN; k++ ) {113 uses[k].setAttribute( 'x', ( Math.random() - 0.5 ) * 400 + main.width() / 2 );114 uses[k].setAttribute( 'y', ( Math.random() - 0.5 ) * 400 + main.height() / 2 );115 }116 // group[0].transform.baseVal.getItem( 0 ).setMatrix( matrix.toSVGMatrix() );117 }118 };119 120 phet.tests.svgUseHeavyNone = function( main ) {121 var svg = buildSVG( main );122 123 var a = document.createElementNS( svgNS, 'g' );124 a.setAttribute( 'transform', dot.Matrix3.translation( main.width() / 2, main.height() / 2 ).getSVGTransform() );125 svg.appendChild( a );126 var b = document.createElementNS( svgNS, 'g' );127 a.appendChild( b );128 var c = document.createElementNS( svgNS, 'g' );129 a.appendChild( c );130 var d = document.createElementNS( svgNS, 'g' );131 d.setAttribute( 'transform', dot.Matrix3.translation( 100, 0 ).getSVGTransform() );132 b.appendChild( d );133 var e = document.createElementNS( svgNS, 'g' );134 c.appendChild( e );135 var f = document.createElementNS( svgNS, 'g' );136 d.appendChild( f );137 var g = document.createElementNS( svgNS, 'g' );138 e.appendChild( g );139 var h = document.createElementNS( svgNS, 'g' );140 f.appendChild( h );141 var i = document.createElementNS( svgNS, 'g' );142 b.appendChild( i );143 var j = document.createElementNS( svgNS, 'g' );144 b.appendChild( j );145 var k = document.createElementNS( svgNS, 'g' );146 b.appendChild( k );147 var l = document.createElementNS( svgNS, 'g' );148 c.appendChild( l );149 var m = document.createElementNS( svgNS, 'g' );150 l.appendChild( m );151 var n = document.createElementNS( svgNS, 'g' );152 m.appendChild( n );153 var o = document.createElementNS( svgNS, 'g' );154 n.appendChild( o );155 var p = document.createElementNS( svgNS, 'g' );156 o.appendChild( p );157 var q = document.createElementNS( svgNS, 'g' );158 p.appendChild( q );159 var r = document.createElementNS( svgNS, 'g' );160 q.appendChild( r );161 var s = document.createElementNS( svgNS, 'g' );162 r.appendChild( s );163 var t = document.createElementNS( svgNS, 'g' );164 s.appendChild( t );165 166 var u = buildRect();167 u.setAttribute( 'style', 'fill: #00f; stroke: #000;' );168 u.setAttribute( 'x', -200 );169 h.appendChild( u );170 171 var v = buildRect();172 v.setAttribute( 'y', 100 );173 b.appendChild( v );174 175 var w = buildRect();176 w.setAttribute( 'y', 150 );177 c.appendChild( w );178 179 var x = buildRect();180 t.appendChild( x );181 182 var y = buildRect();183 h.appendChild( y );184 185 var z = buildRect();186 z.setAttribute( 'style', 'fill: #0f0; stroke: #000;' );187 l.appendChild( z );188 189 var rotB = 0;190 var rotT = 0;191 192 // return step function193 return function( timeElapsed ) {194 b.setAttribute( 'transform', dot.Matrix3.rotation2( rotB += timeElapsed ).getSVGTransform() );195 t.setAttribute( 'transform', dot.Matrix3.rotation2( rotT += timeElapsed * 2 ).getSVGTransform() );196 }197 };198 199 phet.tests.svgUseHeavyComplete = function( main ) {200 var svg = buildSVG( main );201 202 var defs = document.createElementNS( svgNS, 'defs' );203 svg.appendChild( defs );204 205 var a = document.createElementNS( svgNS, 'g' );206 a.setAttribute( 'id', 'a' );207 a.setAttribute( 'transform', dot.Matrix3.translation( main.width() / 2, main.height() / 2 ).getSVGTransform() );208 defs.appendChild( a );209 var b = document.createElementNS( svgNS, 'g' );210 b.setAttribute( 'id', 'b' );211 defs.appendChild( b );212 addUse( a, 'b' );213 var c = document.createElementNS( svgNS, 'g' );214 c.setAttribute( 'id', 'c' );215 defs.appendChild( c );216 addUse( a, 'c' );217 var d = document.createElementNS( svgNS, 'g' );218 d.setAttribute( 'id', 'd' );219 d.setAttribute( 'transform', dot.Matrix3.translation( 100, 0 ).getSVGTransform() );220 defs.appendChild( d );221 addUse( b, 'd' );222 var e = document.createElementNS( svgNS, 'g' );223 e.setAttribute( 'id', 'e' );224 defs.appendChild( e );225 addUse( c, 'e' );226 var f = document.createElementNS( svgNS, 'g' );227 f.setAttribute( 'id', 'f' );228 defs.appendChild( f );229 addUse( d, 'f' );230 var g = document.createElementNS( svgNS, 'g' );231 g.setAttribute( 'id', 'g' );232 defs.appendChild( g );233 addUse( e, 'g' );234 var h = document.createElementNS( svgNS, 'g' );235 h.setAttribute( 'id', 'h' );236 defs.appendChild( h );237 addUse( f, 'h' );238 var i = document.createElementNS( svgNS, 'g' );239 i.setAttribute( 'id', 'i' );240 defs.appendChild( i );241 addUse( b, 'i' );242 var j = document.createElementNS( svgNS, 'g' );243 j.setAttribute( 'id', 'j' );244 defs.appendChild( j );245 addUse( b, 'j' );246 var k = document.createElementNS( svgNS, 'g' );247 k.setAttribute( 'id', 'k' );248 defs.appendChild( k );249 addUse( b, 'k' );250 var l = document.createElementNS( svgNS, 'g' );251 l.setAttribute( 'id', 'l' );252 defs.appendChild( l );253 addUse( c, 'l' );254 var m = document.createElementNS( svgNS, 'g' );255 m.setAttribute( 'id', 'm' );256 defs.appendChild( m );257 addUse( l, 'm' );258 var n = document.createElementNS( svgNS, 'g' );259 n.setAttribute( 'id', 'n' );260 defs.appendChild( n );261 addUse( m, 'n' );262 var o = document.createElementNS( svgNS, 'g' );263 o.setAttribute( 'id', 'o' );264 defs.appendChild( o );265 addUse( n, 'o' );266 var p = document.createElementNS( svgNS, 'g' );267 p.setAttribute( 'id', 'p' );268 defs.appendChild( p );269 addUse( o, 'p' );270 var q = document.createElementNS( svgNS, 'g' );271 q.setAttribute( 'id', 'q' );272 defs.appendChild( q );273 addUse( p, 'q' );274 var r = document.createElementNS( svgNS, 'g' );275 r.setAttribute( 'id', 'r' );276 defs.appendChild( r );277 addUse( q, 'r' );278 var s = document.createElementNS( svgNS, 'g' );279 s.setAttribute( 'id', 's' );280 defs.appendChild( s );281 addUse( r, 's' );282 var t = document.createElementNS( svgNS, 'g' );283 t.setAttribute( 'id', 't' );284 defs.appendChild( t );285 addUse( s, 't' );286 287 var u = buildRect();288 u.setAttribute( 'id', 'u' );289 u.setAttribute( 'style', 'fill: #00f; stroke: #000;' );290 u.setAttribute( 'x', -200 );291 defs.appendChild( u );292 addUse( h, 'u' );293 294 var v = buildRect();295 v.setAttribute( 'id', 'v' );296 v.setAttribute( 'y', 100 );...
staffNS.xml.js
Source:staffNS.xml.js
...11 doc.createNotationNode("notation1","notation1File", null),12 doc.createNotationNode("notation2",null, "notation2File")13 );14//<entElement domestic='Yes'>Element data</entElement><?PItarget PIdata?>15 var entElement = doc.createElementNS("http://www.w3.org/2000/xmlns/","entElement");16 entElement.setAttribute("domestic", "Yes");17 entElement.appendChild(doc.createTextNode("Element data"));18 var procElement = doc.createProcessingInstruction("PItarget", "PfIdata");19 var ent4 = doc.createEntityNode("ent4",entElement, procElement);20 var ent5 = doc.createEntityNode("ent5");21 ent5.publicId = "entityURI";22 ent5.systemId = "entityFile";23 ent5.notationName = "notation1";24 var entities = new dom.EntityNodeMap(25 doc,26 doc.createEntityNode("ent1", doc.createTextNode("es")),27 doc.createEntityNode("ent2",doc.createTextNode("1900 Dallas Road")),28 doc.createEntityNode("ent3",doc.createTextNode("Texas")),29 ent4,30 ent531 );32 var defaultAttributes = new dom.NamedNodeMap(doc);33 var entElement = doc.createElementNS("http://www.w3.org/2000/xmlns/","entElement");34 entElement.setAttribute("attr1", "Attr");35 entElement.setAttribute("domestic", "MALE");36 defaultAttributes.setNamedItem(entElement);37 var defaultAddress = doc.createElementNS("http://www.w3.org/2000/xmlns/","address");38 defaultAddress.setAttribute("street", "Yes");39 defaultAttributes.setNamedItem(defaultAddress);40 doc.doctype = new dom.DocumentType(doc, "staff", entities, notations, defaultAttributes);41 doc.doctype._systemId = "staffNS.dtd";42 doc.implementation = implementation;43 var staff = doc.createElementNS("http://www.w3.org/2000/xmlns/","staff");44 var employee, address, name, position,gender,id, salary;45 /************************************46 * EMPLOYEEE 1 *47 ************************************/48 employee = doc.createElementNS("http://www.w3.org/2000/xmlns/","employee");49 address = doc.createElementNS("http://www.w3.org/2000/xmlns/","address");50 name = doc.createElementNS("http://www.w3.org/2000/xmlns/","name");51 position = doc.createElementNS("http://www.w3.org/2000/xmlns/","position");52 gender = doc.createElementNS("http://www.w3.org/2000/xmlns/","gender");53 id = doc.createElementNS("http://www.w3.org/2000/xmlns/","employeeId");54 salary = doc.createElementNS("http://www.w3.org/2000/xmlns/","salary");55 employee.appendChild(id);56 employee.appendChild(name);57 employee.appendChild(position);58 employee.appendChild(salary);59 employee.appendChild(gender);60 employee.appendChild(address);61 staff.appendChild(employee);62 employee.namespaceURI = "http://www.nist.gov";63 employee.setAttribute("xmlns", "http://www.nist.gov")64 employee.setAttributeNS("http://www.nist.gov", "xmlns:dmstc", "http://www.usa.com");65 id.appendChild(doc.createTextNode("EMP0001"));66 salary.appendChild(doc.createTextNode("56,000"));67 address.appendChild(doc.createTextNode('1230 North Ave. Dallas, Texas 98551'));68 address.setAttributeNS("http://www.usa.com", "dmstc:domestic", "Yes");69 name.appendChild(doc.createTextNode("Margaret Martin"));70 gender.appendChild(doc.createTextNode("Female"));71 position.appendChild(doc.createTextNode("Accountant"));72 /************************************73 * EMPLOYEEE 2 *74 ************************************/75 employee = doc.createElementNS("http://www.w3.org/2000/xmlns/","employee");76 address = doc.createElementNS("http://www.w3.org/2000/xmlns/","address");77 name = doc.createElementNS("http://www.w3.org/2000/xmlns/","name");78 position = doc.createElementNS("http://www.w3.org/2000/xmlns/","position");79 gender = doc.createElementNS("http://www.w3.org/2000/xmlns/","gender");80 id = doc.createElementNS("http://www.w3.org/2000/xmlns/","employeeId");81 salary = doc.createElementNS("http://www.w3.org/2000/xmlns/","salary");82 employee.appendChild(id);83 employee.appendChild(name);84 employee.appendChild(position);85 employee.appendChild(salary);86 employee.appendChild(gender);87 employee.appendChild(address);88 staff.appendChild(employee);89 employee.setAttributeNS("http://www.nist.gov", "xmlns:dmstc", "http://www.usa.com");90 id.appendChild(doc.createTextNode("EMP0002"));91 salary.appendChild(doc.createTextNode("35,000"));92 address.setAttributeNS("http://www.usa.com", "dmstc:domestic", "Yes");93 address.setAttribute("street", "Yes");94 address.appendChild(doc.createEntityReference("ent2"));95 address.appendChild(doc.createTextNode(" Dallas, "));96 address.appendChild(doc.createEntityReference("ent3"));97 address.appendChild(doc.createTextNode("\n 98554"));98 name.appendChild(doc.createTextNode("Martha Raynolds"));99 name.appendChild(doc.createCDATASection("This is a CDATASection with EntityReference number 2 &ent2;"));100 name.appendChild(doc.createTextNode("\r\n"));101 name.appendChild(doc.createCDATASection("This is an adjacent CDATASection with a reference to a tab &tab;"));102 gender.appendChild(doc.createTextNode("Female"));103 position.appendChild(doc.createTextNode("Secretary"));104 /************************************105 * EMPLOYEEE 3 *106 ************************************/107 employee = doc.createElementNS("http://www.nist.gov","employee");108 address = doc.createElementNS("http://www.w3.org/2000/xmlns/","address");109 name = doc.createElementNS("http://www.w3.org/2000/xmlns/","name");110 position = doc.createElementNS("http://www.w3.org/2000/xmlns/","position");111 gender = doc.createElementNS("http://www.w3.org/2000/xmlns/","gender");112 id = doc.createElementNS("http://www.w3.org/2000/xmlns/","employeeId");113 salary = doc.createElementNS("http://www.w3.org/2000/xmlns/","salary");114 employee.appendChild(id);115 employee.appendChild(name);116 employee.appendChild(position);117 employee.appendChild(salary);118 employee.appendChild(gender);119 employee.appendChild(address);120 staff.appendChild(employee);121 employee.setAttributeNS("http://www.nist.gov", "xmlns:dmstc", "http://www.netzero.com");122 id.appendChild(doc.createTextNode("EMP0003"));123 salary.appendChild(doc.createTextNode("100,000"));124 address.setAttributeNS("http://www.usa.com", "dmstc:domestic", "Yes");125 address.setAttribute("street", "No");126 address.appendChild(doc.createTextNode("PO Box 27 Irving, texas 98553"));127 name.appendChild(doc.createTextNode("Roger\n Jones")) ;128 gender.appendChild(doc.createEntityReference("ent4"));129 position.appendChild(doc.createTextNode("Department Manager"));130 /************************************131 * EMPLOYEEE 4 *132 ************************************/133 employee = doc.createElementNS("http://www.nist.gov", "emp:employee");134 address = doc.createElementNS("http://www.nist.gov", "emp:address");135 name = doc.createElementNS("http://www.altavista.com", "nm:name");136 position = doc.createElementNS("http://www.nist.gov", "emp:position");137 gender = doc.createElementNS("http://www.nist.gov", "emp:gender");138 id = doc.createElementNS("http://www.nist.gov", "emp:employeeId");139 salary = doc.createElementNS("http://www.nist.gov", "emp:salary");140 employee.appendChild(id);141 employee.appendChild(name);142 employee.appendChild(position);143 employee.appendChild(salary);144 employee.appendChild(gender);145 employee.appendChild(address);146 staff.appendChild(employee);147 employee.setAttributeNS("http://www.nist.gov", "xmlns:emp", "http://www.nist.gov");148 employee.setAttributeNS("http://www.altavista.com", "xmlns:nm", "http://www.altavista.com");149 id.appendChild(doc.createTextNode("EMP0004"));150 salary.appendChild(doc.createTextNode("95,000"));151 address.setAttribute("emp:domestic", "Yes");152 address.setAttribute("emp:street", "Y");153 var ent1Ref = doc.createEntityReference("ent1");154 //address.attributes.getNamedItem("street").childNodes.push(ent1Ref);155 address.appendChild(doc.createTextNode("27 South Road. Dallas, Texas 98556"));156 name.appendChild(doc.createTextNode("Jeny Oconnor"));157 gender.appendChild(doc.createTextNode("Female"));158 position.appendChild(doc.createTextNode("Personal Director"));159 /************************************160 * EMPLOYEEE 5 *161 ************************************/162 employee = doc.createElementNS("http://www.w3.org/2000/xmlns/","employee");163 address = doc.createElementNS("http://www.w3.org/2000/xmlns/","address");164 name = doc.createElementNS("http://www.w3.org/2000/xmlns/","name");165 position = doc.createElementNS("http://www.w3.org/2000/xmlns/","position");166 gender = doc.createElementNS("http://www.w3.org/2000/xmlns/","gender");167 id = doc.createElementNS("http://www.w3.org/2000/xmlns/","employeeId");168 salary = doc.createElementNS("http://www.w3.org/2000/xmlns/","salary");169 employee.appendChild(id);170 employee.appendChild(name);171 employee.appendChild(position);172 employee.appendChild(salary);173 employee.appendChild(gender);174 employee.appendChild(address);175 staff.appendChild(employee);176 id.appendChild(doc.createTextNode("EMP0005"));177 salary.appendChild(doc.createTextNode("90,000"));178 address.setAttribute("street", "Yes");179 address.appendChild(doc.createTextNode("1821 Nordic. Road, Irving Texas 98558"));180 name.appendChild(doc.createTextNode("Robert Myers"));181 gender.appendChild(doc.createTextNode("male"));182 position.appendChild(doc.createTextNode("Computer Specialist"));...
WFS.js
Source:WFS.js
...65 * features - {Array(<OpenLayers.Feature.Vector>)} 66 */67 write: function(features) {68 69 var transaction = this.createElementNS(this.wfsns, 'wfs:Transaction');70 transaction.setAttribute("version","1.0.0");71 transaction.setAttribute("service","WFS");72 for (var i=0; i < features.length; i++) {73 switch (features[i].state) {74 case OpenLayers.State.INSERT:75 transaction.appendChild(this.insert(features[i]));76 break;77 case OpenLayers.State.UPDATE:78 transaction.appendChild(this.update(features[i]));79 break;80 case OpenLayers.State.DELETE:81 transaction.appendChild(this.remove(features[i]));82 break;83 }84 }85 86 return OpenLayers.Format.XML.prototype.write.apply(this,[transaction]);87 },88 89 /**90 * Method: createFeatureXML91 *92 * Parameters: 93 * feature - {<OpenLayers.Feature.Vector>}94 */ 95 createFeatureXML: function(feature) {96 var geometryNode = this.buildGeometryNode(feature.geometry);97 var geomContainer = this.createElementNS(this.featureNS, "feature:" + this.geometryName);98 geomContainer.appendChild(geometryNode);99 var featureContainer = this.createElementNS(this.featureNS, "feature:" + this.featureName);100 featureContainer.appendChild(geomContainer);101 for(var attr in feature.attributes) {102 var attrText = this.createTextNode(feature.attributes[attr]); 103 var nodename = attr;104 if (attr.search(":") != -1) {105 nodename = attr.split(":")[1];106 } 107 var attrContainer = this.createElementNS(this.featureNS, "feature:" + nodename);108 attrContainer.appendChild(attrText);109 featureContainer.appendChild(attrContainer);110 } 111 return featureContainer;112 },113 114 /**115 * Method: insert 116 * Takes a feature, and generates a WFS-T Transaction "Insert" 117 *118 * Parameters: 119 * feature - {<OpenLayers.Feature.Vector>} 120 */121 insert: function(feature) {122 var insertNode = this.createElementNS(this.wfsns, 'wfs:Insert');123 insertNode.appendChild(this.createFeatureXML(feature));124 return insertNode;125 },126 127 /**128 * Method: update129 * Takes a feature, and generates a WFS-T Transaction "Update" 130 *131 * Parameters:132 * feature - {<OpenLayers.Feature.Vector>} 133 */134 update: function(feature) {135 if (!feature.fid) { OpenLayers.Console.userError(OpenLayers.i18n("noFID")); }136 var updateNode = this.createElementNS(this.wfsns, 'wfs:Update');137 updateNode.setAttribute("typeName", this.featurePrefix + ':' + this.featureName); 138 updateNode.setAttribute("xmlns:" + this.featurePrefix, this.featureNS); 139 var propertyNode = this.createElementNS(this.wfsns, 'wfs:Property');140 var nameNode = this.createElementNS(this.wfsns, 'wfs:Name');141 142 var txtNode = this.createTextNode(this.geometryName);143 nameNode.appendChild(txtNode);144 propertyNode.appendChild(nameNode);145 146 var valueNode = this.createElementNS(this.wfsns, 'wfs:Value');147 148 var geometryNode = this.buildGeometryNode(feature.geometry);149 150 if(feature.layer){151 geometryNode.setAttribute(152 "srsName", feature.layer.projection.getCode()153 );154 }155 156 valueNode.appendChild(geometryNode);157 158 propertyNode.appendChild(valueNode);159 updateNode.appendChild(propertyNode);160 161 // add in attributes162 for(var propName in feature.attributes) {163 propertyNode = this.createElementNS(this.wfsns, 'wfs:Property');164 nameNode = this.createElementNS(this.wfsns, 'wfs:Name');165 nameNode.appendChild(this.createTextNode(propName));166 propertyNode.appendChild(nameNode);167 valueNode = this.createElementNS(this.wfsns, 'wfs:Value');168 valueNode.appendChild(this.createTextNode(feature.attributes[propName]));169 propertyNode.appendChild(valueNode);170 updateNode.appendChild(propertyNode);171 }172 173 174 var filterNode = this.createElementNS(this.ogcns, 'ogc:Filter');175 var filterIdNode = this.createElementNS(this.ogcns, 'ogc:FeatureId');176 filterIdNode.setAttribute("fid", feature.fid);177 filterNode.appendChild(filterIdNode);178 updateNode.appendChild(filterNode);179 return updateNode;180 },181 182 /**183 * Method: remove 184 * Takes a feature, and generates a WFS-T Transaction "Delete" 185 *186 * Parameters:187 * feature - {<OpenLayers.Feature.Vector>} 188 */189 remove: function(feature) {190 if (!feature.fid) { 191 OpenLayers.Console.userError(OpenLayers.i18n("noFID")); 192 return false; 193 }194 var deleteNode = this.createElementNS(this.wfsns, 'wfs:Delete');195 deleteNode.setAttribute("typeName", this.featurePrefix + ':' + this.featureName); 196 deleteNode.setAttribute("xmlns:" + this.featurePrefix, this.featureNS); 197 var filterNode = this.createElementNS(this.ogcns, 'ogc:Filter');198 var filterIdNode = this.createElementNS(this.ogcns, 'ogc:FeatureId');199 filterIdNode.setAttribute("fid", feature.fid);200 filterNode.appendChild(filterIdNode);201 deleteNode.appendChild(filterNode);202 return deleteNode;203 },204 /**205 * APIMethod: destroy206 * Remove ciruclar ref to layer 207 */208 destroy: function() {209 this.layer = null;210 },211 CLASS_NAME: "OpenLayers.Format.WFS" 212});
browser.js
Source:browser.js
...13if (!svgedit.browser) {14 svgedit.browser = {};15}16var supportsSvg_ = (function() {17 return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;18})();19svgedit.browser.supportsSvg = function() { return supportsSvg_; }20if(!svgedit.browser.supportsSvg()) {21 window.location = "browser-not-supported.html";22}23else{24var svgns = 'http://www.w3.org/2000/svg';25var userAgent = navigator.userAgent;26var svg = document.createElementNS(svgns, 'svg');27// Note: Browser sniffing should only be used if no other detection method is possible28var isOpera_ = !!window.opera;29var isWebkit_ = userAgent.indexOf("AppleWebKit") >= 0;30var isGecko_ = userAgent.indexOf('Gecko/') >= 0;31var isIE_ = userAgent.indexOf('MSIE') >= 0;32var isChrome_ = userAgent.indexOf('Chrome/') >= 0;33var isWindows_ = userAgent.indexOf('Windows') >= 0;34var supportsSelectors_ = (function() {35 return !!svg.querySelector;36})();37var supportsXpath_ = (function() {38 return !!document.evaluate;39})();40// segList functions (for FF1.5 and 2.0)41var supportsPathReplaceItem_ = (function() {42 var path = document.createElementNS(svgns, 'path');43 path.setAttribute('d','M0,0 10,10');44 var seglist = path.pathSegList;45 var seg = path.createSVGPathSegLinetoAbs(5,5);46 try {47 seglist.replaceItem(seg, 0);48 return true;49 } catch(err) {}50 return false;51})();52var supportsPathInsertItemBefore_ = (function() {53 var path = document.createElementNS(svgns,'path');54 path.setAttribute('d','M0,0 10,10');55 var seglist = path.pathSegList;56 var seg = path.createSVGPathSegLinetoAbs(5,5);57 try {58 seglist.insertItemBefore(seg, 0);59 return true;60 } catch(err) {}61 return false;62})();63// text character positioning (for IE9)64var supportsGoodTextCharPos_ = (function() {65 var retValue = false;66 var svgroot = document.createElementNS(svgns, 'svg');67 var svgcontent = document.createElementNS(svgns, 'svg');68 document.documentElement.appendChild(svgroot);69 svgcontent.setAttribute('x', 5);70 svgroot.appendChild(svgcontent);71 var text = document.createElementNS(svgns,'text');72 text.textContent = 'a';73 svgcontent.appendChild(text);74 var pos = text.getStartPositionOfChar(0).x;75 document.documentElement.removeChild(svgroot);76 return (pos === 0);77})();78var supportsPathBBox_ = (function() {79 var svgcontent = document.createElementNS(svgns, 'svg');80 document.documentElement.appendChild(svgcontent);81 var path = document.createElementNS(svgns, 'path');82 path.setAttribute('d','M0,0 C0,0 10,10 10,0');83 svgcontent.appendChild(path);84 var bbox = path.getBBox();85 document.documentElement.removeChild(svgcontent);86 return (bbox.height > 4 && bbox.height < 5);87})();88// Support for correct bbox sizing on groups with horizontal/vertical lines89var supportsHVLineContainerBBox_ = (function() {90 var svgcontent = document.createElementNS(svgns, 'svg');91 document.documentElement.appendChild(svgcontent);92 var path = document.createElementNS(svgns, 'path');93 path.setAttribute('d','M0,0 10,0');94 var path2 = document.createElementNS(svgns, 'path');95 path2.setAttribute('d','M5,0 15,0');96 var g = document.createElementNS(svgns, 'g');97 g.appendChild(path);98 g.appendChild(path2);99 svgcontent.appendChild(g);100 var bbox = g.getBBox();101 document.documentElement.removeChild(svgcontent);102 // Webkit gives 0, FF gives 10, Opera (correctly) gives 15103 return (bbox.width == 15);104})();105var supportsEditableText_ = (function() {106 // TODO: Find better way to check support for this107 return isOpera_;108})();109var supportsGoodDecimals_ = (function() {110 // Correct decimals on clone attributes (Opera < 10.5/win/non-en)111 var rect = document.createElementNS(svgns, 'rect');112 rect.setAttribute('x',.1);113 var crect = rect.cloneNode(false);114 var retValue = (crect.getAttribute('x').indexOf(',') == -1);115 if(!retValue) {116 $.alert("NOTE: This version of Opera is known to contain bugs in SVG-edit.\n\117 Please upgrade to the <a href='http://opera.com'>latest version</a> in which the problems have been fixed.");118 }119 return retValue;120})();121var supportsNonScalingStroke_ = (function() {122 var rect = document.createElementNS(svgns, 'rect');123 rect.setAttribute('style','vector-effect:non-scaling-stroke');124 return rect.style.vectorEffect === 'non-scaling-stroke';125})();126var supportsNativeSVGTransformLists_ = (function() {127 var rect = document.createElementNS(svgns, 'rect');128 var rxform = rect.transform.baseVal;129 130 var t1 = svg.createSVGTransform();131 rxform.appendItem(t1);132 return rxform.getItem(0) == t1;133})();134// Public API135svgedit.browser.isOpera = function() { return isOpera_; }136svgedit.browser.isWebkit = function() { return isWebkit_; }137svgedit.browser.isGecko = function() { return isGecko_; }138svgedit.browser.isIE = function() { return isIE_; }139svgedit.browser.isChrome = function() { return isChrome_; }140svgedit.browser.isWindows = function() { return isWindows_; }141svgedit.browser.supportsSelectors = function() { return supportsSelectors_; }...
shadow.js
Source:shadow.js
1(function() {2var Filters = {}3var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");4svg.setAttribute("style", "display:block;width:0px;height:0px");5var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");6var blurFilter = document.createElementNS("http://www.w3.org/2000/svg", "filter");7blurFilter.setAttribute("id", "svgBlurFilter");8var feGaussianFilter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");9feGaussianFilter.setAttribute("stdDeviation", "0 0");10blurFilter.appendChild(feGaussianFilter);11defs.appendChild(blurFilter);12Filters._svgBlurFilter = feGaussianFilter;13// Drop Shadow Filter14var dropShadowFilter = document.createElementNS("http://www.w3.org/2000/svg", "filter");15dropShadowFilter.setAttribute("id", "svgDropShadowFilter");16var feGaussianFilter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");17feGaussianFilter.setAttribute("in", "SourceAlpha");18feGaussianFilter.setAttribute("stdDeviation", "3");19dropShadowFilter.appendChild(feGaussianFilter);20Filters._svgDropshadowFilterBlur = feGaussianFilter;21var feOffset = document.createElementNS("http://www.w3.org/2000/svg", "feOffset");22feOffset.setAttribute("dx", "0");23feOffset.setAttribute("dy", "0");24feOffset.setAttribute("result", "offsetblur");25dropShadowFilter.appendChild(feOffset);26Filters._svgDropshadowFilterOffset = feOffset;27var feFlood = document.createElementNS("http://www.w3.org/2000/svg", "feFlood");28feFlood.setAttribute("flood-color", "rgba(0,0,0,1)");29dropShadowFilter.appendChild(feFlood);30Filters._svgDropshadowFilterFlood = feFlood;31var feComposite = document.createElementNS("http://www.w3.org/2000/svg", "feComposite");32feComposite.setAttribute("in2", "offsetblur");33feComposite.setAttribute("operator", "in");34dropShadowFilter.appendChild(feComposite);35var feComposite = document.createElementNS("http://www.w3.org/2000/svg", "feComposite");36feComposite.setAttribute("in2", "SourceAlpha");37feComposite.setAttribute("operator", "out");38feComposite.setAttribute("result", "outer");39dropShadowFilter.appendChild(feComposite);40var feMerge = document.createElementNS("http://www.w3.org/2000/svg", "feMerge");41var feMergeNode = document.createElementNS("http://www.w3.org/2000/svg", "feMergeNode");42feMerge.appendChild(feMergeNode);43var feMergeNode = document.createElementNS("http://www.w3.org/2000/svg", "feMergeNode");44feMerge.appendChild(feMergeNode);45Filters._svgDropshadowMergeNode = feMergeNode;46dropShadowFilter.appendChild(feMerge);47defs.appendChild(dropShadowFilter);48svg.appendChild(defs);49document.documentElement.appendChild(svg);50const blurScale = 1;51const scale = (document.body.clientWidth / 1280);52Filters._svgDropshadowFilterBlur.setAttribute("stdDeviation",53 1 * blurScale + " " +54 1 * blurScale55);56Filters._svgDropshadowFilterOffset.setAttribute("dx",57 String(Math.cos(45 * Math.PI / 180) * 1 * scale));...
canvas.js
Source:canvas.js
1import { createElementNS } from "../utils/createElementNS.js";23export const drawGraphCanvas = (container) => {4 const svgCanvas = createElementNS("svg", container, {5 viewBox: "0 0 1100 800",6 width: "1200",7 height: "800",8 fill: "#000",9 ["class"]: "canvas",10 });1112 // X and Y Axis13 const axisGroup = createElementNS("g", svgCanvas, {14 id: "axis-group",15 });16 createElementNS("line", axisGroup, {17 x1: "0",18 y1: "711",19 x2: "1090",20 y2: "712",21 stroke: "#fff",22 ["stroke-width"]: "3",23 });24 createElementNS("line", axisGroup, {25 x1: "0",26 y1: "68",27 x2: "0",28 y2: "712",29 stroke: "#fff",30 ["stroke-width"]: "3",31 });32 // X and Y Axis3334 // Gridlines pattern35 const defsGridline = createElementNS("defs", svgCanvas);36 const gridPattern = createElementNS("pattern", defsGridline, {37 id: "gridline",38 x: "0",39 y: "0",40 height: "65",41 width: "1190",42 patternUnits: "userSpaceOnUse",43 });44 createElementNS("line", gridPattern, {45 x1: "0",46 y1: "0",47 x2: "1090",48 y2: "0",49 stroke: "#fff",50 ["stroke-width"]: "5",51 });52 const gridlineGroup = createElementNS("g", svgCanvas, {53 ["class"]: "gridline-group",54 width: "1090",55 height: "660",56 transform: "translate(0, -64)",57 });58 createElementNS("rect", gridlineGroup, {59 id: "gridline-area",60 x: "0",61 y: "68",62 width: "1090",63 height: "660",64 fill: `url(#${gridPattern.id})`,65 });66 // Gridlines pattern6768 // Y axis numbers69 const labelsGroup = createElementNS("g", svgCanvas, {70 ["class"]: "y-axis-values",71 transform: "translate(-30, 710)",72 });7374 const yOffset = 64;7576 for (let i = 0; i <= 10; i++) {77 createElementNS("text", labelsGroup, {78 x: `${!i ? 14 : 6}`,79 y: `-${yOffset * i}`,80 fill: "#fff",81 }).textContent = `${!i ? 0 : i + "0"}`;82 }83 // Y axis numbers8485 // Years86 const yearsGroup = createElementNS("g", svgCanvas, {87 ["class"]: "years-group",88 });8990 const columnWidth = 1090 / (11 * 1.5);91 const columnSpacing = columnWidth / 2;92 const xOffset = 10;9394 for (let i = 0; i <= 10; i++) {95 createElementNS("text", yearsGroup, {96 x: !i97 ? xOffset98 : xOffset + i * (columnWidth + columnSpacing) + columnSpacing,99 y: "730",100 fill: "#fff",101 }).textContent = `${!i ? "less than a year" : i}`;102 }
...
Using AI Code Generation
1const { createElementNS } = require('playwright');2svg.setAttribute('width', '100');3svg.setAttribute('height', '100');4rect.setAttribute('x', '0');5rect.setAttribute('y', '0');6rect.setAttribute('width', '100');7rect.setAttribute('height', '100');8rect.setAttribute('fill', 'red');9svg.appendChild(rect);10document.body.appendChild(svg);11const { createElementNS } = require('playwright-internal-api');12svg.setAttribute('width', '100');13svg.setAttribute('height', '100');14rect.setAttribute('x', '0');15rect.setAttribute('y', '0');16rect.setAttribute('width', '100');17rect.setAttribute('height', '100');18rect.setAttribute('fill', 'red');19svg.appendChild(rect);20document.body.appendChild(svg);21### createElementNS(namespace, name)22### document.createElementNS(namespace, name)23[MIT](LICENSE)
Using AI Code Generation
1await page.evaluate(element => element.setAttribute('width', '100%'), element);2await page.evaluate(element => element.setAttribute('height', '100%'), element);3await page.evaluate(element => element.setAttribute('viewBox', '0 0 100 100'), element);4await page.evaluate(element => element.setAttribute('style', 'background-color: #f5f5f5;'), element);5await page.evaluate(element => element.setAttribute('id', 'svg'), element);6await page.evaluate(element => document.body.appendChild(element), element);7await page.evaluate(element => element.setAttribute('cx', '50'), element2);8await page.evaluate(element => element.setAttribute('cy', '50'), element2);9await page.evaluate(element => element.setAttribute('r', '40'), element2);10await page.evaluate(element => element.setAttribute('stroke', 'black'), element2);11await page.evaluate(element => element.setAttribute('stroke-width', '3'), element2);12await page.evaluate(element => element.setAttribute('fill', 'red'), element2);13await page.evaluate(element => document.getElementById('svg').appendChild(element), element2);14await page.screenshot({ path: 'example.png' });15await browser.close();16})();17svg.setAttribute('width', '100%');18svg.setAttribute('height', '100%');19svg.setAttribute('viewBox', '0 0 100 100');20svg.setAttribute('style', 'background-color: #f5f5f5;');21svg.setAttribute('id', 'svg');22svg.setAttribute('xmlns:xlink', '
Using AI Code Generation
1const { createElementNS } = require('@playwright/test');2console.log(element);3const { createElementNS } = require('@playwright/test');4console.log(element);5const { createElementNS } = require('@playwright/test');6console.log(element);7const { createElementNS } = require('@playwright/test');8console.log(element);9const { createElementNS } = require('@playwright/test');10console.log(element);11const { createElementNS } = require('@playwright/test');12console.log(element);13const { createElementNS } = require('@playwright/test');14console.log(element);15const { createElementNS } = require('@playwright/test');16console.log(element);17const { createElementNS } = require('@playwright/test');18console.log(element);19const { createElementNS } = require('@playwright/test');20console.log(element);21const { createElementNS } = require
Using AI Code Generation
1const { Page } = require('playwright');2Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {3 return this._delegate.createElementNS(namespaceURI, qualifiedName);4};5const { Page } = require('playwright');6Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {7 return this._delegate.createElementNS(namespaceURI, qualifiedName);8};9const { Page } = require('playwright');10Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {11 return this._delegate.createElementNS(namespaceURI, qualifiedName);12};13const { Page } = require('playwright');14Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {15 return this._delegate.createElementNS(namespaceURI, qualifiedName);16};17const { Page } = require('playwright');18Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {19 return this._delegate.createElementNS(namespaceURI, qualifiedName);20};21const { Page } = require('playwright');22Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {23 return this._delegate.createElementNS(namespaceURI, qualifiedName);24};25const { Page } = require('playwright');26Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {27 return this._delegate.createElementNS(namespaceURI, qualifiedName);28};29const { Page } = require('playwright');30Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {31 return this._delegate.createElementNS(namespaceURI, qualifiedName);32};33const { Page } = require('playwright');34Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {35 return this._delegate.createElementNS(namespaceURI, qualifiedName);36};37const { Page } = require('playwright');38Page.prototype.createElementNS = function (namespaceURI, qualifiedName) {39 return this._delegate.createElementNS(namespaceURI, qualifiedName);40};
Using AI Code Generation
1const { createElementNS } = require('playwright/lib/internal/protocol/dom.js');2const { createAttribute } = require('playwright/lib/internal/protocol/dom.js');3const { createTextNode } = require('playwright/lib/internal/protocol/dom.js');4const { createComment } = require('playwright/lib/internal/protocol/dom.js');5const { createDocument } = require('playwright/lib/internal/protocol/dom.js');6const { setNodeName } = require('playwright/lib/internal/protocol/dom.js');7const { setNodeValue } = require('playwright/lib/internal/protocol/dom.js');8const { removeNode } = require('playwright/lib/internal/protocol/dom.js');9const { setAttributeValue } = require('playwright/lib/internal/protocol/dom.js');10const { setAttributesAsText } = require('playwright/lib/internal/protocol/dom.js');11const { removeAttribute } = require('playwright/lib/internal/protocol/dom.js');12const { getOuterHTML } = require('playwright/lib/internal/protocol/dom.js');13const { setOuterHTML } = require('playwright/lib/internal/protocol/dom.js');14const { insertAdjacentHTML } = require('playwright/lib/internal/protocol/dom.js');15const { getEventListeners } = require('playwright/lib/internal/protocol/dom.js');16const { getBoxModel } = require('playwright/lib/internal/protocol/dom.js');17const { getNodeForLocation } = require('playwright/lib/internal/protocol/dom.js');18const { getRelayoutBoundary } = require('playwright/lib/internal/protocol/dom.js');19const { getHighlightObjectForTest } = require('playwright/lib/internal/protocol/dom.js');20const { getFrameOwner } = require('playwright/lib/internal/protocol/dom.js');21const { getContentQuads } = require('playwright/lib/internal/protocol/dom.js');22const { resolveNode } = require('playwright/lib/internal/protocol/dom.js');23const { getAttributes } = require('playwright/lib/internal/protocol/dom.js');24const { moveToFile } = require('playwright/lib/internal/protocol/dom.js');25const { moveTo } = require('playwright/lib/internal/protocol/dom.js');26const { undo } = require('playwright/lib/internal/protocol/dom.js');27const { redo } = require('playwright/lib/internal/protocol/dom.js');28const { markUndoableState } = require('playwright/lib/internal/protocol/dom.js');29const { focus } =
Using AI Code Generation
1const { createPage } = require('@playwright/test');2const { createPage } = require('@playwright/test');3const page = await createPage();4</svg>`);5const circle = await page.$('circle');6const svg = await circle.evaluateHandle(element => element.ownerSVGElement);7const svgNamespace = await svg.evaluate(svg => svg.namespaceURI);8const { createPage } = require('@playwright/test');9const { createPage } = require('@playwright/test');10const page = await createPage();11</svg>`);12const circle = await page.$('circle');13const svg = await circle.evaluateHandle(element => element.ownerSVGElement);14const svgNamespace = await svg.evaluate(svg => svg.namespaceURI);15const { createPage } = require('@playwright/test');16const { createPage } = require('@playwright/test');17const page = await createPage();18</svg>`);19const circle = await page.$('circle');20const svg = await circle.evaluateHandle(element => element.ownerSVGElement);21const svgNamespace = await svg.evaluate(svg => svg.namespaceURI);22const { createPage } = require('@playwright/test');23const { createPage } = require('@playwright/test');24const page = await createPage();
Using AI Code Generation
1const { create } = require('@playwright/test');2const { createElementNS } = require('@playwright/test/lib/server/dom');3const { ElementHandle } = require('@playwright/test/lib/server/dom');4const { Page } = require('@playwright/test/lib/server/page');5const { Frame } = require('@playwright/test/lib/server/frames');6const playwright = create();7const browser = await playwright.chromium.launch();8const context = await browser.newContext();9const page = await context.newPage();10const frame = await page.mainFrame();11const element = createElementNS(frame, 'svg', 'svg', {12});13const elementHandle = new ElementHandle(frame, element);14await elementHandle.innerHTML('<circle cx="100" cy="100" r="100" fill="red" />');15const body = await frame.$('body');16await body.appendChild(elementHandle);17await page.screenshot({ path: 'screenshot.png' });18await browser.close();
Using AI Code Generation
1const { Page } = require("@playwright/test");2const { createPage } = require("@playwright/test/lib/server/page");3const { createJSHandle } = require("@playwright/test/lib/server/frames");4const { createFrame } = require("@playwright/test/lib/server/frame");5const { createExecutionContext } = require("@playwright/test/lib/server/dom");6const { createCDPSession } = require("@playwright/test/lib/server/cdpsession");7const { createBrowserContext } = require("@playwright/test/lib/server/browserContext");8const { createBrowser } = require("@playwright/test/lib/server/browser");9const { createConnection } = require("@playwright/test/lib/server/channelOwner");10const { createChannelOwner } = require("@playwright/test/lib/server/channelOwner");11const { createBrowserType } = require("@playwright/test/lib/server/browserType");12const { createPlaywright } = require("@playwright/test/lib/server/playwright");13const { createTestType } = require("@playwright/test/lib/server/testType");14const { createTest } = require("@playwright/test/lib/server/test");15const { createTestSuite } = require("@playwright/test/lib/server/testSuite");16const { createTestWorker } = require("@playwright/test/lib/server/testWorker");17const { createTestRunner } = require("@playwright/test/lib/server/testRunner");18const { createTimeoutSettings } = require("@playwright/test/lib/server/timeoutSettings");19const { createReporter } = require("@playwright/test/lib/server/reporter");20const { createReporterDispatcher } = require("@playwright/test/lib/server/dispatchers");21const { createDispatcher } = require("@playwright/test/lib/server/dispatchers");22const { createDispatcherScope } = require("@playwright/test/lib/server/dispatchers");23const { createBrowserServer } = require("@playwright/test/lib/server/browserServer");24const { createBrowserFetcher } = require("@playwright/test/lib/server/browserFetcher");25const { createArtifact } = require("@playwright/test/lib/server/artifact");26const { createVideo } = require("@playwright/test/lib/server/video");27const { createTrace } = require("@playwright/test/lib/server/trace");28const { createCoverage } = require("@playwright/test/lib/server/coverage");29const { createWorker } = require("@playwright/test/lib/server/worker");30const { createServer } = require("@playwright/test/lib/server/server");31const { createServerDispatcher } =
Using AI Code Generation
1const {createElementNS} = require('playwright-core/lib/server/dom.js');2console.log(element);3const {createSVGRect} = require('playwright-core/lib/server/dom.js');4const rect = createSVGRect();5console.log(rect);6const {createSVGPoint} = require('playwright-core/lib/server/dom.js');7const point = createSVGPoint();8console.log(point);9const {createSVGMatrix} = require('playwright-core/lib/server/dom.js');10const matrix = createSVGMatrix();11console.log(matrix);12const {createSVGTransform} = require('playwright-core/lib/server/dom.js');13const transform = createSVGTransform();14console.log(transform);15const {createSVGTransformList} = require('playwright-core/lib/server/dom.js');16const transformList = createSVGTransformList();17console.log(transformList);18const {createSVGAnimatedTransformList} = require('playwright-core/lib/server/dom.js');19const animatedTransformList = createSVGAnimatedTransformList();20console.log(animatedTransformList);21const {createSVGNumber} = require('playwright-core/lib/server/dom.js');22const number = createSVGNumber();23console.log(number);24const {createSVGAnimatedNumber} = require('playwright-core/lib/server/dom.js');25const animatedNumber = createSVGAnimatedNumber();26console.log(animatedNumber);27const {
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
