mixed-test.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>IEPP Test Suite</title>
  6. <link rel="stylesheet" href="data/inline-mixed-media.css">
  7. <link rel="stylesheet" href="data/inline-print-media.css">
  8. <link rel="stylesheet" href="data/print.css" media="print">
  9. <link rel="stylesheet" href="data/screen.css" media="screen, projection">
  10. <link rel="stylesheet" href="data/print-styles.css" media="print">
  11. <style>
  12. body {
  13. background: url(data/body-crash.jpg) no-repeat;
  14. }
  15. </style>
  16. <style>
  17. form {
  18. margin: 0;
  19. }
  20. article#inline-print {
  21. border: 5px solid #000;
  22. }
  23. section div article {
  24. border: 5px solid #000;
  25. }
  26. section[data-article="article"] {
  27. border: 5px solid #000;
  28. }
  29. </style>
  30. <style media="print">
  31. article#inline-print {
  32. border: 5px dotted #000;
  33. }
  34. section div article {
  35. border: 5px dotted #000;
  36. }
  37. section[data-article="article"] {
  38. border: 5px dotted #000;
  39. }
  40. p+article {
  41. text-decoration: underline;
  42. }
  43. </style>
  44. <script src="../src/html5shiv-printshiv.js"></script>
  45. <script src="//use.typekit.com/fbz1vwc.js"></script>
  46. <script>
  47. Typekit.load();
  48. </script>
  49. </head>
  50. <body id="print-body-id" class="print-body-class">
  51. <h1>
  52. Print Me in IE!
  53. </h1>
  54. <p>You should see dotted broders in print.</p>
  55. <article class="inline-mixed-media">
  56. <p>
  57. 1. This text should be underlined in IE7+.
  58. </p>
  59. </article>
  60. <article class="inline-print-media">
  61. <form action="/test/ test">
  62. <div class="inside-of-form">2. inside print</div>
  63. </form>
  64. </article>
  65. <article class="print">
  66. <p>
  67. 3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam non
  68. </p>
  69. </article>
  70. <div class="print-styles">
  71. <article>
  72. <p>
  73. 4. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam non
  74. </p>
  75. </article>
  76. </div>
  77. <article class="print-styles-print">
  78. <p>
  79. 5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam non
  80. </p>
  81. </article>
  82. <section>
  83. <div data-article="article">
  84. <article>
  85. <p>
  86. 6. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam non
  87. </p>
  88. <section data-article="article">
  89. <p>
  90. 7. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam non
  91. </p>
  92. </section>
  93. </article>
  94. </div>
  95. </section>
  96. </body>
  97. </html>