1. CSS- gemini , .C , 22

2. ? ? ? ? ? ?2 3. 3 4. 4 62 15 4 5. 5 6. 6 7. jscs7 8. SS ???8 9. 9 10. ?10getComputedCss(block).borderWidth.should.be('2px') 11. 11border box-shadow 12. ?12 13. 13 14. , 14 15. 15 16. 16 17. 17 18. 18 19. 19 20. 20 21. 21 22. 22 23. 23 24. - 24 25. 25 26. 26 27. 27 28. 28 29. git checkout long-time-ago29 30. 30 31. 31 32. DPXDTgithub.com/bslatkin/dpxdt URL 32 33. casper.js + phantom.cssgithub.com/Huddle/PhantomCSS phantom.js33 34. Huxleygithub.com/facebook/huxley 34 35. dpxdt phantom.css Huxley JavaScript 35 36. WebDriverCSS diff GUI outline box-shadow 36 37. gemini opensource 37 38. 38 39. Diff 39rgb(127, 127, 255) rgb(125, 125, 255) 40. Diff 40 41. 41github.com/bem/png-imggithub.com/SevInf/looks-same 42. gemini42 43. 1 2 N 43 44. plainfocused text 44 45. var gemini = require('gemini');gemini.suite('input', function(suite) {});45 46. URLsuite.setUrl('/some/url');46 47. suite.setCaptureElements('.text-field');47 48. suite.capture('plain');48 49. suite.capture('focus', function(actions) {});49 50. suite.capture('focus', function(actions) {actions.click('.text-field');});50 51. findsuite.capture('text', function(actions, find) {actions.sendKeys(find(.text-field), 'Hi!');});51 52. beforesuite.before(function(actions, find) {this.field = find('.text-field');});52 53. var gemini = require('gemini');gemini.suite('text-field', function() {suite.setUrl('/some/url').setCaptureElements('.text-field').before(function(actions, find) {this.field = find('.text-field');}).capture('plain').capture('focus', function(actions, find) {actions.click(this.field);}).capture('text', function(actions, find) {actions.sendKeys(this.field, 'Hi!');});});53 54. 54 55. 55 56. CSS button {background: linear-gradient(...);border: 3px solid #cccccc;line-height: 31px;font-size: 15px;outline: 0;}button:hover {border-color: #999999;}button:active {background: linear-gradient(...);border-color: #999999;}56 57. gather57 58. button {background: linear-gradient(...);border: 3px solid #cccccc;border: 0;box-shadow: 0 0 0 3px solid #cccccc;line-height: 31px;font-size: 15px;outline: 0;}button:hover {border-color: #999999;}button:active {background: linear-gradient(...);border-color: #999999;}58 59. test59 60. html-60 61. button:hover {box-shadow: 0 0 0 3px solid #999999;}button:active {background: linear-gradient(...);box-shadow: 0 0 0 3px solid #999999;}61 62. test ()62 63. 63 64. GUI64 65. github.com/bem/bem-components/65 66. 66 67. CSS.first {}.second {}.third {}67 68. 68First SecondThird 69. 69First SecondThird 70. 70First SecondThird 71. .first {}71.second {}.third {} 72. ?ru.bem.info/tools/testing/gemini/github.com/bem/gemini72 73. @SevInfSevInfsevinf@yandex-team.ru73