style_test.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  1. <!DOCTYPE html>
  2. <!--
  3. When changing this, make sure that style_quirks_test.html is kept in sync.
  4. -->
  5. <html>
  6. <!--
  7. Copyright 2006 The Closure Library Authors. All Rights Reserved.
  8. Use of this source code is governed by the Apache License, Version 2.0.
  9. See the COPYING file for details.
  10. -->
  11. <head>
  12. <meta charset="utf-8">
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14. <meta name="viewport" content="width=device-width, initial-scale=1.0,
  15. maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  16. <title>Closure Unit Tests - goog.dom.style</title>
  17. <script src="../base.js"></script>
  18. <script>goog.require('goog.userAgent');</script>
  19. <style>
  20. i {
  21. font-family: Times, sans-serif;
  22. font-size: 5em;
  23. }
  24. #testEl5 {
  25. display: none;
  26. }
  27. #styleTest1 {
  28. width: 120px;
  29. text-decoration: underline;
  30. }
  31. #bgcolorTest0 {
  32. background-color: #f00;
  33. }
  34. #bgcolorTest1 {
  35. background-color: #ff0000;
  36. }
  37. #bgcolorTest2 {
  38. background-color: rgb(255, 0, 0);
  39. }
  40. #bgcolorTest3 {
  41. background-color: rgb(100%, 0%, 0%);
  42. }
  43. #bgcolorTest5 {
  44. background-color: lightblue;
  45. }
  46. #bgcolorTest6 {
  47. background-color: inherit;
  48. }
  49. #bgcolorTest7 {
  50. background-color: transparent;
  51. }
  52. .rtl {
  53. direction: rtl;
  54. }
  55. .ltr {
  56. direction: ltr;
  57. }
  58. #pos-scroll-abs {
  59. position: absolute;
  60. top: 200px;
  61. left: 100px;
  62. }
  63. #pos-scroll-abs-1 {
  64. overflow: scroll;
  65. width: 100px;
  66. height: 100px;
  67. }
  68. #pos-scroll-abs-2 {
  69. position: absolute;
  70. top: 100px;
  71. left: 100px;
  72. width: 500px;
  73. background-color: pink;
  74. }
  75. #abs-upper-left {
  76. position: absolute;
  77. top: 0px;
  78. left: 0px;
  79. }
  80. #no-text-font-styles {
  81. font-family: "Helvetica", Times, serif;
  82. font-size: 30px;
  83. }
  84. .century {
  85. font-family: "Comic Sans MS", "Century Schoolbook L", serif;
  86. }
  87. #size-a,
  88. #size-e {
  89. width: 100px;
  90. height: 100px;
  91. background: red;
  92. padding: 0;
  93. border-style: solid;
  94. border-color: black;
  95. border-width: 0;
  96. }
  97. #size-b {
  98. width: 100px;
  99. height: 100px;
  100. background: red;
  101. border: 10px solid black;
  102. }
  103. #size-c {
  104. width: 100px;
  105. height: 100px;
  106. background: red;
  107. border: 10px solid black;
  108. padding: 10px;
  109. overflow: auto;
  110. }
  111. #size-d {
  112. width: 10em;
  113. height: 2cm;
  114. background: red;
  115. border: thick solid black;
  116. padding: 2mm;
  117. }
  118. #size-f {
  119. border-width: 0;
  120. margin: 0;
  121. padding: 0;
  122. }
  123. #css-position-absolute {
  124. position: absolute;
  125. }
  126. #css-overflow-hidden {
  127. overflow: hidden;
  128. }
  129. #css-z-index-200 {
  130. position:relative;
  131. z-index: 200;
  132. }
  133. #css-text-align-center {
  134. text-align: center;
  135. }
  136. #css-cursor-pointer {
  137. cursor: pointer;
  138. }
  139. #test-opacity {
  140. opacity: 0.5;
  141. -moz-opacity: 0.5;
  142. filter: alpha(opacity=50);
  143. }
  144. #test-frame-offset {
  145. display: block;
  146. position: absolute;
  147. top: 50px;
  148. left: 50px;
  149. width: 50px;
  150. height: 50px;
  151. }
  152. #test-visible {
  153. background: yellow;
  154. position: absolute;
  155. overflow: hidden;
  156. }
  157. #test-visible2 {
  158. background: #ebebeb;
  159. position: absolute;
  160. overflow: hidden;
  161. }
  162. .scrollable-container {
  163. border: 8px solid blue;
  164. padding: 16px;
  165. margin: 32px;
  166. width: 100px;
  167. height: 100px;
  168. overflow: auto;
  169. position: absolute;
  170. left: 400px;
  171. top: 0;
  172. }
  173. .scrollable-container-item {
  174. margin: 1px;
  175. border: 2px solid gray;
  176. padding: 4px;
  177. width: auto;
  178. height: 20px;
  179. }
  180. .svg-container {
  181. width: 150px;
  182. height: 150px;
  183. overflow-x: hidden;
  184. overflow-y: auto;
  185. }
  186. #translation {
  187. position: absolute;
  188. z-index: 10;
  189. left: 10px;
  190. top: 10px;
  191. width: 10px;
  192. height: 10px;
  193. background-color: blue;
  194. -webkit-transform: translate(20px, 30px);
  195. -ms-transform: translate(20px, 30px);
  196. -o-transform: translate(20px, 30px);
  197. -moz-transform: translate(20px, 30px);
  198. transform: translate(20px, 30px);
  199. }
  200. </style>
  201. </head>
  202. <body>
  203. <div id="testEl">
  204. <span>Test Element</span>
  205. </div>
  206. <div id="testEl5">
  207. <span>Test Element 5</span>
  208. </div>
  209. <table id="table1">
  210. <tr>
  211. <td id="td1">td1</td>
  212. </tr>
  213. </table>
  214. <span id="span0">span0</span>
  215. <ul>
  216. <li id="li1">li1</li>
  217. </ul>
  218. <span id="span1" class="test1"></span>
  219. <span id="span2" class="test1"></span>
  220. <span id="span3" class="test2"></span>
  221. <span id="span4" class="test3"></span>
  222. <span id="span5" class="test1"></span>
  223. <span id="span6" class="test1"></span>
  224. <p id="p1"></p>
  225. <div id="styleTest1"></div>
  226. <div id="styleTest2" style="width:100px;text-decoration:underline"></div>
  227. <div id="styleTest3"></div>
  228. <!-- Paragraph to test element child and sibling -->
  229. <p id="p2">
  230. <!-- Comment -->
  231. a
  232. <b id="b1">c</b>
  233. d
  234. <!-- Comment -->
  235. e
  236. <b id="b2">f</b>
  237. g
  238. <!-- Comment -->
  239. </p>
  240. <p style="background-color: #eee">
  241. <span id="bgcolorTest0">1</span>
  242. <span id="bgcolorTest1">1</span>
  243. <span id="bgcolorTest2">2</span>
  244. <span id="bgcolorTest3">3</span>
  245. <span id="bgcolorTest4" style="background-color:#ff0000">4</span>
  246. <span id="bgcolorTest5">5</span>
  247. <span id="bgcolorTest6">6</span>
  248. <span id="bgcolorTest7">7</span>
  249. <span id="bgcolorDest">Dest</span>
  250. <span id="installTest0">Styled 0</span>
  251. <span id="installTest1">Styled 1</span>
  252. </p>
  253. <div class='rtl-test' dir='ltr' id='rtl1'>
  254. <div dir='rtl' id='rtl2'>right to left</div>
  255. <div dir='ltr' id='rtl3'>left to right</div>
  256. <div id='rtl4'>left to right (inherited)</div>
  257. <div id='rtl5' style="direction: rtl">right to left (style)</div>
  258. <div id='rtl6' style="direction: ltr">left to right (style)</div>
  259. <div id='rtl7' class=rtl>right to left (css)</div>
  260. <div id='rtl8' class=ltr>left to right (css)</div>
  261. <div class=rtl>
  262. <div id='rtl9'>right to left (css)</div>
  263. </div>
  264. <div class=ltr>
  265. <div id='rtl10'>left to right (css)</div>
  266. </div>
  267. </div>
  268. <div id="unselectable-gecko" style="-moz-user-select:none">no-select</div>
  269. <div id="unselectable-webkit" style="-webkit-user-select:none">no-select</div>
  270. <div id="unselectable-ie" unselectable="on">no-select</div>
  271. <div id="make-unselectable">
  272. <p>Can't touch this <aside>(Oh-oh oh oh-oh)</aside></p>
  273. <div><em>Stop.</em> Hammer <math><mo>×</mo></math></div>
  274. </div>
  275. <div id="pos-scroll-abs">
  276. <p>Some text some text some text some text some text some text some text
  277. some text some text some text. Some text some text some text some text some
  278. text some text some text some text some text some text. Some text some text
  279. some text some text some text some text some text some text some text some
  280. text. Some text some text some text some text some text some text some text
  281. some text some text some text.
  282. <p>Some text some text some text some text some text some text some text
  283. some text some text some text. Some text some text some text some text some
  284. text some text some text some text some text some text. Some text some text
  285. some text some text some text some text some text some text some text some
  286. text. Some text some text some text some text some text some text some text
  287. some text some text some text.
  288. <div id="pos-scroll-abs-1">
  289. <p>Some text some text some text some text some text some text some text
  290. some text some text some text. Some text some text some text some text
  291. some text some text some text some text some text some text. Some text
  292. some text some text some text some text some text some text some text some
  293. text some text. Some text some text some text some text some text some
  294. text some text some text some text some text.
  295. <p>Some text some text some text some text some text some text some text
  296. some text some text some text. Some text some text some text some text
  297. some text some text some text some text some text some text. Some text
  298. some text some text some text some text some text some text some text some
  299. text some text. Some text some text some text some text some text some
  300. text some text some text some text some text.
  301. <div id="pos-scroll-abs-2">
  302. <p>Some text some text some text some text some text some text some text
  303. some text some text some text. Some text some text some text some text
  304. some text some text some text some text some text some text. Some text
  305. some text some text some text some text some text some text some text
  306. some text some text. Some text some text some text some text some text
  307. some text some text some text some text some text.
  308. </div>
  309. </div>
  310. </div>
  311. <div id="abs-upper-left">
  312. foo
  313. </div>
  314. <div id="no-text-font-styles">
  315. <font size="+1" face="Times,serif" id="font-tag">Times</font>
  316. <pre id="pre-font">pre text</pre>
  317. <span style="font:inherit" id="inherit-font">inherited</span>
  318. <span style="font-family:Times,sans-serif; font-size:3in"
  319. id="times-font-family">Times</span>
  320. <b id="bold-font">Bolded</b>
  321. <i id="css-html-tag-redefinition">Times</i>
  322. <span id="small-text" class="century" style="font-size:small">eensy</span>
  323. <span id="x-small-text" style="font-size:x-small">weensy</span>
  324. <span style="font:50% badFont" id="font-style-badfont">
  325. badFont
  326. <span style="font:inherit" id="inherit-50pct-font">
  327. same size as badFont
  328. </span>
  329. </span>
  330. <span id="icon-font" style="font:icon">Icon Font</span>
  331. </div>
  332. <span id="no-font-style">plain</span>
  333. <span style="font-family:Arial" id="nested-font">Arial<span style="font-family:Times">Times nested inside Arial</span></span>
  334. <img id="img-font-test" src=""/>
  335. <span style="font-size:25px">
  336. <span style="font-size:12.5px" id="font-size-12-point-5-px">12.5PX</span>
  337. <span style="font-size:0.5em" id="font-size-50-pct-of-25-px">12.5PX</span>
  338. </span>
  339. <div id="size-a"></div>
  340. <div id="size-b"></div>
  341. <div id="size-c">xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxxxxxxxxx
  342. xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
  343. xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
  344. xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
  345. xxxxxxxxxxxxxxxx</div>
  346. <div id="size-d">xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxxxxxxxxx
  347. xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
  348. xxxxxxxx x</div>
  349. <div id="size-e"></div>
  350. <div id="size-f">hello</div>
  351. <div style="font-size: 1px">
  352. <div style="font-size: 2em"><span id="em-font-size"></span></div>
  353. </div>
  354. <div id="no-float"></div>
  355. <div id="float-none" style="float:none"></div>
  356. <div id="float-left" style="float:left"></div>
  357. <div id="float-test"></div>
  358. <div id="position-unset"></div>
  359. <div id="style-position-relative" style="position:relative"></div>
  360. <div id="style-position-fixed" style="position:fixed"></div>
  361. <div id="css-position-absolute"></div>
  362. <div id="box-sizing-unset"></div>
  363. <div id="box-sizing-border-box" style="box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div>
  364. <div id="style-overflow-scroll" style="overflow:scroll"></div>
  365. <div id="css-overflow-hidden"></div>
  366. <!-- Getting the computed z-index of an unpositioned element is unspecified. -->
  367. <div id="style-z-index-200" style="position:relative;z-index:200"></div>
  368. <div id="css-z-index-200"></div>
  369. <div id="style-text-align-right" style="text-align:right">
  370. <div id="style-text-align-right-inner">foo</div>
  371. </div>
  372. <div id="css-text-align-center"></div>
  373. <div id="style-cursor-move" style="cursor:move">
  374. <span id="style-cursor-move-inner">foo</span>
  375. </div>
  376. <div id="css-cursor-pointer"></div>
  377. <div id="height-test" style="display:inline-block;position:relative">
  378. <div id="height-test-inner" style="display:inline-block">
  379. foo
  380. </div>
  381. </div>
  382. <div id="test-opacity"></div>
  383. <iframe id="test-frame-offset"></iframe>
  384. <iframe id="test-translate-frame-standard" src="style_test_standard.html"
  385. style="overflow:auto;position:absolute;left:100px;top:150px;width:200px;height:200px;border:0px;">
  386. </iframe>
  387. <iframe id="test-translate-frame-quirk" src="style_test_quirk.html"
  388. style="overflow:auto;position:absolute;left:100px;top:350px;width:200px;height:200px;border:0px;margin:0px;">
  389. </iframe>
  390. <iframe
  391. id="test-visible-frame"
  392. src="style_test_iframe_standard.html"
  393. style="width: 200px; height: 200px; border: 0px;">
  394. </iframe>
  395. <div id="test-scrollbarwidth" style="background-color: orange; width: 100px; height: 100px; overflow: auto;">
  396. <div style='width: 200px; height: 200px; background-color: red'>Test Scroll bar width with scroll</div>
  397. </div>
  398. <div id="scrollable-container" class="scrollable-container">
  399. <!--
  400. Workaround for overlapping top padding of the container and top margin of
  401. the first item in Internet Explorer 6 and 7.
  402. See http://www.quirksmode.org/bugreports/archives/2005/01/IE_nested_boxes_padding_topmargin_top.html#c11285
  403. -->
  404. <div style="height: 0"><!-- --></div>
  405. <div id="item1" class="scrollable-container-item">1</div>
  406. <div id="item2" class="scrollable-container-item">2</div>
  407. <div id="item3" class="scrollable-container-item">3</div>
  408. <div id="item4" class="scrollable-container-item">4</div>
  409. <div id="item5" class="scrollable-container-item">5</div>
  410. <div id="item6" class="scrollable-container-item">6</div>
  411. <div id="item7" class="scrollable-container-item">7</div>
  412. <div id="item8" class="scrollable-container-item">8</div>
  413. </div>
  414. <div id="test-visible">
  415. Test-visible
  416. <div id="test-visible-el" style="height:200px;">Test-visible</div>
  417. Test-visible
  418. </div>
  419. <div id="test-visible2"></div>
  420. <div id="msFilter" style="-ms-filter:'alpha(opacity=0)'">
  421. A div</div>
  422. <div id="filter" style="filter:alpha(opacity=0)">
  423. Another div</div>
  424. <div id="offset-parent" style="position:relative">
  425. <div id="offset-child">child</div>
  426. </div>
  427. <div id="offset-parent-overflow"
  428. style="overflow: scroll; width: 50px; height: 50px;">
  429. <a id="offset-child-overflow">
  430. scrollscrollscrollscrollscrollscrollscrollscroll
  431. </a>
  432. </div>
  433. <div id="test-viewport"></div>
  434. <div id="translation"></div>
  435. <div id="rotated"></div>
  436. <div id="scaled"></div>
  437. <div id="svg-container" class="svg-container">
  438. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full"
  439. width="100" height="400" viewBox="0 0 100 400">
  440. <rect id="svg-item1" width="100" height="100" x="0" y="0" fill="red"/>
  441. <rect id="svg-item2" width="100" height="100" x="0" y="100" fill="blue"/>
  442. <rect id="svg-item3" width="100" height="100" x="0" y="200" fill="red"/>
  443. </svg>
  444. </div>
  445. <script>
  446. if (!goog.userAgent.IE || goog.userAgent.isDocumentModeOrHigher(9)) {
  447. document.write(
  448. '<iframe id="svg-frame" src="style_test_rect.svg"></' + 'iframe>');
  449. }
  450. goog.require('goog.style_test');
  451. </script>
  452. </body>
  453. </html>