eliott/servo
1
0
Fork 0
mirror of https://github.com/servo/servo synced 2026-04-29 10:57:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

Browse Source
This commit is contained in:
James Graham
2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
tests/wpt/css-tests/css21_dev/xhtml1print/.htaccess Normal file
View File

@@ -0,0 +1,131 @@
# Define some types
AddType application/xhtml+xml .xht
AddType text/html .htm
AddType text/css .css
AddType image/png .png
AddType text/plain .data .list
# Set the default character set
AddDefaultCharset utf-8
# Indexing Options
Options +Indexes
IndexOptions DescriptionWidth=* NameWidth=* FancyIndexing FoldersFirst ScanHTMLTitles
IndexIgnore .htaccess *~ .#* #*# CVS README
ReadmeName README
# Set up the README files to be plain text
<files README>
ForceType text/plain
SetHandler default-handler
</files>
# Add some default descriptions
AddDescription "Information about the files in this directory" README
<Files ~ "^cascade-import-002\.(xht|xhtml|xml|html|htm)$">
Header add Link "<support/cascade-import-002d.css>; rel=\"stylesheet\""
Header add Link "<support/cascade-import-002f.css>; rel=\"stylesheet\""
</files>
<Files ~ "^lang-selector-005\.(xht|xhtml|xml|html|htm)$">
AddLanguage fr .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-001\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-002\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-003\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-004\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-005\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-006\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-007\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-008\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-009\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-010\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-011\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-15 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-012\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-013\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-014\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-15 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-015\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-016\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-017\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-15 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-018\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-019\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-020\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-021\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-022\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-023\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-024\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-025\.(xht|xhtml|xml|html|htm)$'>
AddCharset utf-8 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-026\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-027\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-028\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<Files ~ '^character-encoding-029\.(xht|xhtml|xml|html|htm)$'>
AddCharset iso-8859-1 .xht .xhtml .xml .html .htm
</Files>
<files ~ '^character-encoding-03[1234567]\.(xht|xhtml|xml|html|htm)$'>
AddCharset us-ascii .xht .xhtml .xml .html .htm
</files>
<files ~ '^at-charset-07[1234567]\.(xht|xhtml|xml|html|htm)$'>
AddCharset us-ascii .xht .xhtml .xml .html .htm
</files>

47
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-001.xht Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, static position of fixed element</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<meta name="flags" content="" />
<meta name="assert" content="The calculation of static position for a fixed positioned element when top, right, bottom, and left are all 'auto' is based off the containing block not the initial containing block." />
<style type="text/css">
html, body, p
{
margin: 0;
padding: 0;
}
#div1
{
border: solid black;
height: 2in;
position: absolute;
top: 1in;
width: 3in;
}
div div
{
background: blue;
height: 1in;
position: fixed;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes the a filled blue square touches the upper-left corner of the black box.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-002.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements with height based on the content</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-02 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="If 'top', 'height', 'bottom', 'margin-top' and 'margin-bottom' are all auto, then set 'top' to the static position, then the height is based on the content, then 'margin-top' and 'margin-bottom' are set to 0 and then solve for 'bottom'." />
<style type="text/css">
#div1
{
border: solid black;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
bottom: auto;
color: blue;
font: 100px/1em Ahem;
height: auto;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: auto;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

76
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-003.xht Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, vertical centering</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned non-replaced element's padding box (which is the area painted by background-color of the element) will be vertically centered within its containing block only if both 'margin-top' and 'margin-bottom' have equal values and if 'top' and 'bottom' have equal values. An absolutely positioned non-replaced element's margin box will be vertically centered within its containing block only if 'top' and 'bottom' have equal values." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 0.5in;
height: 1in;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: 0.5in;
width: 100%;
}
/*
0.5in : top
+
auto (solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (solve) : margin-bottom
+
0.5in : bottom
=============
3.0in : height of containing block
So, margin-bottom and margin-top must use 0.5in so that the equation gets balanced.
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

75
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-004.xht Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, 'margin-top' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'top', 'bottom', 'height' and 'margin-bottom' of an absolutely positioned, non-replaced element are all not 'auto' while its 'margin-top' is 'auto', then 'margin-top' becomes the remainder of the height of its containing block." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 0.5in;
height: 1in;
margin-top: auto;
margin-bottom: 0.5in;
position: absolute;
top: 0.5in;
width: 100%;
}
/*
0.5in : top
+
auto (solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in: height
+
0 : padding-bottom
+
0 : border-bottom-width
+
0.5in : margin-bottom
+
0.5in : bottom
=============
3.0in : height of containing block
So, margin-top must use 0.5in so that the equation gets balanced.
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

76
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-005.xht Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, 'margin-bottom' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'top', 'bottom' and 'height' are all are not 'auto', 'margin-top' is not 'auto' and 'margin-bottom' is 'auto'. Then 'margin-bottom' becomes the remainder of the height of the containing box." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 0.5in;
height: 1in;
margin-bottom: auto;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: 100%;
}
/*
0.5in : top
+
0.5in : margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in: height
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (solve) : margin-bottom
+
0.5in : bottom
=============
3.0in : height of containing block
So, margin-bottom must use 0.5in so that the equation gets balanced.
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

92
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-006.xht Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, over-constrained</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-006"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-27 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-006-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="The 'bottom' value is ignored and the equation solves for the bottom value, when the values for 'top', 'bottom', 'height', 'margin-top', 'margin-bottom' add up to more than the containing blocks height." />
<style type="text/css">
#div1
{
border: 10px solid black;
height: 300px;
position: relative;
width: 300px;
overflow: auto;
}
div div
{
background: blue;
height: 150px;
margin-bottom: 50px;
margin-top: 50px;
position: absolute;
top: 50px;
width: 50%;
}
#div2
{
bottom: 50px;
}
/*
50px : top
+
50px : margin-top
+
0 : border-top-width
+
0 : padding-top
+
150px : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
50px : margin-bottom
+
50px : bottom
=============
350px while the height of containing block is only 300px.
So, here we definitely have an overconstrained situation. In which
case the spec clearly states
"If the values are over-constrained, ignore the value for 'bottom'
and solve for that value."
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
So, here, the used value for bottom will be 0px so that the equation
gets balanced.
*/
#div3
{
bottom: 0;
left: 50%;
}
</style>
</head>
<body>
<p>Test passes if there is one and only one blue rectangle inside an hollow black square and if such black square does not have a vertical scrollbar.</p>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>

106
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-007.xht Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, shrink-to-fit solve for top</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-007"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-007-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Verify that height is based on the overall height of the content, 'margin-top' and 'margin-bottom' when set to 'auto' are solved to '0' and solve for 'top', when 'top' and 'height' are both 'auto' and 'bottom' is not 'auto'." />
<style type="text/css">
#div1
{
color: orange;
font: 100px/1 Ahem;
height: 300px;
position: relative;
width: 200px;
}
div div
{
background: blue;
bottom: 200px;
height: auto;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: auto;
width: 100%;
}
/*
auto (to solve) : top
+
auto (to solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
auto (to solve) : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (to solve): margin-bottom
+
200px : bottom
=============
300px : height of containing block
"
'top' and 'height' are 'auto' and 'bottom' is not 'auto',
then the height is based on the content per 10.6.7,
set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
and solve for 'top'
"
so this brings:
auto (to solve) : top
+
0 (solved): margin-top
+
0 : border-top-width
+
0 : padding-top
+
100px (solved: based on content) : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
0 (solved) : margin-bottom
+
200px : bottom
=============
300px : height of containing block
so top will use 0px
*/
</style>
</head>
<body>
<p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

106
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-008.xht Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, 'top' set to static position</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-008"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-27 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-008-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'top' is set to the static position and any 'auto' values for top and bottom margin are set to '0', when 'top' and 'bottom' are 'auto' and 'height' is not 'auto'." />
<style type="text/css">
#div1
{
background: blue;
height: 3in;
position: relative;
width: 1in;
}
div div
{
background: orange;
bottom: auto;
height: 1in;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: auto;
width: 100%;
}
/*
auto (to solve) : top
+
auto (to solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (to solve): margin-bottom
+
auto (to solve) : bottom
=============
3in : height of containing block
"
'top' and 'bottom' are 'auto' and 'height' is not 'auto',
then set 'top' to the static position,
set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
and solve for 'bottom'
"
so this brings:
0 (solved static position) : top
+
0 (solved): margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
0 (solved): margin-bottom
+
auto (to solve) : bottom
=============
3in : height of containing block
So, bottom must use 2in in order to balance the equation
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is below an orange square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

65
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-009.xht Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, height is based on the content</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-009"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-009-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="The 'height' is based on the content height, 'auto' values for 'margin-top' and 'margin-bottom' are set to '0' when 'height' and 'bottom' are 'auto' and 'top' is not 'auto'." />
<style type="text/css">
#div1
{
position: relative;
}
div div
{
background: blue;
bottom: auto;
color: orange;
font: 100px/1 Ahem;
height: auto;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: 25px;
width: 200px;
}
<!--
"
height' and 'bottom' are 'auto' and 'top' is not 'auto',
then the height is based on the content per 10.6.7,
set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
and solve for 'bottom'
"
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
In this test,
top used value will be 25px
height used value will be 100px
vertical margins will be 0px
bottom used value will be -125px
because the computed height of containing block is 0px.
-->
</style>
</head>
<body>
<p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

105
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-010.xht Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, 'margin-top' and 'margin-bottom' set to '0'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-010"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="The 'auto' values for 'margin-top' and 'margin-bottom' are set to '0', when 'top' is 'auto' and 'height' and 'bottom' are not 'auto'." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 1in;
height: 1in;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: auto;
width: 100%;
}
/*
auto (to solve) : top
+
auto (to solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (to solve): margin-bottom
+
1in : bottom
=============
3in : height of containing block
"
'top' is 'auto', 'height' and 'bottom' are not 'auto',
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
and solve for 'top'
"
so this brings:
auto (to solve) : top
+
0 (set): margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
0 (set): margin-bottom
+
1in : bottom
=============
3in : height of containing block
So, top must use 1in in order to balance the equation
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

103
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-011.xht Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, 'height' based on 'top' and 'bottom' positions</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-011"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="The 'auto' values on 'margin-top', 'margin-bottom' are set to '0' and the 'height' is the remaining space between the 'top' and 'bottom' positions, when 'height' is 'auto' and 'top' and 'bottom' are both not 'auto'." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 1in;
height: auto;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: 1in;
width: 100%;
}
/*
1in : top
+
auto (to solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
auto (to solve) : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (to solve): margin-bottom
+
1in : bottom
=============
3in : height of containing block
"
'height' is 'auto', 'top' and 'bottom' are not 'auto',
then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0
and solve for 'height'
"
so this brings:
1in : top
+
0 (set): margin-top
+
0 : border-top-width
+
0 : padding-top
+
auto (to solve) : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
0 (set): margin-bottom
+
1in : bottom
=============
3in : height of containing block
So, height must use 1in in order to balance the equation
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

58
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-height-012.xht Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned, non-replaced elements, solve for 'bottom'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-height-012"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'margin-top' and 'margin-bottom' are set to '0' the 'bottom' value resolves to the remaining space within the containing block." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
position: absolute;
top: 1in;
bottom: auto;
height: 1in;
margin-top: auto;
margin-bottom: auto;
background: blue;
width: 100%;
}
/*
"
'bottom' is 'auto', 'top' and 'height' are not 'auto',
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0
and solve for 'bottom'
"
Therefore, bottom used value must be 1in
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

47
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-001.xht Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, static position of fixed element</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<meta name="flags" content="" />
<meta name="assert" content="The calculation of static position is based on initial containing block when there is a fixed positioned element." />
<style type="text/css">
html, body, p
{
margin: 0;
padding: 0;
}
#div1
{
border: solid black;
height: 2in;
position: absolute;
width: 2in;
}
div div
{
background: blue;
height: 1in;
max-height: 0.5in;
position: fixed;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes a blue rectangle is in the upper-left corner of a hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-002.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-29 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-max-height-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When 'top', 'height', and 'bottom' of an absolutely positioned element are 'auto', then set 'top' to the static position and make 'height' based on the content; such height may be constrained by a given 'max-height' value." />
<style type="text/css">
#div1
{
border: solid black;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: blue;
bottom: auto;
font: 100px/1 Ahem;
height: auto;
margin-bottom: auto;
margin-top: auto;
max-height: 50px;
position: absolute;
right: 0;
top: auto;
}
</style>
</head>
<body>
<p>Test passes if there is a blue rectangle in the <strong>upper-right corner</strong> of an hollow black square.</p>
<div id="div1">
<div>&nbsp;</div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-003.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, vertical centering</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-max-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned non-replaced element's padding box (which is the area painted by background-color of the element) will be vertically centered within its containing block only if both 'margin-top' and 'margin-bottom' have equal values and if 'top' and 'bottom' have equal values. An absolutely positioned non-replaced element's margin box will be vertically centered within its containing block only if 'top' and 'bottom' have equal values." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 0.5in;
height: 1in;
margin-bottom: auto;
margin-top: auto;
max-height: 0.5in;
position: absolute;
top: 0.5in;
width: 100%;
}
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-004.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'margin-top' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'top', 'bottom' and 'height' are all are not 'auto', 'margin-top' is 'auto' and 'margin-bottom' is not 'auto'. Then 'margin-top' becomes the remainder of the height of the containing box." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 0.5in;
height: 2in;
margin-bottom: 0.5in;
margin-top: auto;
max-height: 1in;
position: absolute;
top: 0.5in;
width: 100%;
}
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-005.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'margin-bottom' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'top', 'bottom' and 'height' are all are not 'auto', 'margin-top' is not 'auto' and 'margin-bottom' is 'auto'. Then 'margin-bottom' becomes the remainder of the height of the containing box." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 0.5in;
height: 2in;
margin-bottom: auto;
margin-top: 0.5in;
max-height: 1in;
position: absolute;
top: 0.5in;
width: 100%;
}
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-006.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, over-constrained</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-006"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="The 'bottom' value is ignored and the equation solves for the bottom value, when the values for 'top', 'bottom', 'height', 'margin-top', 'margin-bottom' add up to more than the containing blocks height." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 0.5in;
height: 2in;
margin-bottom: 0.5in;
margin-top: 0.5in;
max-height: 1in;
position: absolute;
top: 0.5in;
width: 100%;
}
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

58
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-007.xht Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, shrink-to-fit solve for top</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-007"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-29 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-max-height-007-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="The height is based on the overall height of the content, 'margin-top', 'auto' is set to '0' and solve for 'top', when 'top' and 'height' are both 'auto' and 'bottom' is not 'auto'." />
<style type="text/css">
#div1
{
font: 100px/1 Ahem;
height: 400px;
position: relative;
width: 100px;
}
#div2
{
background: orange;
height: 50px;
position: relative;
top: 50px;
width: 100px;
}
#div3
{
background: blue;
bottom: 300px;
height: auto;
margin-bottom: auto;
margin-top: auto;
max-height: 50px;
position: absolute;
top: auto;
width: 50px;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange squares have the <strong>same height</strong>.</p>
<div id="div1">
<div id="div2"></div>
<div id="div3">&nbsp;</div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-008.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'top' set to static position</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-008"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-29 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-max-height-008-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'top' is set to the static position and any 'auto' values for top and bottom margin are set to '0', when 'top' and 'bottom' are 'auto' and 'height' is not 'auto'." />
<style type="text/css">
#div1
{
background: blue;
height: 3in;
position: relative;
width: 1in;
}
div div
{
background: orange;
bottom: auto;
height: 1in;
margin-bottom: auto;
margin-top: auto;
max-height: 0.5in;
position: absolute;
top: auto;
width: 100%;
}
</style>
</head>
<body>
<p>Test passes if there is a small orange rectangle and a bigger blue rectangle.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

57
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-009.xht Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, height is shrink-to-fit</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-009"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-max-height-009-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="The 'height' is based on the content height, 'auto' values for 'margin-top' and 'margin-bottom' are set to '0' when 'height' and 'bottom' are 'auto' and 'top' is not 'auto'." />
<style type="text/css">
#div1
{
position: relative;
}
#div2
{
background: blue;
height: 50px;
left: 100px;
position: absolute;
top: 25px;
width: 100px;
}
#div3
{
background: orange;
bottom: auto;
font: 100px/1 Ahem;
height: auto;
margin-bottom: auto;
margin-top: auto;
max-height: 50px;
position: absolute;
top: 25px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if the orange and blue rectangles have the <strong>same height</strong>.</p>
<div id="div1">
<div id="div2"></div>
<div id="div3">&nbsp;</div>
</div>
</body>
</html>

104
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-010.xht Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'margin-top' and 'margin-bottom' set to '0'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-010"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content (and such height can be constrained by a max-height declaration) and then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top' " />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 1in;
height: 2in;
margin-bottom: auto;
margin-top: auto;
max-height: 1in;
position: absolute;
top: auto;
width: 100%;
}
/*
auto (to solve) : top
+
auto (to solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
2in : height (will be constrained to use 1in by max-height)
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (to solve): margin-bottom
+
1in : bottom
=============
3in : height of containing block
"
'top' is 'auto', 'height' and 'bottom' are not 'auto',
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
and solve for 'top'
"
so this brings:
auto (to solve) : top
+
0 (set): margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in (constrained) : height
+
0 : padding-bottom
+
0 : border-bottom-width
+
0 (set): margin-bottom
+
1in : bottom
=============
3in : height of containing block
So, top must use 1in in order to balance the equation
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

139
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-011.xht Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'height' based on 'top' and 'bottom' positions</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-011"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-max-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="The 'auto' values on 'margin-top', 'margin-bottom' are set to '0' and the 'height' is the remaining space between the 'top' and 'bottom' positions, when 'height' is 'auto' and 'top' and 'bottom' are both not 'auto'. If such height is constrained by max-height, then we must re-process the values as following. If none of 'top', height, bottom are 'auto' and if both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 1in;
height: auto;
margin-bottom: auto;
margin-top: auto;
max-height: 0.5in;
position: absolute;
top: 1in;
width: 100%;
}
/*
1in : top
+
auto (to solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
auto (to solve) : height (may be constrained to use 0.5in by max-height)
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (to solve): margin-bottom
+
1in : bottom
=============
3in : height of containing block
"
'top' is 'auto', 'height' and 'bottom' are not 'auto',
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
and solve for 'top'
"
so this brings:
1in : top
+
0 (set): margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in (not constrained) : height (must be constrained to use 0.5in by max-height)
+
0 : padding-bottom
+
0 : border-bottom-width
+
0 (set): margin-bottom
+
1in : bottom
=============
3in : height of containing block
So, here, we must reenter the algorithm since height is
constrained and is no longer 'auto'.
"
If none of the three [top, height, bottom] are 'auto':
If both 'margin-top' and 'margin-bottom' are 'auto',
solve the equation under the extra constraint that
the two margins get equal values.
"
so this brings:
1in : top
+
auto (to solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
0.5in (constrained) : height (constrained by max-height)
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (to solve): margin-bottom
+
1in : bottom
=============
3in : height of containing block
So, here, margin-top must use 0.25in and margin-bottom must use 0.25in
so that the equation remains balanced.
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-max-height-012.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Max-height on absolutely positioned, non-replaced elements, solve for 'bottom'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-max-height-012"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'margin-top' and 'margin-bottom' are set to '0' the 'bottom' value resolves to the remaining space within the containing block." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: auto;
height: 2in;
margin-top: auto;
margin-bottom: auto;
max-height: 1in;
position: absolute;
top: 1in;
width: 100%;
}
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

48
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-001.xht Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Solving for 'right' on absolutely positioned non-replaced elements</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-height-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When direction is left-to-right and 'left', 'width' and 'right' are 'auto', the width becomes shrink-to-fit and then solve for 'right'." />
<style type="text/css">
#div1
{
border: solid black;
direction: ltr;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1 Ahem;
left: auto;
position: absolute;
right: auto;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

48
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-002.xht Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Solving for 'left' on absolutely positioned non-replaced elements</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-width-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When direction is right-to-left and 'left', 'width' and 'right' are 'auto', then set 'right' to the static position, then width becomes shrink-to-fit and then solve for 'left'." />
<style type="text/css">
#div1
{
border: solid black;
direction: rtl;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1em Ahem;
left: auto;
position: absolute;
right: auto;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

72
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-003.xht Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned non-replaced elements with 'margin-left' and 'margin-right' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-width-003-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When 'left', 'width' and 'right' are not 'auto', set 'margin-left' and 'margin-right' to equal values." />
<style type="text/css">
#containingblock
{
border: solid black;
height: 200px;
position: relative;
width: 400px;
}
div div
{
/*
left : 100px
+
margin-left : solve
+
border-left-width : 0px
+
padding-left : 0px
+
width : 100px
+
padding-right : 0px
+
border-right-width: 0px
+
margin-right : solve
+
right : -200px
=============================
width of containing block : 400px
*/
background: red;
color: blue;
font: 100px/1em Ahem;
left: 100px;
margin-left: auto; /* value is solved to 200px */
margin-right: auto; /* value is solved to 200px */
position: absolute;
right: -200px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black rectangle and if there is <strong>no red</strong>.</p>
<div id="containingblock">
<div>X</div>
</div>
</body>
</html>

73
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-004.xht Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned non-replaced elements when both 'margin-left' and 'margin-right' are set to 'auto' and direction is left-to-right</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-width-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When direction is 'ltr' and 'left', 'width' and 'right' are not 'auto', solve for 'margin-right' and 'margin-left' to equal values. If this would make 'margin-left' and 'margin-right' negative, then set 'margin-left' to zero and solve for 'margin-right'." />
<style type="text/css">
#div1
{
border: solid black;
direction: ltr;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1em Ahem;
left: 100px;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 100px;
width: 100px;
}
/*
left : 100px
+ margin-left : solve (auto)
+ border-left-width : 0
+ padding-left : 0
+ width : 100px
+ padding-right : 0
+ border-right-width : 0
+ margin-right : solve (auto)
+ right : 100px
====================================
width of containing block : 200px
So, margin-left and margin-right would be each -50px at this point.
"...unless this would make them (the two margins) negative
in which case when direction of the containing block is
'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and
solve for 'margin-right' ('margin-left')."
So, under such extra constraint, 'margin-left' must become 0
and 'margin-right' must become -100px.
*/
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

73
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-005.xht Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned non-replaced elements when both 'margin-left' and 'margin-right' are set to 'auto' and direction is right-to-left</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-height-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When direction is 'rtl' and 'left', 'width' and 'right' are not 'auto', solve for 'margin-right' and 'margin-left' to equal values. If this would make 'margin-left' and 'margin-right' negative, then set 'margin-right' to zero and solve for 'margin-left'." />
<style type="text/css">
#div1
{
border: solid black;
direction: rtl;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1em Ahem;
left: 100px;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 100px;
width: 100px;
}
/*
left : 100px
+ margin-left : solve (auto)
+ border-left-width : 0
+ padding-left : 0
+ width : 100px
+ padding-right : 0
+ border-right-width : 0
+ margin-right : solve (auto)
+ right : 100px
====================================
width of containing block : 200px
So, margin-left and margin-right would be each -50px at this point.
"...unless this would make them (the two margins) negative
in which case when direction of the containing block is
'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and
solve for 'margin-right' ('margin-left')."
So, under such extra constraint, 'margin-right' must become 0
and 'margin-left' must become -100px.
*/
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-006.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned non-replaced element when only 'margin-right' is 'auto' and direction is left-to-right</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-006"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-width-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When direction is left-to-right and 'left', 'width', 'margin-left' and 'right' are not 'auto', solve for 'margin-right'." />
<style type="text/css">
#div1
{
border: solid black;
direction: ltr;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1 Ahem;
left: 50px;
margin-left: 50px;
margin-right: auto;
position: absolute;
right: 100px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-007.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned non-replaced element when only 'margin-left' is 'auto' and direction is right-to-left</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-007"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-height-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When direction is right-to-left and 'left', 'width', 'margin-right' and 'right' are not 'auto', solve for 'margin-left'." />
<style type="text/css">
#div1
{
border: solid black;
direction: rtl;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1 Ahem;
left: 100px;
margin-left: auto;
margin-right: 50px;
position: absolute;
right: 50px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

52
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-008.xht Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned non-replaced elements with left, width, right and margin-right not auto</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-008"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-width-008-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="If 'left', 'width', 'right' and 'margin-right' are all not 'auto' and 'margin-left' is 'auto', then solve the equation for 'margin-left'." />
<style type="text/css">
#containingblock
{
border: solid black;
direction: ltr;
height: 200px;
position: relative;
width: 300px;
}
div div
{
/* left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block */
/* 100px + solve + 0 + 0 + 100px + 0 + 0 + 100px + 100px = 300px */
background: red;
color: blue;
font: 100px/1 Ahem;
left: 100px;
margin-left: auto; /* value is solved to -100px */
margin-right: 100px;
position: absolute;
right: 100px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black rectangle and if there is <strong>no red</strong>.</p>
<div id="containingblock">
<div>X</div>
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-009.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned non-replaced elements with left, width, right and margin-left not auto</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-009"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<meta name="flags" content="ahem" />
<meta name="assert" content="If 'left', 'width', 'right' and 'margin-left' are all not 'auto' and 'margin-right' is 'auto', then solve the equation for 'margin-right'." />
<style type="text/css">
#containingblock
{
border: solid black;
direction: rtl;
height: 200px;
position: relative;
width: 300px;
}
div div
{
/* left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block */
/* 100px + 100px + 0 + 0 + 100px + 0 + 0 + solve + 100px = 300px */
background: red;
color: blue;
font: 100px/1 Ahem;
left: 100px;
margin-left: 100px;
margin-right: auto; /* value is solved to -100px */
position: absolute;
right: 100px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of the black rectangle and there is <strong>no red</strong>.</p>
<div id="containingblock">
<div>X</div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-010.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Solved for 'left' when absolutely positioned non-replaced elements has 'left' and 'width' as 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-010"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-height-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit and then solve for 'left'." />
<style type="text/css">
#div1
{
border: solid black;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1 Ahem;
left: auto;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 100px;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-011.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned non-replaced elements when 'left' and 'right' are 'auto', 'width' is not 'auto' and 'direction' is left-to-right</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-011"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-height-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When 'direction' is left-to-right and 'left' and 'right' are 'auto' and 'width' is not 'auto', solve for 'right'." />
<style type="text/css">
#div1
{
border: solid black;
direction: ltr;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1 Ahem;
left: auto;
margin-left: auto;
margin-right: auto;
position: absolute;
right: auto;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-012.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned non-replaced elements when 'left' and 'right' are 'auto', 'width' is not 'auto' and 'direction' is right-to-left</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-012"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-width-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When 'direction' is right-to-left and 'left' and 'right' are 'auto' and 'width' is not 'auto', solve for 'left'." />
<style type="text/css">
#div1
{
border: solid black;
direction: rtl;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1 Ahem;
left: auto;
margin-left: auto;
margin-right: auto;
position: absolute;
right: auto;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-013.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Solved for 'right' when absolutely positioned non-replaced elements has 'right' and 'width' as 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-013"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-width-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When 'right' and 'width' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit and then solve for 'right'." />
<style type="text/css">
#div1
{
border: solid black;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1 Ahem;
left: 100px;
margin-left: auto;
margin-right: auto;
position: absolute;
right: auto;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-014.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Solved for 'left' when absolutely positioned non-replaced elements has 'right' and 'width' not set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-014"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-height-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When 'left' is 'auto' and 'width' and 'right' are not 'auto', then solve for 'left'." />
<style type="text/css">
#div1
{
border: solid black;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1em Ahem;
left: auto;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 100px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

48
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-015.xht Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Solved for 'width' when absolutely positioned non-replaced elements has 'left' and 'right' not set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-015"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-width-015-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="When 'width' is 'auto' and 'left' and 'right' are not 'auto' element solves for 'width'." />
<style type="text/css">
#div1
{
border: solid black;
height: 200px;
position: relative;
width: 300px;
}
div div
{
background: blue;
left: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 100px;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is <strong>horizontally centered</strong> inside an hollow black rectangle and if there is <strong>no red</strong>.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-016.xht Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Solved for 'right' when absolutely positioned non-replaced elements has 'left' and 'width' not set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-016"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="match" href="reference/absolute-non-replaced-width-002-ref.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="When 'right' is 'auto' and 'width' and 'left' are not 'auto', then solve for 'right'." />
<style type="text/css">
#div1
{
border: solid black;
height: 200px;
position: relative;
width: 200px;
}
div div
{
background: red;
color: blue;
font: 100px/1em Ahem;
left: 100px;
margin-left: auto;
margin-right: auto;
position: absolute;
right: auto;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p>
<div id="div1">
<div>X</div>
</div>
</body>
</html>

64
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-017.xht Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (left-to-right), inline-block and max-width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-017"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de" />
<link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-017-ref.xht" />
<meta content="When direction is left-to-right and 'left' is set to static position and 'width' and 'right' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" />
<meta content="ahem" name="flags" />
<style type="text/css"><![CDATA[
body
{
direction: ltr;
margin: 8px;
}
div
{
background-color: red;
font: 30px/4 Ahem;
left: auto;
/*
left is set to static position: it should be 8px from
the left-hand side of document box (at body's margin-left)
*/
position: absolute;
right: auto;
width: auto;
}
span
{
background-color: green;
display: inline-block;
max-width: 4em;
}
]]></style>
</head>
<body>
<p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p>
<div><span>12345678</span></div>
</body>
</html>

66
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-018.xht Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (left-to-right), inline-block and max-width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-018"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de" />
<link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-017-ref.xht" />
<meta content="When direction is left-to-right and 'left' is set to static position and 'width' and 'right' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to shrink-to-fit width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" />
<meta content="ahem" name="flags" />
<style type="text/css"><![CDATA[
body
{
direction: ltr;
margin: 8px;
}
div#outer-abs-pos
{
background-color: red;
font: 30px/4 Ahem;
left: auto;
/*
left is set to static position: it should be 8px from
the left-hand side of document box (at body's margin-left)
*/
position: absolute;
right: auto;
width: auto;
}
div#inner-inline-block
{
background-color: green;
display: inline-block;
max-width: 4em;
}
]]></style>
</head>
<body>
<p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p>
<div id="outer-abs-pos">
<div id="inner-inline-block">12345678</div>
</div>
</body>
</html>

66
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-019.xht Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (left-to-right), float and max-width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-019"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de" />
<link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-017-ref.xht" />
<meta content="When direction is left-to-right and 'left' is set to static position and 'width' and 'right' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an floating, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" />
<meta content="ahem" name="flags" />
<style type="text/css"><![CDATA[
body
{
direction: ltr;
margin: 8px;
}
div#outer-abs-pos
{
background-color: red;
font: 30px/4 Ahem;
left: auto;
/*
left is set to static position: it should be 8px from
the left-hand side of document box (at body's margin-left)
*/
position: absolute;
right: auto;
width: auto;
}
div#inner-floated
{
background-color: green;
float: left;
max-width: 4em;
}
]]></style>
</head>
<body>
<p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p>
<div id="outer-abs-pos">
<div id="inner-floated">12345678</div>
</div>
</body>
</html>

64
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-020.xht Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (left-to-right), float and max-width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-020"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de" />
<link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-017-ref.xht" />
<meta content="When direction is left-to-right and 'left' is set to static position and 'width' and 'right' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an floating, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" />
<meta content="ahem" name="flags" />
<style type="text/css"><![CDATA[
body
{
direction: ltr;
margin: 8px;
}
div
{
background-color: red;
font: 30px/4 Ahem;
left: auto;
/*
left is set to static position: it should be 8px from
the left-hand side of document box (at body's margin-left)
*/
position: absolute;
right: auto;
width: auto;
}
span
{
background-color: green;
float: left;
max-width: 4em;
}
]]></style>
</head>
<body>
<p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p>
<div><span>12345678</span></div>
</body>
</html>

66
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-021.xht Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (right-to-left), inline-block and max-width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-021"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de" />
<link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-021-ref.xht" />
<meta content="When direction is right-to-left and 'right' is set to static position and 'width' and 'left' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" />
<meta content="ahem" name="flags" />
<style type="text/css"><![CDATA[
body
{
direction: rtl;
margin: 8px;
}
p {direction: ltr;}
div
{
background-color: red;
font: 30px/4 Ahem;
left: auto;
position: absolute;
right: auto;
/*
right is set to static position: it should be 8px from
the right-hand side of document box (at body's margin-right)
*/
width: auto;
}
span
{
background-color: green;
display: inline-block;
max-width: 4em;
}
]]></style>
</head>
<body>
<p>Below, on the right edge of the page, there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the left. There should be no red in this page.</p>
<div><span>12345678</span></div>
</body>
</html>

68
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-022.xht Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (right-to-left), inline-block and max-width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-022"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de" />
<link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-021-ref.xht" />
<meta content="When direction is right-to-left and 'right' is set to static position and 'width' and 'left' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" />
<meta content="ahem" name="flags" />
<style type="text/css"><![CDATA[
body
{
direction: rtl;
margin: 8px;
}
p {direction: ltr;}
div#outer-abs-pos
{
background-color: red;
font: 30px/4 Ahem;
left: auto;
position: absolute;
right: auto;
/*
right is set to static position: it should be 8px from
the right-hand side of document box (at body's margin-right)
*/
width: auto;
}
div#inner-inline-block
{
background-color: green;
display: inline-block;
max-width: 4em;
}
]]></style>
</head>
<body>
<p>Below, on the right edge of the page, there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the left. There should be no red in this page.</p>
<div id="outer-abs-pos">
<div id="inner-inline-block">12345678</div>
</div>
</body>
</html>

68
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-023.xht Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (right-to-left), float and max-width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-023"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de" />
<link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-021-ref.xht" />
<meta content="When direction is right-to-left and 'right' is set to static position and 'width' and 'left' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an floating, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" />
<meta content="ahem" name="flags" />
<style type="text/css"><![CDATA[
body
{
direction: rtl;
margin: 8px;
}
p {direction: ltr;}
div#outer-abs-pos
{
background-color: red;
font: 30px/4 Ahem;
left: auto;
position: absolute;
right: auto;
/*
right is set to static position: it should be 8px from
the right-hand side of document box (at body's margin-right)
*/
width: auto;
}
div#inner-floated
{
background-color: green;
float: left;
max-width: 4em;
}
]]></style>
</head>
<body>
<p>Below, on the right edge of the page, there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the left. There should be no red in this page.</p>
<div id="outer-abs-pos">
<div id="inner-floated">12345678</div>
</div>
</body>
</html>

66
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-024.xht Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (right-to-left), float and max-width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-024"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de" />
<link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-021-ref.xht" />
<meta content="When direction is right-to-left and 'right' is set to static position and 'width' and 'left' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an floating, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" />
<meta content="ahem" name="flags" />
<style type="text/css"><![CDATA[
body
{
direction: rtl;
margin: 8px;
}
p {direction: ltr;}
div
{
background-color: red;
font: 30px/4 Ahem;
left: auto;
position: absolute;
right: auto;
/*
right is set to static position: it should be 8px from
the right-hand side of document box (at body's margin-right)
*/
width: auto;
}
span
{
background-color: green;
float: left;
max-width: 4em;
}
]]></style>
</head>
<body>
<p>Below, on the right edge of the page, there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the left. There should be no red in this page.</p>
<div><span>12345678</span></div>
</body>
</html>

69
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-025.xht Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: CSS Test: absolutely positioned non-replaced element with 'left' and 'right' not set to 'auto' and 'width' set to 'auto' - max-width, horizontal margins</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-025"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" title="10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="10.4 Minimum and maximum widths: 'min-width' and 'max-width'" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-025-ref.xht" />
<meta content="" name="flags" />
<meta content="When 'width' is computed according to the equation and rules of section 10.3.7 and when such computed 'width' is greater than 'max-width', then the equation and rules of section 10.3.7 are applied again but this time assuming the computed 'max-width' value. Then all three properties ('width', 'left' and 'right') are not 'auto' and both 'margin-left' and 'margin-right' are 'auto': in which case, the horizontal margins get equal values of available, remaining horizontal space." name="assert" />
<!--
Credit must go to Boris Zbarsky for explaining this in
http://lists.w3.org/Archives/Public/www-style/2010Oct/0147.html
-->
<style type="text/css"><![CDATA[
body {margin: 8px;}
div#overlapped-red
{
background-color: red;
color: yellow;
font-size: 2em;
height: 100px;
margin-left: auto;
margin-right: auto;
width: 100px;
}
div#abs-pos-overlapping-green
{
background-color: green;
height: 100px;
left: 8px;
margin-left: auto;
margin-right: auto;
max-width: 100px;
position: absolute;
right: 8px;
width: auto;
}
]]></style>
</head>
<body>
<p>Test passes if there is a green square <strong>horizontally centered</strong> in the page and if there is <strong>no red</strong>.</p>
<div id="abs-pos-overlapping-green"></div>
<div id="overlapped-red">FAIL</div>
</body>
</html>

69
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-026.xht Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: absolutely positioned non-replaced element with 'left' and 'right' not set to 'auto' and 'width' set to 'auto' - max-width, horizontal margins</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-026"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" title="10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" />
<link rel="help" title="10.4 Minimum and maximum widths: 'min-width' and 'max-width'" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" />
<link rel="match" href="reference/absolute-non-replaced-width-026-ref.xht" />
<meta content="" name="flags" />
<meta content="When 'width' is computed according to the equation and rules of section 10.3.7 and when such computed 'width' is greater than 'max-width', then the equation and rules of section 10.3.7 are applied again but this time assuming the computed 'max-width' value. Then all three properties ('width', 'left' and 'right') are not 'auto' and 'margin-left' is 'auto': in which case, the 'margin-left' get all of available, remaining horizontal space." name="assert" />
<!--
Credit must go to Boris Zbarsky for explaining this in
http://lists.w3.org/Archives/Public/www-style/2010Oct/0147.html
-->
<style type="text/css"><![CDATA[
body {margin: 8px;}
div#overlapped-red
{
background-color: red;
color: yellow;
font-size: 2em;
height: 100px;
margin-left: auto;
margin-right: 0px;
width: 100px;
}
div#abs-pos-overlapping-green
{
background-color: green;
height: 100px;
left: 8px;
margin-left: auto;
margin-right: 0px;
max-width: 100px;
position: absolute;
right: 8px;
width: auto;
}
]]></style>
</head>
<body>
<p>Test passes if there is a green square on the <strong>right side</strong> of this page and if there is <strong>no red</strong>.</p>
<div id="abs-pos-overlapping-green"></div>
<div id="overlapped-red">FAIL</div>
</body>
</html>

224
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-non-replaced-width-027.xht Normal file
View File

@@ -0,0 +1,224 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: absolutely positioned non-replaced element - 'auto' margins, max-width and max-height</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-non-replaced-width-027"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta content="" name="flags" />
<meta content="If 'width' is auto and 'left' and 'right' are not 'auto', then set 'auto' values for 'margin-left' and 'margin-right' to 0 and then solve for 'width'; the tentative width may be later constrained by max-width in which case, the algorithm must be re-entered. If 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'; the tentative height may be later constrained by max-height in which case, the algorithm must be re-entered." name="assert" />
<style type="text/css"><![CDATA[
div#rel-pos-container
{
background-color: green;
height: 100px;
position: relative;
width: 100px;
}
div#rel-pos-container > div {position: absolute;}
div#reference-red-overlapped
{
background-color: red;
height: 33px;
left: 33px;
top: 33px;
width: 33px;
}
div#test-green-overlapping
{
background-color: green;
bottom: 0;
height: auto;
left: 0;
margin: auto;
max-height: 34px;
max-width: 34px;
right: 0;
top: 0;
width: auto;
}
/*
First we set both margin-left and margin-right to 0 since
"
set 'auto' values for 'margin-left' and 'margin-right' to 0
(...)
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
"
10.3.7 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
0px : left
+
0px (set) : margin-left
+
0px : border-left
+
0px : padding-left
+
(solve) : width (not constrained yet by max-width)
+
0px : padding-right
+
0px : border-right
+
0px (set) : margin-right
+
0px : right
=============
100px : width of containing block
So, (tentative) width is 100px but now we must
constrain it by computed max-width value and so we
must now re-enter the algorithm but this time,
'width' is not 'auto': therefore horizontal margins
must not be set to 0:
"
If none of the three (left, width, right) is 'auto':
If both 'margin-left' and 'margin-right' are 'auto',
solve the equation under the extra constraint that
the two margins get equal values
"
10.3.7 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
So:
0px : left
+
(solve) : margin-left
+
0px : border-left
+
0px : padding-left
+
34px : width (constrained by max-width)
+
0px : padding-right
+
0px : border-right
+
(solve) : margin-right
+
0px : right
=============
100px : width of containing block
Therefore, margin-left and margin-right used values are
each respectively equal to ((100px minus 34px) divided by 2) == 33px.
-----------------------------------------------
First we set both margin-top and margin-bottom to 0 since
"
5. 'height' is 'auto', 'top' and 'bottom' are not 'auto',
then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0
and solve for 'height'
"
10.6.4 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
0px : top
+
0px (set) : margin-top
+
0px : border-top
+
0px : padding-top
+
(solve) : height (not constrained yet by max-height)
+
0px : padding-bottom
+
0px : border-bottom
+
0px (set) : margin-bottom
+
0px : bottom
=============
100px : height of containing block
So, (tentative) height is 100px but now we must
constrain it by computed max-height value and so we
must now re-enter the algorithm but this time,
'height' is not 'auto': therefore vertical margins
must not be set to 0:
"
If none of the three (top, height, bottom) are 'auto':
If both 'margin-top' and 'margin-bottom' are 'auto',
solve the equation under the extra constraint that
the two margins get equal values.
"
10.6.4 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
So:
0px : top
+
(solve) : margin-top
+
0px : border-top
+
0px : padding-top
+
34px : height (constrained by max-height)
+
0px : padding-bottom
+
0px : border-bottom
+
(solve) : margin-bottom
+
0px : bottom
=============
100px : height of containing block
Therefore, margin-top and margin-bottom used values are
each respectively equal to ((100px minus 34px) divided by 2) == 33px.
*/
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="rel-pos-container">
<div id="reference-red-overlapped"></div>
<div id="test-green-overlapping"></div>
</div>
</body>
</html>

43
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-001.xht Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolute replaced elements with 'margin-top' and 'margin-bottom' as 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-001-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="If the height, top, bottom and vertical margins of an absolute positioned inline replaced element are all 'auto', then its use value is determined for inline replaced element, its 'top' is given by its static position and both 'margin-top' and 'margin-bottom' used values are '0'. In this test, the 'height' and 'width' of the inline replaced element are 'auto' and the element also has an intrinsic height, so the intrinsic height and the intrinsic width become the used values." />
<style type="text/css">
div
{
border-bottom: solid orange;
border-top: solid orange;
height: 15px;
width: 1in;
}
img
{
margin-bottom: auto;
margin-top: auto;
position: absolute;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no space between</strong> the blue square and the orange lines.</p>
<div>
<img alt="blue 15x15" src="support/blue15x15.png" />
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-002.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced elements relying on intrinsic height dimensions</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-002-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned inline replaced element with an intrinsic height has a 'height' and 'width' computed as 'auto'." />
<style type="text/css">
div
{
position: relative;
}
div div
{
background: orange;
height: 15px;
left: 15px;
position: absolute;
top: 0;
width: 15px;
}
img
{
height: auto;
position: absolute;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange squares have the <strong>same height</strong>.</p>
<div>
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

52
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-003.xht Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with intrinsic ratio and 'height' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-height-007-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' is set to 'auto' and 'width' is specified." />
<style type="text/css">
div
{
position: relative;
}
div div
{
background: blue;
height: 100px;
left: 100px;
position: absolute;
top: 0;
}
img
{
height: auto;
position: absolute;
}
div div, img
{
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p>
<div>
<img alt="Image download support must be enabled" src="support/swatch-orange.png" />
<div></div>
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-004.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolute replaced inline-block elements without intrinsic ratio and 'height' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-004-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="For an absolutely positioned inline-block replaced element, if its 'height' and 'width' have a computed value of 'auto' and the element has no intrinsic ratio, the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width." />
<style type="text/css">
div
{
position: relative;
}
div div
{
border: solid green;
height: 150px;
position: absolute;
top: 0;
width: 300px;
}
iframe
{
border: solid red;
height: auto;
position: absolute;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div>
<iframe></iframe>
<div></div>
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-005.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced element with its height set to a percentage</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-005-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned inline-block replaced element with its height set to a percentage is resolvable if and when its containing block height is explicitly specified and computable." />
<style type="text/css">
#div1
{
position: relative;
height: 2in;
}
div div
{
border: solid green;
height: 1in;
position: absolute;
top: 0;
width: 300px;
}
iframe
{
border: solid red;
position: absolute;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="div1">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

51
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-006.xht Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-006"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height"/>
<link rel="match" href="reference/absolute-replaced-height-006-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned."/>
<style type="text/css">
#div1
{
position: relative;
height: 2in;
}
div div
{
background: orange;
height: 1in;
left: 200px;
position: absolute;
top: 0;
width: 200px;
}
svg
{
position: absolute;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p>
<div id="div1">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" height="50%" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
<div/>
</div>
</body>
</html>

58
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-007.xht Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced elements with percentage based intrinsic height that cannot be resolved</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-007"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-007-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned inline-block replaced element with a percentage height that cannot be resolved has no intrinsic height." />
<style type="text/css">
#div1
{
position: relative;
}
div div
{
border: solid green;
position: absolute;
width: 300px;
}
iframe
{
border: solid red;
position: absolute;
width: auto;
}
/*
"
(...)
the height of the containing block of an absolutely positioned
element is independent of the size of the element itself, and thus
a percentage height on such an element *_can always be resolved_*.
However, it may be that the height is not known until elements
that come later in the document have been processed. "
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
"
*/
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="div1">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

77
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-008.xht Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with 'margin-top', 'margin-bottom' and 'bottom' as 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-008"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-008-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="An absolutely positioned inline replaced element's used value of 'bottom', 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
img
{
bottom: auto;
height: auto;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: 1in;
width: auto;
}
/*
"
The used value of 'height' is determined as for inline replaced elements.
If 'margin-top' or 'margin-bottom' is specified as 'auto'
its used value is determined by the rules below.
(...)
If 'height' and 'width' both have computed values
of 'auto' and the element also has an intrinsic height,
then that intrinsic height is the used value of 'height'.
(...)
If 'bottom' is 'auto', replace any 'auto' on 'margin-top'
or 'margin-bottom' with '0'.
If at this point there is only one 'auto' left,
solve the equation for that value.
"
http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height
In this test, bottom will be -96px because the height of the
containing block is 0px.
*/
div div
{
background: blue;
height: 15px;
left: 15px;
position: relative;
top: 1in;
width: 15px;
}
</style>
</head>
<body>
<p>Test passes if there is a short blue bar and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

53
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-009.xht Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolute positioned inline replaced elements relying on intrinsic height dimensions and 'bottom' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-009"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-008-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned replaced element with an intrinsic height has 'height', 'width' and 'bottom' computed as 'auto'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
div div
{
background: blue;
height: 15px;
left: 15px;
position: absolute;
top: 1in;
width: 15px;
}
img
{
bottom: auto;
height: auto;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is a short blue bar and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

55
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-010.xht Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with intrinsic ratio, 'height' and 'bottom' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-010"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-010-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' and 'bottom' are set to 'auto' and 'width' is specified." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
div div
{
background: blue;
height: 1in;
left: 1in;
position: absolute;
top: 1in;
}
img
{
bottom: auto;
height: auto;
position: absolute;
top: 1in;
}
div div, img
{
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

52
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-011.xht Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced element without intrinsic ratio, 'height' and 'bottom' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-011"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-011-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="For an absolutely positioned inline-block replaced element, the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width." />
<style type="text/css">
div
{
position: relative;
}
div div
{
border: solid green;
height: 150px;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: auto;
height: auto;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div>
<iframe></iframe>
<div></div>
</div>
</body>
</html>

52
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-012.xht Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced element with its height set to a percentage and 'bottom' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-012"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-012-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned inline-block replaced element with its height set to a percentage is resolvable if and when its containing block height is explicitly specified and computable." />
<style type="text/css">
#div1
{
position: relative;
height: 2in;
}
div div
{
border: solid green;
height: 1in;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: auto;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="div1">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

55
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-013.xht Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height and 'bottom' set to 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-013"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/> <!-- 2012-09-05 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height"/>
<link rel="match" href="reference/absolute-replaced-height-013-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned."/>
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
height: 2in;
}
div div
{
background: orange;
height: 1in;
left: 200px;
position: absolute;
top: 1in;
width: 200px;
}
svg
{
bottom: auto;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles are next to each other, have the same height and are not touching the black line.</p>
<div id="div1">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" height="50%" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
<div/>
</div>
</body>
</html>

60
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-014.xht Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced elements with percentage based intrinsic height that cannot be resolved and 'top' specified</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-014"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-014-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned inline-block replaced element with a percentage height that cannot be resolved has no intrinsic height." />
<!--
"
(...) the height of the containing block of an absolutely
positioned element is independent of the size of the element itself,
and thus a percentage height on such an element *_can always be
resolved_*. However, it may be that the height is not known until
elements that come later in the document have been processed.
"
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
-->
<style type="text/css">
div#containing-block
{
position: relative;
}
div div
{
border: solid green;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: auto;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="containing-block">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

59
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-016.xht Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element relying on intrinsic height dimensions and 'top', 'bottom' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-016"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-008-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned inline replaced element has an intrinsic height and its height is specified as 'auto', 'width' is specified 'auto' and 'top', 'bottom' are not 'auto'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
div div
{
background: blue;
height: 15px;
left: 15px;
position: absolute;
top: 1in;
width: 15px;
}
img
{
bottom: 1in;
/*
The equation gets overconstrained; and so, the used value for
bottom in that test will be ignored and will be solved
as minus (1in + 15px) (-111px) because the height of
containing block is 0.
*/
height: auto;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is a short blue bar and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

61
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-017.xht Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with intrinsic ratio, 'height' set to 'auto' and 'top', 'bottom' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-017"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-010-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' is set to 'auto', 'width' is specified and 'top', 'bottom' are not 'auto'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
div div
{
background: blue;
height: 1in;
left: 1in;
position: absolute;
top: 1in;
}
img
{
bottom: 1in;
/*
The equation gets overconstrained; and so, the used value for
bottom in that test will be ignored and will be solved
as minus (1in + 1in) (-192px) because the height of
containing block is 0.
*/
height: auto;
position: absolute;
top: 1in;
}
div div, img
{
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

52
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-018.xht Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced element without intrinsic ratio, 'height' set to 'auto' and 'top', 'bottom' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-018"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-011-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="For an absolutely positioned inline-block replaced element, the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width." />
<style type="text/css">
div
{
position: relative;
}
div div
{
border: solid green;
height: 150px;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: 1in;
height: auto;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div>
<iframe></iframe>
<div></div>
</div>
</body>
</html>

52
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-019.xht Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced element with its height set to a percentage and 'top', 'bottom' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-019"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-012-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned inline-block replaced element with its height set to a percentage is resolvable if and when its containing block height is explicitly specified and computable." />
<style type="text/css">
#div1
{
position: relative;
height: 2in;
}
div div
{
border: solid green;
height: 1in;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: 1in;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="div1">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

54
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-020.xht Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height set to 'auto' and 'top', 'bottom' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-020"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height"/>
<link rel="match" href="reference/absolute-replaced-height-013-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned."/>
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
height: 2in;
}
div div
{
background: orange;
height: 1in;
left: 200px;
position: absolute;
top: 1in;
width: 200px;
}
svg
{
bottom: 1in;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles are next to each other, have the same height and are not touching the black line.</p>
<div id="div1">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" height="50%" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
<div/>
</div>
</body>
</html>

61
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-021.xht Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced element with percentage based intrinsic height that cannot be resolved where 'top' and 'bottom' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-021"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-014-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned inline-block replaced element with a percentage height that cannot be resolved has no intrinsic height." />
<!--
"
(...) the height of the containing block of an absolutely
positioned element is independent of the size of the element itself,
and thus a percentage height on such an element *_can always be
resolved_*. However, it may be that the height is not known until
elements that come later in the document have been processed.
"
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
-->
<style type="text/css">
div#containing-block
{
position: relative;
}
div div
{
border: solid green;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: 1in;
position: absolute;
top: 1in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="containing-block">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

53
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-022.xht Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with 'margin-bottom' as 'auto' and 'top', 'bottom', 'margin-top' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-022"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-008-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="An absolutely positioned inline replaced element with only one value as 'auto' solves for that value (margin-bottom)." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
img
{
bottom: 1in;
margin-bottom: auto;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
}
div div
{
background: blue;
height: 15px;
left: 15px;
position: relative;
top: 1in;
width: 15px;
}
</style>
</head>
<body>
<p>Test passes if there is a short blue bar and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

55
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-023.xht Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element relying on intrinsic height dimensions and 'top', 'bottom', 'margin-top' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-023"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-008-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned inline replaced element with an intrinsic height has a 'height', 'width' computed as 'auto' and 'top', 'bottom' are not 'auto'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
div div
{
background: blue;
height: 15px;
left: 15px;
position: absolute;
top: 1in;
width: 15px;
}
img
{
bottom: 1in;
height: auto;
margin-bottom: auto;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is a short blue bar and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

57
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-024.xht Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with intrinsic ratio, 'height' set to 'auto' and 'top', 'bottom', 'margin-top' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-024"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-010-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' is set to 'auto', 'width' is specified and 'top', 'bottom' are not 'auto'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
div div
{
background: blue;
height: 1in;
left: 1in;
position: absolute;
top: 1in;
}
img
{
bottom: 1in;
height: auto;
margin-bottom: auto;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
}
div div, img
{
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

54
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-025.xht Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced elements without intrinsic ratio, 'height' set to 'auto' and 'top', 'bottom', 'margin-top' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-025"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-011-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="For an absolutely positioned replaced element the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width." />
<style type="text/css">
div
{
position: relative;
}
div div
{
border: solid green;
height: 150px;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: 1in;
height: auto;
margin-bottom: auto;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div>
<iframe></iframe>
<div></div>
</div>
</body>
</html>

54
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-026.xht Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced element with its height set to a percentage of its containing block's height and 'top', 'bottom', 'margin-top' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-026"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-012-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned inline-block replaced element with its height set to a percentage is resolvable if and when its containing block height is explicitly specified and computable." />
<style type="text/css">
#div1
{
position: relative;
height: 2in;
}
div div
{
border: solid green;
height: 1in;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: 1in;
margin-bottom: auto;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="div1">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

56
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-027.xht Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height set to 'auto' and 'top', 'bottom', 'margin-top' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-027"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height"/>
<link rel="match" href="reference/absolute-replaced-height-013-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned."/>
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
height: 2in;
}
div div
{
background: orange;
height: 1in;
left: 200px;
position: absolute;
top: 1in;
width: 200px;
}
svg
{
bottom: 1in;
margin-bottom: auto;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles are next to each other, have the same height and are not touching the black line.</p>
<div id="div1">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" height="50%" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
<div/>
</div>
</body>
</html>

51
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-028.xht Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block replaced element with percentage based intrinsic height that cannot be resolved where 'top', 'bottom', 'margin-top' are not 'auto'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-028"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-014-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned inline-block replaced element with a percentage height that cannot be resolved has no intrinsic height." />
<style type="text/css">
#div1
{
position: relative;
}
div div
{
border: solid green;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: 1in;
margin-bottom: auto;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="div1">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

101
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-029.xht Normal file
View File

@@ -0,0 +1,101 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with over-constrained values</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-029"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-008-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="An absolutely positioned inline replaced element with over-constrained values solves for 'bottom'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
img
{
bottom: 0.5in;
margin-bottom: 0.5in;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
}
div div
{
background: blue;
height: 15px;
left: 15px;
position: relative;
top: 1in;
width: 15px;
}
/*
0.5in : 'top'
+
0.5in : 'margin-top'
+
0 : 'border-top-width'
+
0 : 'padding-top'
+
15px : 'height' (intrinsic height of inline replaced element)
+
0 : 'padding-bottom'
+
0 : 'border-bottom-width'
+
0.5in : 'margin-bottom'
+
0.5in : 'bottom'
===========
207px : height of containing block (15px)
So, bottom has to be ignored and forced to have the value that
will balance the equation. So, this brings up
0.5in : 'top'
+
0.5in : 'margin-top'
+
0 : 'border-top-width'
+
0 : 'padding-top'
+
15px : 'height' (intrinsic height)
+
0 : 'padding-bottom'
+
0 : 'border-bottom-width'
+
0.5in : 'margin-bottom'
+
(solve): 'bottom'
===================
15px : height of containing block
So, the solved bottom value must be -1.5in (or -144px).
*/
</style>
</head>
<body>
<p>Test passes if there is a short blue bar and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

87
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-030.xht Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with intrinsic height dimension and over-constrained values</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-030"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-008-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned inline replaced element has an intrinsic height; if values are overconstrained, then solve for 'bottom'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
div div
{
background: blue;
height: 15px;
left: 15px;
position: absolute;
top: 1in;
width: 15px;
}
img
{
bottom: 1in;
height: auto;
margin-bottom: 0.5in;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
/*
0.5in : top
+
0.5in : margin-top
+
15px : intrinsic height
+
0.5in : margin-bottom
+
1in : bottom
====================
255px != 0px (height of containing block)
Therefore, set bottom value must be ignored and
the equation must be solved for bottom.
0.5in : top
+
0.5in : margin-top
+
15px : intrinsic height
+
0.5in : margin-bottom
+
(solve) : bottom
====================
159px != 0px (height of containing block)
Therefore, solved bottom value must be -159px
*/
</style>
</head>
<body>
<p>Test passes if there is a short blue bar and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

105
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-031.xht Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with intrinsic ratio, 'height' set to 'auto' and over-constrained values</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-031"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-010-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned replaced element has an intrinsic ratio, 'height' is set to 'auto', with over-constrained values solves for 'bottom'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
div div
{
background: blue;
height: 1in;
left: 1in;
position: absolute;
top: 1in;
}
img
{
bottom: 1in;
height: auto;
margin-bottom: 0.5in;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
}
div div, img
{
width: 1in;
}
/*
0.5in : 'top'
+
0.5in : 'margin-top'
+
0 : 'border-top-width'
+
0 : 'padding-top'
+
1in : 'height' (used width) / (intrinsic ratio)
+
0 : 'padding-bottom'
+
0 : 'border-bottom-width'
+
0.5in : 'margin-bottom'
+
1in : 'bottom'
===========
436px : height of containing block (0px)
So, bottom has to be ignored and forced to have the value that
will balance the equation. So, this brings up
0.5in : 'top'
+
0.5in : 'margin-top'
+
0 : 'border-top-width'
+
0 : 'padding-top'
+
1in : 'height' (used width) / (intrinsic ratio)
+
0 : 'padding-bottom'
+
0 : 'border-bottom-width'
+
0.5in : 'margin-bottom'
+
(solve): 'bottom'
===================
240px : height of containing block (0px)
So the solved bottom value should be -240px
*/
</style>
</head>
<body>
<p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

54
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-032.xht Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolute positioned inline-block replaced element without intrinsic ratio, 'height' set to 'auto' and over-constrained values</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-032"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-011-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="For an absolutely positioned inline-block replaced element, the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. And with over-constrained values element solves for 'bottom'." />
<style type="text/css">
div
{
position: relative;
}
div div
{
border: solid green;
height: 150px;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: 1in;
height: auto;
margin-bottom: 0.5in;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div>
<iframe></iframe>
<div></div>
</div>
</body>
</html>

104
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-033.xht Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline-block element with percentage based height set to 'auto' and over-constrained values</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-033"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-012-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned inline-block replaced element with percentage height resolves based on the containing block height when such height can be resolved." />
<style type="text/css">
#div1
{
position: relative;
height: 2in;
}
div div
{
border: solid green;
height: 1in;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: 1in;
margin-bottom: 0.5in;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
/*
0.5in : 'top'
+
0.5in : 'margin-top'
+
3px : 'border-top-width' medium which is often resolved as 3px
+
0 : 'padding-top'
+
1in : 'height' 50% of height of containing block
+
0 : 'padding-bottom'
+
3px : 'border-bottom-width' medium which is often resolved as 3px
+
0.5in : 'margin-bottom'
+
1in : 'bottom'
================
342px : height of containing block (192px)
So, bottom has to be ignored and forced to have the value that
will balance the equation. So, this brings up
0.5in : 'top'
+
0.5in : 'margin-top'
+
3px : 'border-top-width' medium which is often resolved as 3px
+
0 : 'padding-top'
+
1in : 'height' 50% of height of containing block
+
0 : 'padding-bottom'
+
3px : 'border-bottom-width' medium which is often resolved as 3px
+
0.5in : 'margin-bottom'
+
(solve) : 'bottom'
================
-246px : height of containing block (192px)
So, the solved bottom value should be -54px .
*/
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="div1">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

56
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-034.xht Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height set to 'auto' and over-constrained values</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-034"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height"/>
<link rel="match" href="reference/absolute-replaced-height-013-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned."/>
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
height: 2in;
}
div div
{
background: orange;
height: 1in;
left: 200px;
position: absolute;
top: 1in;
width: 200px;
}
svg
{
bottom: 1in;
margin-bottom: 0.5in;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles are next to each other, have the same height and are not touching the black line.</p>
<div id="div1">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" height="50%" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
<div/>
</div>
</body>
</html>

51
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-035.xht Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolute replaced elements with percentage based intrinsic height that cannot be resolved and there are over-constrained values</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-035"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="reference/absolute-replaced-height-014-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="An absolutely positioned replaced element with a percentage height that cannot be resolved has no intrinsic height." />
<style type="text/css">
#div1
{
position: relative;
}
div div
{
border: solid green;
position: absolute;
top: 1in;
width: 300px;
}
iframe
{
border: solid red;
bottom: 1in;
margin-bottom: 0.5in;
margin-top: 0.5in;
position: absolute;
top: 0.5in;
width: auto;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="div1">
<iframe height="50%"></iframe>
<div></div>
</div>
</body>
</html>

72
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-height-036.xht Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolute Replaced Elements: specified 'top' and 'bottom' with auto margins</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-height-036"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping"/>
<link rel="match" href="reference/ref-if-there-is-no-red.xht"/>
<meta name="flags" content="image"/>
<meta name="assert" content="If 'top' and 'bottom' are specified on an absolutely-positioned replaced element, then any remaining space is split amongst the 'auto' vertical margins."/>
<style type="text/css">
.container {
position: relative;
width: 45px;
height: 45px;
/* Uncomment for debugging:
border: solid silver;
background: aqua; */
}
.abspos {
position: absolute;
top: 0; bottom: 0;
background: red;
}
.one {
margin: auto;
left: 0;
}
.two {
margin-top: auto;
left: 15px;
}
.three {
margin-bottom: auto;
right: 0;
}
.control1 {
height: 15px;
border-right: 15px solid red;
}
.control2 {
height: 15px;
border-left: 15px solid red;
}
.control3 {
height: 15px;
margin: 0 15px;
background: red;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div class="container">
<img class="abspos one" src="support/swatch-white.png" alt="FAIL: image support required"/>
<img class="abspos two" src="support/swatch-white.png" alt="FAIL: image support required"/>
<img class="abspos three" src="support/swatch-white.png" alt="FAIL: image support required"/>
<div class="control1"/>
<div class="control2"/>
<div class="control3"/>
</div>
</body>
</html>

50
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-001.xht Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with 'auto' specified for 'margin-left', 'margin-right' and intrinsic width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-06 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" />
<link rel="match" href="reference/absolute-replaced-width-001-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. If both 'left' and 'right' have the value 'auto' and if the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. The intrinsic width is also used if 'height' and 'width' are 'auto'." />
<style type="text/css">
#div1
{
border: solid black;
height: 2in;
width: 2in;
}
img
{
margin-left: auto;
margin-right: auto;
position: absolute;
}
div div
{
background: orange;
height: 15px;
margin-top: 15px;
width: 15px;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-left corner of an hollow black square.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

52
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-002.xht Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element and 'auto' specified for 'margin-left', 'margin-right' and intrinsic height</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/> <!-- 2012-09-07 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width"/>
<link rel="match" href="reference/absolute-replaced-width-002-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value."/>
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
width: 3in;
}
svg
{
margin-left: auto;
margin-right: auto;
position: absolute;
}
div div
{
background: orange;
height: 50px;
margin-top: 50px;
width: 200px;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p>
<div id="div1">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" height="50" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
<div/>
</div>
</body>
</html>

68
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-003.xht Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element with 'auto' specified for 'margin-left', 'margin-right', with no intrinsic width and no intrinsic ratio</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/> <!-- 2012-09-07 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width"/>
<link rel="match" href="reference/absolute-replaced-width-003-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value."/>
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
width: 3in;
}
svg
{
height: 100px;
margin-left: auto;
margin-right: auto;
position: absolute;
}
/*
In this test, the svg's containing block is the initial containing block.
The contraining equation should be balanced in the following manner:
left: will take the static position within its ltr containing block
margin-left: will become 0
width: will become 300px
margin-right: will become 0
right: will be the width of viewport minus 300px minus computed left value (body's margin-left plus border-left width == 11px)
*/
div div
{
background: orange;
height: 100px;
margin-top: 100px;
width: 200px;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p>
<div id="div1">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" height="50" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
<div/>
</div>
</body>
</html>

59
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-003a.xht Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element, 'auto' specified for 'margin-left', 'margin-right', no intrinsic height and no intrinsic width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-003a"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width"/>
<link rel="match" href="reference/absolute-replaced-width-003a-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic height, then the used value of 'width' becomes 300px and the used value of 'height' becomes 150px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value."/>
<style type="text/css"><![CDATA[
div
{
height: 225px;
width: 450px;
}
svg#overlapped-red {position: absolute;}
div#overlapping-green
{
background-color: green;
height: 150px;
left: auto;
position: absolute;
top: auto;
width: 300px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
<div>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" id="overlapped-red">
<svg:rect x="0" y="0" width="600" height="300" fill="red"/>
</svg:svg>
<div id="overlapping-green"/>
</div>
</body>
</html>

59
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-003b.xht Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element, 'auto' specified for 'margin-left', 'margin-right', no intrinsic height and no intrinsic ratio</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-003b"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width"/>
<link rel="match" href="reference/absolute-replaced-width-003b-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic height and no intrinsic ratio, then the used value of 'height' becomes 150px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value."/>
<style type="text/css"><![CDATA[
div
{
height: 300px;
width: 300px;
}
svg#overlapped-red {position: absolute;}
div#overlapping-green
{
background-color: green;
height: 150px;
left: auto;
position: absolute;
top: auto;
width: 150px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" id="overlapped-red" width="150">
<svg:rect x="0" y="0" width="600" height="300" fill="red"/>
</svg:svg>
<div id="overlapping-green"/>
</div>
</body>
</html>

59
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-003c.xht Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element, 'auto' specified for 'margin-left', 'margin-right', no intrinsic width and no intrinsic ratio</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-003c"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width"/>
<link rel="match" href="reference/absolute-replaced-width-003c-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value."/>
<style type="text/css"><![CDATA[
div
{
height: 300px;
width: 600px;
}
svg#overlapped-red {position: absolute;}
div#overlapping-green
{
background-color: green;
height: 300px;
left: auto;
position: absolute;
top: auto;
width: 300px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a big filled green square and <strong>no red</strong>.</p>
<div>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" id="overlapped-red" height="300">
<svg:rect x="0" y="0" width="600" height="300" fill="red"/>
</svg:svg>
<div id="overlapping-green"/>
</div>
</body>
</html>

56
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-004.xht Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element and 'auto' specified for 'margin-left', 'margin-right' and no intrinsic height or width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/> <!-- 2012-09-07 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width"/>
<link rel="match" href="reference/absolute-replaced-width-004-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic height, then the used value of 'width' becomes 300px and the used value of 'height' becomes 150px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value."/>
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
width: 3in;
}
#div2
{
height: 110px;
width: 3in;
}
#div3
{
background: orange;
height: 1in;
width: 200px;
}
svg
{
position: absolute;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p>
<div id="div1">
<div id="div2">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
</div>
<div id="div3"/>
</div>
</body>
</html>

51
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-006.xht Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element and 'auto' specified for 'margin-left', 'margin-right' and width set to a percentage</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-006"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" />
<link rel="match" href="reference/absolute-replaced-width-006-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="The width of an absolutely positioned inline replaced element set to a percentage is evaluated against its containing block's width." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 2in;
}
img
{
margin-left: auto;
margin-right: auto;
position: absolute;
}
div div
{
background: orange;
height: 1in;
margin-top: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-left corner of an hollow black rectangle.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" width="50%" />
<div></div>
</div>
</body>
</html>

52
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-008.xht Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and intrinsic width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-008"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" />
<link rel="match" href="reference/absolute-replaced-width-001-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'." />
<style type="text/css">
#div1
{
border: solid black;
direction: ltr;
height: 2in;
width: 2in;
}
img
{
margin-left: auto;
margin-right: auto;
left: auto;
position: absolute;
right: auto;
}
div div
{
background: orange;
height: 15px;
margin-top: 15px;
width: 15px;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-left corner of an hollow black square.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>

71
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-009.xht Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and intrinsic height</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-009"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/> <!-- 2012-09-07 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width"/>
<link rel="match" href="reference/absolute-replaced-width-002-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value."/>
<style type="text/css">
#div1
{
border: solid black;
direction: ltr;
height: 3in;
position: relative;
width: 3in;
}
svg
{
margin-left: auto;
margin-right: auto;
left: auto;
position: absolute;
right: auto;
}
/*
In this test, the svg's containing block is div#div1.
The contraining equation should be balanced in the following manner:
left: will take the static position within its ltr containing block
margin-left: will become 0
width: will become 300px
margin-right: will become 0
right: will be the width of div#div1 minus 300px (288px minus 300px == -12px)
*/
div div
{
background: orange;
height: 50px;
margin-top: 50px;
width: 200px;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p>
<div id="div1">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" height="50" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
<div/>
</div>
</body>
</html>

71
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-010.xht Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and 'height'</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-010"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/> <!-- 2012-09-07 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width"/>
<link rel="match" href="reference/absolute-replaced-width-003-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value."/>
<style type="text/css">
#div1
{
border: solid black;
direction: ltr;
height: 3in;
position: relative;
width: 3in;
}
svg
{
height: 100px;
margin-left: auto;
margin-right: auto;
left: auto;
position: absolute;
right: auto;
}
/*
In this test, the svg's containing block is div#div1.
The contraining equation should be balanced in the following manner:
left: will take the static position within its ltr containing block
margin-left: will become 0
width: will become 300px
margin-right: will become 0
right: will be the width of div#div1 minus 300px (288px minus 300px == -12px)
*/
div div
{
background: orange;
height: 100px;
margin-top: 100px;
width: 200px;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p>
<div id="div1">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" height="50" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
<div/>
</div>
</body>
</html>

60
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-011.xht Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and no intrinsic height or width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-011"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"/> <!-- 2012-09-07 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width"/>
<link rel="match" href="reference/absolute-replaced-width-004-ref.xht"/>
<meta name="flags" content="nonHTML svg"/>
<meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic height, then the used value of 'width' becomes 300px and the used value of 'height' becomes 150px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value."/>
<style type="text/css">
#div1
{
border: solid black;
direction: ltr;
height: 3in;
width: 3in;
}
#div2
{
height: 110px;
position: relative;
width: 3in;
}
#div3
{
background: orange;
height: 1in;
width: 200px;
}
svg
{
left: auto;
position: absolute;
right: auto;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p>
<div id="div1">
<div id="div2">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full">
<svg:rect x="0" y="0" width="200" height="100" fill="blue"/>
</svg:svg>
</div>
<div id="div3"/>
</div>
</body>
</html>

53
tests/wpt/css-tests/css21_dev/xhtml1print/absolute-replaced-width-013.xht Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and percentage intrinsic width</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
@top-right { content: "Test absolute-replaced-width-013"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" />
<link rel="match" href="reference/absolute-replaced-width-006-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="Percentage intrinsic widths are evaluated against the containing block's width." />
<style type="text/css">
#div1
{
border: solid black;
direction: ltr;
height: 3in;
position: relative;
width: 2in;
}
img
{
margin-left: auto;
margin-right: auto;
left: auto;
position: absolute;
right: auto;
}
div div
{
background: orange;
height: 1in;
margin-top: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange boxes below are the same width, and the blue box is in the upper-left corner of the black box.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" width="50%" />
<div></div>
</div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More