Automated CSS Testing: Not just a myth

7dd731d0c97e334d726f740a710904a9?s=47 Jakob Mattsson
September 10, 2013

Automated CSS Testing: Not just a myth

Presented at MMWCON 2013, UCLA, Los Angeles

7dd731d0c97e334d726f740a710904a9?s=128

Jakob Mattsson

September 10, 2013
Tweet

Transcript

  1. 4.
  2. 5.
  3. 6.
  4. 7.
  5. 8.
  6. 15.

    Declarative programming is a programming paradigm that expresses the logic

    of a computation without describing its control flow.” “
  7. 17.
  8. 18.
  9. 19.
  10. 21.
  11. 23.
  12. 24.
  13. 27.

    New styles are added instead of reuse Unused styles are

    not removed No overview of how different styles interact
  14. 28.

    New styles are added instead of reuse Unused styles are

    not removed No overview of how different styles interact Form factors, adaptiveness, responsiveness
  15. 29.

    New styles are added instead of reuse Unused styles are

    not removed No overview of how different styles interact Form factors, adaptiveness, responsiveness The true ”write-only” language
  16. 30.

    In computer humor, a write-only language is a programming language

    with syntax (or semantics) sufficiently dense and bizarre that any routine of significant size is too difficult to understand by other programmers and cannot be safely edited.” “
  17. 34.
  18. 36.
  19. 37.
  20. 41.
  21. 42.

    1

  22. 43.

    Syntax Checks Checking that the code is actually valid CSS

    Typically performed by an editor, IDE or plugin
  23. 44.

    2

  24. 45.

    Styleguides & linting Forces best-practices to be followed Syntactically (where

    to put braces) Semantically (catching common mistakes)
  25. 46.
  26. 47.

    Useless without good rules + - Prevents anti-patterns Easy to

    apply Doesn’t test the end result - - +
  27. 48.

    3

  28. 50.
  29. 51.

    Lots of false positives + - No change can sneak

    by Implementation agnostic Breaks on content changes - - +
  30. 52.

    4

  31. 53.

    Comparing styles in the DOM Sniff the DOM for all

    relevant styles Compare them to some expectation
  32. 54.
  33. 56.

    Style rules != looks + - Resilient to changes Tests

    live on Writing expectations in code - - +
  34. 57.
  35. 58.
  36. 59.
  37. 62.
  38. 63.

    My suggestion: 1. Create the design you want 2. Ensure

    consistency and compatibility 3. Eliminate redundancy
  39. 64.

    My suggestion: 1. Create the design you want 2. Ensure

    consistency and compatibility 3. Eliminate redundancy
  40. 65.

    My suggestion: 1. Create the design you want 2. Ensure

    consistency and compatibility 3. Eliminate redundancy
  41. 66.

    My suggestion: 1. Create the design you want 2. Ensure

    consistency and compatibility 3. Eliminate redundancy
  42. 67.
  43. 68.
  44. 69.
  45. 70.
  46. 71.
  47. 72.

    ul:last-child { color: red; } Won’t work in IE8. Will

    be caught when test runs there. #footer { width: calc(100% - 3em); } Won’t work on Android or Safari < 6 Unsupported CSS-style used
  48. 73.

    CSS-inconsistency across browsers <html> <head> <style type="text/css"> h1, h2, h3,

    h4, h5, h6, a { display: block; } ul { list-style-position: inside; } </style> </head> <body> <ul> <li> <h3>Foobar</h3> </li> <ul> </body> </html> Chrome Firefox
  49. 74.

    <html> <head> <style type="text/css"> body { margin:0; padding:0; } div

    { margin:0; padding:10; } </style> </head> <body> <div>Foobar</div> </body> </html> <html> <head> <style type="text/css"> body { margin:10; padding:0; } div { margin:0; padding:0; } </style> </head> <body> <div>Foobar</div> </body> </html> Detecting equivalent styles This change does not trigger an error; the rendered result is the same, even though styles differ.
  50. 75.
  51. 76.
  52. 77.
  53. 79.

    Automated CSS Testing Not Just a Myth @jakobmattsson • jakob@leanmachine.se

    github.com/leanmachine/testbit bit.ly/jakob-mmwcon + -