Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-04 03:58:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

Browse source
This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 • committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
Download patch file Download diff file Expand all files Collapse all files

24
tests/wpt/web-platform-tests/css/work-in-progress/hixie/active-selector-004.xht Normal file
View file

@ -0,0 +1,24 @@
<!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" lang="en">
<head>
<title>CSS Test: :active (basic test)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/selectors/active/004.html" type="text/html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" />
<meta content="may interact" name="flags" />
<style type="text/css">
p, span { display: block; margin: 0; padding: 1em; color: navy; }
.a :active { background: green; color: white; }
.b *:active { background: green; color: white; }
.c :active { background: green; color: white; }
.d p:active { background: green; color: white; }
</style>
</head>
<body>
<p>Activating any of the text below may change its background to green. Test still passes if the text background does not change to green.</p>
<div class="a"> <span>Activate this text.</span> </div>
<div class="b"> <span>Activate this text.</span> </div>
<div class="c"> <p>Activate this text.</p> </div>
<div class="d"> <p>Activate this text.</p> </div>
</body>
</html>

13
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-001.xml Normal file
View file

@ -0,0 +1,13 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="help" href="http://www.w3.org/TR/CSS2/conform.html#conformance" />
<link rel="stylesheet" href="001c.css" type="text/css" title="Green" />
<link rel="alternate stylesheet" href="001a.css" type="text/css" title="Red" />
<link rel="alternate stylesheet" href="001b.css" type="text/css" title="Red" />
<link rel="alternate stylesheet" href="001d.css" type="text/css" title="Blue" />
</head>
<body>
<h1>Alternate stylesheet test</h1>
<p>There should be four alternate stylesheets, and "Green" should be the selected one.</p>
</body>
</html>

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-001a.css Normal file
View file

@ -0,0 +1 @@
:root { color: yellow; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-001b.css Normal file
View file

@ -0,0 +1 @@
:root { background: maroon; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-001c.css Normal file
View file

@ -0,0 +1 @@
:root { color: black; background: #459b75; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-001d.css Normal file
View file

@ -0,0 +1 @@
:root { color: white; background: blue; }

80
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-002.html Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>Alternates and generated content (poorly written test)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/cascade/alternates/002.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS2/conform.html#conformance" />
<style type="text/css">
table td { border: solid; padding: 1em; }
</style>
<style type="text/css" title="Alternate one (Preferred)">
#failed { display: none; }
#a:before { content: 'Welcome to an alternate stylesheet test.'; display: block; }
#ac:before { display: block; content: '\A0'; border-top: solid orange thick; }
#b *, #b :before { float: left; border: solid; content: ' '; padding: 1em; margin: 1em; display: block; }
#b:after { content: 'All the content on this page is generated using :before and :after pseudo-elements.'
'Switch to the other stylesheet, then switch back, then reload and see if anything changes.'
'Note that there should be some brief text on the other sheet too.'; }
#c { float: right; border: dotted; }
#ca { float: left; margin: 1em; font: 900 3em cursive; border: solid navy; -moz-border-radius: 100% 100% 0 100%; padding: 0.25em 0.75em; background: blue ; color: white; }
#ca:before { content: 'M'; }
#ca :after { content: 'O'; }
#c:after { display: block; content: 'cow'; background: url(002a.jpeg); clear: left; margin: -6em 0 0 13em; width: 250px; height: 195px; }
</style>
<style type="text/css" title="Alternate two">
#failed { display: none; }
#ca:after { content: 'This is a different stylesheeet.'; }
</style>
</head>
<body>
<p id="failed">Failed.</p>
<div id="test">
<div id="a">
<div id="aa">
</div>
<div id="ab">
<span id="aba"></span>
<span id="abb"></span>
</div>
<div id="ac">
</div>
<div id="ad">
</div>
</div>
<div id="b">
<div id="bd">
<span id="baa"></span>
</div>
<div id="bb">
</div>
<div id="bc">
</div>
<div id="bd">
</div>
</div>
<div id="c">
<div id="ca">
<span id="caa"></span>
<span id="cab"></span>
</div>
<div id="cb">
</div>
<div id="cc">
</div>
<div id="cd">
</div>
<div id="d">
<div id="da">
</div>
<div id="db">
</div>
<div id="dc">
</div>
<div id="dd">
</div>
</div>
</div>
</div>
</body>
</html>

BIN
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-002a.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

29
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-003.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>Alternates and generated content (poorly written test)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/cascade/alternates/003.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS2/conform.html#conformance" />
<style type="text/css">
.control { display: inline; font: 1em/1 Ahem, sans-serif; background: red; color: white; }
.undersheet { height: 100px; width: 100px; background: red; margin: 0 0 -100px 0; }
.pass-condition { margin: 1em 0; }
p, div { color: navy; margin: 0; }
</style>
<style type="text/css" title="Alternate one (Preferred)">
p:before { content: 'x'; font: 50px/1 Ahem; border: 25px solid; display: block; width: 50px; }
</style>
<style type="text/css" title="Alternate two">
p:before { content: 'xxxx'; font: 25px/1 Ahem; color: green; }
p:after { content: '\A0'; height: 75px; width: 100px; background: green; display: block; }
</style>
</head>
<body>
<div class="control">Ahem_font_required_for_this_test.</div>
<div class="pass-condition">Switch to the alternate stylesheet. The blue block should turn green.</div>
<div class="undersheet"></div>
<p></p>
</body>
</html>

24
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-004.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>Multiple Preferred Stylesheets</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/cascade/alternates/004.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS2/conform.html#conformance" />
<link rel="stylesheet" title="Preferred" href="004a.css">
<link rel="stylesheet" title="Alternate One" href="004b.css">
<link rel="alternate stylesheet" title="Alternate Two" href="004c.css">
<link rel="stylesheet" title="Preferred" href="004d.css">
<link rel="stylesheet" title="Alternate One" href="004e.css">
<link rel="alternate stylesheet" title="Alternate Two" href="004f.css">
</head>
<body>
<p class="a">This should be green.</p>
<p class="b">This should be green.</p>
<p class="c">This should be green.</p>
<p class="d">This should be green.</p>
<p class="e">This should be green.</p>
<p class="f">This should be green.</p>
</body>
</html>

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-004a.css Normal file
View file

@ -0,0 +1 @@
.a, .b, .c, .e, .f { color: green; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-004b.css Normal file
View file

@ -0,0 +1 @@
.b { color: yellow; background: red; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-004c.css Normal file
View file

@ -0,0 +1 @@
.c { color: yellow; background: red; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-004d.css Normal file
View file

@ -0,0 +1 @@
.d { color: green; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-004e.css Normal file
View file

@ -0,0 +1 @@
.e { color: yellow; background: red; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-004f.css Normal file
View file

@ -0,0 +1 @@
.f { color: yellow; background: red; }

29
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-005.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>Multiple Preferred Stylesheets and the Disabled Attribute</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/cascade/alternates/005.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS2/conform.html#conformance" />
<link rel="stylesheet" title="Preferred" href="005a.css">
<link rel="stylesheet" title="Alternate One" href="005b.css">
<script type="text/javascript">
var links = document.getElementsByTagName('LINK');
links[0].disabled = true;
links[1].disabled = false;
</script>
<link rel="alternate stylesheet" title="Alternate Two" href="005c.css">
<link rel="stylesheet" title="Preferred" href="005d.css">
<link rel="stylesheet" title="Alternate One" href="005e.css">
<link rel="alternate stylesheet" title="Alternate Two" href="005f.css">
</head>
<body>
<p class="a">This should be green.</p>
<p class="b">This should be green.</p>
<p class="c">This should be green.</p>
<p class="d">This should be green.</p>
<p class="e">This should be green.</p>
<p class="f">This should be green.</p>
</body>
</html>

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-005a.css Normal file
View file

@ -0,0 +1 @@
.a { color: yellow; background: red; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-005b.css Normal file
View file

@ -0,0 +1 @@
.b { color: green; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-005c.css Normal file
View file

@ -0,0 +1 @@
.c { color: yellow; background: red; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-005d.css Normal file
View file

@ -0,0 +1 @@
.d { color: yellow; background: red; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-005e.css Normal file
View file

@ -0,0 +1 @@
.a, .c, .d, .e, .f { color: green; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-005f.css Normal file
View file

@ -0,0 +1 @@
.f { color: yellow; background: red; }

21
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-006-no-script.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>Preferred Stylesheets (Control Test)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/cascade/alternates/006-no-script.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS2/conform.html#conformance" />
<link rel="alternate stylesheet" title="Alternate One" href="006a.css">
<link rel="alternate stylesheet" title="Preferred" href="006b.css">
<link rel="stylesheet" title="Preferred" href="006c.css"> <!-- enables 006b -->
<link rel="alternate stylesheet" title="Alternate One" href="006d.css">
</head>
<body>
<p class="a">This should be green.</p>
<p class="b">This should be green.</p>
<p class="c">This should be green.</p>
<p class="d">This should be green.</p>
<p>If this test fails, then <a href="006.html">test 006</a> is meaningless.</p>
</body>
</html>

24
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-006.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>Preferred Stylesheets and the Disabled Attribute</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/cascade/alternates/006.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS2/conform.html#conformance" />
<link rel="alternate stylesheet" title="Alternate One" href="006a.css">
<link rel="alternate stylesheet" title="Preferred" href="006b.css">
<script type="text/javascript">
document.getElementsByTagName('LINK')[0].disabled = false; // enables 006a
</script>
<link rel="stylesheet" title="Preferred" href="006c.css"> <!-- redisables 006a, enables 006b -->
<link rel="alternate stylesheet" title="Alternate One" href="006d.css">
</head>
<body>
<p class="a">This should be green.</p>
<p class="b">This should be green.</p>
<p class="c">This should be green.</p>
<p class="d">This should be green.</p>
<p>This test is meaningless if <a href="006.html">test 006-no-script</a> fails.</p>
</body>
</html>

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-006a.css Normal file
View file

@ -0,0 +1 @@
.a { color: yellow; background: red; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-006b.css Normal file
View file

@ -0,0 +1 @@
.a, .b, .d { color: green; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-006c.css Normal file
View file

@ -0,0 +1 @@
.c { color: green; }

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-006d.css Normal file
View file

@ -0,0 +1 @@
.d { color: yellow; background: red; }

4
tests/wpt/web-platform-tests/css/work-in-progress/hixie/altss/cascade-alternates-README Normal file
View file

@ -0,0 +1,4 @@
See also:
http://www.hixie.ch/tests/adhoc/css/cascade/import/
http://www.hixie.ch/tests/evil/mixed/cascade/altcascade.html
http://www.hixie.ch/tests/evil/mixed/cascade/minialtcascade.html

13
tests/wpt/web-platform-tests/css/work-in-progress/hixie/comments-010.xht Normal file
View file

File diff suppressed because one or more lines are too long

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/box-compact-001-alt.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Compact: Inheriting from the right element</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/compact/001-alt.html"/>
<style type="text/css">
.compact { display: compact; color: inherit; }
.compact-parent, span { color: green; }
.compact-sibling { color: red; margin: 0 0 0 20em; }
</style>
</head>
<body>
<p>There should be no red below.</p>
<div class="compact-parent">
<div class="compact"> This line should be green. </div>
<div class="compact-sibling"> <span>(same line)</span> </div>
</body>
</html>

18
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/box-compact-001.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Compact: Joining the line box model without changing the inheritance chain</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/compact/001.html"/>
<style type="text/css">
.compact { display: compact; }
.block { display: block; color: red; background: lime; line-height: 0; margin-left: 10em; }
span { color: black; }
</style>
</head>
<body>
<p>There should be no red below.</p>
<div class="compact"> Test: </div>
<div class="block"> <span>This sentence should have a green background.</span> </div>
</body>
</html>

22
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/box-compact-002.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Compact: Correct vertical alignment</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/compact/002.html"/>
<style type="text/css">
.control { display: inline; font: 1em/1 Ahem, sans-serif; background: red; color: white; }
.container { background: red; color: green; width: 2em; font: 2em/1 Ahem; }
.compact { display: compact; }
.block { display: block; margin: 0 0 0 1em; }
</style>
</head>
<body>
<div class="control">Ahem_font_required_for_this_test.</div>
<p>There should be a single green rectangle square below.</p>
<div class="container">
<div class="compact"> X </div>
<div class="block"> X </div>
</div>
</body>
</html>

6
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/box-compact-README Normal file
View file

@ -0,0 +1,6 @@
For these tests you will need Todd Fahrner's Ahem font, which you can
download from:
http://www.hixie.ch/resources/fonts/
Versions for Mac, Unix and Windows are available.

3
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/box-compact-TODO Normal file
View file

@ -0,0 +1,3 @@
padding on the compact box
checking the compact box doesn't get put in the margin when it doesn't fit (e.g. takes two lines)
checking that a trailing \A doesn't cause two lines

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-001.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: content-box</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/001.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 100px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: content-box; }
</style>
</head>
<body>
<p>Normal Behaviour (-moz-float-edge: content-box)</p>
<div class="left">left</div>
<div class="center">center</div>
</body>
</html>

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-002.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: padding-box</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/002.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 100px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: padding-box; }
</style>
</head>
<body>
<p>Border should overlap, nothing else (-moz-float-edge: padding-box)</p>
<div class="left">left</div>
<div class="center">center</div>
</body>
</html>

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-003.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: border-box</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/003.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 100px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: border-box; }
</style>
</head>
<body>
<p>Boxes should not overlap (-moz-float-edge: border-box)</p>
<div class="left">left</div>
<div class="center">center</div>
</body>
</html>

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-004.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: margin-box</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/004.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 100px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: margin-box; }
</style>
</head>
<body>
<p>Boxes should not overlap and should always stay 1em apart (-moz-float-edge: margin-box)</p>
<div class="left">left</div>
<div class="center">center</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-005.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: content-box and alignment</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/005.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 300px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: content-box; }
</style>
</head>
<body>
<p>Normal Behaviour (-moz-float-edge: content-box) -- the box should
be centered relative to the viewport width and not the remaining
space.</p>
<div class="left">left</div>
<div class="center">center</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-006.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: padding-box and alignment</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/006.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 300px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: padding-box; }
</style>
</head>
<body>
<p>-moz-float-edge: padding-box -- the box should be centered
relative to the remaining space (ignoring the border) and not the
viewport.</p>
<div class="left">left</div>
<div class="center">center</div>
</body>
</html>

20
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-007.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: border-box and alignment</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/007.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 300px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: border-box; }
</style>
</head>
<body>
<p>-moz-float-edge: border-box -- the box should be centered
relative to the visible remaining space and not the viewport.</p>
<div class="left">left</div>
<div class="center">center</div>
</body>
</html>

22
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-008.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: margin-box and alignment</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/008.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 300px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: margin-box; }
</style>
</head>
<body>
<p>-moz-float-edge: margin-box -- the box should be centered
relative to the remaining space and not the viewport (note that the
float has 1em margins so the remaining space should be less than it
appears).</p>
<div class="left">left</div>
<div class="center">center</div>
</body>
</html>

23
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-009.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: content-box and alignment (right)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/009.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.right { float: right; margin: 1em; width: 300px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: content-box; }
</style>
</head>
<body>
<p>-moz-float-edge: content-box -- default behaviour. The center box
should be centered relative to the viewport. The center box should
not get inexplicably taller until the right floater is overlapping
it. The box should overlap the floater if needed, but the text
should flow around it.</p>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-010.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: padding-box and alignment (right)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/010.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.right { float: right; margin: 1em; width: 300px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: padding-box; }
</style>
</head>
<body>
<p>-moz-float-edge: padding-box -- the center box should be centered
relative to the remaining space and not the viewport. The center box
should not get inexplicably taller until the right floater is
touching it. (This should be identical to the margin-box case except
that the "remaining space" is determined from the padding edge not
the margin edge.)</p>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-011.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: border-box and alignment (right)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/011.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.right { float: right; margin: 1em; width: 300px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: border-box; }
</style>
</head>
<body>
<p>-moz-float-edge: border-box -- the center box should be centered
relative to the remaining space and not the viewport. The center box
should not get inexplicably taller until the right floater is
touching it. (This should be identical to the margin-box case except
that the "remaining space" is determined from the border edge not
the margin edge.)</p>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>

22
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-012.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: margin-box and alignment (right)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/012.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.right { float: right; margin: 1em; width: 300px; }
.center { margin: 1em auto; width: 100px; -moz-float-edge: margin-box; }
</style>
</head>
<body>
<p>-moz-float-edge: margin-box -- the center box should be centered
relative to the remaining space and not the viewport. The center box
should not get inexplicably taller until the right floater is
touching it.</p>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-013.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: content-box and unconstrained boxes</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/013.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 100px; }
.normal { margin: 1em 0; -moz-float-edge: content-box; }
</style>
</head>
<body>
<p>Normal Behaviour (-moz-float-edge: content-box) -- floater should
be under the normal block but normal block text should wrap around
the floater.</p>
<div class="left">left</div>
<div class="normal">normal block</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-016.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: margin-box and unconstrained boxes</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/016.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.left { float: left; margin: 1em; width: 100px; }
.normal { margin: 1em 0; -moz-float-edge: margin-box; }
</style>
</head>
<body>
<p>Normal Behaviour (-moz-float-edge: margin-box) -- floater should
be to the left of the normal block, normal block should be 1em away
from the floater and fill the rest of the viewport.</p>
<div class="left">left</div>
<div class="normal">normal block</div>
</body>
</html>

21
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-020.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mozilla CSS: -moz-float-edge: margin-box and unconstrained boxes (right)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/float-edge/020.html"/>
<style type="text/css">
p { margin: 0; }
div { border: ridge; }
.right { float: right; margin: 1em; width: 100px; }
.normal { margin: 1em 0; -moz-float-edge: margin-box; }
</style>
</head>
<body>
<p>Normal Behaviour (-moz-float-edge: margin-box) -- floater should
be to the right of the normal block, normal block should be 1em away
from the floater and fill the rest of the viewport.</p>
<div class="right">right</div>
<div class="normal">normal block</div>
</body>
</html>

2
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-box/mozilla-float-edge-README Normal file
View file

@ -0,0 +1,2 @@
Note: It would be wise to collapse your navigation bar when testing
this so that the document can collapse all the way.

16
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/box-inline-mozilla-001.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>CSS Inline Box Model: Layering Model</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/inline/mozilla/001.html"/>
<style type="text/css">
img { border-bottom: 1em solid green; vertical-align: text-bottom; }
span { background: red; -moz-opacity: 0.99; }
</style>
</head>
<body>
<p>Test: <span><img src="support/cat.png" alt="image"></span></p>
<p>Astrophy should be sitting on a green bar.</p>
</body>
</html>

14
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/hsl-colors.xht Normal file
View file

@ -0,0 +1,14 @@
<!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" lang="en">
<head>
<title>CSS Colours: HSL</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/color/005.html"/>
<style type="text/css">
p { color: hsl(120, 50%, 50%); font-weight: bold; }
</style>
</head>
<body>
<p>This text should be green.</p>
</body>
</html>

38
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/model-stacking-opacity-001.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>CSS Stacking Context Model: Opacity (Evil test)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/model/stacking/opacity/001.html"/>
<style type="text/css">
.block { height: 1em; width: 4em; display: block; }
.float { height: 1em; width: 4em; float: left; margin-bottom: -1em; }
.inline { display: inline; }
.spacer { padding: 0.4em 1.9em; height: 0.2em; width: 0.2em; vertical-align: bottom; }
div { background: red; font: 1em/1 Ahem, monospace; }
.block-control.block, .float-control.float, .inline-control.inline, .test.float { background: green; }
.test.float { opacity: 0.99; }
.fail.condition { color: yellow; background: red; } /* test for multiclass bug */
</style>
</head>
<body>
<p class="pass condition">There should be a single green square below.</p>
<div class="block-control block">
</div>
<div class="float-control block">
<div class="float-control float"></div>
</div>
<div class="inline-control block">
<div class="inline-control float"></div>
<div class="inline-control inline">
<img src="support/1x1-green.png" class="spacer" alt="FAIL">
</div>
</div>
<div class="test block">
<div class="test float"></div>
<div class="test inline">
<img src="support/1x1-green.png" class="spacer" alt="FAIL">
</div>
</div>
</body>
</html>

17
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-000.xht Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>Mozilla CSS: -moz-opacity and text</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/001.html"/>
<style type="text/css">
div { font: 900 5em serif; }
.a { -moz-opacity: 0.999; }
.b { -moz-opacity: 1.000; }
</style>
</head>
<body>
<div class="a">WWW</div>
<div class="b">WWW</div>
</body>
</html>

39
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-001.xml Normal file
View file

@ -0,0 +1,39 @@
<!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: -moz-opacity with PNG backgrounds</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/opacity/001.xml"/>
<style type="text/css">
.left {
background: url(mozilla-opacity-black-0.0-0.5-h.png) center center no-repeat;
-moz-opacity: 0.50; z-index: 1;
}
.right {
background: url(mozilla-opacity-black-0.5-0.0-h.png) center center no-repeat;
-moz-opacity: 1.00; z-index: 0;
}
.gradient {
border: 2px solid; width: 500px; height: 250px; position: absolute;
}
.control {
border: 2px solid; background: rgb(50%, 50%, 50%); width: 500px; height: 250px;
position: absolute; margin-top: 260px;
}
body {
background: white; color: black;
}
</style>
</head>
<body>
<h1>This test is apparently invalid!</h1>
<p>The following two blocks should look IDENTICAL in every way. I
would recommend taking a screen shot and programmatically comparing
them to be quite, quite sure! (Note. I have yet to hear a colour and
blending expert say that this test is valid. I have no idea about
these issues, so I may be spouting nonsense here.)</p>
<div class="right gradient"/>
<div class="left gradient"/>
<div class="control"/>
</body>
</html>

18
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-002.xml Normal file
View file

@ -0,0 +1,18 @@
<!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: -moz-opacity with a stretched smooth PNG</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/opacity/002.xml"/>
<style type="text/css">
img { position: fixed; left: 0; bottom: 0; right: 0; top: 0; -moz-opacity: 0.555; }
p { font: 900 2em sans-serif; margin: 1em; }
</style>
</head>
<body>
<div><img src="black-0.5-0.0-h.png" alt="This is an image test."/></div>
<p>This page has a gradient background stretched to fit the
viewport. It should be completely smooth. Resize your window to test
performance.</p>
</body>
</html>

27
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-003.xml Normal file
View file

@ -0,0 +1,27 @@
<!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: -moz-opacity with glyphs and transparent PNG backgrounds</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/opacity/003.xml"/>
<style type="text/css">
body { background: white url(mozilla-opacity-black-0.5-0.0-h.png) repeat-y fixed; color: black; }
p { font: 900 2em sans-serif; margin: 1em; }
div { font: 900 9em sans-serif; margin: 0 0.5em; line-height: 1.0; }
</style>
</head>
<body>
<p>The following glyphs have varying levels of opacity.</p>
<div style="-moz-opacity: 1.0">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.9">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.8">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.7">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.6">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.5">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.4">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.3">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.2">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.1">W&#x05E9;&#x063A;</div>
<div style="-moz-opacity: 0.0">W&#x05E9;&#x063A;</div>
</body>
</html>

18
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-004.xml Normal file
View file

@ -0,0 +1,18 @@
<!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: -moz-opacity nesting</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/opacity/004.xml"/>
<style type="text/css">
.half { -moz-opacity: 0.5; }
span { -moz-opacity: 1.0; }
</style>
</head>
<body>
<p>The "X"s in the middle of the following block should be darker than those on the edges.</p>
<div><span class="half">XXX<span class="half">XXX<span class="half">XXX</span>XXX</span>XXX</span></div>
<div><span class="half">XXX<span>XXX<span>XXX</span>XXX</span>XXX</span></div>
<div><span class="half">XXX<span class="half">XXX<span class="half">XXX</span>XXX</span>XXX</span></div>
</body>
</html>

18
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-005.xml Normal file
View file

@ -0,0 +1,18 @@
<!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: transparent text over a stretched smooth alpha transparent PNG</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/opacity/005.xml"/>
<style type="text/css">
img { position: fixed; left: 0; bottom: 0; right: 0; top: 0; }
p { font: 900 2em sans-serif; margin: 1em; -moz-opacity: 0.555; }
</style>
</head>
<body>
<div><img src="black-0.5-0.0-h.png" alt="This is an image test."/></div>
<p>This page has a gradient background stretched to fit the
viewport. It should be completely smooth. Resize your window to test
performance.</p>
</body>
</html>

18
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-006.xml Normal file
View file

@ -0,0 +1,18 @@
<!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: text over a stretched smooth alpha transparent PNG (no opacity -- control)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/opacity/006.xml"/>
<style type="text/css">
img { position: fixed; left: 0; bottom: 0; right: 0; top: 0; }
p { font: 900 2em sans-serif; margin: 1em; }
</style>
</head>
<body>
<div><img src="black-0.5-0.0-h.png" alt="This is an image test."/></div>
<p>This page has a gradient background stretched to fit the
viewport. It should be completely smooth. Resize your window to test
performance.</p>
</body>
</html>

18
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-007.xml Normal file
View file

@ -0,0 +1,18 @@
<!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: simple -moz-opacity test</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/mozilla/opacity/007.xml"/>
<style type="text/css">
div { position: absolute; width: 5em; height: 2.5em; }
.a { background: green; }
.b { background: red; -moz-opacity: 0; }
</style>
</head>
<body>
<p>The following block should be green:</p>
<div class="a"/>
<div class="b"/>
</body>
</html>

3
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-README Normal file
View file

@ -0,0 +1,3 @@
WARNING! These tests are not simple QA tests, they are of a more
exploratory nature. Careful judgement will have to be made when
determining the result of running these tests.

BIN
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-black-0.0-0.5-h.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/mozilla-opacity-black-0.5-0.0-h.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

605
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-color/x11-colors.xht Normal file
View file

@ -0,0 +1,605 @@
<!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>
<title>The X11 Colours</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/color/006.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#colors" />
<style type="text/css">
.c { width: 2em; }
</style>
</head>
<body>
<p>The first two columns should be identical.</p>
<table class="x11colortable">
<tr>
<td class="c" style="background:aliceblue">&nbsp;
<td class="c" style="background:#f0f8ff">&nbsp;
<td>aliceblue
<tr>
<td class="c" style="background:antiquewhite">&nbsp;
<td class="c" style="background:#faebd7">&nbsp;
<td>antiquewhite
<tr>
<td class="c" style="background:aqua">&nbsp;
<td class="c" style="background:#00ffff">&nbsp;
<td>aqua
<tr>
<td class="c" style="background:aquamarine">&nbsp;
<td class="c" style="background:#7fffd4">&nbsp;
<td>aquamarine
<tr>
<td class="c" style="background:azure">&nbsp;
<td class="c" style="background:#f0ffff">&nbsp;
<td>azure
<tr>
<td class="c" style="background:beige">&nbsp;
<td class="c" style="background:#f5f5dc">&nbsp;
<td>beige
<tr>
<td class="c" style="background:bisque">&nbsp;
<td class="c" style="background:#ffe4c4">&nbsp;
<td>bisque
<tr>
<td class="c" style="background:black">&nbsp;
<td class="c" style="background:#000000">&nbsp;
<td>black
<tr>
<td class="c" style="background:blanchedalmond">&nbsp;
<td class="c" style="background:#ffebcd">&nbsp;
<td>blanchedalmond
<tr>
<td class="c" style="background:blue">&nbsp;
<td class="c" style="background:#0000ff">&nbsp;
<td>blue
<tr>
<td class="c" style="background:blueviolet">&nbsp;
<td class="c" style="background:#8a2be2">&nbsp;
<td>blueviolet
<tr>
<td class="c" style="background:brown">&nbsp;
<td class="c" style="background:#a52a2a">&nbsp;
<td>brown
<tr>
<td class="c" style="background:burlywood">&nbsp;
<td class="c" style="background:#deb887">&nbsp;
<td>burlywood
<tr>
<td class="c" style="background:cadetblue">&nbsp;
<td class="c" style="background:#5f9ea0">&nbsp;
<td>cadetblue
<tr>
<td class="c" style="background:chartreuse">&nbsp;
<td class="c" style="background:#7fff00">&nbsp;
<td>chartreuse
<tr>
<td class="c" style="background:chocolate">&nbsp;
<td class="c" style="background:#d2691e">&nbsp;
<td>chocolate
<tr>
<td class="c" style="background:coral">&nbsp;
<td class="c" style="background:#ff7f50">&nbsp;
<td>coral
<tr>
<td class="c" style="background:cornflowerblue">&nbsp;
<td class="c" style="background:#6495ed">&nbsp;
<td>cornflowerblue
<tr>
<td class="c" style="background:cornsilk">&nbsp;
<td class="c" style="background:#fff8dc">&nbsp;
<td>cornsilk
<tr>
<td class="c" style="background:crimson">&nbsp;
<td class="c" style="background:#dc143c">&nbsp;
<td>crimson
<tr>
<td class="c" style="background:cyan">&nbsp;
<td class="c" style="background:#00ffff">&nbsp;
<td>cyan
<tr>
<td class="c" style="background:darkblue">&nbsp;
<td class="c" style="background:#00008b">&nbsp;
<td>darkblue
<tr>
<td class="c" style="background:darkcyan">&nbsp;
<td class="c" style="background:#008b8b">&nbsp;
<td>darkcyan
<tr>
<td class="c" style="background:darkgoldenrod">&nbsp;
<td class="c" style="background:#b8860b">&nbsp;
<td>darkgoldenrod
<tr>
<td class="c" style="background:darkgray">&nbsp;
<td class="c" style="background:#a9a9a9">&nbsp;
<td>darkgray
<tr>
<td class="c" style="background:darkgreen">&nbsp;
<td class="c" style="background:#006400">&nbsp;
<td>darkgreen
<tr>
<td class="c" style="background:darkgrey">&nbsp;
<td class="c" style="background:#a9a9a9">&nbsp;
<td>darkgrey
<tr>
<td class="c" style="background:darkkhaki">&nbsp;
<td class="c" style="background:#bdb76b">&nbsp;
<td>darkkhaki
<tr>
<td class="c" style="background:darkmagenta">&nbsp;
<td class="c" style="background:#8b008b">&nbsp;
<td>darkmagenta
<tr>
<td class="c" style="background:darkolivegreen">&nbsp;
<td class="c" style="background:#556b2f">&nbsp;
<td>darkolivegreen
<tr>
<td class="c" style="background:darkorange">&nbsp;
<td class="c" style="background:#ff8c00">&nbsp;
<td>darkorange
<tr>
<td class="c" style="background:darkorchid">&nbsp;
<td class="c" style="background:#9932cc">&nbsp;
<td>darkorchid
<tr>
<td class="c" style="background:darkred">&nbsp;
<td class="c" style="background:#8b0000">&nbsp;
<td>darkred
<tr>
<td class="c" style="background:darksalmon">&nbsp;
<td class="c" style="background:#e9967a">&nbsp;
<td>darksalmon
<tr>
<td class="c" style="background:darkseagreen">&nbsp;
<td class="c" style="background:#8fbc8f">&nbsp;
<td>darkseagreen
<tr>
<td class="c" style="background:darkslateblue">&nbsp;
<td class="c" style="background:#483d8b">&nbsp;
<td>darkslateblue
<tr>
<td class="c" style="background:darkslategray">&nbsp;
<td class="c" style="background:#2f4f4f">&nbsp;
<td>darkslategray
<tr>
<td class="c" style="background:darkslategrey">&nbsp;
<td class="c" style="background:#2f4f4f">&nbsp;
<td>darkslategrey
<tr>
<td class="c" style="background:darkturquoise">&nbsp;
<td class="c" style="background:#00ced1">&nbsp;
<td>darkturquoise
<tr>
<td class="c" style="background:darkviolet">&nbsp;
<td class="c" style="background:#9400d3">&nbsp;
<td>darkviolet
<tr>
<td class="c" style="background:deeppink">&nbsp;
<td class="c" style="background:#ff1493">&nbsp;
<td>deeppink
<tr>
<td class="c" style="background:deepskyblue">&nbsp;
<td class="c" style="background:#00bfff">&nbsp;
<td>deepskyblue
<tr>
<td class="c" style="background:dimgray">&nbsp;
<td class="c" style="background:#696969">&nbsp;
<td>dimgray
<tr>
<td class="c" style="background:dimgrey">&nbsp;
<td class="c" style="background:#696969">&nbsp;
<td>dimgrey
<tr>
<td class="c" style="background:dodgerblue">&nbsp;
<td class="c" style="background:#1e90ff">&nbsp;
<td>dodgerblue
<tr>
<td class="c" style="background:firebrick">&nbsp;
<td class="c" style="background:#b22222">&nbsp;
<td>firebrick
<tr>
<td class="c" style="background:floralwhite">&nbsp;
<td class="c" style="background:#fffaf0">&nbsp;
<td>floralwhite
<tr>
<td class="c" style="background:forestgreen">&nbsp;
<td class="c" style="background:#228b22">&nbsp;
<td>forestgreen
<tr>
<td class="c" style="background:fuchsia">&nbsp;
<td class="c" style="background:#ff00ff">&nbsp;
<td>fuchsia
<tr>
<td class="c" style="background:gainsboro">&nbsp;
<td class="c" style="background:#dcdcdc">&nbsp;
<td>gainsboro
<tr>
<td class="c" style="background:ghostwhite">&nbsp;
<td class="c" style="background:#f8f8ff">&nbsp;
<td>ghostwhite
<tr>
<td class="c" style="background:gold">&nbsp;
<td class="c" style="background:#ffd700">&nbsp;
<td>gold
<tr>
<td class="c" style="background:goldenrod">&nbsp;
<td class="c" style="background:#daa520">&nbsp;
<td>goldenrod
<tr>
<td class="c" style="background:gray">&nbsp;
<td class="c" style="background:#808080">&nbsp;
<td>gray
<tr>
<td class="c" style="background:green">&nbsp;
<td class="c" style="background:#008000">&nbsp;
<td>green
<tr>
<td class="c" style="background:greenyellow">&nbsp;
<td class="c" style="background:#adff2f">&nbsp;
<td>greenyellow
<tr>
<td class="c" style="background:grey">&nbsp;
<td class="c" style="background:#808080">&nbsp;
<td>grey
<tr>
<td class="c" style="background:honeydew">&nbsp;
<td class="c" style="background:#f0fff0">&nbsp;
<td>honeydew
<tr>
<td class="c" style="background:hotpink">&nbsp;
<td class="c" style="background:#ff69b4">&nbsp;
<td>hotpink
<tr>
<td class="c" style="background:indianred">&nbsp;
<td class="c" style="background:#cd5c5c">&nbsp;
<td>indianred
<tr>
<td class="c" style="background:indigo">&nbsp;
<td class="c" style="background:#4b0082">&nbsp;
<td>indigo
<tr>
<td class="c" style="background:ivory">&nbsp;
<td class="c" style="background:#fffff0">&nbsp;
<td>ivory
<tr>
<td class="c" style="background:khaki">&nbsp;
<td class="c" style="background:#f0e68c">&nbsp;
<td>khaki
<tr>
<td class="c" style="background:lavender">&nbsp;
<td class="c" style="background:#e6e6fa">&nbsp;
<td>lavender
<tr>
<td class="c" style="background:lavenderblush">&nbsp;
<td class="c" style="background:#fff0f5">&nbsp;
<td>lavenderblush
<tr>
<td class="c" style="background:lawngreen">&nbsp;
<td class="c" style="background:#7cfc00">&nbsp;
<td>lawngreen
<tr>
<td class="c" style="background:lemonchiffon">&nbsp;
<td class="c" style="background:#fffacd">&nbsp;
<td>lemonchiffon
<tr>
<td class="c" style="background:lightblue">&nbsp;
<td class="c" style="background:#add8e6">&nbsp;
<td>lightblue
<tr>
<td class="c" style="background:lightcoral">&nbsp;
<td class="c" style="background:#f08080">&nbsp;
<td>lightcoral
<tr>
<td class="c" style="background:lightcyan">&nbsp;
<td class="c" style="background:#e0ffff">&nbsp;
<td>lightcyan
<tr>
<td class="c" style="background:lightgoldenrodyellow">&nbsp;
<td class="c" style="background:#fafad2">&nbsp;
<td>lightgoldenrodyellow
<tr>
<td class="c" style="background:lightgray">&nbsp;
<td class="c" style="background:#d3d3d3">&nbsp;
<td>lightgray
<tr>
<td class="c" style="background:lightgreen">&nbsp;
<td class="c" style="background:#90ee90">&nbsp;
<td>lightgreen
<tr>
<td class="c" style="background:lightgrey">&nbsp;
<td class="c" style="background:#d3d3d3">&nbsp;
<td>lightgrey
<tr>
<td class="c" style="background:lightpink">&nbsp;
<td class="c" style="background:#ffb6c1">&nbsp;
<td>lightpink
<tr>
<td class="c" style="background:lightsalmon">&nbsp;
<td class="c" style="background:#ffa07a">&nbsp;
<td>lightsalmon
<tr>
<td class="c" style="background:lightseagreen">&nbsp;
<td class="c" style="background:#20b2aa">&nbsp;
<td>lightseagreen
<tr>
<td class="c" style="background:lightskyblue">&nbsp;
<td class="c" style="background:#87cefa">&nbsp;
<td>lightskyblue
<tr>
<td class="c" style="background:lightslategray">&nbsp;
<td class="c" style="background:#778899">&nbsp;
<td>lightslategray
<tr>
<td class="c" style="background:lightslategrey">&nbsp;
<td class="c" style="background:#778899">&nbsp;
<td>lightslategrey
<tr>
<td class="c" style="background:lightsteelblue">&nbsp;
<td class="c" style="background:#b0c4de">&nbsp;
<td>lightsteelblue
<tr>
<td class="c" style="background:lightyellow">&nbsp;
<td class="c" style="background:#ffffe0">&nbsp;
<td>lightyellow
<tr>
<td class="c" style="background:lime">&nbsp;
<td class="c" style="background:#00ff00">&nbsp;
<td>lime
<tr>
<td class="c" style="background:limegreen">&nbsp;
<td class="c" style="background:#32cd32">&nbsp;
<td>limegreen
<tr>
<td class="c" style="background:linen">&nbsp;
<td class="c" style="background:#faf0e6">&nbsp;
<td>linen
<tr>
<td class="c" style="background:magenta">&nbsp;
<td class="c" style="background:#ff00ff">&nbsp;
<td>magenta
<tr>
<td class="c" style="background:maroon">&nbsp;
<td class="c" style="background:#800000">&nbsp;
<td>maroon
<tr>
<td class="c" style="background:mediumaquamarine">&nbsp;
<td class="c" style="background:#66cdaa">&nbsp;
<td>mediumaquamarine
<tr>
<td class="c" style="background:mediumblue">&nbsp;
<td class="c" style="background:#0000cd">&nbsp;
<td>mediumblue
<tr>
<td class="c" style="background:mediumorchid">&nbsp;
<td class="c" style="background:#ba55d3">&nbsp;
<td>mediumorchid
<tr>
<td class="c" style="background:mediumpurple">&nbsp;
<td class="c" style="background:#9370db">&nbsp;
<td>mediumpurple
<tr>
<td class="c" style="background:mediumseagreen">&nbsp;
<td class="c" style="background:#3cb371">&nbsp;
<td>mediumseagreen
<tr>
<td class="c" style="background:mediumslateblue">&nbsp;
<td class="c" style="background:#7b68ee">&nbsp;
<td>mediumslateblue
<tr>
<td class="c" style="background:mediumspringgreen">&nbsp;
<td class="c" style="background:#00fa9a">&nbsp;
<td>mediumspringgreen
<tr>
<td class="c" style="background:mediumturquoise">&nbsp;
<td class="c" style="background:#48d1cc">&nbsp;
<td>mediumturquoise
<tr>
<td class="c" style="background:mediumvioletred">&nbsp;
<td class="c" style="background:#c71585">&nbsp;
<td>mediumvioletred
<tr>
<td class="c" style="background:midnightblue">&nbsp;
<td class="c" style="background:#191970">&nbsp;
<td>midnightblue
<tr>
<td class="c" style="background:mintcream">&nbsp;
<td class="c" style="background:#f5fffa">&nbsp;
<td>mintcream
<tr>
<td class="c" style="background:mistyrose">&nbsp;
<td class="c" style="background:#ffe4e1">&nbsp;
<td>mistyrose
<tr>
<td class="c" style="background:moccasin">&nbsp;
<td class="c" style="background:#ffe4b5">&nbsp;
<td>moccasin
<tr>
<td class="c" style="background:navajowhite">&nbsp;
<td class="c" style="background:#ffdead">&nbsp;
<td>navajowhite
<tr>
<td class="c" style="background:navy">&nbsp;
<td class="c" style="background:#000080">&nbsp;
<td>navy
<tr>
<td class="c" style="background:oldlace">&nbsp;
<td class="c" style="background:#fdf5e6">&nbsp;
<td>oldlace
<tr>
<td class="c" style="background:olive">&nbsp;
<td class="c" style="background:#808000">&nbsp;
<td>olive
<tr>
<td class="c" style="background:olivedrab">&nbsp;
<td class="c" style="background:#6b8e23">&nbsp;
<td>olivedrab
<tr>
<td class="c" style="background:orange">&nbsp;
<td class="c" style="background:#ffa500">&nbsp;
<td>orange
<tr>
<td class="c" style="background:orangered">&nbsp;
<td class="c" style="background:#ff4500">&nbsp;
<td>orangered
<tr>
<td class="c" style="background:orchid">&nbsp;
<td class="c" style="background:#da70d6">&nbsp;
<td>orchid
<tr>
<td class="c" style="background:palegoldenrod">&nbsp;
<td class="c" style="background:#eee8aa">&nbsp;
<td>palegoldenrod
<tr>
<td class="c" style="background:palegreen">&nbsp;
<td class="c" style="background:#98fb98">&nbsp;
<td>palegreen
<tr>
<td class="c" style="background:paleturquoise">&nbsp;
<td class="c" style="background:#afeeee">&nbsp;
<td>paleturquoise
<tr>
<td class="c" style="background:palevioletred">&nbsp;
<td class="c" style="background:#db7093">&nbsp;
<td>palevioletred
<tr>
<td class="c" style="background:papayawhip">&nbsp;
<td class="c" style="background:#ffefd5">&nbsp;
<td>papayawhip
<tr>
<td class="c" style="background:peachpuff">&nbsp;
<td class="c" style="background:#ffdab9">&nbsp;
<td>peachpuff
<tr>
<td class="c" style="background:peru">&nbsp;
<td class="c" style="background:#cd853f">&nbsp;
<td>peru
<tr>
<td class="c" style="background:pink">&nbsp;
<td class="c" style="background:#ffc0cb">&nbsp;
<td>pink
<tr>
<td class="c" style="background:plum">&nbsp;
<td class="c" style="background:#dda0dd">&nbsp;
<td>plum
<tr>
<td class="c" style="background:powderblue">&nbsp;
<td class="c" style="background:#b0e0e6">&nbsp;
<td>powderblue
<tr>
<td class="c" style="background:purple">&nbsp;
<td class="c" style="background:#800080">&nbsp;
<td>purple
<tr>
<td class="c" style="background:red">&nbsp;
<td class="c" style="background:#ff0000">&nbsp;
<td>red
<tr>
<td class="c" style="background:rosybrown">&nbsp;
<td class="c" style="background:#bc8f8f">&nbsp;
<td>rosybrown
<tr>
<td class="c" style="background:royalblue">&nbsp;
<td class="c" style="background:#4169e1">&nbsp;
<td>royalblue
<tr>
<td class="c" style="background:saddlebrown">&nbsp;
<td class="c" style="background:#8b4513">&nbsp;
<td>saddlebrown
<tr>
<td class="c" style="background:salmon">&nbsp;
<td class="c" style="background:#fa8072">&nbsp;
<td>salmon
<tr>
<td class="c" style="background:sandybrown">&nbsp;
<td class="c" style="background:#f4a460">&nbsp;
<td>sandybrown
<tr>
<td class="c" style="background:seagreen">&nbsp;
<td class="c" style="background:#2e8b57">&nbsp;
<td>seagreen
<tr>
<td class="c" style="background:seashell">&nbsp;
<td class="c" style="background:#fff5ee">&nbsp;
<td>seashell
<tr>
<td class="c" style="background:sienna">&nbsp;
<td class="c" style="background:#a0522d">&nbsp;
<td>sienna
<tr>
<td class="c" style="background:silver">&nbsp;
<td class="c" style="background:#c0c0c0">&nbsp;
<td>silver
<tr>
<td class="c" style="background:skyblue">&nbsp;
<td class="c" style="background:#87ceeb">&nbsp;
<td>skyblue
<tr>
<td class="c" style="background:slateblue">&nbsp;
<td class="c" style="background:#6a5acd">&nbsp;
<td>slateblue
<tr>
<td class="c" style="background:slategray">&nbsp;
<td class="c" style="background:#708090">&nbsp;
<td>slategray
<tr>
<td class="c" style="background:slategrey">&nbsp;
<td class="c" style="background:#708090">&nbsp;
<td>slategrey
<tr>
<td class="c" style="background:snow">&nbsp;
<td class="c" style="background:#fffafa">&nbsp;
<td>snow
<tr>
<td class="c" style="background:springgreen">&nbsp;
<td class="c" style="background:#00ff7f">&nbsp;
<td>springgreen
<tr>
<td class="c" style="background:steelblue">&nbsp;
<td class="c" style="background:#4682b4">&nbsp;
<td>steelblue
<tr>
<td class="c" style="background:tan">&nbsp;
<td class="c" style="background:#d2b48c">&nbsp;
<td>tan
<tr>
<td class="c" style="background:teal">&nbsp;
<td class="c" style="background:#008080">&nbsp;
<td>teal
<tr>
<td class="c" style="background:thistle">&nbsp;
<td class="c" style="background:#d8bfd8">&nbsp;
<td>thistle
<tr>
<td class="c" style="background:tomato">&nbsp;
<td class="c" style="background:#ff6347">&nbsp;
<td>tomato
<tr>
<td class="c" style="background:turquoise">&nbsp;
<td class="c" style="background:#40e0d0">&nbsp;
<td>turquoise
<tr>
<td class="c" style="background:violet">&nbsp;
<td class="c" style="background:#ee82ee">&nbsp;
<td>violet
<tr>
<td class="c" style="background:wheat">&nbsp;
<td class="c" style="background:#f5deb3">&nbsp;
<td>wheat
<tr>
<td class="c" style="background:white">&nbsp;
<td class="c" style="background:#ffffff">&nbsp;
<td>white
<tr>
<td class="c" style="background:whitesmoke">&nbsp;
<td class="c" style="background:#f5f5f5">&nbsp;
<td>whitesmoke
<tr>
<td class="c" style="background:yellow">&nbsp;
<td class="c" style="background:#ffff00">&nbsp;
<td>yellow
<tr>
<td class="c" style="background:yellowgreen">&nbsp;
<td class="c" style="background:#9acd32">&nbsp;
<td>yellowgreen
</table>
</body>
</html>

21
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-001.xht Normal file
View file

@ -0,0 +1,21 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS font-size-adjust: Basics</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/adjust/001.xml"/>
<style type="text/css">
div { font-family: Verdana; font-size: 1px; font-size-adjust: 100; }
</style>
</head>
<body>
<p>This test case should have a big word below.</p>
<div>
<!-- Verdana has an ex-height:em-height ratio of 0.55, and
therefore the ACTUAL font-size is 1px*(100/0.55) = 181px,
because the font-size-adjust is applied to the first font
even if the first font is available and font-size-adjust
was not inherited. -->
PASS
</div>
</body>
</html>

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-002.xht Normal file
View file

@ -0,0 +1,19 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS font-size-adjust: Inheritance and Parental Influence</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/adjust/002.xml"/>
<style type="text/css">
div { font-family: Verdana; font-size: 1px; }
.a { font-size-adjust: 1; } /* not used by anything in this test case */
.a span, .b, .b span, .c { font-size-adjust: 20; }
</style>
</head>
<body>
<p>There are three lines that should say "pass" in large 20px text below:</p>
<div class="a"> <span>PASS 1/3</span> </div>
<div class="b"> <span>PASS 2/3</span> </div>
<div class="c"> <span>PASS 3/3</span> </div>
<!-- XXX this should be converted to an Ahem test -->
</body>
</html>

27
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-003.xht Normal file
View file

@ -0,0 +1,27 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS font-size-adjust: 'normal' line-height calculations</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/adjust/003.xml"/>
<style type="text/css">
div { font: 1px/normal sans-serif; font-size-adjust: 20; }
</style>
</head>
<body>
<div>There should be no overlap on this page at all. The lines
should be well spread out. There is nothing interesting to read
beyond this point. There should be no overlap on this page at
all. The lines should be well spread out. No, really, there is
nothing interesting to read beyond this point. There should be no
overlap on this page at all. The lines should be well spread
out. Look, do you not believe me? There is absolutely nothing
interesting to read beyond this point. There should be no overlap on
this page at all. The lines should be well spread out. What is wrong
with you! Nothing here is interesting. There should be no overlap on
this page at all. The lines should be well spread out. Look, just
stop reading. There should be no overlap on this page at all. The
lines should be well spread out.</div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-004.xht Normal file
View file

@ -0,0 +1,27 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS font-size-adjust: line-height ratio calculations</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/adjust/004.xml"/>
<style type="text/css">
div { font: 1px/2 sans-serif; font-size-adjust: 20; }
</style>
</head>
<body>
<div>There should be no overlap on this page at all. The lines
should be well spread out. There is nothing interesting to read
beyond this point. There should be no overlap on this page at
all. The lines should be well spread out. No, really, there is
nothing interesting to read beyond this point. There should be no
overlap on this page at all. The lines should be well spread
out. Look, do you not believe me? There is absolutely nothing
interesting to read beyond this point. There should be no overlap on
this page at all. The lines should be well spread out. What is wrong
with you! Nothing here is interesting. There should be no overlap on
this page at all. The lines should be well spread out. Look, just
stop reading. There should be no overlap on this page at all. The
lines should be well spread out.</div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-005.xht Normal file
View file

@ -0,0 +1,27 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS font-size-adjust: line-height percentage calculations</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/adjust/005.xml"/>
<style type="text/css">
div { font: 1px/200% sans-serif; font-size-adjust: 20; }
</style>
</head>
<body>
<div>There should be no overlap on this page at all. The lines
should be well spread out. There is nothing interesting to read
beyond this point. There should be no overlap on this page at
all. The lines should be well spread out. No, really, there is
nothing interesting to read beyond this point. There should be no
overlap on this page at all. The lines should be well spread
out. Look, do you not believe me? There is absolutely nothing
interesting to read beyond this point. There should be no overlap on
this page at all. The lines should be well spread out. What is wrong
with you! Nothing here is interesting. There should be no overlap on
this page at all. The lines should be well spread out. Look, just
stop reading. There should be no overlap on this page at all. The
lines should be well spread out.</div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-006.xht Normal file
View file

@ -0,0 +1,27 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS font-size-adjust: line-height 'em' calculations</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/adjust/006.xml"/>
<style type="text/css">
div { font: 1px/2em sans-serif; font-size-adjust: 20; }
</style>
</head>
<body>
<div>There should be no overlap on this page at all. The lines
should be well spread out. There is nothing interesting to read
beyond this point. There should be no overlap on this page at
all. The lines should be well spread out. No, really, there is
nothing interesting to read beyond this point. There should be no
overlap on this page at all. The lines should be well spread
out. Look, do you not believe me? There is absolutely nothing
interesting to read beyond this point. There should be no overlap on
this page at all. The lines should be well spread out. What is wrong
with you! Nothing here is interesting. There should be no overlap on
this page at all. The lines should be well spread out. Look, just
stop reading. There should be no overlap on this page at all. The
lines should be well spread out.</div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-007.xht Normal file
View file

@ -0,0 +1,27 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS font-size-adjust: line-height 'ex' calculations</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/adjust/007.xml"/>
<style type="text/css">
div { font: 1px/4ex sans-serif; font-size-adjust: 20; }
</style>
</head>
<body>
<div>There should be no overlap on this page at all. The lines
should be well spread out. There is nothing interesting to read
beyond this point. There should be no overlap on this page at
all. The lines should be well spread out. No, really, there is
nothing interesting to read beyond this point. There should be no
overlap on this page at all. The lines should be well spread
out. Look, do you not believe me? There is absolutely nothing
interesting to read beyond this point. There should be no overlap on
this page at all. The lines should be well spread out. What is wrong
with you! Nothing here is interesting. There should be no overlap on
this page at all. The lines should be well spread out. Look, just
stop reading. There should be no overlap on this page at all. The
lines should be well spread out.</div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-008.xht Normal file
View file

@ -0,0 +1,27 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS font-size-adjust: line-height 'px' calculations</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/adjust/008.xml"/>
<style type="text/css">
div { font: 1px/40px sans-serif; font-size-adjust: 20; }
</style>
</head>
<body>
<div>There should be no overlap on this page at all. The lines
should be well spread out. There is nothing interesting to read
beyond this point. There should be no overlap on this page at
all. The lines should be well spread out. No, really, there is
nothing interesting to read beyond this point. There should be no
overlap on this page at all. The lines should be well spread
out. Look, do you not believe me? There is absolutely nothing
interesting to read beyond this point. There should be no overlap on
this page at all. The lines should be well spread out. What is wrong
with you! Nothing here is interesting. There should be no overlap on
this page at all. The lines should be well spread out. Look, just
stop reading. There should be no overlap on this page at all. The
lines should be well spread out.</div>
</body>
</html>

15
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-009.xht Normal file
View file

@ -0,0 +1,15 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS font-size-adjust: computed 'em' calculations</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/adjust/009.xml"/>
<style type="text/css">
div { font: 1px/1 Verdana, sans-serif; font-size-adjust: 50; overflow: hidden; background: green;
height: 4em; width: 4em; border: solid lime 1em; color: yellow; }
</style>
</head>
<body>
<p>The box below should big and green and square.</p>
<div>PASS</div>
</body>
</html>

59
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-NOTES Normal file
View file

@ -0,0 +1,59 @@
(CSS has no concept of a property not being set. All properties are 'set', even
if just by virtue of having an initial value.)
I don't really understand why your change causes the difference in the
rendering. Could you explaing that a bit more?
I understand what the three renderings are, and I think the third is what we
want. Both the second and third are arguably valid interpretations of the spec.
The way we should achieve the third, however, is by using the actual font-size
(i.e. the font-size after adjustment by font-size-adjust; note that is not the
font-size that would be inherited) for the calculation of 'em' units, 'ex'
units, vertical-align and line-height percentages and line-height ratios, as
well as for the calculations of the height of the line box. This is the
opposite of what I said earlier, but in retrospect I think it is the only
sensible implementation choice. (It also turns out that this is what I said in
bug X a few months ago, so maybe when I wrote the above I was not thinking
straight or something...)
http://www.hixie.ch/tests/adhoc/css/fonts/size-adjust/009.xml
This, however, would not be fixed by your |if| statement change above, as far as
I can tell and as far as I can see using your test build. Basically, behaviour
should be nearly identical for 'line-height: normal' and 'line-height: 1.2'
except that the ratio in the first case should be taken from the fonts used in
the inline box:
http://www.hixie.ch/tests/adhoc/css/fonts/size-adjust/003.xml normal
http://www.hixie.ch/tests/adhoc/css/fonts/size-adjust/004.xml ratio
http://www.hixie.ch/tests/adhoc/css/fonts/size-adjust/005.xml %
http://www.hixie.ch/tests/adhoc/css/fonts/size-adjust/006.xml em
http://www.hixie.ch/tests/adhoc/css/fonts/size-adjust/007.xml ex
http://www.hixie.ch/tests/adhoc/css/fonts/size-adjust/008.xml px (control)
BTW I found a bug in your implementation... The two cases in the URI given below
should render identically but do not. It seems that font-size-adjust is affected
by the value on its parent element (?). font-size-adjust should only affect the
actual font-size, which will affect the cases listed above.
http://www.hixie.ch/tests/adhoc/css/fonts/size-adjust/002.xml
A second bug is that the font zoom (View | Font Size) does not seem to interact
very well with font-size-adjust. The font zoom should be a factor applied to the
font size calculation after everything else has been done, uniformly across all
fonts. (And changing the font zoom should also affect the actual font size and
thus the font size used for 'em', 'ex', '%', ratios and inline height
calculations, although we only do this right for inline height calculations
right now.) Hitting Ctrl++ and Ctrl+- a lot on a page with font-size-adjust
being used shows this problem quite clearly; e.g. on:
http://www.hixie.ch/tests/adhoc/css/fonts/size-adjust/001.xml
And finally, is it known that the font prefs dialog does not seem to have an
effect on the font picked? I'm getting Flemish Script BT being used for all my
unstyled text now. Ever tried reading a directory listing in HandScript? :-/
dbaron: I would very much appreciate your comments on this bug regarding the
issues I mention above! :-D
rbs: Have I mentioned recently how much you rock?

13
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-adjust-README Normal file
View file

@ -0,0 +1,13 @@
We need some Ahem versions of these tests to check that, assuming
font-size: 1px; font-size-adjust: 8, the following all come out as
exactly the same size:
line-height: 2;
line-height: 2em;
line-height: 200%;
line-height: 20px;
border: 20px;
Also we need checks that font-size inherits the computed value not the
actual value, and all the existing tests need Ahem versions for QA.

16
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-minimum-001.xht Normal file
View file

@ -0,0 +1,16 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS: Minimum font-size interaction</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/minimum/001.xml"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-size-props" />
<style type="text/css">
div { font-family: Verdana; }
.a { font-size: 0.01px; height: 0.5em; background: red; }
.a span { font-size: 1000em; color: green; }
</style>
</head>
<body>
<div class="a"> <span>PASS</span> </div>
</body>
</html>

27
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-fonts/font-size-minimum-002.xht Normal file
View file

@ -0,0 +1,27 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM CSS: Computed Values of 'font-size' when minimum font sizes are involved</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/size/minimum/002.xml"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-size-props" />
<style type="text/css">
#test { font-size: 1px; }
</style>
</head>
<body>
<p>The computed font-size of an element given a size of 1px is
<span id="console"/>. The result of this test is therefore a <strong
id="result"/>.</p>
<div id="test"/>
<script type="text/javascript">
<![CDATA[
var element = document.getElementById('test');
var result = document.defaultView.getComputedStyle(element, '').getPropertyValue('font-size');
document.getElementById('console').appendChild(document.createTextNode(result));
document.getElementById('result').appendChild(document.createTextNode(result == '1px' ? 'PASS' : 'FAIL'));
]]>
</script>
<p>Note: Please set a minimum font size of around 10 pixels to get a
reliable result.</p>
</body>
</html>

20
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-lists/list-marker-001.xht Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>CSS Lists: Simple Image Bullets</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/list/001.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" />
<style type="text/css">
.li { list-style: url(support/square-purple.png) disc inside; display: list-item; border: solid; }
.img { border: solid; }
</style>
</head>
<body>
<p>The following two boxes should be identical to the pixel.</p>
<table> <tr>
<td> <div class="li"></div> </td>
<td> <div class="img"><img src="support/square-purple.png" alt="FAIL"/></div> </td>
</tr> </table>
</body>
</html>

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-lists/list-marker-002.xht Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>CSS Lists: Inline Bullet Positioning 1</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/list/002.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" />
<style type="text/css">
.li { list-style: url(support/swatch-green.png) disc inside; display: list-item; background: red; }
.img { background: green; }
div { position: absolute; top: 3em; left: 3em; margin: 0; padding: 0; border: 0; font-size: 2em; }
</style>
</head>
<body>
<p>There should be no red.</p>
<div class="li"></div>
<div class="img"><img src="support/swatch-green.png" alt="FAIL"/></div>
</body>
</html>

23
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-lists/list-marker-003.xht Normal file
View file

@ -0,0 +1,23 @@
<!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>
<title>CSS Lists: Outside Bullet Effect On Line Boxes</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/list/004.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" />
<style type="text/css">
.li { list-style: url(support/1x1-white.png) disc outside; display: list-item; border: thick solid green; background: red; line-height: 1.0; }
.control { border: thick solid red; height: 1em; }
div { position: absolute; top: 0; left: 0; font-size: 3em; }
</style>
</head>
<body>
<!-- The bullet should, even though it is only a pixel high, cause a
line box to be created, and the line box should not be smaller (or,
for that matter, larger) than 1em due to the line-height
declaration. The control box should therefore be the same size. The
list item should, however, have no width, since the line box is
otherwise empty. -->
<div class="control"/> <div class="li"/>
</body>
</html>

18
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-lists/list-marker-004.xht Normal file
View file

@ -0,0 +1,18 @@
<!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>
<title>CSS Lists: Simple Image Bullets</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/list/005.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" />
<style type="text/css">
.li { list-style: url(support/cat.png) disc outside; display: list-item; margin: 100px; }
</style>
</head>
<body>
<div class="li">If there is a single cat on this page before this
text and baseline aligned with this text then this test has
passed. The horizontal space between the image and the text is
undefined.</div>
</body>
</html>

18
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-lists/list-marker-005.xht Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>CSS Lists: Inline Bullet Positioning 2</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/list/003.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" />
<style type="text/css">
.li { list-style: url(support/swatch-green.png) disc inside; display: list-item; background: green; }
.img { background: red; }
div { position: absolute; top: 3em; left: 3em; margin: 0; padding: 0; border: 0; font-size: 2em; }
</style>
</head>
<body>
<div class="img"><img src="support/swatch-green.png" alt="FAIL"/></div>
<div class="li"></div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-lists/list-style-type-hebrew-001.xht Normal file
View file

@ -0,0 +1,24 @@
<!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 Lists: Hebrew</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/list/list/style/type/001.xml"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" />
<style type="text/css">
li { list-style-type: hebrew; }
</style>
</head>
<body>
<p>The following three list numbers should be different.</p>
<ol start="5">
<li> (hebrew for 5) </li>
</ol>
<ol start="5000">
<li> (hebrew for 5000) </li>
</ol>
<ol start="5000000">
<li> (hebrew for 5000000) </li>
</ol>
</body>
</html>

39
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Collapsed borders in tables: Relative positioning, opacity, etc.</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/border-collapse/collapse/evil/001-demo.html"/>
<style type="text/css">
.block { margin: 2em; border: 0.2em solid silver; width: 20em; height: 20em; font-size: 20px; }
.table { display: table; border-collapse: collapse; border: 0.5em inset blue; height: 100%; width: 100%; text-align: center; }
.row { display: table-row; }
.cell { display: table-cell; }
.a { border: none; background: fuchsia; color: black; -moz-opacity: 0.5; opacity: 0.5; }
.b { border: 1em dotted yellow; background: navy; color: white; }
.c { border: 3em double orange; background: transparent; color: black; }
.d { border: 1em dashed aqua; background: teal; color: white; position: relative; top: 5em; left: 5em; }
</style>
</head>
<body>
<div class="block">
<div class="table">
<div class="row">
<div class="cell a"> opacity: 0.5 </div>
<div class="cell b"> B </div>
</div>
<div class="row">
<div class="cell c"> C </div>
<div class="cell d"> positioned 5em below and to the right of its original position </div>
</div>
</div>
</div>
<p>The backgrounds shouldn't go over the borders, but should fill
their entire cell. Selecting the text shouldn't make it change font.
Double borders should be pretty all the way round. The inner edge of
the gray line should go through the middle of all the outer
borders.</p>
</body>
</html>

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables/box-table-TODO Normal file
View file

@ -0,0 +1 @@
width 50% inside width auto cell

1
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables/box-table-auto-README Normal file
View file

@ -0,0 +1 @@
Table algorithm inspection files are now to be found in ../inspection/.

212
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables/box-table-inspection-inspection-auto-width-table.html Normal file
View file

@ -0,0 +1,212 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Automatic table sizing algorithm investigation (auto width tables)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/inspection/inspection-auto-width-table.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout" />
<style type="text/css">
html, body p { background: white; padding: 1.5em 1em 0.5em 1em; margin: 0; border: 0; }
body { background: url(support/horizontal-ruler) top left repeat-y; padding: 0; margin: 0; border: 0; }
body * { border: solid 3px black; }
table { width: auto; margin: 1em 0; }
td { height: 1em; }
.p100 { width: 100%; }
.p99 { width: 99%; }
.p72 { width: 72%; }
.p50 { width: 50%; }
.p45 { width: 45%; }
.p25 { width: 25%; }
.p24 { width: 24%; }
.f100 { width: 100px; }
.f200 { width: 200px; }
.f600 { width: 600px; }
</style>
</head>
<body>
<p>Blank rows have the same dimensions as the preceeding row, but with zero width spaces in the cells instead of text.</p>
<p>25% and 50%</p>
<table>
<tr>
<td class="p25">25%</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="p25">25%</td>
<td class="p25">25%</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="p25">25%</td>
<td class="p25">25%</td>
<td class="p25">25%</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="p25">25%</td>
<td class="p25">25%</td>
<td class="p25">25%</td>
<td class="p25">25%</td>
<td class="p50">50%</td>
</tr>
</table>
<p>24% and 50%</p>
<table>
<tr>
<td class="p24">24%</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p24">24%</td>
<td class="p50">50%</td>
</tr>
</table>
<p>100% and 50%</p>
<table>
<tr>
<td class="p100">100%</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="p50">50%</td>
<td class="p100">100%</td>
</tr>
</table>
<p>100% and auto</p>
<table>
<tr>
<td class="p100">100%</td>
<td class="auto">auto</td>
</tr>
</table>
<table>
<tr>
<td class="auto">auto</td>
<td class="p100">100%</td>
</tr>
</table>
<p>99% and 50%</p>
<table>
<tr>
<td class="p99">99%</td>
<td class="p50">50%</td>
</tr>
</table>
<p>odd balls</p>
<table>
<tr>
<td class="p45">45%</td>
<td class="p72">72%</td>
</tr>
</table>
<table>
<tr>
<td class="p72">72%</td>
<td class="p45">45%</td>
</tr>
</table>
<table>
<tr>
<td class="p72">72%</td>
<td class="p24">24%</td>
</tr>
</table>
<table>
<tr>
<td class="p45">45%</td>
<td class="p24">24%</td>
</tr>
</table>
<table>
<tr>
<td class="p45">45%</td>
<td class="p45">45%</td>
<td class="p24">24%</td>
</tr>
</table>
<table>
<tr>
<td class="p45">45%</td>
<td class="p45">45%</td>
<td class="p45">45%</td>
<td class="p24">24%</td>
</tr>
</table>
<table>
<tr>
<td class="p45">45%</td>
<td class="p45">45%</td>
<td class="p45">45%</td>
<td class="p45">45%</td>
<td class="p24">24%</td>
</tr>
</table>
<table>
<tr>
<td class="p72">72%</td>
<td class="p45">45%</td>
<td class="p24">24%</td>
</tr>
</table>
<table>
<tr>
<td class="p72">72%</td>
<td class="p45">45%</td>
<td class="p24">24%</td>
<td class="p99">99%</td>
</tr>
</table>
</body>
</html>

259
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables/box-table-inspection-inspection-fixed-sizes.html Normal file
View file

@ -0,0 +1,259 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Automatic table sizing algorithm investigation (fixed sizes)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/inspection/inspection-fixed-sizes.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout" />
<style type="text/css">
html, body p { background: white; padding: 1.5em 1em 0.5em 1em; margin: 0; border: 0; }
body { background: url(support/horizontal-ruler) top left repeat-y; padding: 0; margin: 0; border: 0; }
body * { border: solid 3px black; }
table { width: 600px; margin: 1em 0; }
td { height: 1em; }
.f40 { width: 40px; }
.f50 { width: 50px; }
.f60 { width: 60px; }
.f100 { width: 100px; }
.f200 { width: 200px; }
.f400 { width: 400px; }
.f600 { width: 600px; }
span { border: solid purple; height: 1em; display: block; }
</style>
</head>
<body>
<p>Blank rows have the same dimensions as the preceeding row, but
with zero width spaces in the cells instead of text. Purple boxes
are fixed sized contents.</p>
<p>first cell</p>
<table>
<tr>
<td class="f50"> 50px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f40">40px</span> </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f60">60px</span> </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f100">100px</span> </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f400">400px</span> </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f600">600px</span> </td>
<td class="f200"> 200px </td>
</tr>
</table>
<p>second cell</p>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f50"> 50px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f50"> <span class="f40">40px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f50"> <span class="f60">60px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f50"> <span class="f100">100px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f50"> <span class="f400">400px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f50"> <span class="f600">600px</span> </td>
</tr>
</table>
<p>both cells</p>
<table>
<tr>
<td class="f50"> 50px </td>
<td class="f50"> 50px </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f40">40px</span> </td>
<td class="f50"> <span class="f40">40px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f60">60px</span> </td>
<td class="f50"> <span class="f60">60px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f100">100px</span> </td>
<td class="f50"> <span class="f100">100px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f400">400px</span> </td>
<td class="f50"> <span class="f400">400px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f50"> <span class="f600">600px</span> </td>
<td class="f50"> <span class="f600">600px</span> </td>
</tr>
</table>
<p>both cells too large</p>
<table>
<tr>
<td class="f400"> 400px </td>
<td class="f400"> 400px </td>
</tr>
</table>
<table>
<tr>
<td class="f400"> <span class="f40">40px</span> </td>
<td class="f400"> <span class="f40">40px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f400"> <span class="f60">60px</span> </td>
<td class="f400"> <span class="f60">60px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f400"> <span class="f100">100px</span> </td>
<td class="f400"> <span class="f100">100px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f400"> <span class="f400">400px</span> </td>
<td class="f400"> <span class="f400">400px</span> </td>
</tr>
</table>
<p>first cell wider</p>
<table>
<tr>
<td class="f400"> 400px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f400"> <span class="f40">40px</span> </td>
<td class="f200"> <span class="f40">40px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f400"> <span class="f60">60px</span> </td>
<td class="f200"> <span class="f60">60px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f400"> <span class="f100">100px</span> </td>
<td class="f200"> <span class="f100">100px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f400"> <span class="f200">200px</span> </td>
<td class="f200"> <span class="f200">200px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f400"> <span class="f400">400px</span> </td>
<td class="f200"> <span class="f400">400px</span> </td>
</tr>
</table>
<p>second cell wider</p>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f400"> 400px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> <span class="f40">40px</span> </td>
<td class="f400"> <span class="f40">40px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> <span class="f60">60px</span> </td>
<td class="f400"> <span class="f60">60px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> <span class="f100">100px</span> </td>
<td class="f400"> <span class="f100">100px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> <span class="f200">200px</span> </td>
<td class="f400"> <span class="f200">200px</span> </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> <span class="f400">400px</span> </td>
<td class="f400"> <span class="f400">400px</span> </td>
</tr>
</table>
</body>
</html>

745
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables/box-table-inspection-inspection-one-row.html Normal file
View file

@ -0,0 +1,745 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Automatic table sizing algorithm investigation (one row)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/inspection/inspection-one-row.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout" />
<style type="text/css">
html, body p { background: white; padding: 1.5em 1em 0.5em 1em; margin: 0; border: 0; }
body { background: url(support/horizontal-ruler) top left repeat-y; padding: 0; margin: 0; border: 0; }
body * { border: solid 3px black; }
table { width: 600px; margin: 1em 0; }
td { height: 1em; }
.p100 { width: 100%; }
.p50 { width: 50%; }
.f100 { width: 100px; }
.f200 { width: 200px; }
.f600 { width: 600px; }
</style>
</head>
<body>
<p>Blank rows have the same dimensions as the preceeding row, but with zero width spaces in the cells instead of text.</p>
<p>auto</p>
<table>
<tr>
<td> auto </td>
</tr>
</table>
<table>
<tr>
<td> auto </td>
<td> auto </td>
</tr>
</table>
<table>
<tr>
<td> auto </td>
<td> auto </td>
<td> auto </td>
</tr>
</table>
<p>100px</p>
<table>
<tr>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<p>200px</p>
<table>
<tr>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<p>combinations of 100px and 200px</p>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<p>100%</p>
<table>
<tr>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="p100"> 100% </td>
<td class="p100"> 100% </td>
</tr>
</table>
<p>50%</p>
<table>
<tr>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<p>combinations of 100% and 50%</p>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="p50"> 50% </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="p100"> 100% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<p>combinations of 100% and 100px</p>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="p100">&#x200B;</td>
<td class="f100">&#x200B;</td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="f100">&#x200B;</td>
<td class="p100">&#x200B;</td>
</tr>
</table>
<p>combinations of 100% and 200px</p>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="p100">&#x200B;</td>
<td class="f200">&#x200B;</td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="f200">&#x200B;</td>
<td class="p100">&#x200B;</td>
</tr>
</table>
<p>combinations of 100% and 600px</p>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="f600"> 600px </td>
</tr>
</table>
<table>
<tr>
<td class="p100">&#x200B;</td>
<td class="f600">&#x200B;</td>
</tr>
</table>
<table>
<tr>
<td class="f600"> 600px </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="f600">&#x200B;</td>
<td class="p100">&#x200B;</td>
</tr>
</table>
<p>combinations of 50% and 100px</p>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="p50">&#x200B;</td>
<td class="f100">&#x200B;</td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="f100">&#x200B;</td>
<td class="p50">&#x200B;</td>
</tr>
</table>
<p>combinations of auto, 100px and 50%</p>
<table>
<tr>
<td class="auto">auto</td>
<td class="f100">100px</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="auto">auto</td>
<td class="p50">50%</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="f100">100px</td>
<td class="auto">auto</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="f100">100px</td>
<td class="p50">50%</td>
<td class="auto">auto</td>
</tr>
</table>
<table>
<tr>
<td class="p50">50%</td>
<td class="auto">auto</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="p50">50%</td>
<td class="f100">100px</td>
<td class="auto">auto</td>
</tr>
</table>
<p>combinations of two autos, 100px and 50%</p>
<table>
<tr>
<td class="auto">auto</td>
<td class="auto">auto</td>
<td class="f100">100px</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="auto">auto</td>
<td class="auto">auto</td>
<td class="p50">50%</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="f100">100px</td>
<td class="auto">auto</td>
<td class="auto">auto</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="f100">100px</td>
<td class="p50">50%</td>
<td class="auto">auto</td>
<td class="auto">auto</td>
</tr>
</table>
<table>
<tr>
<td class="p50">50%</td>
<td class="auto">auto</td>
<td class="auto">auto</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="p50">50%</td>
<td class="f100">100px</td>
<td class="auto">auto</td>
<td class="auto">auto</td>
</tr>
</table>
<p>combinations of auto, 100px and 100%</p>
<table>
<tr>
<td class="auto">auto</td>
<td class="f100">100px</td>
<td class="p100">100%</td>
</tr>
</table>
<table>
<tr>
<td class="auto">auto</td>
<td class="p100">100%</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="f100">100px</td>
<td class="auto">auto</td>
<td class="p100">100%</td>
</tr>
</table>
<table>
<tr>
<td class="f100">100px</td>
<td class="p100">100%</td>
<td class="auto">auto</td>
</tr>
</table>
<table>
<tr>
<td class="p100">100%</td>
<td class="auto">auto</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="p100">100%</td>
<td class="f100">100px</td>
<td class="auto">auto</td>
</tr>
</table>
<p>combinations of auto, 600px and 50%</p>
<table>
<tr>
<td class="auto">auto</td>
<td class="f600">600px</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="auto">auto</td>
<td class="p50">50%</td>
<td class="f600">600px</td>
</tr>
</table>
<table>
<tr>
<td class="f600">600px</td>
<td class="auto">auto</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="f600">600px</td>
<td class="p50">50%</td>
<td class="auto">auto</td>
</tr>
</table>
<table>
<tr>
<td class="p50">50%</td>
<td class="auto">auto</td>
<td class="f600">600px</td>
</tr>
</table>
<table>
<tr>
<td class="p50">50%</td>
<td class="f600">600px</td>
<td class="auto">auto</td>
</tr>
</table>
<p>combinations of two autos, 200px and 50%</p>
<table>
<tr>
<td class="auto">auto</td>
<td class="auto">auto</td>
<td class="f200">200px</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="auto">auto</td>
<td class="auto">auto</td>
<td class="p50">50%</td>
<td class="f200">200px</td>
</tr>
</table>
<table>
<tr>
<td class="f200">200px</td>
<td class="auto">auto</td>
<td class="auto">auto</td>
<td class="p50">50%</td>
</tr>
</table>
<table>
<tr>
<td class="f200">200px</td>
<td class="p50">50%</td>
<td class="auto">auto</td>
<td class="auto">auto</td>
</tr>
</table>
<table>
<tr>
<td class="p50">50%</td>
<td class="auto">auto</td>
<td class="auto">auto</td>
<td class="f200">200px</td>
</tr>
</table>
<table>
<tr>
<td class="p50">50%</td>
<td class="f200">200px</td>
<td class="auto">auto</td>
<td class="auto">auto</td>
</tr>
</table>
<p>combinations of 100px and 600px</p>
<table>
<tr>
<td class="f100">100px</td>
<td class="f600">600px</td>
<td class="f600">600px</td>
</tr>
</table>
<table>
<tr>
<td class="f100">&#x200B;</td>
<td class="f600">600px</td>
<td class="f600">600px</td>
</tr>
</table>
<table>
<tr>
<td class="f100">&#x200B;</td>
<td class="f600"><div class="f200">200px in 600px</div></td>
<td class="f600"><div class="f200">200px in 600px</div></td>
</tr>
</table>
<table>
<tr>
<td class="f600">600px</td>
<td class="f100">100px</td>
<td class="f600">600px</td>
</tr>
</table>
<table>
<tr>
<td class="f600">600px</td>
<td class="f100">&#x200B;</td>
<td class="f600">600px</td>
</tr>
</table>
<table>
<tr>
<td class="f600"><div class="f200">200px in 600px</div></td>
<td class="f100">&#x200B;</td>
<td class="f600"><div class="f200">200px in 600px</div></td>
</tr>
</table>
<table>
<tr>
<td class="f600">600px</td>
<td class="f600">600px</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="f600">600px</td>
<td class="f600">600px</td>
<td class="f100">&#x200B;</td>
</tr>
</table>
<table>
<tr>
<td class="f600"><div class="f200">200px in 600px</div></td>
<td class="f600"><div class="f200">200px in 600px</div></td>
<td class="f100">&#x200B;</td>
</tr>
</table>
<p>combinations of 100px, 200px, and 600px</p>
<table>
<tr>
<td class="f100">100px</td>
<td class="f200">200px</td>
<td class="f600">600px</td>
</tr>
</table>
<table>
<tr>
<td class="f100">100px</td>
<td class="f600">600px</td>
<td class="f200">200px</td>
</tr>
</table>
<table>
<tr>
<td class="f200">200px</td>
<td class="f100">100px</td>
<td class="f600">600px</td>
</tr>
</table>
<table>
<tr>
<td class="f200">200px</td>
<td class="f600">600px</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="f600">600px</td>
<td class="f100">100px</td>
<td class="f200">200px</td>
</tr>
</table>
<table>
<tr>
<td class="f600">600px</td>
<td class="f200">200px</td>
<td class="f100">100px</td>
</tr>
</table>
<p>combinations of 100px, 200px, and 100%</p>
<table>
<tr>
<td class="f100">100px</td>
<td class="f200">200px</td>
<td class="p100">100%</td>
</tr>
</table>
<table>
<tr>
<td class="f100">100px</td>
<td class="p100">100%</td>
<td class="f200">200px</td>
</tr>
</table>
<table>
<tr>
<td class="f200">200px</td>
<td class="f100">100px</td>
<td class="p100">100%</td>
</tr>
</table>
<table>
<tr>
<td class="f200">200px</td>
<td class="p100">100%</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="p100">100%</td>
<td class="f100">100px</td>
<td class="f200">200px</td>
</tr>
</table>
<table>
<tr>
<td class="p100">100%</td>
<td class="f200">200px</td>
<td class="f100">100px</td>
</tr>
</table>
<p>combinations of 100px, 200px, and auto</p>
<table>
<tr>
<td class="f100">100px</td>
<td class="f200">200px</td>
<td class="auto">auto</td>
</tr>
</table>
<table>
<tr>
<td class="f100">100px</td>
<td class="auto">auto</td>
<td class="f200">200px</td>
</tr>
</table>
<table>
<tr>
<td class="f200">200px</td>
<td class="f100">100px</td>
<td class="auto">auto</td>
</tr>
</table>
<table>
<tr>
<td class="f200">200px</td>
<td class="auto">auto</td>
<td class="f100">100px</td>
</tr>
</table>
<table>
<tr>
<td class="auto">auto</td>
<td class="f100">100px</td>
<td class="f200">200px</td>
</tr>
</table>
<table>
<tr>
<td class="auto">auto</td>
<td class="f200">200px</td>
<td class="f100">100px</td>
</tr>
</table>
</body>
</html>

592
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables/box-table-inspection-inspection-spanning.html Normal file
View file

@ -0,0 +1,592 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Automatic table sizing algorithm investigation (spanning cells)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/inspection/inspection-spanning.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout" />
<style type="text/css">
html, body p { background: white; padding: 1.5em 1em 0.5em 1em; margin: 0; border: 0; }
body { background: url(support/horizontal-ruler) top left repeat-y; padding: 0; margin: 0; border: 0; }
body * { border: solid 3px black; }
table { width: 600px; margin: 1em 0; }
td { height: 1em; }
.p100 { width: 100%; }
.p50 { width: 50%; }
.p25 { width: 25%; }
.f100 { width: 100px; }
.f200 { width: 200px; }
.f600 { width: 600px; }
</style>
</head>
<body>
<p>Blank rows have the same dimensions as the preceeding row, but with zero width spaces in the cells instead of text.</p>
<p>100px</p>
<table>
<tr>
<td class="f100" colspan="2">100px [2]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="f100" colspan="1">100px [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
</table>
<table>
<tr>
<td class="f100" colspan="1">100px [1]</td>
<td class="f100" colspan="1">100px [1]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="f100" colspan="2">100px [2]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="f100" colspan="1">100px [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="f100" colspan="2">100px [2]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="f100" colspan="1">100px [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="f100" colspan="2">100px [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="2">auto [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
<tr>
<td class="auto" colspan="2">auto [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
</table>
<p>100%</p>
<table>
<tr>
<td class="p100" colspan="2">100% [2]</td>
<td class="p100" colspan="1">100% [1]</td>
</tr>
<tr>
<td class="p100" colspan="1">100% [1]</td>
<td class="p100" colspan="2">100% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="p100" colspan="1">100% [1]</td>
<td class="p100" colspan="1">100% [1]</td>
<td class="p100" colspan="1">100% [1]</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
<td class="p100" colspan="1">100% [1]</td>
</tr>
<tr>
<td class="p100" colspan="1">100% [1]</td>
<td class="p100" colspan="2">100% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
<td class="p100" colspan="1">100% [1]</td>
</tr>
<tr>
<td class="p100" colspan="1">100% [1]</td>
<td class="p100" colspan="2">100% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="2">auto [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="p100" colspan="2">100% [2]</td>
</tr>
<tr>
<td class="auto" colspan="2">auto [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
</table>
<p>50%</p>
<table>
<tr>
<td class="p50" colspan="2">50% [2]</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="2">50% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
<tr>
<td class="p50" colspan="2">50% [2]</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="2">50% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p50" colspan="2">50% [2]</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="2">50% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p50" colspan="2">50% [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="2">auto [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="p50" colspan="2">50% [2]</td>
</tr>
<tr>
<td class="auto" colspan="2">auto [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
</table>
<p>25%</p>
<table>
<tr>
<td class="p25" colspan="2">25% [2]</td>
<td class="p25" colspan="1">25% [1]</td>
</tr>
<tr>
<td class="p25" colspan="1">25% [1]</td>
<td class="p25" colspan="2">25% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="p25" colspan="1">25% [1]</td>
<td class="p25" colspan="1">25% [1]</td>
<td class="p25" colspan="1">25% [1]</td>
</tr>
<tr>
<td class="p25" colspan="2">25% [2]</td>
<td class="p25" colspan="1">25% [1]</td>
</tr>
<tr>
<td class="p25" colspan="1">25% [1]</td>
<td class="p25" colspan="2">25% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p25" colspan="2">25% [2]</td>
<td class="p25" colspan="1">25% [1]</td>
</tr>
<tr>
<td class="p25" colspan="1">25% [1]</td>
<td class="p25" colspan="2">25% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p25" colspan="2">25% [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="2">auto [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="p25" colspan="2">25% [2]</td>
</tr>
<tr>
<td class="auto" colspan="2">auto [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
</table>
<p>25% and 100px</p>
<table>
<tr>
<td class="p25" colspan="2">25% [2]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="p25" colspan="1">25% [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p25" colspan="2">25% [2]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="p25" colspan="1">25% [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p25" colspan="2">25% [2]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="2">auto [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p25" colspan="1">25% [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
<tr>
<td class="auto" colspan="2">auto [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p25" colspan="1">25% [1]</td>
<td class="auto" colspan="2">auto [2]</td>
</tr>
<tr>
<td class="f100" colspan="2">100px [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
</table>
<p>100% and 100px</p>
<table>
<tr>
<td class="p100" colspan="2">100% [2]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="p100" colspan="1">100% [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="p100" colspan="1">100% [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
<td class="f100" colspan="1">100px [1]</td>
</tr>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="2">auto [2]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p100" colspan="1">100% [1]</td>
<td class="f100" colspan="2">100px [2]</td>
</tr>
<tr>
<td class="auto" colspan="2">auto [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
</table>
<table>
<tr>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
<tr>
<td class="p100" colspan="1">100% [1]</td>
<td class="auto" colspan="2">auto [2]</td>
</tr>
<tr>
<td class="f100" colspan="2">100px [2]</td>
<td class="auto" colspan="1">auto [1]</td>
</tr>
</table>
<p>100% and 50%</p>
<table>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
</table>
<table>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
</table>
<p>100% and 50% and content</p>
<table>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
</tr>
</table>
<table>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
<tr>
<td class="p50" colspan="1">50% [1]</td>
<td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
<tr>
<td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
</table>
<table>
<tr>
<td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
</table>
<table>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
<tr>
<td class="p50" colspan="1">50% [1] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
<td class="p50" colspan="1">50% [1]</td>
</tr>
<tr>
<td class="p100" colspan="2">100% [2]</td>
</tr>
</table>
</body>
</html>

139
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables/box-table-inspection-inspection-three-rows.html Normal file
View file

@ -0,0 +1,139 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Automatic table sizing algorithm investigation (three rows)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/inspection/inspection-three-rows.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout" />
<style type="text/css">
html, body p { background: white; padding: 1.5em 1em 0.5em 1em; margin: 0; border: 0; }
body { background: url(support/horizontal-ruler) top left repeat-y; padding: 0; margin: 0; border: 0; }
body * { border: solid 3px black; }
table { width: 600px; margin: 1em 0; }
td { height: 1em; }
.p100 { width: 100%; }
.p50 { width: 50%; }
.f100 { width: 100px; }
.f200 { width: 200px; }
.f600 { width: 600px; }
</style>
</head>
<body>
<p>Blank rows have the same dimensions as the preceeding row, but with zero width spaces in the cells instead of text.</p>
<p>combinations of 100%, 600px, and auto</p>
<table>
<tr>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f600"> 600px </td>
<td class="f600"> 600px </td>
<td class="f600"> 600px </td>
</tr>
<tr>
<td class="p100"> 100% </td>
<td class="p100"> 100% </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="auto"> auto </td>
<td class="f600"> 600px </td>
<td class="p100"> 100% </td>
</tr>
<tr>
<td class="auto"> auto </td>
<td class="f600"> 600px </td>
<td class="p100"> 100% </td>
</tr>
<tr>
<td class="auto"> auto </td>
<td class="f600"> 600px </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="auto"> auto </td>
<td class="f600"> 600px </td>
<td class="p100"> 100% </td>
</tr>
<tr>
<td class="p100"> 100% </td>
<td class="auto"> auto </td>
<td class="f600"> 600px </td>
</tr>
<tr>
<td class="f600"> 600px </td>
<td class="p100"> 100% </td>
<td class="auto"> auto </td>
</tr>
</table>
<p>combinations of 50%, 200px, and auto</p>
<table>
<tr>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="auto"> auto </td>
<td class="f200"> 200px </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="auto"> auto </td>
<td class="f200"> 200px </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="auto"> auto </td>
<td class="f200"> 200px </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="auto"> auto </td>
<td class="f200"> 200px </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="auto"> auto </td>
<td class="f200"> 200px </td>
</tr>
<tr>
<td class="f200"> 200px </td>
<td class="p50"> 50% </td>
<td class="auto"> auto </td>
</tr>
</table>
</body>
</html>

460
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables/box-table-inspection-inspection-two-rows.html Normal file
View file

@ -0,0 +1,460 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Automatic table sizing algorithm investigation (two rows)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/inspection/inspection-two-rows.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout" />
<style type="text/css">
html, body p { background: white; padding: 1.5em 1em 0.5em 1em; margin: 0; border: 0; }
body { background: url(support/horizontal-ruler) top left repeat-y; padding: 0; margin: 0; border: 0; }
body * { border: solid 3px black; }
table { width: 600px; margin: 1em 0; }
td { height: 1em; }
.p100 { width: 100%; }
.p50 { width: 50%; }
.f100 { width: 100px; }
.f200 { width: 200px; }
.f600 { width: 600px; }
</style>
</head>
<body>
<p>Blank rows have the same dimensions as the preceeding row, but with zero width spaces in the cells instead of text.</p>
<p>combinations of 50% and 100%</p>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="p100"> 100% </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="p100"> 100% </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="p100"> 100% </td>
</tr>
<tr>
<td class="p100"> 100% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="p100"> 100% </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="p100"> 100% </td>
</tr>
</table>
<table>
<tr>
<td class="p100"> 100% </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="p100"> 100% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<p>combinations of 50% and 100px</p>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="f100"> 100px </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="f100"> 100px </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="p50"> 50% </td>
</tr>
</table>
<p>combinations of 50% and auto</p>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="auto"> auto </td>
<td class="p50"> 50% </td>
</tr>
</table>
<table>
<tr>
<td class="auto"> auto </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="p50"> 50% </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="p50"> 50% </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="auto"> auto </td>
<td class="p50"> 50% </td>
</tr>
<tr>
<td class="auto"> auto </td>
<td class="p50"> 50% </td>
</tr>
</table>
<p>combinations of 100px and 200px</p>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
<tr>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
</tr>
<tr>
<td class="f200"> 200px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f100"> 100px </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
</tr>
</table>
<table>
<tr>
<td class="f200"> 200px </td>
<td class="f100"> 100px </td>
</tr>
<tr>
<td class="f200"> 200px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<p>combinations of auto, 100px, and 200px</p>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f200"> 200px </td>
<td class="f200"> 200px </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f200"> 200px </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f200"> 200px </td>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
<td class="f200"> 200px </td>
</tr>
<tr>
<td class="f200"> 200px </td>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f200"> 200px </td>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
</tr>
</table>
<p>combinations of auto, 100px, and 600px</p>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f600"> 600px </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f600"> 600px </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f600"> 600px </td>
<td class="f600"> 600px </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="f600"> 600px </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f600"> 600px </td>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
<td class="f600"> 600px </td>
</tr>
<tr>
<td class="f600"> 600px </td>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
</tr>
</table>
<table>
<tr>
<td class="f100"> 100px </td>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f600"> 600px </td>
<td class="auto"> auto </td>
<td class="auto"> auto </td>
</tr>
</table>
<p>combinations of 100px and wide minimums</p>
<table>
<tr>
<td class="auto"> auto </td>
<td class="auto"> <div class="f200"> 200px in auto</div> </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="auto"> auto </td>
<td class="auto"> <div class="f600"> 600px in auto</div> </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<p>combinations of auto, 100px, and percentage-sized children</p>
<table>
<tr>
<td class="auto"> auto </td>
<td class="auto"> <div class="p100"> 100% in auto</div> </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
</table>
<table>
<tr>
<td class="auto"> auto </td>
<td class="auto"> <div class="p50"> 50% in auto</div> </td>
<td class="auto"> auto </td>
</tr>
<tr>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
<td class="f100"> 100px </td>
</tr>
</table>
</body>
</html>

BIN
tests/wpt/web-platform-tests/css/work-in-progress/hixie/css3-tables/support/horizontal-ruler.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 932 B

8
tests/wpt/web-platform-tests/css/work-in-progress/hixie/fonts-ahem-TESTS Normal file
View file

@ -0,0 +1,8 @@
inheritance
initial values
overriding values
!important
mapped attributes
shorthands
font-family, font-size, font-weight, font-style, font-variant, line-height, font-stretch, font-size-adjust

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/form-controls/box-table-018.html Normal file
View file

@ -0,0 +1,19 @@
<!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>
<title>HTML Input controls as table cells: width</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/018.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layout" />
<style type="text/css">
div { display: table; }
p { display: table-row; }
input { display: table-cell; background: green; color: white; }
</style>
</head>
<body>
<p>There should be a green box below.</p>
<div><p><input value="PASS"></p></div>
<!-- ...because the <input> has an intrinsic size. -->
</body>
</html>

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/form-controls/box-table-019.html Normal file
View file

@ -0,0 +1,19 @@
<!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>
<title>HTML Input controls as table cells: width</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/019.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layout" />
<style type="text/css">
body { color: navy; }
div { display: table; }
p { display: table-row; }
input { display: table-cell; width: 10em; height: 2em; }
</style>
</head>
<body>
<p>The text box below should be editable.</p>
<div><p><input value="This text should be editable."></p></div>
</body>
</html>

19
tests/wpt/web-platform-tests/css/work-in-progress/hixie/form-controls/box-table-020.html Normal file
View file

@ -0,0 +1,19 @@
<!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>
<title>HTML Input controls as table cells: width</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/020.html"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layout" />
<style type="text/css">
body { color: navy; }
div { display: table; }
p { display: table-row; }
textarea { display: table-cell; width: 10em; height: 2em; }
</style>
</head>
<body>
<p>The text box below should be editable.</p>
<div><p><textarea>This text should be editable.</textarea></p></div>
</body>
</html>

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