How to use getStyle method in Playwright Internal
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 }
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)
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
