src/third_party/closure_library/closure/goog/style/style_quirks_test.html - incubator-pagespeed-debian - Git at Google

 <!-- BackCompat -->
 <!--

   This is a copy of style_test.html but without a doctype. Make sure these two
   are 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 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>

 * {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }

 </style>
 <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;
   /* The overflow is different from style_test so that we have consistent
      scroll positions in all browsers. */
   overflow: hidden;
   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>
	<!-- BackCompat -->
	<!--

	This is a copy of style_test.html but without a doctype. Make sure these two
	are 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 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>

	* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	}

	</style>
	<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;
	/* The overflow is different from style_test so that we have consistent
	scroll positions in all browsers. */
	overflow: hidden;
	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>