1. How to File a Good Bug Report

    Going from It's Broken to Fix It!

    Elika J. Etemad (fantasai) Mozilla Project W3C CSS Working Group
  2. Benefits of Being Layout QA

  3. Bug Tracking

    Mozilla/Gecko
    https://bugzilla.mozilla.org/
    Webkit
    https://bugs.webkit.org/
    Opera
    https://bugs.opera.com/wizard/
    Internet Explorer
    http://connect.microsoft.com/IE
  4. Useful Bug Reports

    Useful bug reports are ones that get bugs fixed. A useful bug report is...

    Reproducible
    If an engineer can't see it or conclusively prove that it exists, the engineer will probably stamp it "WORKSFORME" or "INVALID", and move on to the next bug.
    Specific
    The quicker the engineer can trace down the issue to a specific problem, the more likely it'll be fixed expediently.
  5. Useful Bug Reports

    Goal:

    Your job
    Figure out exactly what the problem is.
    Developer's job
    Figure out exactly how to fix the problem.
  6. Bug Reporting General Guidelines

  7. Writing a Good Bug Report

  8. Writing a Good Bug Report: Summary

    Summary

  9. Goal
    Make the report searchable and uniquely identifiable
  10. Bad
    "Drag Crash"
  11. Good
    "Drag-selecting any page crashes Mac builds in NSGetFactory"
  12. Writing a Good Bug Report: Overview

    Overview/Description

  13. Goal
    Explain the bug to the developer.
  14. Include
    • Abstracted summary of behavior
      (e.g. interpretation of test failures)
    • Justification for why this is a bug
    • Any relevant spec links
    • Interpretation of the spec
    • Info on other implementations
  15. Writing a Good Bug Report: Steps

    Steps to Reproduce

  16. Goal
    Teach the developer to recreate the bug on his system
  17. Simple Cases
    1. Load the attached testcase in Browser XYZ
  18. Complex Cases
    1. Load the attached testcase in Browser XYZ
    2. Scroll to the bottom of the page
    3. Click the link
    4. Press tab to navigate links
  19. Writing a Good Bug Report: Results

    Actual/Expected Results

  20. Goal
    Show the developer what's wrong
  21. Actual Results
    Describe what actually happened
  22. Expected Results
    Describe what should have happened
  23. Writing a Good Bug Report: Testcase

    Reduced Testcase

  24. Goal
    Pinpoint the bug
  25. Reducing Testcases
    Rip out everything in the page that isn't required to reproduce the bug.
  26. Variant Testcases
    Try variations on the testcase to find related situations that also trigger the bug.
  27. Attach all files
    Web pages might change or disappear. Attachments do not.
  28. Writing a Good Bug Report: Environment

    Build & Platform

  29. Writing a Good Bug Report: Extras

    Additional Information

  30. Writing a Good Bug Report: Sample Report (Basic)

    Mozilla Bug #43220:

    Overview:
    
      !important style rules in the author stylesheet override !important style
      rules in the user stylesheet ([profile]/chrome/user.css); a direct
      contradiction of the CSS spec (CSS2:6.4)
    
    Steps to Reproduce:
      
       1.) Copy 'Sample user.css' to the 'chrome' subdirectory in your profile
           directory for Mozilla. Rename it to 'user.css'.
       2.) View 'Testcase' in Mozilla.
      
       * Both to be attached shortly
    
    Tested with build id=2000061720 on Windows 2000
    
  31. Writing a Good Bug Report: Sample Report (Advanced)

    Mozilla Bug #46480: rather than merely stating what about the test results are wrong, this report includes an analysis of the test results, variations off the original broken rendering, and an explanation of where things are really going wrong.

    Summary:
      (Quirks) Color not initializing to 'inherit' within tables
    
    Overview:
    
      In Quirks mode, the 'color' property is not inherited into <tbody>, 
      <tr>, or <td> unless "color: inherit" is explicitly specified. 
      Apparently, this is done to simulate Navigator 4.x, which does not 
      inherit color through tables. Although the quirk that blocks color 
      inheritance from the container into the table may be necessary, I don't 
      think that inheritance should be blocked in any part of the chain 
      linking <table>, <tbody>, <tr>, and <td>. Applying a color style to any
      of these elements has no effect in Navigator, so I don't think any sites 
      will depend on it not working; there's no point in specifying a color in 
      the first place. However, MSIE 5 supports intra-table color inheritance
      (I haven't tested IE4), and I'm sure sites take advantage of that.
    
    Steps to Reproduce:
    
      Open up testcase (to be attached shortly) in Mozilla.
    
    Actual Results:
    
      Color only inherits if /every single element/ between the assigned color 
      property and the table cell has 'style="color: inherit"'. This includes 
      <tbody>, whether it physically appears or not.
    
    Expected Results:
    
      Color should inherit properly through the table tags.
    
    Tested on Mozilla nightly build (id: 2000071810) on Windows 2000
    
    Additional Information:
    
      Bug detected by Matt P <mpetrick@verida.com> on July 26th build.
  32. Triage

    Improving existing bug reports:

  33. Acknowledgements