How to use getStyle method in Playwright Internal

Best JavaScript code snippet using playwright-internal

stylesheet-tests.js

Source:stylesheet-tests.js Github

copy

Full Screen

...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);...

Full Screen

Full Screen

stylesheet.js

Source:stylesheet.js Github

copy

Full Screen

...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}));...

Full Screen

Full Screen

inlineEdit.js

Source:inlineEdit.js Github

copy

Full Screen

...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,...

Full Screen

Full Screen

datatable-highlight-tests.js

Source:datatable-highlight-tests.js Github

copy

Full Screen

...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) {...

Full Screen

Full Screen

drag.js

Source:drag.js Github

copy

Full Screen

...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 }...

Full Screen

Full Screen

theme.js

Source:theme.js Github

copy

Full Screen

...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",...

Full Screen

Full Screen

overlay-stack-tests.js

Source:overlay-stack-tests.js Github

copy

Full Screen

...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);...

Full Screen

Full Screen

scripts.js

Source:scripts.js Github

copy

Full Screen

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);...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)',

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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({

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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', '

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful