Home Verkennen Help
Inloggen
khronosschoty
/
palemoon-dev
Volgen 2
Ster 1
Vork 0
Bestanden Kwesties 0 Pull-aanvragen 0 Wiki
Aftakking: master
Aftakkingen Labels
palemoon-dev
/
platform
/
layout
/
reftests
/
table-background
/
border-separate-table-ref.html

border-separate-table-ref.html 1.5 KB
Permalink Geschiedenis Ruwe

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2. 

  2. 	"http://www.w3.org/TR/html4/strict.dtd">
    3. 

  3. <html lang="en-US">
    4. 

  4. <head>
    5. 

  5. 	<title>Table background tests</title>
    6. 

  6. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. 

  7. 	<meta http-equiv="Content-Style-Type" content="text/css">
    8. 

  8. 	<style type="text/css">
    9. 

  9. 

  10. 	html, body { margin: 0; padding: 0; border: 0; font-size: 16px; }
    11. 

  11. 	body { padding: 15px; }
    12. 

  12. 

  13. 	/*
    14. 

  14. 	table { 
    15. 

  15. 		margin: 0px 3px 2px 4px;
    16. 

  16. 		border-width: 4px 2px 7px 3px;
    17. 

  17. 

  18. 		border-box height is 145px:
    19. 

  19. 		  border-top: 4px;
    20. 

  20. 		  padding-top: 3px
    21. 

  21. 		  border-spacing: 3px * 6 == 18px
    22. 

  22. 		  cell * 5: == 21px * 5 == 105px
    23. 

  23. 		    border-top: 2px;
    24. 

  24. 		    padding-top: 1px;
    25. 

  25. 		    height: 10px;
    26. 

  26. 		    padding-bottom: 4px;
    27. 

  27. 		    border-bottom: 4px;
    28. 

  28. 		  padding-bottom: 8px;
    29. 

  29. 		  border-bottom: 7px;
    30. 

  30. 

  31. 		border-box width is 325px:
    32. 

  32. 		  border-left: 3px;
    33. 

  33. 		  padding-left: 6px
    34. 

  34. 		  border-spacing: 2px * 6 == 12px
    35. 

  35. 		  cell * 5: == 59px * 5 == 295px
    36. 

  36. 		    border-left: 3px;
    37. 

  37. 		    padding-left: 3px;
    38. 

  38. 		    width: 50px;
    39. 

  39. 		    padding-right: 2px;
    40. 

  40. 		    border-right: 1px;
    41. 

  41. 		  padding-right: 7px;
    42. 

  42. 		  border-right: 2px;
    43. 

  43.     */
    44. 

  44. 

  45. 	div { width: 325px; height: 145px; margin: 0px 3px 2px 4px; }
    46. 

  46. 	div.color { background-color: aqua; }
    47. 

  47. 

  48. 	div.imagetl, div.imagebr {
    49. 

  49. 		background-image: url(repeatable-diagonal-gradient-with-ticks.png);
    50. 

  50. 	}
    51. 

  51. 

  52. 	div.imagetl { background-position: 3px 4px; }
    53. 

  53. 	div.imagebr { background-position: 323px 138px; }
    54. 

  54. 

  55. 	</style>
    56. 

  56. </head>
    57. 

  57. <body>
    58. 

  58. 

  59. <div class="color"></div>
    60. 

  60. <div class="imagetl"></div>
    61. 

  61. <div class="imagebr"></div>
    62. 

  62. 

  63. </body>
    64. 

  64. </html>
    65. 

  65.