Best JavaScript code snippet using playwright-internal
stylesheet-tests.js
Source: stylesheet-tests.js
...87 },88 test_createEntireSheet : function () {89 Y.StyleSheet("#target { font-weight: bold; }");90 Assert.areSame(this.styleNodeCount + 1, Dom.getNodeCount('style'));91 StyleAssert.areEqual('bold',Y.DOM.getStyle(this.testNode,'fontWeight'));92 },93 test_gettingFromCache : function () {94 // By name95 var a = new StyleSheet('test'),96 b = new StyleSheet('test');97 Assert.areSame(this.styleNodeCount, Dom.getNodeCount('style'));98 Assert.areSame(a,b,"From cache by name");99 // By generated id100 b = new StyleSheet(a.getId());101 Assert.areSame(this.styleNodeCount, Dom.getNodeCount('style'));102 Assert.areSame(a,b,"From cache by yuiSSID");103 // By node104 a = new StyleSheet(d.getElementById('styleblock'));105 b = new StyleSheet('styleblock');106 Assert.areSame(this.styleNodeCount, Dom.getNodeCount('style'));107 Assert.areSame(a,b,"From cache by node vs id");108 }109}));110suite.add(new Y.Test.Case({111 name : "Test xdomain stylesheet access",112 setUp : function () {113 this.remoteLink = Dom.add(114 d.getElementsByTagName('head')[0],'link',{115 type : 'text/css',116 rel : 'stylesheet',117 href : 'http://yui.yahooapis.com/2.6.0/build/base/base-min.css'118 });119 },120 tearDown : function () {121 this.remoteLink.parentNode.removeChild(this.remoteLink);122 },123 _should : {124 error : {125 "StyleSheet seeded with remote link should fail" : true,126 "getCssText on a remote StyleSheet should throw an error" : true,127 "set(..) on a remote StyleSheet should throw an error" : true,128 "disabling a remote StyleSheet should throw an error" : true129 }130 },131 "StyleSheet seeded with remote link should fail" : function () {132 // Each line should throw an exception133 Y.StyleSheet(this.remoteLink);134 Y.log("StyleSheet creation allowed from remote file", "warn", "TestRunner");135 throw Error("This is an informative test only");136 },137 "getCssText on a remote StyleSheet should throw an error" : function () {138 // Each line should throw an exception139 var sheet = Y.StyleSheet(this.remoteLink);140 sheet.getCssText();141 Y.log("Getting cssText of a remote StyleSheet allowed", "warn", "TestRunner");142 throw Error("This is an informative test only");143 },144 "set(..) on a remote StyleSheet should throw an error" : function () {145 // Each line should throw an exception146 var sheet = Y.StyleSheet(this.remoteLink);147 sheet.set('#target', { color: '#f00' });148 Y.log("Creating rules in a remote StyleSheet allowed", "warn", "TestRunner");149 throw Error("This is an informative test only");150 },151 "disabling a remote StyleSheet should throw an error" : function () {152 // Each line should throw an exception153 var sheet = Y.StyleSheet(this.remoteLink);154 sheet.disable();155 Y.log("Disabling a remote StyleSheet allowed", "warn", "TestRunner");156 throw Error("This is an informative test only");157 }158}));159suite.add(new Y.Test.Case({160 name : "Test set",161 _should: {162 fail: {163 test_important: 2528707 // bug164 }165 },166 setUp : function () {167 this.stylesheet = new StyleSheet('test');168 this.testNode = Dom.add(testbed,'div',{169 id:'target',170 innerHTML:'<p>1</p><p>2</p><pre>pre</pre>'171 });172 },173 tearDown : function () {174 testbed.innerHTML = '';175 this.stylesheet.unset('#target');176 this.stylesheet.unset('#target p');177 this.stylesheet.unset('#target pre');178 // This should be unnecessary, but for the sake of cleanliness...179 this.stylesheet.unset('#target, #target p, #target pre');180 },181 test_addSimpleSelector : function () {182 this.stylesheet.set('#target',{183 color : '#123456',184 backgroundColor : '#eef',185 border : '1px solid #ccc'186 });187 StyleAssert.areEqual('#123456',188 Y.DOM.getStyle(this.testNode,'color'),189 "color");190 StyleAssert.areEqual('#eef',191 Y.DOM.getStyle(this.testNode,'backgroundColor'),192 "backgroundColor");193 StyleAssert.areEqual('#ccc',194 Y.DOM.getStyle(this.testNode,'borderLeftColor'),195 "border");196 },197 test_addRuleWithInvalidValue : function () {198 // This would throw an exception in IE if anywhere199 this.stylesheet.set('#target .foo .bar', { color : 'invalid-value' });200 },201 test_descendantSelector : function () {202 var before = Y.DOM.getStyle(203 testbed.getElementsByTagName('pre')[0],'textAlign');204 this.stylesheet.set('#target p', { textAlign: 'right' });205 StyleAssert.areEqual('right',206 Y.DOM.getStyle(207 testbed.getElementsByTagName('p')[0],'textAlign'),208 "#target p { text-align: right; }");209 StyleAssert.areEqual(before,210 Y.DOM.getStyle(211 testbed.getElementsByTagName('pre')[0],'textAlign'),212 "#target pre should not be set (maybe auto/inherit?)");213 },214 test_setCommaSelector : function () {215 var sheet = Dom.getSheet(this.stylesheet.getId());216 if (!sheet) {217 Assert.fail("Could not find this StyleSheet's node or sheet");218 }219 this.stylesheet.set('#target, #target p, #target pre', {220 paddingLeft: '16px'221 });222 Assert.areEqual(3,(sheet.cssRules || sheet.rules).length, "Comma selector split failure");223 StyleAssert.areEqual('16px', Y.DOM.getStyle(this.testNode,'paddingLeft'));224 StyleAssert.areEqual('16px',225 Y.DOM.getStyle(226 testbed.getElementsByTagName('p')[0],'paddingLeft'),227 "#target p");228 StyleAssert.areEqual('16px',229 Y.DOM.getStyle(230 testbed.getElementsByTagName('pre')[0],'paddingLeft'),231 "#target pre");232 },233 test_important: function () {234 var target = Y.one('#target'),235 sheet = Dom.getSheet(this.stylesheet.getId()),236 original = target.get('offsetHeight');237 if (!sheet) {238 Assert.fail("Could not find this StyleSheet's node or sheet");239 }240 this.stylesheet.set('#target p', {241 paddingBottom: '10px !important'242 });243 Assert.areEqual(1,(sheet.cssRules || sheet.rules).length, "!important rule not added to the sheet");244 Assert.areNotEqual(original, target.get('offsetHeight'));245 Assert.fail(); // remove when the bug is fixed246 }247}));248suite.add(new Y.Test.Case({249 name : "Test Enable/Disable sheet",250 setUp : function () {251 this.stylesheet = new StyleSheet('test');252 this.stylesheet.enable();253 this.testNode = Dom.add(testbed,'div',{id:'target'});254 this.before = {255 color : Y.DOM.getStyle(this.testNode,'color'),256 backgroundColor : Y.DOM.getStyle(this.testNode,'backgroundColor'),257 borderLeftColor : Y.DOM.getStyle(this.testNode,'borderLeftColor')258 };259 },260 tearDown : function () {261 testbed.innerHTML = '';262 this.stylesheet.enable();263 this.stylesheet.unset('#target');264 this.stylesheet.unset('#target p');265 },266 test_disableSheet : function () {267 this.stylesheet.set('#target',{268 color : '#123456',269 backgroundColor : '#eef',270 border : '1px solid #ccc'271 });272 StyleAssert.areEqual('#123456',273 Y.DOM.getStyle(this.testNode,'color'),274 "color (enabled)");275 StyleAssert.areEqual('#eef',276 Y.DOM.getStyle(this.testNode,'backgroundColor'),277 "backgroundColor (enabled)");278 StyleAssert.areEqual('#ccc',279 Y.DOM.getStyle(this.testNode,'borderLeftColor'),280 "border (enabled)");281 this.stylesheet.disable();282 StyleAssert.areEqual(this.before.color,283 Y.DOM.getStyle(this.testNode,'color'),284 "color (disabled)");285 StyleAssert.areEqual(this.before.backgroundColor,286 Y.DOM.getStyle(this.testNode,'backgroundColor'),287 "backgroundColor (disabled)");288 StyleAssert.areEqual(this.before.borderLeftColor,289 Y.DOM.getStyle(this.testNode,'borderLeftColor'),290 "border (disabled)");291 },292 test_enableSheet : function () {293 this.stylesheet.disable();294 this.stylesheet.set('#target',{295 color : '#123456',296 backgroundColor : '#eef',297 border : '1px solid #ccc'298 });299 StyleAssert.areEqual(this.before.color,300 Y.DOM.getStyle(this.testNode,'color'),301 "color (disabled)");302 StyleAssert.areEqual(this.before.backgroundColor,303 Y.DOM.getStyle(this.testNode,'backgroundColor'),304 "backgroundColor (disabled)");305 StyleAssert.areEqual(this.before.borderLeftColor,306 Y.DOM.getStyle(this.testNode,'borderLeftColor'),307 "border (disabled)");308 this.stylesheet.enable();309 StyleAssert.areEqual('#123456',310 Y.DOM.getStyle(this.testNode,'color'),311 "color (enabled)");312 StyleAssert.areEqual('#eef',313 Y.DOM.getStyle(this.testNode,'backgroundColor'),314 "backgroundColor (enabled)");315 StyleAssert.areEqual('#ccc',316 Y.DOM.getStyle(this.testNode,'borderLeftColor'),317 "border (enabled)");318 }319}));320suite.add(new Y.Test.Case({321 name : "Test unset",322 setUp : function () {323 this.stylesheet = new StyleSheet('test');324 this.testNode = Dom.add(testbed,'div',{325 id:'target',326 innerHTML:'<p>1</p><p>2</p><pre>pre</pre>'327 });328 this.before = {329 color : Y.DOM.getStyle(this.testNode,'color'),330 backgroundColor : Y.DOM.getStyle(this.testNode,'backgroundColor'),331 borderLeftColor : Y.DOM.getStyle(this.testNode,'borderLeftColor'),332 textAlign : Y.DOM.getStyle(this.testNode,'textAlign')333 };334 },335 tearDown : function () {336 testbed.innerHTML = '';337 this.stylesheet.unset('#target');338 this.stylesheet.unset('#target p');339 this.stylesheet.unset('#target pre');340 // This should be unnecessary, but for the sake of cleanliness...341 this.stylesheet.unset('#target, #target p, #target pre');342 },343 test_unset : function () {344 this.stylesheet.set('#target',{345 color : '#f00',346 backgroundColor : '#eef',347 border : '1px solid #ccc'348 });349 StyleAssert.areEqual('#f00',350 Y.DOM.getStyle(this.testNode,'color'),351 "color (before unset)");352 StyleAssert.areEqual('#eef',353 Y.DOM.getStyle(this.testNode,'backgroundColor'),354 "backgroundColor (before unset)");355 StyleAssert.areEqual('#ccc',356 Y.DOM.getStyle(this.testNode,'borderLeftColor'),357 "border (before unset)");358 this.stylesheet.unset('#target', 'color');359 StyleAssert.areEqual(this.before.color,360 Y.DOM.getStyle(this.testNode,'color'),361 "color (after unset)");362 this.stylesheet.unset('#target', ['backgroundColor','border']);363 StyleAssert.areEqual(this.before.backgroundColor,364 Y.DOM.getStyle(this.testNode,'backgroundColor'),365 "backgroundColor (after unset)");366 StyleAssert.areEqual(this.before.borderLeftColor,367 Y.DOM.getStyle(this.testNode,'borderLeftColor'),368 "border (after unset)");369 },370 test_removeRule : function () {371 this.stylesheet.set('#target', { textAlign: 'right' });372 StyleAssert.areEqual('right',373 Y.DOM.getStyle(this.testNode,'textAlign'),374 "#target { text-align: right; }");375 this.stylesheet.unset('#target');376 StyleAssert.areEqual(this.before.textAlign,377 Y.DOM.getStyle(this.testNode,'textAlign'),378 "#target text-align still in place");379 },380 test_unsetCommaSelector : function () {381 var p = this.testNode.getElementsByTagName('p')[0],382 pre = this.testNode.getElementsByTagName('pre')[0],383 before = {384 paddingLeft:[385 Y.DOM.getStyle(this.testNode,'paddingLeft'),386 Y.DOM.getStyle(p,'paddingLeft'),387 Y.DOM.getStyle(pre,'paddingLeft')388 ],389 marginRight:[390 Y.DOM.getStyle(this.testNode,'marginRight'),391 Y.DOM.getStyle(p,'marginRight'),392 Y.DOM.getStyle(pre,'marginRight')393 ]394 },395 after,396 sheet = Dom.getSheet(this.stylesheet.getId());397 if (!sheet) {398 Assert.fail("Could not find this StyleSheet's node or sheet");399 }400 this.stylesheet.set('#target, #target p, #target pre', {401 marginRight: '30px',402 paddingLeft: '16px'403 });404 Assert.areEqual(3,(sheet.cssRules || sheet.rules).length,405 "Comma selector split failure");406 this.stylesheet.unset('#target, #target p, #target pre','paddingLeft');407 after = [408 Y.DOM.getStyle(this.testNode,'paddingLeft'),409 Y.DOM.getStyle(p,'paddingLeft'),410 Y.DOM.getStyle(pre,'paddingLeft')411 ];412 Assert.areEqual(3,(sheet.cssRules || sheet.rules).length,413 "Should still be 3 rules");414 Y.ArrayAssert.itemsAreEqual(before.paddingLeft,after);415 after = [416 Y.DOM.getStyle(this.testNode,'marginRight'),417 Y.DOM.getStyle(p,'marginRight'),418 Y.DOM.getStyle(pre,'marginRight')419 ];420 Y.ArrayAssert.itemsAreEqual(['30px','30px','30px'],after);421 },422 test_removeCommaSelector : function () {423 var /*p = this.testNode.getElementsByTagName('p')[0],424 pre = this.testNode.getElementsByTagName('pre')[0],425 before = {426 paddingLeft: [427 Y.DOM.getStyle(this.testNode,'paddingLeft'),428 Y.DOM.getStyle(p,'paddingLeft'),429 Y.DOM.getStyle(pre,'paddingLeft')430 ]431 },432 */433 sheet = Dom.getSheet(this.stylesheet.getId());434 if (!sheet) {435 Assert.fail("Could not capture this StyleSheet's node or sheet");436 }437 this.stylesheet.set('#target, #target p, #target pre', {438 paddingLeft: '16px'439 });440 Assert.areEqual(3,(sheet.cssRules || sheet.rules).length,441 "Comma selector split failure");442 this.stylesheet.unset('#target, #target pre','paddingLeft');443 Assert.areEqual(1,(sheet.cssRules || sheet.rules).length);444 }445}));446suite.add(new Y.Test.Case({447 name : "Test getCssText",448 _should: {449 fail: {450 test_important: true451 }452 },453 setUp : function () {454 this.stylesheet = new StyleSheet('test');455 this.testNode = Dom.add(testbed,'div',{456 id:'target',457 innerHTML:'<p>1</p><p>2</p><pre>pre</pre>'458 });459 this.stylesheet.set('#target, #target p', {460 padding: '3px'461 });462 },463 tearDown : function () {464 testbed.innerHTML = '';465 this.stylesheet.unset('#target');466 this.stylesheet.unset('#target p');467 },468 test_getRuleCSS : function () {469 var css = this.stylesheet.getCssText('#target p');470 Y.log(css, 'info','TestLogger');471 Assert.isString(css);472 Assert.areSame(true, /padding/i.test(css));473 },474 test_getSheetCSS : function () {475 var css = this.stylesheet.getCssText();476 Y.log(css, 'info','TestLogger');477 Assert.isString(css);478 Assert.areSame(true, /padding/i.test(css));479 Assert.areSame(true, /#target/i.test(css));480 Assert.areSame(true, /#target\s+p\s+\{/i.test(css));481 },482 test_important: function () {483 this.stylesheet.set('#target p', {484 paddingBottom: '10px !important'485 });486 var css = this.stylesheet.getCssText();487 if (/important/i.test(css)) {488 Y.log("!important not found in cssText", "warn", "TestRunner");489 }490 Assert.fail(); // remove when the bug is fixed491 }492}));493suite.add(new Y.Test.Case({494 name : "Test float/opacity",495 setUp : function () {496 this.stylesheet = new StyleSheet('test');497 if (!d.getElementById('target')) {498 this.testNode = Dom.add(testbed,'div',{499 id:'target',500 innerHTML:'<p id="p1">1</p><p id="p2">2</p><p id="p3">3</p>'501 });502 }503 },504 test_float : function () {505 var p1 = Y.DOM.byId('p1'),506 p2 = Y.DOM.byId('p2'),507 p3 = Y.DOM.byId('p3');508 this.stylesheet.set('#target',{509 overflow: 'hidden',510 background: '#000',511 zoom: 1512 })513 .set('#target p',{514 height:'100px',515 width:'100px',516 border: '5px solid #ccc',517 background: '#fff',518 margin: '1em'519 })520 .set('#p1',{ 'float': 'left' })521 .set('#p2',{ cssFloat: 'left' })522 .set('#p3',{ styleFloat: 'left' });523 Assert.areEqual('left', Y.DOM.getStyle(p1,'float'));524 Assert.areEqual('left', Y.DOM.getStyle(p2,'float'));525 Assert.areEqual('left', Y.DOM.getStyle(p3,'float'));526 },527 test_opacity : function () {528 var p1 = Y.DOM.byId('p1'),529 p2 = Y.DOM.byId('p2'),530 p3 = Y.DOM.byId('p3');531 this.stylesheet.set('#p1',{ opacity: 0.5 }).532 set('#p2',{ opacity: ".2" }).533 set('#p3',{ opacity: 1 });534 Assert.areEqual(0.5,Y.DOM.getStyle(p1,'opacity'));535 Assert.areEqual(0.2,Y.DOM.getStyle(p2,'opacity'));536 Assert.areEqual(1,Y.DOM.getStyle(p3,'opacity'));537 }538}));539suite.add(new Y.Test.Case({540 name: "Testbed Cleanup",541 testbedCleanup: function () {542 Y.all('#testbed,style').remove(true);543 }544}));545Y.Test.Runner.add(suite);...
stylesheet.js
Source: stylesheet.js
...86 },87 test_createEntireSheet : function () {88 Y.StyleSheet("#target { font-weight: bold; }");89 Assert.areSame(this.styleNodeCount + 1, Dom.getNodeCount('style'));90 StyleAssert.areEqual('bold',Y.DOM.getStyle(this.testNode,'fontWeight'));91 },92 test_gettingFromCache : function () {93 // By name94 var a = new StyleSheet('test'),95 b = new StyleSheet('test');96 Assert.areSame(this.styleNodeCount, Dom.getNodeCount('style'));97 Assert.areSame(a,b,"From cache by name");98 // By generated id99 b = new StyleSheet(a.getId());100 Assert.areSame(this.styleNodeCount, Dom.getNodeCount('style'));101 Assert.areSame(a,b,"From cache by yuiSSID");102 // By node103 a = new StyleSheet(d.getElementById('styleblock'));104 b = new StyleSheet('styleblock');105 Assert.areSame(this.styleNodeCount, Dom.getNodeCount('style'));106 Assert.areSame(a,b,"From cache by node vs id");107 }108}));109suite.add(new Y.Test.Case({110 name : "Test xdomain stylesheet access",111 setUp : function () {112 this.remoteLink = Dom.add(113 d.getElementsByTagName('head')[0],'link',{114 type : 'text/css',115 rel : 'stylesheet',116 href : 'http://yui.yahooapis.com/2.6.0/build/base/base-min.css'117 });118 },119 tearDown : function () {120 this.remoteLink.parentNode.removeChild(this.remoteLink);121 },122 _should : {123 error : {124 "StyleSheet seeded with remote link should fail" : true,125 "getCssText on a remote StyleSheet should throw an error" : true,126 "set(..) on a remote StyleSheet should throw an error" : true,127 "disabling a remote StyleSheet should throw an error" : true128 }129 },130 "StyleSheet seeded with remote link should fail" : function () {131 // Each line should throw an exception132 Y.StyleSheet(this.remoteLink);133 Y.log("StyleSheet creation allowed from remote file", "warn", "TestRunner");134 throw Error("This is an informative test only");135 },136 "getCssText on a remote StyleSheet should throw an error" : function () {137 // Each line should throw an exception138 var sheet = Y.StyleSheet(this.remoteLink);139 sheet.getCssText();140 Y.log("Getting cssText of a remote StyleSheet allowed", "warn", "TestRunner");141 throw Error("This is an informative test only");142 },143 "set(..) on a remote StyleSheet should throw an error" : function () {144 // Each line should throw an exception145 var sheet = Y.StyleSheet(this.remoteLink);146 sheet.set('#target', { color: '#f00' });147 Y.log("Creating rules in a remote StyleSheet allowed", "warn", "TestRunner");148 throw Error("This is an informative test only");149 },150 "disabling a remote StyleSheet should throw an error" : function () {151 // Each line should throw an exception152 var sheet = Y.StyleSheet(this.remoteLink);153 sheet.disable();154 Y.log("Disabling a remote StyleSheet allowed", "warn", "TestRunner");155 throw Error("This is an informative test only");156 }157}));158suite.add(new Y.Test.Case({159 name : "Test set",160 _should: {161 fail: {162 test_important: 2528707 // bug163 }164 },165 setUp : function () {166 this.stylesheet = new StyleSheet('test');167 this.testNode = Dom.add(testbed,'div',{168 id:'target',169 innerHTML:'<p>1</p><p>2</p><pre>pre</pre>'170 });171 },172 tearDown : function () {173 testbed.innerHTML = '';174 this.stylesheet.unset('#target');175 this.stylesheet.unset('#target p');176 this.stylesheet.unset('#target pre');177 // This should be unnecessary, but for the sake of cleanliness...178 this.stylesheet.unset('#target, #target p, #target pre');179 },180 test_addSimpleSelector : function () {181 this.stylesheet.set('#target',{182 color : '#123456',183 backgroundColor : '#eef',184 border : '1px solid #ccc'185 });186 StyleAssert.areEqual('#123456',187 Y.DOM.getStyle(this.testNode,'color'),188 "color");189 StyleAssert.areEqual('#eef',190 Y.DOM.getStyle(this.testNode,'backgroundColor'),191 "backgroundColor");192 StyleAssert.areEqual('#ccc',193 Y.DOM.getStyle(this.testNode,'borderLeftColor'),194 "border");195 },196 test_addRuleWithInvalidValue : function () {197 // This would throw an exception in IE if anywhere198 this.stylesheet.set('#target .foo .bar', { color : 'invalid-value' });199 },200 test_descendantSelector : function () {201 var before = Y.DOM.getStyle(202 testbed.getElementsByTagName('pre')[0],'textAlign');203 this.stylesheet.set('#target p', { textAlign: 'right' });204 StyleAssert.areEqual('right',205 Y.DOM.getStyle(206 testbed.getElementsByTagName('p')[0],'textAlign'),207 "#target p { text-align: right; }");208 StyleAssert.areEqual(before,209 Y.DOM.getStyle(210 testbed.getElementsByTagName('pre')[0],'textAlign'),211 "#target pre should not be set (maybe auto/inherit?)");212 },213 test_setCommaSelector : function () {214 var sheet = Dom.getSheet(this.stylesheet.getId());215 if (!sheet) {216 Assert.fail("Could not find this StyleSheet's node or sheet");217 }218 this.stylesheet.set('#target, #target p, #target pre', {219 paddingLeft: '16px'220 });221 Assert.areEqual(3,(sheet.cssRules || sheet.rules).length, "Comma selector split failure");222 StyleAssert.areEqual('16px', Y.DOM.getStyle(this.testNode,'paddingLeft'));223 StyleAssert.areEqual('16px',224 Y.DOM.getStyle(225 testbed.getElementsByTagName('p')[0],'paddingLeft'),226 "#target p");227 StyleAssert.areEqual('16px',228 Y.DOM.getStyle(229 testbed.getElementsByTagName('pre')[0],'paddingLeft'),230 "#target pre");231 },232 test_important: function () {233 var target = Y.one('#target'),234 sheet = Dom.getSheet(this.stylesheet.getId()),235 original = target.get('offsetHeight');236 if (!sheet) {237 Assert.fail("Could not find this StyleSheet's node or sheet");238 }239 this.stylesheet.set('#target p', {240 paddingBottom: '10px !important'241 });242 Assert.areEqual(1,(sheet.cssRules || sheet.rules).length, "!important rule not added to the sheet");243 Assert.areNotEqual(original, target.get('offsetHeight'));244 Assert.fail(); // remove when the bug is fixed245 }246}));247suite.add(new Y.Test.Case({248 name : "Test Enable/Disable sheet",249 setUp : function () {250 this.stylesheet = new StyleSheet('test');251 this.stylesheet.enable();252 this.testNode = Dom.add(testbed,'div',{id:'target'});253 this.before = {254 color : Y.DOM.getStyle(this.testNode,'color'),255 backgroundColor : Y.DOM.getStyle(this.testNode,'backgroundColor'),256 borderLeftColor : Y.DOM.getStyle(this.testNode,'borderLeftColor')257 };258 },259 tearDown : function () {260 testbed.innerHTML = '';261 this.stylesheet.enable();262 this.stylesheet.unset('#target');263 this.stylesheet.unset('#target p');264 },265 test_disableSheet : function () {266 this.stylesheet.set('#target',{267 color : '#123456',268 backgroundColor : '#eef',269 border : '1px solid #ccc'270 });271 StyleAssert.areEqual('#123456',272 Y.DOM.getStyle(this.testNode,'color'),273 "color (enabled)");274 StyleAssert.areEqual('#eef',275 Y.DOM.getStyle(this.testNode,'backgroundColor'),276 "backgroundColor (enabled)");277 StyleAssert.areEqual('#ccc',278 Y.DOM.getStyle(this.testNode,'borderLeftColor'),279 "border (enabled)");280 this.stylesheet.disable();281 StyleAssert.areEqual(this.before.color,282 Y.DOM.getStyle(this.testNode,'color'),283 "color (disabled)");284 StyleAssert.areEqual(this.before.backgroundColor,285 Y.DOM.getStyle(this.testNode,'backgroundColor'),286 "backgroundColor (disabled)");287 StyleAssert.areEqual(this.before.borderLeftColor,288 Y.DOM.getStyle(this.testNode,'borderLeftColor'),289 "border (disabled)");290 },291 test_enableSheet : function () {292 this.stylesheet.disable();293 this.stylesheet.set('#target',{294 color : '#123456',295 backgroundColor : '#eef',296 border : '1px solid #ccc'297 });298 StyleAssert.areEqual(this.before.color,299 Y.DOM.getStyle(this.testNode,'color'),300 "color (disabled)");301 StyleAssert.areEqual(this.before.backgroundColor,302 Y.DOM.getStyle(this.testNode,'backgroundColor'),303 "backgroundColor (disabled)");304 StyleAssert.areEqual(this.before.borderLeftColor,305 Y.DOM.getStyle(this.testNode,'borderLeftColor'),306 "border (disabled)");307 this.stylesheet.enable();308 StyleAssert.areEqual('#123456',309 Y.DOM.getStyle(this.testNode,'color'),310 "color (enabled)");311 StyleAssert.areEqual('#eef',312 Y.DOM.getStyle(this.testNode,'backgroundColor'),313 "backgroundColor (enabled)");314 StyleAssert.areEqual('#ccc',315 Y.DOM.getStyle(this.testNode,'borderLeftColor'),316 "border (enabled)");317 }318}));319suite.add(new Y.Test.Case({320 name : "Test unset",321 setUp : function () {322 this.stylesheet = new StyleSheet('test');323 this.testNode = Dom.add(testbed,'div',{324 id:'target',325 innerHTML:'<p>1</p><p>2</p><pre>pre</pre>'326 });327 this.before = {328 color : Y.DOM.getStyle(this.testNode,'color'),329 backgroundColor : Y.DOM.getStyle(this.testNode,'backgroundColor'),330 borderLeftColor : Y.DOM.getStyle(this.testNode,'borderLeftColor'),331 textAlign : Y.DOM.getStyle(this.testNode,'textAlign')332 };333 },334 tearDown : function () {335 testbed.innerHTML = '';336 this.stylesheet.unset('#target');337 this.stylesheet.unset('#target p');338 this.stylesheet.unset('#target pre');339 // This should be unnecessary, but for the sake of cleanliness...340 this.stylesheet.unset('#target, #target p, #target pre');341 },342 test_unset : function () {343 this.stylesheet.set('#target',{344 color : '#f00',345 backgroundColor : '#eef',346 border : '1px solid #ccc'347 });348 StyleAssert.areEqual('#f00',349 Y.DOM.getStyle(this.testNode,'color'),350 "color (before unset)");351 StyleAssert.areEqual('#eef',352 Y.DOM.getStyle(this.testNode,'backgroundColor'),353 "backgroundColor (before unset)");354 StyleAssert.areEqual('#ccc',355 Y.DOM.getStyle(this.testNode,'borderLeftColor'),356 "border (before unset)");357 this.stylesheet.unset('#target', 'color');358 StyleAssert.areEqual(this.before.color,359 Y.DOM.getStyle(this.testNode,'color'),360 "color (after unset)");361 this.stylesheet.unset('#target', ['backgroundColor','border']);362 StyleAssert.areEqual(this.before.backgroundColor,363 Y.DOM.getStyle(this.testNode,'backgroundColor'),364 "backgroundColor (after unset)");365 StyleAssert.areEqual(this.before.borderLeftColor,366 Y.DOM.getStyle(this.testNode,'borderLeftColor'),367 "border (after unset)");368 },369 test_removeRule : function () {370 this.stylesheet.set('#target', { textAlign: 'right' });371 StyleAssert.areEqual('right',372 Y.DOM.getStyle(this.testNode,'textAlign'),373 "#target { text-align: right; }");374 this.stylesheet.unset('#target');375 StyleAssert.areEqual(this.before.textAlign,376 Y.DOM.getStyle(this.testNode,'textAlign'),377 "#target text-align still in place");378 },379 test_unsetCommaSelector : function () {380 var p = this.testNode.getElementsByTagName('p')[0],381 pre = this.testNode.getElementsByTagName('pre')[0],382 before = {383 paddingLeft:[384 Y.DOM.getStyle(this.testNode,'paddingLeft'),385 Y.DOM.getStyle(p,'paddingLeft'),386 Y.DOM.getStyle(pre,'paddingLeft')387 ],388 marginRight:[389 Y.DOM.getStyle(this.testNode,'marginRight'),390 Y.DOM.getStyle(p,'marginRight'),391 Y.DOM.getStyle(pre,'marginRight')392 ]393 },394 after,395 sheet = Dom.getSheet(this.stylesheet.getId());396 if (!sheet) {397 Assert.fail("Could not find this StyleSheet's node or sheet");398 }399 this.stylesheet.set('#target, #target p, #target pre', {400 marginRight: '30px',401 paddingLeft: '16px'402 });403 Assert.areEqual(3,(sheet.cssRules || sheet.rules).length,404 "Comma selector split failure");405 this.stylesheet.unset('#target, #target p, #target pre','paddingLeft');406 after = [407 Y.DOM.getStyle(this.testNode,'paddingLeft'),408 Y.DOM.getStyle(p,'paddingLeft'),409 Y.DOM.getStyle(pre,'paddingLeft')410 ];411 Assert.areEqual(3,(sheet.cssRules || sheet.rules).length,412 "Should still be 3 rules");413 Y.ArrayAssert.itemsAreEqual(before.paddingLeft,after);414 after = [415 Y.DOM.getStyle(this.testNode,'marginRight'),416 Y.DOM.getStyle(p,'marginRight'),417 Y.DOM.getStyle(pre,'marginRight')418 ];419 Y.ArrayAssert.itemsAreEqual(['30px','30px','30px'],after);420 },421 test_removeCommaSelector : function () {422 var /*p = this.testNode.getElementsByTagName('p')[0],423 pre = this.testNode.getElementsByTagName('pre')[0],424 before = {425 paddingLeft: [426 Y.DOM.getStyle(this.testNode,'paddingLeft'),427 Y.DOM.getStyle(p,'paddingLeft'),428 Y.DOM.getStyle(pre,'paddingLeft')429 ]430 },431 */432 sheet = Dom.getSheet(this.stylesheet.getId());433 if (!sheet) {434 Assert.fail("Could not capture this StyleSheet's node or sheet");435 }436 this.stylesheet.set('#target, #target p, #target pre', {437 paddingLeft: '16px'438 });439 Assert.areEqual(3,(sheet.cssRules || sheet.rules).length,440 "Comma selector split failure");441 this.stylesheet.unset('#target, #target pre','paddingLeft');442 Assert.areEqual(1,(sheet.cssRules || sheet.rules).length);443 }444}));445suite.add(new Y.Test.Case({446 name : "Test getCssText",447 _should: {448 fail: {449 test_important: true450 }451 },452 setUp : function () {453 this.stylesheet = new StyleSheet('test');454 this.testNode = Dom.add(testbed,'div',{455 id:'target',456 innerHTML:'<p>1</p><p>2</p><pre>pre</pre>'457 });458 this.stylesheet.set('#target, #target p', {459 padding: '3px'460 });461 },462 tearDown : function () {463 testbed.innerHTML = '';464 this.stylesheet.unset('#target');465 this.stylesheet.unset('#target p');466 },467 test_getRuleCSS : function () {468 var css = this.stylesheet.getCssText('#target p');469 Y.log(css, 'info','TestLogger');470 Assert.isString(css);471 Assert.areSame(true, /padding/i.test(css));472 },473 test_getSheetCSS : function () {474 var css = this.stylesheet.getCssText();475 Y.log(css, 'info','TestLogger');476 Assert.isString(css);477 Assert.areSame(true, /padding/i.test(css));478 Assert.areSame(true, /#target/i.test(css));479 Assert.areSame(true, /#target\s+p\s+\{/i.test(css));480 },481 test_important: function () {482 this.stylesheet.set('#target p', {483 paddingBottom: '10px !important'484 });485 var css = this.stylesheet.getCssText();486 if (/important/i.test(css)) {487 Y.log("!important not found in cssText", "warn", "TestRunner");488 }489 Assert.fail(); // remove when the bug is fixed490 }491}));492suite.add(new Y.Test.Case({493 name : "Test float/opacity",494 setUp : function () {495 this.stylesheet = new StyleSheet('test');496 if (!d.getElementById('target')) {497 this.testNode = Dom.add(testbed,'div',{498 id:'target',499 innerHTML:'<p id="p1">1</p><p id="p2">2</p><p id="p3">3</p>'500 });501 }502 },503 test_float : function () {504 var p1 = Y.DOM.byId('p1'),505 p2 = Y.DOM.byId('p2'),506 p3 = Y.DOM.byId('p3');507 this.stylesheet.set('#target',{508 overflow: 'hidden',509 background: '#000',510 zoom: 1511 })512 .set('#target p',{513 height:'100px',514 width:'100px',515 border: '5px solid #ccc',516 background: '#fff',517 margin: '1em'518 })519 .set('#p1',{ 'float': 'left' })520 .set('#p2',{ cssFloat: 'left' })521 .set('#p3',{ styleFloat: 'left' });522 Assert.areEqual('left', Y.DOM.getStyle(p1,'float'));523 Assert.areEqual('left', Y.DOM.getStyle(p2,'float'));524 Assert.areEqual('left', Y.DOM.getStyle(p3,'float'));525 },526 test_opacity : function () {527 var p1 = Y.DOM.byId('p1'),528 p2 = Y.DOM.byId('p2'),529 p3 = Y.DOM.byId('p3');530 this.stylesheet.set('#p1',{ opacity: 0.5 }).531 set('#p2',{ opacity: ".2" }).532 set('#p3',{ opacity: 1 });533 Assert.areEqual(0.5,Y.DOM.getStyle(p1,'opacity'));534 Assert.areEqual(0.2,Y.DOM.getStyle(p2,'opacity'));535 Assert.areEqual(1,Y.DOM.getStyle(p3,'opacity'));536 }537}));538suite.add(new Y.Test.Case({539 name: "Testbed Cleanup",540 testbedCleanup: function () {541 Y.all('#testbed,style').remove(true);542 }543}));...
inlineEdit.js
Source: inlineEdit.js
...126 return text.replace(/\n/gi, "<br />");127 },128 setAllStyles: function (prevel, el) {129 var height = 'auto';130 if (el.getProperty('rel'))height = prevel.getStyle('height').toInt() - 4 + 'px';131 if (el.getTag() == 'textarea')height = height.toInt() - 2 + 'px';132 if (el.getProperty('rel') && window.ie)height = prevel.getStyle('height');133 if (prevel.getStyle('font'))el.setStyle('font', prevel.getStyle('font'));134 if (prevel.getStyle('font-size'))el.setStyle('font-size', prevel.getStyle('font-size'));135 if (prevel.getStyle('font-family'))el.setStyle('font-family', prevel.getStyle('font-family'));136 if (prevel.getStyle('font-weight'))el.setStyle('font-weight', prevel.getStyle('font-weight'));137 if (prevel.getStyle('line-height'))el.setStyle('line-height', prevel.getStyle('line-height'));138 if (prevel.getStyle('letter-spacing'))el.setStyle('letter-spacing', prevel.getStyle('letter-spacing'));139 if (prevel.getStyle('list-style'))el.setStyle('list-style', prevel.getStyle('list-style'));140 if (prevel.getStyle('padding'))el.setStyle('padding', prevel.getStyle('padding'));141 if (prevel.getStyle('margin'))el.setStyle('margin', prevel.getStyle('margin'));142 if (prevel.getStyle('height'))el.setStyle('height', height);143 if (prevel.getStyle('width'))el.setStyle('width', prevel.getStyle('width'));144 if (prevel.getStyle('border'))el.setStyle('border', prevel.getStyle('border'));145 if (prevel.getStyle('border-color'))el.setStyle('border-color', prevel.getStyle('border-color'));146 if (prevel.getStyle('border-size'))el.setStyle('border-size', prevel.getStyle('border-size'));147 if (prevel.getStyle('border-left'))el.setStyle('border-left', prevel.getStyle('border-left'));148 if (prevel.getStyle('border-right'))el.setStyle('border-right', prevel.getStyle('border-right'));149 if (prevel.getStyle('border-top'))el.setStyle('border-top', prevel.getStyle('border-top'));150 if (prevel.getStyle('border-bottom'))el.setStyle('height', prevel.getStyle('border-bottom'));151 if (prevel.getStyle('color'))el.setStyle('color', prevel.getStyle('color'));152 if (prevel.getStyle('background'))el.setStyle('background', prevel.getStyle('background'));153 },154 buildTips: function () {155 if (this.options.showIndicator == true) {156 $$('.' + this.options.indicatorClass + '-tip').each(function (tip) {157 tip.remove();158 });//Kill Old Tips159 $each($$(this.searchFor), function (el) {160 el.setProperty('title', this.options.indicatorText);161 }, this);162 new Tips($$(this.searchFor), {163 className: this.options.indicatorClass,164 offsets: {'x': 16, 'y': 5},165 showDelay: 0,166 hideDelay: 0,...
datatable-highlight-tests.js
Source: datatable-highlight-tests.js
...47 "test turning off all highlight features will result in no background changes": function () {48 var test = this;49 a1.after('mouseover', function () {50 setTimeout(function () {51 var _a1 = toHex(a1.getStyle('backgroundColor')),52 _a2 = toHex(a2.getStyle('backgroundColor')),53 _b1 = toHex(b1.getStyle('backgroundColor'));54 _b2 = toHex(b2.getStyle('backgroundColor'));55 test.resume(function () {56 areSame(oddHex, _a1);57 areSame(oddHex, _a2);58 areSame(evenHex, _b1);59 areSame(evenHex, _b2);60 });61 }, 500);62 }, this);63 a1.simulate('mouseover');64 test.wait();65 },66 "test turning on row highlighting will result in only the row changing": function () {67 var test = this;68 dt.set('highlightRows', true);69 a1.after('mouseover', function () {70 setTimeout(function () {71 var _a1 = toHex(a1.getStyle('backgroundColor')),72 _a2 = toHex(a2.getStyle('backgroundColor')),73 _b1 = toHex(b1.getStyle('backgroundColor'));74 _b2 = toHex(b2.getStyle('backgroundColor'));75 areSame(highHex, _a1);76 areSame(highHex, _a2);77 areSame(evenHex, _b1);78 areSame(evenHex, _b2);79 a1.simulate('mouseout');80 }, 500); // have to delay the check to give css transitions adequate time to process81 });82 a1.after('mouseout', function () {83 setTimeout(function () {84 var _a1 = toHex(a1.getStyle('backgroundColor')),85 _a2 = toHex(a2.getStyle('backgroundColor')),86 _b1 = toHex(b1.getStyle('backgroundColor'));87 _b2 = toHex(b2.getStyle('backgroundColor'));88 test.resume(function () {89 areSame(oddHex, _a1);90 areSame(oddHex, _a2);91 areSame(evenHex, _b1);92 areSame(evenHex, _b2);93 });94 }, 500); // have to delay the check to give css transitions adequate time to process95 });96 a1.simulate('mouseover');97 test.wait();98 },99 "test turning on column highlighting will result in only the column changing": function () {100 var test = this;101 dt.set('highlightCols', true);102 a1.after('mouseover', function () {103 setTimeout(function () {104 var _a1 = toHex(a1.getStyle('backgroundColor')),105 _a2 = toHex(a2.getStyle('backgroundColor')),106 _b1 = toHex(b1.getStyle('backgroundColor'));107 _b2 = toHex(b2.getStyle('backgroundColor'));108 areSame(highHex, _a1);109 areSame(oddHex, _a2);110 areSame(highHex, _b1);111 areSame(evenHex, _b2);112 a1.simulate('mouseout');113 }, 500); // have to delay the check to give css transitions adequate time to process114 });115 a1.after('mouseout', function () {116 setTimeout(function () {117 var _a1 = toHex(a1.getStyle('backgroundColor')),118 _a2 = toHex(a2.getStyle('backgroundColor')),119 _b1 = toHex(b1.getStyle('backgroundColor'));120 _b2 = toHex(b2.getStyle('backgroundColor'));121 test.resume(function () {122 areSame(oddHex, _a1);123 areSame(oddHex, _a2);124 areSame(evenHex, _b1);125 areSame(evenHex, _b2);126 });127 }, 500); // have to delay the check to give css transitions adequate time to process128 });129 a1.simulate('mouseover');130 test.wait();131 },132 "test turning on cell highlighting will result in only the cell changing": function () {133 var test = this;134 dt.set('highlightCells', true);135 a1.after('mouseover', function () {136 setTimeout(function () {137 var _a1 = toHex(a1.getStyle('backgroundColor')),138 _a2 = toHex(a2.getStyle('backgroundColor')),139 _b1 = toHex(b1.getStyle('backgroundColor'));140 _b2 = toHex(b2.getStyle('backgroundColor'));141 areSame(highHex, _a1);142 areSame(oddHex, _a2);143 areSame(evenHex, _b1);144 areSame(evenHex, _b2);145 a1.simulate('mouseout');146 }, 500); // have to delay the check to give css transitions adequate time to process147 });148 a1.after('mouseout', function () {149 setTimeout(function () {150 var _a1 = toHex(a1.getStyle('backgroundColor')),151 _a2 = toHex(a2.getStyle('backgroundColor')),152 _b1 = toHex(b1.getStyle('backgroundColor'));153 _b2 = toHex(b2.getStyle('backgroundColor'));154 test.resume(function() {155 areSame(oddHex, _a1);156 areSame(oddHex, _a2);157 areSame(evenHex, _b1);158 areSame(evenHex, _b2);159 });160 }, 500); // have to delay the check to give css transitions adequate time to process161 });162 a1.simulate('mouseover');163 test.wait();164 },165 'test all off then on then off then on' : function () {166 var test = this,167 count = 0,168 mode = false;169 function _switch () {170 mode ? turnOn() : turnOff();171 mode = !mode;172 count++;173 a1.simulate('mouseover');174 test.wait();175 }176 a1.after('mouseover', function () {177 setTimeout(function () {178 var _a1 = toHex(a1.getStyle('backgroundColor')),179 _a2 = toHex(a2.getStyle('backgroundColor')),180 _b1 = toHex(b1.getStyle('backgroundColor'));181 _b2 = toHex(b2.getStyle('backgroundColor'));182 test.resume(function () {183 if (!mode) { // need to reverse case because mode is changed in _switch184 areSame(highHex, _a1);185 areSame(highHex, _a2);186 areSame(highHex, _b1);187 areSame(evenHex, _b2);188 } else {189 areSame(oddHex, _a1);190 areSame(oddHex, _a2);191 areSame(evenHex, _b1);192 areSame(evenHex, _b2);193 }194 a1.simulate('mouseout');195 if (count < 5) {...
drag.js
Source: drag.js
...16 this.render();17 this.dragstart();18 this.dropEle();19 }20 getStyle(ele, style) {21 //todo è·åå
ç´ æ ·å¼22 return ele.currentStyle ? ele.currentStyle[style] : window.getComputedStyle(ele, null)[style];23 }24 initParams() {25 this.distEleW = this.opt.distEle.clientWidth - Math.round(this.getStyle(this.opt.distEle, 'padding-left').split('px')[0]) - Math.round(this.getStyle(this.opt.distEle, 'padding-right').split('px')[0]);26 this.distEleH = this.opt.distEle.clientHeight - Math.round(this.getStyle(this.opt.distEle, 'padding-top').split('px')[0]) - Math.round(this.getStyle(this.opt.distEle, 'padding-bottom').split('px')[0]);27 this.sourceEleW = this.opt.sourceEle.clientWidth - Math.round(this.getStyle(this.opt.sourceEle, 'padding-left').split('px')[0]) - Math.round(this.getStyle(this.opt.sourceEle, 'padding-right').split('px')[0]);28 this.sourceEleH = this.opt.sourceEle.clientHeight - Math.round(this.getStyle(this.opt.sourceEle, 'padding-top').split('px')[0]) - Math.round(this.getStyle(this.opt.sourceEle, 'padding-bottom').split('px')[0]);29 this.getTruePoint();30 return {31 distEleW: this.distEleW,32 distEleH: this.distEleH,33 sourceEleW: this.sourceEleW,34 sourceEleH: this.sourceEleH35 }36 }37 getTruePoint() {38 this.safePos = {39 x: [0 + Math.round(this.getStyle(this.opt.distEle, 'padding-left').split('px')[0]), this.distEleW - this.sourceEleW],40 y: [0 + Math.round(this.getStyle(this.opt.distEle, 'padding-top').split('px')[0]), this.distEleH - this.sourceEleH]41 }42 // å®å
¨åºå43 return this.safePos;44 }45 render() {46 const _position = ['relative', 'absolute', 'fixed', 'sticky'];47 // åå§åå
裹å
ç´ çä½ç½®48 (!_position.includes(this.getStyle(this.opt.distEle, 'position'))) && (this.opt.distEle.style.position = _position[0]);49 // åå§åæå¨å
ç´ çä½ç½®50 (this.getStyle(this.opt.sourceEle, 'position') !== _position[1]) && (this.opt.sourceEle.style.position = _position[1]);51 const { safe, top2, left2 } = this.handlePos({ x: Math.round(this.getStyle(this.opt.sourceEle, 'left').split('px')[0]), y: Math.round(this.getStyle(this.opt.sourceEle, 'top').split('px')[0]) })52 !safe && (this.opt.sourceEle.style.top = top2 + 'px') && (this.opt.sourceEle.style.left = left2 + 'px')53 if (this.opt.zoom) { //æ¾å¤§ï¼ç¼©å°åè½54 this.opt.sourceEle.style.resize = "both";55 this.opt.sourceEle.style.overflow = "auto";56 }57 }58 // 转æ¢ä½ç½®ï¼ä½¿å
¶å¨å®å
¨èå´å
59 handlePos(pos = { x: 0, y: 0 }) {60 let left2 = 0,61 top2 = 0,62 safe = true;// å®å
¨åºå63 if ((pos.x >= this.safePos.x[0]) && (pos.x <= this.safePos.x[1])) {64 console.log("xå¨åºé´å
")65 left2 = pos.x;66 } else {67 console.error("xä¸å¨åºé´å
")68 left2 = pos.x < this.safePos.x[0] ? this.safePos.x[0] : this.safePos.x[1];69 safe = false;70 }71 if ((pos.y >= this.safePos.y[0]) && (pos.y <= this.safePos.y[1])) {72 console.log("yå¨åºé´å
")73 top2 = pos.y74 } else {75 console.error("yä¸å¨åºé´å
")76 safe = false;77 top2 = pos.y < this.safePos.y[0] ? this.safePos.y[0] : this.safePos.y[1];78 }79 return {80 left2,81 top2,82 safe83 }84 }85 dragstart() {86 //çå¬ææ½å
ç´ å¼å§äºä»¶87 this.opt.sourceEle.ondragstart = (e) => {88 let ele = e.target;89 if (ele.nodeName === "IMG") {90 ele = ele.parentNode;91 // e.preventDefault();92 }93 const data = {94 className: ele.className,95 w: ele.clientWidth,96 h: ele.clientHeight,97 top: Math.round(this.getStyle(this.opt.sourceEle, 'top').split('px')[0]),98 left: Math.round(this.getStyle(this.opt.sourceEle, 'left').split('px')[0]),99 point: {100 x: e.clientX,101 y: e.clientY102 }103 };104 console.log("+++å¼å§åæ top,left", data.top, data.left,'+++')105 e.dataTransfer.setData("Text", JSON.stringify(data));106 };107 }108 dragover() {109 this.opt.distEle.ondragover = function (e) {110 e.preventDefault();111 };112 }...
theme.js
Source: theme.js
...3const getStyle = (element, style) => {4 return window.getComputedStyle(element).getPropertyValue(style);5};6const initialColors = {7 colorBackground: getStyle(html, "--color-background"),8 colorText: getStyle(html, "--color-text"),9 colorPrimary: getStyle(html, "--color-primary"),10 colorSecondary: getStyle(html, "--color-secondary"),11 colorSecondaryHover: getStyle(html, "--color-secondary-hover"),12 colorInputBackground: getStyle(html, "--color-input-background"),13 colorInputText: getStyle(html, "--color-input-text"),14 colorButtonText: getStyle(html, "--color-button-text"),15 colorHairlineInDark: getStyle(html, "--color-hairline-in-dark"),16 colorHairlineInLight: getStyle(html, "--color-hairline-in-light"),17 colorCardBackground: getStyle(html, "--color-card-background"),18 colorCardTitle: getStyle(html, "--color-card-title"),19 colorCardInputText: getStyle(html, "--color-card-input-text"),20 colorCardLabel: getStyle(html, "--color-card-label"),21 colorCardContent: getStyle(html, "--color-card-content"),22 colorCancel: getStyle(html, "--color-cancel"),23 colorDelete: getStyle(html, "--color-delete"),24 colorSave: getStyle(html, "--color-save"),25 colorBadgeProgressText: getStyle(html, "--color-badge-progress-text"),26 colorBadgeProgressBackground: getStyle(27 html,28 "--color-badge-progress-background"29 ),30 colorBadgeDoneText: getStyle(html, "--color-badge-done-text"),31 colorBadgeDoneBackground: getStyle(html, "--color-badge-done-background"),32 colorHeaderInnerTitle: getStyle(html, "--color-header-inner-title"),33 colorModalBackground: getStyle(html, "--color-modal-background"),34 colorModalTitle: getStyle(html, "--color-modal-title"),35 colorModeSwitcher: getStyle(html, "--color-mode-switcher"),36 colorAsideBorder: getStyle(html, "--color-aside-border"),37};38const darkMode = {39 colorBackground: "#1a1a1a",40 colorText: "#dbdbdb",41 colorPrimary: "#151db4",42 colorSecondary: "#8208ff",43 colorSecondaryHover: "#0066ff",44 colorInputBackground: "#dbdbdf",45 colorInputText: "rgb(39, 39, 39)",46 colorButtonText: "#ffffff",47 colorHairlineInDark: "#4f4f5b",48 colorHairlineInLight: "#e1e3e5",49 colorCardBackground: "#383838",50 colorCardTitle: "#dadada",...
overlay-stack-tests.js
Source: overlay-stack-tests.js
...7 'test 6 overlays render': function() {8 Assert.areEqual(6, overlays.size(), ' - Failed to render 6 overlays');9 },10 'test initial z-index': function() {11 Assert.areEqual('1', overlays.item(0).getStyle('zIndex'), ' - Failed z-index for 0');12 Assert.areEqual('2', overlays.item(1).getStyle('zIndex'), ' - Failed z-index for 1');13 Assert.areEqual('3', overlays.item(2).getStyle('zIndex'), ' - Failed z-index for 2');14 Assert.areEqual('4', overlays.item(3).getStyle('zIndex'), ' - Failed z-index for 3');15 Assert.areEqual('5', overlays.item(4).getStyle('zIndex'), ' - Failed z-index for 4');16 Assert.areEqual('6', overlays.item(5).getStyle('zIndex'), ' - Failed z-index for 5');17 },18 'test z-index after click overlay.item(2)': function() {19 overlays.item(2).simulate("mousedown", { clientX: 10, clientY: 10 });20 Assert.areEqual('1', overlays.item(0).getStyle('zIndex'), ' - Failed z-index for 0');21 Assert.areEqual('2', overlays.item(1).getStyle('zIndex'), ' - Failed z-index for 1');22 Assert.areEqual('6', overlays.item(2).getStyle('zIndex'), ' - Failed z-index for 2');23 Assert.areEqual('4', overlays.item(3).getStyle('zIndex'), ' - Failed z-index for 3');24 Assert.areEqual('5', overlays.item(4).getStyle('zIndex'), ' - Failed z-index for 4');25 Assert.areEqual('3', overlays.item(5).getStyle('zIndex'), ' - Failed z-index for 5');26 },27 'test z-index after click overlay.item(1)': function() {28 overlays.item(1).simulate("mousedown", { clientX: 10, clientY: 10 });29 Assert.areEqual('1', overlays.item(0).getStyle('zIndex'), ' - Failed z-index for 0');30 Assert.areEqual('6', overlays.item(1).getStyle('zIndex'), ' - Failed z-index for 1');31 Assert.areEqual('2', overlays.item(2).getStyle('zIndex'), ' - Failed z-index for 2');32 Assert.areEqual('4', overlays.item(3).getStyle('zIndex'), ' - Failed z-index for 3');33 Assert.areEqual('5', overlays.item(4).getStyle('zIndex'), ' - Failed z-index for 4');34 Assert.areEqual('3', overlays.item(5).getStyle('zIndex'), ' - Failed z-index for 5');35 }36 }));37 Y.Test.Runner.add(suite);...
scripts.js
Source: scripts.js
2const checkbox = document.querySelector('input[name=theme]');3const getStyle = (element, style) =>4 window.getComputedStyle(element).getPropertyValue(style);5const initialColors = {6 bg: getStyle(html, '--bg'),7 borderColor: getStyle(html, '--border-color'),8 colorText: getStyle(html, '--color-text'),9 bgGeral: getStyle(html, '--bg-geral'),10 bgGithub: getStyle(html, '--bg-github'),11 text: getStyle(html, '--text'),12 bgGitlab: getStyle(html, '--bg-gitlab'),13 bgBac: getStyle(html, '--bg-bac'),14 colorSpan: getStyle(html, '--color-span'),15 bgFooter: getStyle(html, '--bg-footer'),16 colorFooter: getStyle(html, '--color-footer'),17 colorF: getStyle(html, '--color-f'),18 bgCopy: getStyle(html, '--bg-copy'),19 colorCopy: getStyle(html, '--color-copy'),20 bgToggle: getStyle(html, '--bg-toggle'),21};22const darkMode = {23 bg: '#404040',24 borderColor: '#404040',25 colorText: '#fff',26 bgGeral: '#fff',27 bgGithub: getStyle(html, '--bg-github'),28 text: '#404040',29 bgGitlab: getStyle(html, '--bg-gitlab'),30 bgBac: getStyle(html, '--bg-bac'),31 colorSpan: getStyle(html, '--color-span'),32 bgFooter: getStyle(html, '--bg-footer'),33 colorFooter: getStyle(html, '--color-footer'),34 colorF: getStyle(html, '--color-f'),35 bgCopy: getStyle(html, '--bg-copy'),36 colorCopy: getStyle(html, '--color-copy'),37 bgToggle: getStyle(html, '--bg-toggle'),38};39const transformKey = (key) =>40 '--' + key.replace(/([A-Z])/, '-$1').toLowerCase();41const changeColors = (colors) => {42 Object.keys(colors).map((key) =>43 html.style.setProperty(transformKey(key), colors[key])44 );45};46checkbox.addEventListener('change', ({ target }) => {47 target.checked ? changeColors(darkMode) : changeColors(initialColors);...
Using AI Code Generation
1const { getStyle } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const element = await page.$('text=API');8 const style = await getStyle(element);9 console.log(style);10 await browser.close();11})();12{13 'color': 'rgb(255, 255, 255)',14 'background-color': 'rgb(0, 0, 0)',15 'border-top-color': 'rgb(0, 0, 0)',16 'border-right-color': 'rgb(0, 0, 0)',17 'border-bottom-color': 'rgb(0, 0, 0)',18 'border-left-color': 'rgb(0, 0, 0)',19 'outline-color': 'rgb(0, 0, 0)',
Using AI Code Generation
1const { getStyle } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const style = await getStyle(page, 'body', 'color');8 console.log('Body color is: ' + style);9 await browser.close();10})();11Body color is: rgb(0, 0, 0)
Using AI Code Generation
1const playwright = require('playwright');2const path = require('path');3(async () => {4 const browser = await playwright.chromium.launch({ headless: false });5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.waitForTimeout(10000);8 const element = await page.$('input[name="q"]');9 const style = await element._page._delegate.getStyle(element._elementHandle);10 console.log(style);11 await browser.close();12})();
Using AI Code Generation
1const { getStyle } = require('@playwright/test/lib/server/dom');2const { getAttribute } = require('@playwright/test/lib/server/dom');3const { getComputedAccessibleNode } = require('@playwright/test/lib/server/dom');4const { getComputedStyle } = require('@playwright/test/lib/server/dom');5const { getInnerText } = require('@playwright/test/lib/server/dom');6const { getOuterHTML } = require('@playwright/test/lib/server/dom');7const { getSelector } = require('@playwright/test/lib/server/dom');8const { getBoundingBox } = require('@playwright/test/lib/server/dom');9const { getAttributeList } = require('@playwright/test/lib/server/dom');10const { getAttributeMap } = require('@playwright/test/lib/server/dom');11const { getInnerTextArray } = require('@playwright/test/lib/server/dom');12const { getInnerTextObject } = require('@playwright/test/lib/server/dom');13const { getOuterHTMLArray } = require('@playwright/test/lib/server/dom');14const { getOuterHTMLObject } = require('@playwright/test/lib/server/dom');15test.describe('Playwright Internal API', () => {16 test('should get style of an element', async ({ page }) => {17 await page.setContent(`<div id="element" style="display: block; color: white; background-color: red;"></div>`);18 const element = await page.$('#element');19 const style = await getStyle(element);20 console.log(style);21 expect(style).toEqual({
Using AI Code Generation
1const style = await page.evaluateHandle((selector) => {2 const element = document.querySelector(selector);3 return element;4}, selector);5const styleHandle = await style.getProperty('style');6const styleProperties = await styleHandle.jsonValue();7console.log(styleProperties);8const style = await page.evaluateHandle((selector) => {9 const element = document.querySelector(selector);10 return element;11}, selector);12const styleHandle = await style.getProperty('computedStyleMap');13const styleProperties = await styleHandle.jsonValue();14console.log(styleProperties);15const style = await page.evaluateHandle((selector) => {16 const element = document.querySelector(selector);17 return element;18}, selector);19const styleHandle = await style.getProperty('computedStyle');20const styleProperties = await styleHandle.jsonValue();21console.log(styleProperties);22const style = await page.evaluateHandle((selector) => {23 const element = document.querySelector(selector);24 return element;25}, selector);26const styleProperties = await style.jsonValue();27console.log(styleProperties);28const style = await page.evaluateHandle((selector) => {29 const element = document.querySelector(selector);30 return element;31}, selector);32const styleProperties = await style.jsonValue();33console.log(styleProperties);
Using AI Code Generation
1const { getStyle } = require('@playwright/test');2const element = await page.$('selector');3const style = await getStyle(element, 'background-color');4console.log(style);5const { getAttribute } = require('@playwright/test');6const element = await page.$('selector');7const attribute = await getAttribute(element, 'href');8console.log(attribute);9const { getTextContent } = require('@playwright/test');10const element = await page.$('selector');11const text = await getTextContent(element);12console.log(text);13const { innerHTML } = require('@playwright/test');14const element = await page.$('selector');15const html = await innerHTML(element);16console.log(html);17const { innerText } = require('@playwright/test');18const element = await page.$('selector');19const text = await innerText(element);20console.log(text);21const { innerText } = require('@playwright/test');22const element = await page.$('selector');23const text = await innerText(element);24console.log(text);25const { scrollIntoViewIfNeeded } = require('@playwright/test');26const element = await page.$('selector');27await scrollIntoViewIfNeeded(element);28const { dispatchEvent } = require('@playwright/test');29const element = await page.$('selector');30await dispatchEvent(element, 'click');31const { selectOption } = require('@playwright/test');32const element = await page.$('selector');33await selectOption(element, 'value');34const { selectText } = require('@playwright/test');35const element = await page.$('selector');36await selectText(element);37const { setInputFiles } = require('@playwright/test');38const element = await page.$('selector');39await setInputFiles(element, 'file_path');40const { hover }
Using AI Code Generation
1const { getStyle } = require('@playwright/test/lib/utils/dom');2const style = await getStyle(page, 'body', 'background-color');3console.log(style);4const { getStyle } = require('@playwright/test/lib/utils/dom');5const style = await getStyle(page, 'body', 'background-color');6console.log(style);7const { getStyle } = require('@playwright/test/lib/utils/dom');8const style = await getStyle(page, 'body', 'background-color');9console.log(style);10const { getStyle } = require('@playwright/test/lib/utils/dom');11const style = await getStyle(page, 'body', 'background-color');12console.log(style);13const { getStyle } = require('@playwright/test/lib/utils/dom');14const style = await getStyle(page, 'body', 'background-color');15console.log(style);16const { getStyle } = require('@playwright/test/lib/utils/dom');17const style = await getStyle(page, 'body', 'background-color');18console.log(style);19const { getStyle } = require('@playwright/test/lib/utils/dom');20const style = await getStyle(page, 'body', 'background-color');21console.log(style);22const { getStyle } = require('@playwright/test/lib/utils/dom');23const style = await getStyle(page, 'body', 'background-color');24console.log(style);25const { getStyle } = require('@playwright/test/lib/utils/dom');26const style = await getStyle(page, 'body', 'background-color');27console.log(style);28const { getStyle } = require('@playwright/test/lib/utils/dom');29const style = await getStyle(page, 'body', 'background-color');30console.log(style);31const { getStyle } = require('@playwright/test/lib/utils/dom');32const style = await getStyle(page, 'body', '
Using AI Code Generation
1const { getStyle } = require('@playwright/test/lib/server/dom.js');2const elementHandle = await page.$('h1');3const style = await getStyle(elementHandle, 'color');4console.log(style);5await browser.close();6})();7rgb(255, 255, 255)
Using AI Code Generation
1const { getStyle } = require('@playwright/test/lib/server/dom');2const { Page } = require('@playwright/test');3const page = new Page();4const { getStyle } = require('@playwright/test/lib/server/dom');5const { Page } = require('@playwright/test');6const page = new Page();7const { getStyle } = require('@playwright/test/lib/server/dom');8const { Page } = require('@playwright/test');9const page = new Page();10const { getStyle } = require('@playwright/test/lib/server/dom');11const { Page } = require('@playwright/test');12const page = new Page();13const { getStyle } = require('@playwright/test/lib/server/dom');14const { Page } = require('@playwright/test');15const page = new Page();16const { getStyle } = require('@playwright/test/lib/server/dom');17const { Page } = require('@playwright/test');18const page = new Page();19const { getStyle } = require('@playwright/test/lib/server/dom');20const { Page } = require('@playwright/test');21const page = new Page();22const { getStyle } = require('@playwright/test/lib/server/dom');23const { Page } = require('@playwright/test');24const page = new Page();25const { getStyle } = require('@playwright/test/lib/server/dom');26const { Page } = require('@playwright/test');27const page = new Page();28const { getStyle } = require('@playwright/test/lib/server/dom');29const { Page } = require('@playwright/test');30const page = new Page();31const { getStyle } = require('@playwright/test/lib/server/dom');32const { Page } = require('@playwright/test');33const page = new Page();34const {35const { selectOption } = require('@playwright/test');36const element = await page.$('selector');37await selectOption(element, 'value');38const { selectText } = require('@playwright/test');39const element = await page.$('selector');40await selectText(element);41const { setInputFiles } = require('@playwright/test');42const element = await page.$('selector');43await setInputFiles(element, 'file_path');44const { hover }
Jest + Playwright - Test callbacks of event-based DOM library
firefox browser does not start in playwright
Is it possible to get the selector from a locator object in playwright?
How to run a list of test suites in a single file concurrently in jest?
Running Playwright in Azure Function
firefox browser does not start in playwright
This question is quite close to a "need more focus" question. But let's try to give it some focus:
Does Playwright has access to the cPicker object on the page? Does it has access to the window object?
Yes, you can access both cPicker and the window object inside an evaluate call.
Should I trigger the events from the HTML file itself, and in the callbacks, print in the DOM the result, in some dummy-element, and then infer from that dummy element text that the callbacks fired?
Exactly, or you can assign values to a javascript variable:
const cPicker = new ColorPicker({
onClickOutside(e){
},
onInput(color){
window['color'] = color;
},
onChange(color){
window['result'] = color;
}
})
And then
it('Should call all callbacks with correct arguments', async() => {
await page.goto(`http://localhost:5000/tests/visual/basic.html`, {waitUntil:'load'})
// Wait until the next frame
await page.evaluate(() => new Promise(requestAnimationFrame))
// Act
// Assert
const result = await page.evaluate(() => window['color']);
// Check the value
})
Check out the latest blogs from LambdaTest on this topic:
Native apps are developed specifically for one platform. Hence they are fast and deliver superior performance. They can be downloaded from various app stores and are not accessible through browsers.
One of the essential parts when performing automated UI testing, whether using Selenium or another framework, is identifying the correct web elements the tests will interact with. However, if the web elements are not located correctly, you might get NoSuchElementException in Selenium. This would cause a false negative result because we won’t get to the actual functionality check. Instead, our test will fail simply because it failed to interact with the correct element.
Smartphones have changed the way humans interact with technology. Be it travel, fitness, lifestyle, video games, or even services, it’s all just a few touches away (quite literally so). We only need to look at the growing throngs of smartphone or tablet users vs. desktop users to grasp this reality.
As part of one of my consulting efforts, I worked with a mid-sized company that was looking to move toward a more agile manner of developing software. As with any shift in work style, there is some bewilderment and, for some, considerable anxiety. People are being challenged to leave their comfort zones and embrace a continuously changing, dynamic working environment. And, dare I say it, testing may be the most ‘disturbed’ of the software roles in agile development.
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.
Get 100 minutes of automation test minutes FREE!!