Andreas Hocevar
527 lines
13 KiB
HTML
527 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
|
|
When changing this, make sure that style_quirks_test.html is kept in sync.
|
|
|
|
-->
|
|
<html>
|
|
<!--
|
|
Copyright 2006 The Closure Library Authors. All Rights Reserved.
|
|
|
|
Use of this source code is governed by the Apache License, Version 2.0.
|
|
See the COPYING file for details.
|
|
-->
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0,
|
|
maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
|
|
<title>Closure Unit Tests - goog.dom.style</title>
|
|
<script src="../base.js"></script>
|
|
<script>goog.require('goog.userAgent');</script>
|
|
<style>
|
|
|
|
i {
|
|
font-family: Times, sans-serif;
|
|
font-size: 5em;
|
|
}
|
|
|
|
#testEl5 {
|
|
display: none;
|
|
}
|
|
|
|
#styleTest1 {
|
|
width: 120px;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#bgcolorTest0 {
|
|
background-color: #f00;
|
|
}
|
|
|
|
#bgcolorTest1 {
|
|
background-color: #ff0000;
|
|
}
|
|
|
|
#bgcolorTest2 {
|
|
background-color: rgb(255, 0, 0);
|
|
}
|
|
|
|
#bgcolorTest3 {
|
|
background-color: rgb(100%, 0%, 0%);
|
|
}
|
|
|
|
#bgcolorTest5 {
|
|
background-color: lightblue;
|
|
}
|
|
|
|
#bgcolorTest6 {
|
|
background-color: inherit;
|
|
}
|
|
|
|
#bgcolorTest7 {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.rtl {
|
|
direction: rtl;
|
|
}
|
|
|
|
.ltr {
|
|
direction: ltr;
|
|
}
|
|
|
|
#pos-scroll-abs {
|
|
position: absolute;
|
|
top: 200px;
|
|
left: 100px;
|
|
}
|
|
|
|
#pos-scroll-abs-1 {
|
|
overflow: scroll;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
#pos-scroll-abs-2 {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 100px;
|
|
width: 500px;
|
|
background-color: pink;
|
|
}
|
|
|
|
#abs-upper-left {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
#no-text-font-styles {
|
|
font-family: "Helvetica", Times, serif;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.century {
|
|
font-family: "Comic Sans MS", "Century Schoolbook L", serif;
|
|
}
|
|
|
|
#size-a,
|
|
#size-e {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: red;
|
|
padding: 0;
|
|
border-style: solid;
|
|
border-color: black;
|
|
border-width: 0;
|
|
}
|
|
|
|
#size-b {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: red;
|
|
border: 10px solid black;
|
|
}
|
|
|
|
#size-c {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: red;
|
|
border: 10px solid black;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
}
|
|
|
|
#size-d {
|
|
width: 10em;
|
|
height: 2cm;
|
|
background: red;
|
|
border: thick solid black;
|
|
padding: 2mm;
|
|
}
|
|
|
|
#size-f {
|
|
border-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#css-position-absolute {
|
|
position: absolute;
|
|
}
|
|
|
|
#css-overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#css-z-index-200 {
|
|
position:relative;
|
|
z-index: 200;
|
|
}
|
|
|
|
#css-text-align-center {
|
|
text-align: center;
|
|
}
|
|
|
|
#css-cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#test-opacity {
|
|
opacity: 0.5;
|
|
-moz-opacity: 0.5;
|
|
filter: alpha(opacity=50);
|
|
}
|
|
|
|
#test-frame-offset {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 50px;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
#test-visible {
|
|
background: yellow;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#test-visible2 {
|
|
background: #ebebeb;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scrollable-container {
|
|
border: 8px solid blue;
|
|
padding: 16px;
|
|
margin: 32px;
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: auto;
|
|
position: absolute;
|
|
left: 400px;
|
|
top: 0;
|
|
}
|
|
|
|
.scrollable-container-item {
|
|
margin: 1px;
|
|
border: 2px solid gray;
|
|
padding: 4px;
|
|
width: auto;
|
|
height: 20px;
|
|
}
|
|
|
|
#translation {
|
|
position: absolute;
|
|
z-index: 10;
|
|
left: 10px;
|
|
top: 10px;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: blue;
|
|
-webkit-transform: translate(20px, 30px);
|
|
-ms-transform: translate(20px, 30px);
|
|
-o-transform: translate(20px, 30px);
|
|
-moz-transform: translate(20px, 30px);
|
|
transform: translate(20px, 30px);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="testEl">
|
|
<span>Test Element</span>
|
|
</div>
|
|
|
|
<div id="testEl5">
|
|
<span>Test Element 5</span>
|
|
</div>
|
|
|
|
<table id="table1">
|
|
<tr>
|
|
<td id="td1">td1</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<span id="span0">span0</span>
|
|
|
|
<ul>
|
|
<li id="li1">li1</li>
|
|
</ul>
|
|
|
|
<span id="span1" class="test1"></span>
|
|
<span id="span2" class="test1"></span>
|
|
<span id="span3" class="test2"></span>
|
|
<span id="span4" class="test3"></span>
|
|
<span id="span5" class="test1"></span>
|
|
<span id="span6" class="test1"></span>
|
|
|
|
<p id="p1"></p>
|
|
|
|
<div id="styleTest1"></div>
|
|
<div id="styleTest2" style="width:100px;text-decoration:underline"></div>
|
|
<div id="styleTest3"></div>
|
|
|
|
<!-- Paragraph to test element child and sibling -->
|
|
<p id="p2">
|
|
<!-- Comment -->
|
|
a
|
|
<b id="b1">c</b>
|
|
d
|
|
<!-- Comment -->
|
|
e
|
|
<b id="b2">f</b>
|
|
g
|
|
<!-- Comment -->
|
|
</p>
|
|
|
|
<p style="background-color: #eee">
|
|
<span id="bgcolorTest0">1</span>
|
|
<span id="bgcolorTest1">1</span>
|
|
<span id="bgcolorTest2">2</span>
|
|
<span id="bgcolorTest3">3</span>
|
|
<span id="bgcolorTest4" style="background-color:#ff0000">4</span>
|
|
<span id="bgcolorTest5">5</span>
|
|
<span id="bgcolorTest6">6</span>
|
|
<span id="bgcolorTest7">7</span>
|
|
<span id="bgcolorDest">Dest</span>
|
|
<span id="installTest0">Styled 0</span>
|
|
<span id="installTest1">Styled 1</span>
|
|
</p>
|
|
|
|
<div class='rtl-test' dir='ltr' id='rtl1'>
|
|
<div dir='rtl' id='rtl2'>right to left</div>
|
|
<div dir='ltr' id='rtl3'>left to right</div>
|
|
<div id='rtl4'>left to right (inherited)</div>
|
|
<div id='rtl5' style="direction: rtl">right to left (style)</div>
|
|
<div id='rtl6' style="direction: ltr">left to right (style)</div>
|
|
<div id='rtl7' class=rtl>right to left (css)</div>
|
|
<div id='rtl8' class=ltr>left to right (css)</div>
|
|
<div class=rtl>
|
|
<div id='rtl9'>right to left (css)</div>
|
|
</div>
|
|
<div class=ltr>
|
|
<div id='rtl10'>left to right (css)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pos-scroll-abs">
|
|
|
|
<p>Some text some text some text some text some text some text some text
|
|
some text some text some text. Some text some text some text some text some
|
|
text some text some text some text some text some text. Some text some text
|
|
some text some text some text some text some text some text some text some
|
|
text. Some text some text some text some text some text some text some text
|
|
some text some text some text.
|
|
|
|
<p>Some text some text some text some text some text some text some text
|
|
some text some text some text. Some text some text some text some text some
|
|
text some text some text some text some text some text. Some text some text
|
|
some text some text some text some text some text some text some text some
|
|
text. Some text some text some text some text some text some text some text
|
|
some text some text some text.
|
|
|
|
<div id="pos-scroll-abs-1">
|
|
<p>Some text some text some text some text some text some text some text
|
|
some text some text some text. Some text some text some text some text
|
|
some text some text some text some text some text some text. Some text
|
|
some text some text some text some text some text some text some text some
|
|
text some text. Some text some text some text some text some text some
|
|
text some text some text some text some text.
|
|
|
|
<p>Some text some text some text some text some text some text some text
|
|
some text some text some text. Some text some text some text some text
|
|
some text some text some text some text some text some text. Some text
|
|
some text some text some text some text some text some text some text some
|
|
text some text. Some text some text some text some text some text some
|
|
text some text some text some text some text.
|
|
|
|
<div id="pos-scroll-abs-2">
|
|
|
|
<p>Some text some text some text some text some text some text some text
|
|
some text some text some text. Some text some text some text some text
|
|
some text some text some text some text some text some text. Some text
|
|
some text some text some text some text some text some text some text
|
|
some text some text. Some text some text some text some text some text
|
|
some text some text some text some text some text.
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="abs-upper-left">
|
|
foo
|
|
</div>
|
|
|
|
<div id="no-text-font-styles">
|
|
<font size="+1" face="Times,serif" id="font-tag">Times</font>
|
|
<pre id="pre-font">pre text</pre>
|
|
<span style="font:inherit" id="inherit-font">inherited</span>
|
|
<span style="font-family:Times,sans-serif; font-size:3in"
|
|
id="times-font-family">Times</span>
|
|
<b id="bold-font">Bolded</b>
|
|
<i id="css-html-tag-redefinition">Times</i>
|
|
<span id="small-text" class="century" style="font-size:small">eensy</span>
|
|
<span id="x-small-text" style="font-size:x-small">weensy</span>
|
|
<span style="font:50% badFont" id="font-style-badfont">
|
|
badFont
|
|
<span style="font:inherit" id="inherit-50pct-font">
|
|
same size as badFont
|
|
</span>
|
|
</span>
|
|
<span id="icon-font" style="font:icon">Icon Font</span>
|
|
</div>
|
|
<span id="no-font-style">plain</span>
|
|
<span style="font-family:Arial" id="nested-font">Arial<span style="font-family:Times">Times nested inside Arial</span></span>
|
|
<img id="img-font-test" src=""/>
|
|
|
|
<span style="font-size:25px">
|
|
<span style="font-size:12.5px" id="font-size-12-point-5-px">12.5PX</span>
|
|
<span style="font-size:0.5em" id="font-size-50-pct-of-25-px">12.5PX</span>
|
|
</span>
|
|
|
|
<div id="size-a"></div>
|
|
|
|
<div id="size-b"></div>
|
|
|
|
<div id="size-c">xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxxxxxxxxx
|
|
xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
|
|
xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
|
|
xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
|
|
xxxxxxxxxxxxxxxx</div>
|
|
|
|
<div id="size-d">xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxxxxxxxxxx
|
|
xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
|
|
xxxxxxxx x</div>
|
|
|
|
<div id="size-e"></div>
|
|
|
|
<div id="size-f">hello</div>
|
|
|
|
<div style="font-size: 1px">
|
|
<div style="font-size: 2em"><span id="em-font-size"></span></div>
|
|
</div>
|
|
|
|
<div id="no-float"></div>
|
|
|
|
<div id="float-none" style="float:none"></div>
|
|
|
|
<div id="float-left" style="float:left"></div>
|
|
|
|
<div id="float-test"></div>
|
|
|
|
<div id="position-unset"></div>
|
|
<div id="style-position-relative" style="position:relative"></div>
|
|
<div id="style-position-fixed" style="position:fixed"></div>
|
|
<div id="css-position-absolute"></div>
|
|
|
|
<div id="box-sizing-unset"></div>
|
|
<div id="box-sizing-border-box" style="box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div>
|
|
|
|
<div id="style-overflow-scroll" style="overflow:scroll"></div>
|
|
<div id="css-overflow-hidden"></div>
|
|
|
|
<!-- Getting the computed z-index of an unpositioned element is unspecified. -->
|
|
<div id="style-z-index-200" style="position:relative;z-index:200"></div>
|
|
<div id="css-z-index-200"></div>
|
|
|
|
<div id="style-text-align-right" style="text-align:right">
|
|
<div id="style-text-align-right-inner">foo</div>
|
|
</div>
|
|
<div id="css-text-align-center"></div>
|
|
|
|
<div id="style-cursor-move" style="cursor:move">
|
|
<span id="style-cursor-move-inner">foo</span>
|
|
</div>
|
|
<div id="css-cursor-pointer"></div>
|
|
|
|
<div id="height-test" style="display:inline-block;position:relative">
|
|
<div id="height-test-inner" style="display:inline-block">
|
|
foo
|
|
</div>
|
|
</div>
|
|
|
|
<div id="test-opacity"></div>
|
|
|
|
<iframe id="test-frame-offset"></iframe>
|
|
|
|
<iframe id="test-translate-frame-standard" src="style_test_standard.html"
|
|
style="overflow:auto;position:absolute;left:100px;top:150px;width:200px;height:200px;border:0px;">
|
|
</iframe>
|
|
<iframe id="test-translate-frame-quirk" src="style_test_quirk.html"
|
|
style="overflow:auto;position:absolute;left:100px;top:350px;width:200px;height:200px;border:0px;margin:0px;">
|
|
</iframe>
|
|
|
|
<iframe
|
|
id="test-visible-frame"
|
|
src="style_test_iframe_standard.html"
|
|
style="width: 200px; height: 200px; border: 0px;">
|
|
</iframe>
|
|
|
|
<div id="test-scrollbarwidth" style="background-color: orange; width: 100px; height: 100px; overflow: auto;">
|
|
<div style='width: 200px; height: 200px; background-color: red'>Test Scroll bar width with scroll</div>
|
|
</div>
|
|
|
|
<div id="scrollable-container" class="scrollable-container">
|
|
<!--
|
|
Workaround for overlapping top padding of the container and top margin of
|
|
the first item in Internet Explorer 6 and 7.
|
|
See http://www.quirksmode.org/bugreports/archives/2005/01/IE_nested_boxes_padding_topmargin_top.html#c11285
|
|
-->
|
|
<div style="height: 0"><!-- --></div>
|
|
<div id="item1" class="scrollable-container-item">1</div>
|
|
<div id="item2" class="scrollable-container-item">2</div>
|
|
<div id="item3" class="scrollable-container-item">3</div>
|
|
<div id="item4" class="scrollable-container-item">4</div>
|
|
<div id="item5" class="scrollable-container-item">5</div>
|
|
<div id="item6" class="scrollable-container-item">6</div>
|
|
<div id="item7" class="scrollable-container-item">7</div>
|
|
<div id="item8" class="scrollable-container-item">8</div>
|
|
</div>
|
|
|
|
<div id="test-visible">
|
|
Test-visible
|
|
<div id="test-visible-el" style="height:200px;">Test-visible</div>
|
|
Test-visible
|
|
</div>
|
|
|
|
<div id="test-visible2"></div>
|
|
|
|
<div id="msFilter" style="-ms-filter:'alpha(opacity=0)'">
|
|
A div</div>
|
|
<div id="filter" style="filter:alpha(opacity=0)">
|
|
Another div</div>
|
|
|
|
<div id="offset-parent" style="position:relative">
|
|
<div id="offset-child">child</div>
|
|
</div>
|
|
|
|
<div id="offset-parent-overflow"
|
|
style="overflow: scroll; width: 50px; height: 50px;">
|
|
<a id="offset-child-overflow">
|
|
scrollscrollscrollscrollscrollscrollscrollscroll
|
|
</a>
|
|
</div>
|
|
|
|
<div id="test-viewport"></div>
|
|
<div id="translation"></div>
|
|
|
|
<div id="rotated"></div>
|
|
<div id="scaled"></div>
|
|
|
|
<script>
|
|
if (!goog.userAgent.IE || goog.userAgent.isDocumentModeOrHigher(9)) {
|
|
document.write(
|
|
'<iframe id="svg-frame" src="style_test_rect.svg"></' + 'iframe>');
|
|
}
|
|
goog.require('goog.style_test');
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|