style_test.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <html>
  2. <!--
  3. Copyright 2010 The Closure Library Authors. All Rights Reserved.
  4. Use of this source code is governed by the Apache License, Version 2.0.
  5. See the COPYING file for details.
  6. -->
  7. <head>
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. <meta charset="UTF-8" />
  10. <script src="../../base.js">
  11. </script>
  12. <script>
  13. goog.require('goog.cssom.iframe.styleTest');
  14. </script>
  15. <style type="text/css">
  16. @import url("style_test_import.css");
  17. body { font-family: Verdana; }
  18. div { background-color: #ffc; margin: 10px 0; }
  19. p { margin: 10px 0; }
  20. .boxy { padding: 5px; background-color: #fa0; }
  21. .special .boxy { padding: 10px; background-color: #abef00; }
  22. div div strong { color: red; }
  23. div { line-height: 1.3; }
  24. .wrapper .inner-wrapper { border: 2px solid pink;}
  25. a { color: red; }
  26. #source4 { background-color: #900; }
  27. #backgroundTest-ancestor-1 {
  28. background-color: rgb(128,0,128);
  29. }
  30. #backgroundTest-ancestor-0 {
  31. background-image: url("../../images/blank.gif");
  32. background-position: 40px 70px;
  33. background-repeat: repeat;
  34. background-color: transparent;
  35. padding: 5px 8px;
  36. }
  37. div#backgroundTest-parent {
  38. border: 1px solid black;
  39. background-color: transparent;
  40. }
  41. div#backgroundTest {
  42. position: relative;
  43. background-color: transparent;
  44. height: 100px;
  45. margin-top: 0;
  46. }
  47. </style>
  48. <style type="text/css">
  49. .goog-presently-theme-monochrome {
  50. background-color: black;
  51. color: #CCC;
  52. }
  53. .goog-presently-theme-monochrome a {
  54. color: #FFF;
  55. }
  56. .goog-presently-theme-monochrome p#source4 {
  57. font-variant: small-caps;
  58. }
  59. .italic {
  60. font-style: italic;
  61. }
  62. </style>
  63. <style type="text/css">
  64. @font-face {
  65. font-family: Cavalier;
  66. }
  67. #cavalier {
  68. font-family: Cavalier;
  69. }
  70. </style>
  71. </head>
  72. <body>
  73. <div class="wrapper">
  74. <div class="inner-wrapper">
  75. <div id="source1" class="italic">
  76. hello world
  77. </div>
  78. <div id="source2">
  79. <div>
  80. Some
  81. <strong>
  82. strong
  83. </strong>
  84. text
  85. </div>
  86. <div class="boxy exciting">
  87. A box
  88. </div>
  89. <div class="inner-wrapper">
  90. A wrapper
  91. </div>
  92. </div>
  93. <div id="source3" class="special">
  94. Some
  95. <strong>
  96. strong
  97. </strong>
  98. text
  99. <div class="boxy">
  100. A box
  101. </div>
  102. </div>
  103. <div id="ancestor" class="goog-presently-theme-monochrome">
  104. <p id="source4" style="background-color: #900">
  105. Here's a link:
  106. <a href="#">
  107. my link
  108. </a>
  109. </p>
  110. </div>
  111. <div id="backgroundTest-ancestor-1">
  112. <div id="backgroundTest-ancestor-0">
  113. <div id="backgroundTest-parent">
  114. <div id="backgroundTest">
  115. hello
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <div id="cavalier">
  121. </div>
  122. </div>
  123. </div>
  124. <br>
  125. </body>
  126. </html>