chrome/browser/web_dev_style/css_checker_test.py

   1 #!/usr/bin/env python
   2 # Copyright 2015 The Chromium Authors. All rights reserved.
   3 # Use of this source code is governed by a BSD-style license that can be
   4 # found in the LICENSE file.
   5
   6 import css_checker
   7 from os import path as os_path
   8 import re
   9 from sys import path as sys_path
  10 import unittest
  11
  12 _HERE = os_path.dirname(os_path.abspath(__file__))
  13 sys_path.append(os_path.join(_HERE, '..', '..', '..', 'tools'))
  14
  15 import find_depot_tools  # pylint: disable=W0611
  16 from testing_support.super_mox import SuperMoxTestBase
  17
  18
  19 class CssCheckerTest(SuperMoxTestBase):
  20   def setUp(self):
  21     SuperMoxTestBase.setUp(self)
  22
  23     self.fake_file_name = 'fake.css'
  24
  25     self.fake_file = self.mox.CreateMockAnything()
  26     self.mox.StubOutWithMock(self.fake_file, 'LocalPath')
  27     self.fake_file.LocalPath().AndReturn(self.fake_file_name)
  28     # Actual calls to NewContents() are defined in each test.
  29     self.mox.StubOutWithMock(self.fake_file, 'NewContents')
  30
  31     self.input_api = self.mox.CreateMockAnything()
  32     self.input_api.re = re
  33     self.mox.StubOutWithMock(self.input_api, 'AffectedSourceFiles')
  34     self.input_api.AffectedFiles(
  35         include_deletes=False, file_filter=None).AndReturn([self.fake_file])
  36
  37     # Actual creations of PresubmitPromptWarning are defined in each test.
  38     self.output_api = self.mox.CreateMockAnything()
  39     self.mox.StubOutWithMock(self.output_api, 'PresubmitPromptWarning',
  40                              use_mock_anything=True)
  41
  42     self.output_api = self.mox.CreateMockAnything()
  43     self.mox.StubOutWithMock(self.output_api, 'PresubmitNotifyResult',
  44                              use_mock_anything=True)
  45
  46   def VerifyContentsIsValid(self, contents):
  47     self.fake_file.NewContents().AndReturn(contents.splitlines())
  48     self.mox.ReplayAll()
  49     css_checker.CSSChecker(self.input_api, self.output_api).RunChecks()
  50
  51   def VerifyContentsProducesOutput(self, contents, output):
  52     self.fake_file.NewContents().AndReturn(contents.splitlines())
  53     author_msg = ('Was the CSS checker useful? '
  54                   'Send feedback or hate mail to dbeam@chromium.org.')
  55     self.output_api.PresubmitNotifyResult(author_msg).AndReturn(None)
  56     self.output_api.PresubmitPromptWarning(
  57         self.fake_file_name + ':\n' + output.strip()).AndReturn(None)
  58     self.mox.ReplayAll()
  59     css_checker.CSSChecker(self.input_api, self.output_api).RunChecks()
  60
  61   def testCssAlphaWithAtBlock(self):
  62     self.VerifyContentsProducesOutput("""
  63 <include src="../shared/css/cr/ui/overlay.css">
  64 <include src="chrome://resources/totally-cool.css" />
  65
  66 /* A hopefully safely ignored comment and @media statement. /**/
  67 @media print {
  68   div {
  69     display: block;
  70     color: red;
  71   }
  72 }
  73
  74 .rule {
  75   z-index: 5;
  76 <if expr="not is macosx">
  77   background-image: url(chrome://resources/BLAH); /* TODO(dbeam): Fix this. */
  78   background-color: rgb(235, 239, 249);
  79 </if>
  80 <if expr="is_macosx">
  81   background-color: white;
  82   background-image: url(chrome://resources/BLAH2);
  83 </if>
  84   color: black;
  85 }
  86
  87 <if expr="is_macosx">
  88 .language-options-right {
  89   visibility: hidden;
  90   opacity: 1; /* TODO(dbeam): Fix this. */
  91 }
  92 </if>""", """
  93 - Alphabetize properties and list vendor specific (i.e. -webkit) above standard.
  94     display: block;
  95     color: red;
  96
  97     z-index: 5;
  98     color: black;""")
  99
 100   def testCssStringWithAt(self):
 101     self.VerifyContentsIsValid("""
 102 #logo {
 103   background-image: url(images/google_logo.png@2x);
 104 }
 105
 106 body.alternate-logo #logo {
 107   -webkit-mask-image: url(images/google_logo.png@2x);
 108   background: none;
 109 }
 110
 111 .stuff1 {
 112 }
 113
 114 .stuff2 {
 115 }
 116       """)
 117
 118   def testCssAlphaWithNonStandard(self):
 119     self.VerifyContentsProducesOutput("""
 120 div {
 121   /* A hopefully safely ignored comment and @media statement. /**/
 122   color: red;
 123   -webkit-margin-start: 5px;
 124 }""", """
 125 - Alphabetize properties and list vendor specific (i.e. -webkit) above standard.
 126     color: red;
 127     -webkit-margin-start: 5px;""")
 128
 129   def testCssAlphaWithLongerDashedProps(self):
 130     self.VerifyContentsProducesOutput("""
 131 div {
 132   border-left: 5px;  /* A hopefully removed comment. */
 133   border: 5px solid red;
 134 }""", """
 135 - Alphabetize properties and list vendor specific (i.e. -webkit) above standard.
 136     border-left: 5px;
 137     border: 5px solid red;""")
 138
 139   def testCssBracesHaveSpaceBeforeAndNothingAfter(self):
 140     self.VerifyContentsProducesOutput("""
 141 /* Hello! */div/* Comment here*/{
 142   display: block;
 143 }
 144
 145 blah /* hey! */
 146 {
 147   rule: value;
 148 }
 149
 150 .mixed-in {
 151   display: none;
 152   --css-mixin: {
 153     color: red;
 154   };  /* This should be ignored. */
 155 }
 156
 157 .this.is { /* allowed */
 158   rule: value;
 159 }""", """
 160 - Start braces ({) end a selector, have a space before them and no rules after.
 161     div{
 162     {""")
 163
 164   def testCssClassesUseDashes(self):
 165     self.VerifyContentsProducesOutput("""
 166 .className,
 167 .ClassName,
 168 .class-name /* We should not catch this. */,
 169 .class_name {
 170   display: block;
 171 }""", """
 172  - Classes use .dash-form.
 173     .className,
 174     .ClassName,
 175     .class_name {""")
 176
 177   def testCssCloseBraceOnNewLine(self):
 178     self.VerifyContentsProducesOutput("""
 179 @media { /* TODO(dbeam) Fix this case. */
 180   .rule {
 181     display: block;
 182   }}
 183
 184 @-webkit-keyframe blah {
 185   from { height: rotate(-10turn); }
 186   100% { height: 500px; }
 187 }
 188
 189 #id { /* ${TemplateExpressions} should be ignored. */
 190   rule: ${someValue};
 191   --css-mixin: {
 192     color: red;
 193   };
 194 }
 195
 196 .paper-wrapper {
 197   --paper-thinger: {
 198     background: blue;
 199   };
 200 }
 201
 202 #rule {
 203   rule: value; }""", """
 204 - Always put a rule closing brace (}) on a new line.
 205     rule: value; }""")
 206
 207   def testCssColonsHaveSpaceAfter(self):
 208     self.VerifyContentsProducesOutput("""
 209 div:not(.class):not([attr=5]), /* We should not catch this. */
 210 div:not(.class):not([attr]) /* Nor this. */ {
 211   background: url(data:image/jpeg,asdfasdfsadf); /* Ignore this. */
 212   background: -webkit-linear-gradient(left, red,
 213                                       80% blah blee blar);
 214   color: red;
 215   display:block;
 216 }""", """
 217 - Colons (:) should have a space after them.
 218     display:block;
 219
 220 - Don't use data URIs in source files. Use grit instead.
 221     background: url(data:image/jpeg,asdfasdfsadf);""")
 222
 223   def testCssFavorSingleQuotes(self):
 224     self.VerifyContentsProducesOutput("""
 225 html[dir="rtl"] body,
 226 html[dir=ltr] body /* TODO(dbeam): Require '' around rtl in future? */ {
 227   font-family: "Open Sans";
 228 <if expr="is_macosx">
 229   blah: blee;
 230 </if>
 231 }""", """
 232 - Use single quotes (') instead of double quotes (") in strings.
 233     html[dir="rtl"] body,
 234     font-family: "Open Sans";""")
 235
 236   def testCssHexCouldBeShorter(self):
 237     self.VerifyContentsProducesOutput("""
 238 #abc,
 239 #abc-,
 240 #abc-ghij,
 241 #abcdef-,
 242 #abcdef-ghij,
 243 #aaaaaa,
 244 #bbaacc {
 245   background-color: #336699; /* Ignore short hex rule if not gray. */
 246   color: #999999;
 247   color: #666;
 248 }""", """
 249 - Use abbreviated hex (#rgb) when in form #rrggbb.
 250     color: #999999; (replace with #999)
 251
 252 - Use rgb() over #hex when not a shade of gray (like #333).
 253     background-color: #336699; (replace with rgb(51, 102, 153))""")
 254
 255   def testCssUseMillisecondsForSmallTimes(self):
 256     self.VerifyContentsProducesOutput("""
 257 .transition-0s /* This is gross but may happen. */ {
 258   transform: one 0.2s;
 259   transform: two .1s;
 260   transform: tree 1s;
 261   transform: four 300ms;
 262 }""", """
 263 - Use milliseconds for time measurements under 1 second.
 264     transform: one 0.2s; (replace with 200ms)
 265     transform: two .1s; (replace with 100ms)""")
 266
 267   def testCssNoDataUrisInSourceFiles(self):
 268     self.VerifyContentsProducesOutput("""
 269 img {
 270   background: url( data:image/jpeg,4\/\/350|\/|3|2 );
 271 }""", """
 272 - Don't use data URIs in source files. Use grit instead.
 273     background: url( data:image/jpeg,4\/\/350|\/|3|2 );""")
 274
 275   def testCssNoQuotesInUrl(self):
 276     self.VerifyContentsProducesOutput("""
 277 img {
 278   background: url('chrome://resources/images/blah.jpg');
 279   background: url("../../folder/hello.png");
 280 }""", """
 281 - Use single quotes (') instead of double quotes (") in strings.
 282     background: url("../../folder/hello.png");
 283
 284 - Don't use quotes in url().
 285     background: url('chrome://resources/images/blah.jpg');
 286     background: url("../../folder/hello.png");""")
 287
 288   def testCssOneRulePerLine(self):
 289     self.VerifyContentsProducesOutput("""
 290 a:not([hidden]):not(.custom-appearance):not([version=1]):first-of-type,
 291 a:not([hidden]):not(.custom-appearance):not([version=1]):first-of-type ~
 292     input[type='checkbox']:not([hidden]),
 293 div {
 294   background: url(chrome://resources/BLAH);
 295   rule: value; /* rule: value; */
 296   rule: value; rule: value;
 297 }
 298
 299 .remix {
 300   --dj: {
 301     spin: that;
 302   };
 303 }
 304 """, """
 305 - One rule per line (what not to do: color: red; margin: 0;).
 306     rule: value; rule: value;""")
 307
 308   def testCssOneSelectorPerLine(self):
 309     self.VerifyContentsProducesOutput("""
 310 a,
 311 div,a,
 312 div,/* Hello! */ span,
 313 #id.class([dir=rtl):not(.class):any(a, b, d) {
 314   rule: value;
 315 }
 316
 317 a,
 318 div,a {
 319   some-other: rule here;
 320 }""", """
 321 - One selector per line (what not to do: a, b {}).
 322     div,a,
 323     div, span,
 324     div,a {""")
 325
 326   def testCssPseudoElementDoubleColon(self):
 327     self.VerifyContentsProducesOutput("""
 328 a:href,
 329 br::after,
 330 ::-webkit-scrollbar-thumb,
 331 a:not([empty]):hover:focus:active, /* shouldn't catch here and above */
 332 abbr:after,
 333 .tree-label:empty:after,
 334 b:before,
 335 :-WebKit-ScrollBar {
 336   rule: value;
 337 }""", """
 338 - Pseudo-elements should use double colon (i.e. ::after).
 339     :after (should be ::after)
 340     :after (should be ::after)
 341     :before (should be ::before)
 342     :-WebKit-ScrollBar (should be ::-WebKit-ScrollBar)
 343     """)
 344
 345   def testCssRgbIfNotGray(self):
 346     self.VerifyContentsProducesOutput("""
 347 #abc,
 348 #aaa,
 349 #aabbcc {
 350   background: -webkit-linear-gradient(left, from(#abc), to(#def));
 351   color: #bad;
 352   color: #bada55;
 353 }""", """
 354 - Use rgb() over #hex when not a shade of gray (like #333).
 355     background: -webkit-linear-gradient(left, from(#abc), to(#def)); """
 356 """(replace with rgb(170, 187, 204), rgb(221, 238, 255))
 357     color: #bad; (replace with rgb(187, 170, 221))
 358     color: #bada55; (replace with rgb(186, 218, 85))""")
 359
 360   def testWebkitBeforeOrAfter(self):
 361     self.VerifyContentsProducesOutput("""
 362 .test {
 363   -webkit-margin-before: 10px;
 364   -webkit-margin-start: 20px;
 365   -webkit-padding-after: 3px;
 366   -webkit-padding-end: 5px;
 367 }
 368 """, """
 369 - Use *-top/bottom instead of -webkit-*-before/after.
 370     -webkit-margin-before: 10px; (replace with margin-top)
 371     -webkit-padding-after: 3px; (replace with padding-bottom)""")
 372
 373   def testCssZeroWidthLengths(self):
 374     self.VerifyContentsProducesOutput("""
 375 @-webkit-keyframe anim {
 376   0% { /* Ignore key frames */
 377     width: 0px;
 378   }
 379   10% {
 380     width: 10px;
 381   }
 382   100% {
 383     width: 100px;
 384   }
 385 }
 386
 387 #logo {
 388   background-image: url(images/google_logo.png@2x);
 389 }
 390
 391 body.alternate-logo #logo {
 392   -webkit-mask-image: url(images/google_logo.png@2x);
 393 }
 394
 395 /* http://crbug.com/359682 */
 396 #spinner-container #spinner {
 397   -webkit-animation-duration: 1.0s;
 398 }
 399
 400 .media-button.play > .state0.active,
 401 .media-button[state='0'] > .state0.normal /* blah */, /* blee */
 402 .media-button[state='0']:not(.disabled):hover > .state0.hover {
 403   -webkit-animation: anim 0s;
 404   -webkit-animation-duration: anim 0ms;
 405   -webkit-transform: scale(0%);
 406   background-position-x: 0em;
 407   background-position-y: 0ex;
 408   border-width: 0em;
 409   color: hsl(0, 0%, 85%); /* Shouldn't trigger error. */
 410   opacity: .0;
 411   opacity: 0.0;
 412   opacity: 0.;
 413 }
 414
 415 @page {
 416   border-width: 0mm;
 417   height: 0cm;
 418   width: 0in;
 419 }""", """
 420 - Use "0" for zero-width lengths (i.e. 0px -> 0)
 421     width: 0px;
 422     -webkit-transform: scale(0%);
 423     background-position-x: 0em;
 424     background-position-y: 0ex;
 425     border-width: 0em;
 426     opacity: .0;
 427     opacity: 0.0;
 428     opacity: 0.;
 429     border-width: 0mm;
 430     height: 0cm;
 431     width: 0in;
 432 """)
 433
 434
 435 if __name__ == '__main__':
 436   unittest.main()