diff options
| author | Ms2ger <Ms2ger@gmail.com> | 2015-10-31 14:35:08 +0100 |
|---|---|---|
| committer | Ms2ger <Ms2ger@gmail.com> | 2015-10-31 16:21:47 +0100 |
| commit | 5450053b026bb842a00824ab0be1211ba0288540 (patch) | |
| tree | b5647bf0632bf902289f56125be5656981742e44 /tests/wpt/css-tests/css-values-3_dev/xhtml1 | |
| parent | b492a3e8b1762491f84ab134d9d2904fce69b1ea (diff) | |
| download | servo-5450053b026bb842a00824ab0be1211ba0288540.tar.gz servo-5450053b026bb842a00824ab0be1211ba0288540.zip | |
Update CSS tests to revision d13905941293af83ea8c3c1750dba652e0423fb0
Diffstat (limited to 'tests/wpt/css-tests/css-values-3_dev/xhtml1')
240 files changed, 10500 insertions, 0 deletions
diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/absolute_length_units.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/absolute_length_units.xht new file mode 100644 index 00000000000..57e9b1b2a8c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/absolute_length_units.xht @@ -0,0 +1,77 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><!-- Submitted from TestTWF Paris --><head> + + <title>CSS Values and Units Test: elements should be the real world size given in mm, cm, inches...</title> + <meta content="elements are not displayed with the real world size units they should be, when specified in millimeters, centimeters, inches, ..." name="assert" /> + <link href="mailto:marc@bourlon.com" rel="author" title="Marc Bourlon" /> + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units" /> + + <style type="text/css"> + + * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } + + .s1mm { background: #F00; width: 1mm; height: 1mm; } + .s10mm { background: #66F; width: 10mm; height: 10mm; } + .s1cm { background: #E90; width: 1cm; height: 1cm; } + .s254cm { background: #D0D; width: 2.54cm; height: 2.54cm; } + .s1in { background: #00F; width: 1in; height: 1in; } + + .inline { float: left; } + + .newline { clear: left; } + + p { clear: both; margin: 10px 0; } + + </style> + +</head> +<body> + +<p> + This should be 1mm (width) by 1mm (height) size +</p> + +<div class="s1mm"></div> + +<p> + This is 10 1mm x 1mm divs, so it should be 10mm (width) by 1mm (height) size +</p> + +<div class="s1mm newline inline"></div> +<div class="s1mm inline"></div> +<div class="s1mm inline"></div> +<div class="s1mm inline"></div> +<div class="s1mm inline"></div> +<div class="s1mm inline"></div> +<div class="s1mm inline"></div> +<div class="s1mm inline"></div> +<div class="s1mm inline"></div> +<div class="s1mm inline"></div> + +<p> + This should be 10mm (width) by 10mm (height) size. +</p> + +<div class="s10mm newline "></div> + +<p> + This should be 1cm (width) by 1cm (height) size. So, same width as the line above. +</p> + +<div class="s1cm newline "></div> + +<p> + This should be 2.54cm (width) by 2.54cm (height) size. +</p> + +<div class="s254cm newline "></div> + +<p> + This should be 1in (width) by 1in (height) size. So, same size as above. +</p> + +<div class="s1in"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-image-gradient-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-image-gradient-1.xht new file mode 100644 index 00000000000..afd51669911 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-image-gradient-1.xht @@ -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 Test: Test for calc() on background-image gradients</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-background-image-gradient-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +p { + height: 50px; width: 200px; + border: thin solid; +} + +#one { background-image: radial-gradient(circle farthest-side at calc(50px + 50%) calc(100% - 30px), red, green); } + +</style> +</head> +<body> +<p id="one"></p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-linear-gradient-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-linear-gradient-1.xht new file mode 100644 index 00000000000..419e5adc96d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-linear-gradient-1.xht @@ -0,0 +1,42 @@ +<!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 Test: Support calc() on gradient stop positions</title> + <link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935" rel="author" title="Yu-Sian (Thomasy) Liu" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-background-linear-gradient-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +div { + width:100px; + height:100px; + background:red; + margin:5px 0 0 5px; + float:left; +} +div#one { + background: linear-gradient(lime 0px, lime calc(100% - 10px), blue calc(100% - 10px), blue 100%); +} +div#two { + background: linear-gradient(blue calc(100% - 100px) ,green calc(10% + 20px) ,red 40px ,white calc(100% - 40px) , lime 80px); +} +div#three { + background: linear-gradient(blue calc(0px) ,purple calc(20%) ,red calc(10px + 10px + 20px) ,blue calc(30% + 30px) , lime calc(180% - 100px)); +} +div#four { + background: linear-gradient(blue calc(0% + 0px) ,green calc(10% + 20px) ,red 40px ,blue calc(200% / 2 - 40px) , yellow 80px); +} +div#five { + background: linear-gradient(red calc(100% - 100px) ,green calc(10% + 20px)); +} + +</style> +</head> +<body> +<div id="one">1</div> +<div id="two">2</div> +<div id="three">3</div> +<div id="four">4</div> +<div id="five">5</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-position-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-position-1.xht new file mode 100644 index 00000000000..dffe2b28f75 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-position-1.xht @@ -0,0 +1,27 @@ +<!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 Test: Test for calc() on background-position</title> + <link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-background-position-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +p { + height: 50px; width: 200px; + border: thin solid; + background-image: url(../backgrounds/blue-32x32.png); + background-repeat: no-repeat; +} + +#one { background-position: calc(50px + 50%) calc(100% - 30px) } +#two { background-position: calc(-12.5% + 3px) calc(-10px - 50%) } + +</style> +</head> +<body> +<p id="one"></p> +<p id="two"></p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-size-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-size-1.xht new file mode 100644 index 00000000000..92d1fe7e476 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-background-size-1.xht @@ -0,0 +1,27 @@ +<!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 Test: Test for calc() on background-size</title> + <link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-background-size-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +p { + height: 50px; width: 200px; + border: thin solid; + background-image: url(../backgrounds/blue-32x32.png); + background-repeat: no-repeat; +} + +#one { background-size: calc(50px + 50%) calc(100% - 30px) } +#two { background-size: calc(50px + 50%) calc(10px - 50%) } + +</style> +</head> +<body> +<p id="one"></p> +<p id="two"></p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-border-radius-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-border-radius-1.xht new file mode 100644 index 00000000000..fb89bc2d89c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-border-radius-1.xht @@ -0,0 +1,33 @@ +<!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 Test: test for border-radius: calc()</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-border-radius-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +p { + /* We use powers of two here to avoid floating-point issues. + See bug 590181. */ + + height: 256px; + width: 512px; + background: blue; + border-radius: calc((1/32 * 100%) + 5px) + calc((1/64 * 100%) - 2px) + calc(10px + (1/256 * 100%)) + calc((1/16 * 100%) - 3px) / + calc((1/32 * 100%) - (1px + (1/128 * 100%))) + calc(1/16 * 100%) + calc(10px) + 3px; +} + +</style> +</head> +<body> +<p></p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-height-block-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-height-block-1.xht new file mode 100644 index 00000000000..c32aa04bdd8 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-height-block-1.xht @@ -0,0 +1,36 @@ +<!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 Test: Test for height:calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-height-block-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; height: 100px; width: 1px; } +body > div > div { background: blue } + +/* for auto-height tests */ +body > div > div > div > div { height: 10px } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div><div style="height: calc(50px)"></div></div> +<div><div style="height: calc(50%)"></div></div> +<div><div style="height: calc(25px + 50%)"></div></div> +<div><div style="height: calc(150% / 2 - 30px)"></div></div> +<div><div style="height: calc(40px + 10% - 20% / 2)"></div></div> +<div><div style="height: calc(40px - 10%)"></div></div> + +<!-- tests with an auto-height container --> +<div><div><div style="height: calc(50px)"><div></div></div></div></div> +<div><div><div style="height: calc(50%)"><div></div></div></div></div> +<div><div><div style="height: calc(25px + 50%)"><div></div></div></div></div> +<div><div><div style="height: calc(150% / 2 - 30px)"><div></div></div></div></div> +<div><div><div style="height: calc(40px + 10% - 20% / 2)"><div></div></div></div></div> +<div><div><div style="height: calc(40px - 10%)"><div></div></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-height-table-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-height-table-1.xht new file mode 100644 index 00000000000..bd8cd4126f0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-height-table-1.xht @@ -0,0 +1,31 @@ +<!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 Test: Test that height:calc() with no percentages has an effect on inner table elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-height-table-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +tbody, tr, td { + height: calc(500px); + min-height: calc(700px); + max-height: calc(2px); +} +</style> +</head> +<body> +<table border=""> + <tbody> + <tr> + <td>cell</td> + <td>cell</td> + </tr> + <tr> + <td>cell</td> + <td>cell</td> + </tr> + </tbody> +</table> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-margin-block-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-margin-block-1.xht new file mode 100644 index 00000000000..8121e41e301 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-margin-block-1.xht @@ -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"><head> + <title>CSS Test: Test of margin-*: calc()</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-margin-block-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +div { border: medium solid green; width: 500px } +p { background: yellow } + +</style> +</head> +<body> + +<div><p style="margin: calc(10px + 1%) 0 0 0">paragraph with margin</p></div> +<div><p style="margin: 0 calc(10px + 1%) 0 0">paragraph with margin</p></div> +<div><p style="margin: 0 0 calc(10px + 1%) 0">paragraph with margin</p></div> +<div><p style="margin: 0 0 0 calc(10px + 1%)">paragraph with margin</p></div> +<div><p style="margin: calc(30px - 1%)">paragraph with margin</p></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-max-height-block-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-max-height-block-1.xht new file mode 100644 index 00000000000..a274c9664fa --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-max-height-block-1.xht @@ -0,0 +1,36 @@ +<!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 Test: Test for max-height:calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-max-height-block-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; height: 100px; width: 1px; } +body > div > div { background: blue } + +/* to give the max-height something to restrict */ +span { display: block; height: 300px } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div><div style="max-height: calc(50px)"><span></span></div></div> +<div><div style="max-height: calc(50%)"><span></span></div></div> +<div><div style="max-height: calc(25px + 50%)"><span></span></div></div> +<div><div style="max-height: calc(150% / 2 - 30px)"><span></span></div></div> +<div><div style="max-height: calc(40px + 10% - 20% / 2)"><span></span></div></div> +<div><div style="max-height: calc(40px - 10%)"><span></span></div></div> + +<!-- tests with an auto-height container --> +<div><div><div style="max-height: calc(50px)"><span></span></div></div></div> +<div><div><div style="max-height: calc(50%)"><span></span></div></div></div> +<div><div><div style="max-height: calc(25px + 50%)"><span></span></div></div></div> +<div><div><div style="max-height: calc(150% / 2 - 30px)"><span></span></div></div></div> +<div><div><div style="max-height: calc(40px + 10% - 20% / 2)"><span></span></div></div></div> +<div><div><div style="max-height: calc(40px - 10%)"><span></span></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-max-width-block-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-max-width-block-1.xht new file mode 100644 index 00000000000..be3d0d4c020 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-max-width-block-1.xht @@ -0,0 +1,26 @@ +<!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 Test: max-width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-width-block-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { width: 500px } +p { background: green; color: white; margin: 1px 0; font-size: 10px; width: 1000px; } + +</style> +</head> +<body> + +<p style="max-width: calc(50% - 3px)">50% - 3px</p> +<p style="max-width: calc(25% - 3px + 25%)">25% - 3px + 25%</p> +<p style="max-width: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p> +<p style="max-width: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p> +<p style="max-width: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p> +<p style="max-width: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p> +<p style="max-width: calc(30% + 20%)">30% + 20%</p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-max-width-block-intrinsic-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-max-width-block-intrinsic-1.xht new file mode 100644 index 00000000000..aa78f36f3b1 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-max-width-block-intrinsic-1.xht @@ -0,0 +1,28 @@ +<!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 Test: intrinsic width of max-width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-max-width-block-intrinsic-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { font-size: 10px } +body > div { float: left; clear: left; + margin: 0 0 1px 0; background: blue; color: white; height: 5px } +body > div > div { width: 400px } +body > div > div > div { width: 200px } + +</style> +</head> +<body> + +<div><div style="max-width: calc(50% - 3px)"><div></div></div></div> +<div><div style="max-width: calc(5em - 3px)"><div></div></div></div> +<div><div style="max-width: calc(5em - 0%)"><div></div></div></div> +<div><div style="max-width: calc(50%)"><div></div></div></div> +<div><div style="max-width: calc(50px)"><div></div></div></div> +<div><div style="max-width: calc(25% + 25%)"><div></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-min-height-block-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-min-height-block-1.xht new file mode 100644 index 00000000000..889d5086c84 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-min-height-block-1.xht @@ -0,0 +1,36 @@ +<!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 Test: Test for min-height:calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-height-block-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; height: 100px; width: 1px; } +body > div > div { background: blue } + +/* for auto-height tests */ +body > div > div > div > div { height: 10px } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div><div style="min-height: calc(50px)"></div></div> +<div><div style="min-height: calc(50%)"></div></div> +<div><div style="min-height: calc(25px + 50%)"></div></div> +<div><div style="min-height: calc(150% / 2 - 30px)"></div></div> +<div><div style="min-height: calc(40px + 10% - 20% / 2)"></div></div> +<div><div style="min-height: calc(40px - 10%)"></div></div> + +<!-- tests with an auto-height container --> +<div><div><div style="min-height: calc(50px)"><div></div></div></div></div> +<div><div><div style="min-height: calc(50%)"><div></div></div></div></div> +<div><div><div style="min-height: calc(25px + 50%)"><div></div></div></div></div> +<div><div><div style="min-height: calc(150% / 2 - 30px)"><div></div></div></div></div> +<div><div><div style="min-height: calc(40px + 10% - 20% / 2)"><div></div></div></div></div> +<div><div><div style="min-height: calc(40px - 10%)"><div></div></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-min-width-block-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-min-width-block-1.xht new file mode 100644 index 00000000000..5def56adab8 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-min-width-block-1.xht @@ -0,0 +1,26 @@ +<!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 Test: min-width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-width-block-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { width: 500px } +p { background: green; color: white; margin: 1px 0; font-size: 10px; width: 0 } + +</style> +</head> +<body> + +<p style="min-width: calc(50% - 3px)">50% - 3px</p> +<p style="min-width: calc(25% - 3px + 25%)">25% - 3px + 25%</p> +<p style="min-width: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p> +<p style="min-width: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p> +<p style="min-width: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p> +<p style="min-width: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p> +<p style="min-width: calc(30% + 20%)">30% + 20%</p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-min-width-block-intrinsic-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-min-width-block-intrinsic-1.xht new file mode 100644 index 00000000000..d06982a5c06 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-min-width-block-intrinsic-1.xht @@ -0,0 +1,28 @@ +<!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 Test: intrinsic width of min-width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-min-width-block-intrinsic-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { font-size: 10px } +body > div { float: left; clear: left; + margin: 0 0 1px 0; background: blue; color: white; height: 5px } +body > div > div { width: 1px } +body > div > div > div { width: 200px } + +</style> +</head> +<body> + +<div><div style="min-width: calc(50% - 3px)"><div></div></div></div> +<div><div style="min-width: calc(5em - 3px)"><div></div></div></div> +<div><div style="min-width: calc(5em - 0%)"><div></div></div></div> +<div><div style="min-width: calc(50%)"><div></div></div></div> +<div><div style="min-width: calc(50px)"><div></div></div></div> +<div><div style="min-width: calc(25% + 25%)"><div></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-bottom-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-bottom-1.xht new file mode 100644 index 00000000000..1db15817bee --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-bottom-1.xht @@ -0,0 +1,34 @@ +<!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 Test: Test for bottom:calc() on absolutely positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-offsets-absolute-top-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; margin-top: -90px; height: 100px; margin-bottom: 90px; width: 3px; position: relative } +div[style] { background: blue; position: absolute; height: 10px; width: 3px } +div.space { height: 100px } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div><div style="bottom: calc(-50px)"></div></div> +<div><div style="bottom: calc(-50%)"></div></div> +<div><div style="bottom: calc(-25px - 50%)"></div></div> +<div><div style="bottom: calc(-150% / 2 + 30px)"></div></div> +<div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div></div> +<div><div style="bottom: calc(-40px + 10%)"></div></div> + +<!-- tests with an auto-bottom container --> +<div><div><div style="bottom: calc(-50px)"></div><div class="space"></div></div></div> +<div><div><div style="bottom: calc(-50%)"></div><div class="space"></div></div></div> +<div><div><div style="bottom: calc(-25px - 50%)"></div><div class="space"></div></div></div> +<div><div><div style="bottom: calc(-150% / 2 + 30px)"></div><div class="space"></div></div></div> +<div><div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div><div class="space"></div></div></div> +<div><div><div style="bottom: calc(-40px + 10%)"></div><div class="space"></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-left-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-left-1.xht new file mode 100644 index 00000000000..c431be2c3d3 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-left-1.xht @@ -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"><head> + <title>CSS Test: Test for left:calc() on absolutely positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-offsets-relative-left-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 100px; width: 200px } +body > div { height: 3px; position: relative } +div[style] { background: blue; position: absolute; height: 3px; width: 100px } +</style> +</head> +<body> + +<div><div style="left: calc(50px)"></div></div> +<div><div style="left: calc(-25%)"></div></div> +<div><div style="left: calc(25px + 25%)"></div></div> +<div><div style="left: calc(-75% / 2 + 30px)"></div></div> +<div><div style="left: calc(40px + 5% - 10% / 2)"></div></div> +<div><div style="left: calc(5% - 40px)"></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-right-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-right-1.xht new file mode 100644 index 00000000000..8f38f636075 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-right-1.xht @@ -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"><head> + <title>CSS Test: Test for right:calc() on absolutely positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-offsets-relative-left-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0; width: 200px } +body > div { height: 3px; position: relative } +div[style] { background: blue; position: absolute; height: 3px; width: 100px } +</style> +</head> +<body> + +<div><div style="right: calc(-50px)"></div></div> +<div><div style="right: calc(25%)"></div></div> +<div><div style="right: calc(-25px - 25%)"></div></div> +<div><div style="right: calc(75% / 2 - 30px)"></div></div> +<div><div style="right: calc(-40px - 5% + 10% / 2)"></div></div> +<div><div style="right: calc(-5% + 40px)"></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-top-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-top-1.xht new file mode 100644 index 00000000000..932d465adfd --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-absolute-top-1.xht @@ -0,0 +1,34 @@ +<!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 Test: Test for top:calc() on absolutely positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-offsets-absolute-top-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; height: 100px; width: 3px; position: relative } +div[style] { background: blue; position: absolute; height: 10px; width: 3px } +div.space { height: 100px } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div><div style="top: calc(50px)"></div></div> +<div><div style="top: calc(50%)"></div></div> +<div><div style="top: calc(25px + 50%)"></div></div> +<div><div style="top: calc(150% / 2 - 30px)"></div></div> +<div><div style="top: calc(40px + 10% - 20% / 2)"></div></div> +<div><div style="top: calc(40px - 10%)"></div></div> + +<!-- tests with an auto-top container --> +<div><div><div style="top: calc(50px)"></div><div class="space"></div></div></div> +<div><div><div style="top: calc(50%)"></div><div class="space"></div></div></div> +<div><div><div style="top: calc(25px + 50%)"></div><div class="space"></div></div></div> +<div><div><div style="top: calc(150% / 2 - 30px)"></div><div class="space"></div></div></div> +<div><div><div style="top: calc(40px + 10% - 20% / 2)"></div><div class="space"></div></div></div> +<div><div><div style="top: calc(40px - 10%)"></div><div class="space"></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-bottom-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-bottom-1.xht new file mode 100644 index 00000000000..16dfba4c53d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-bottom-1.xht @@ -0,0 +1,33 @@ +<!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 Test: Test for bottom:calc() on relatively positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-offsets-relative-top-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; height: 100px; width: 3px; } +div[style] { background: blue; position: relative; height: 10px; } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div><div style="bottom: calc(-50px)"></div></div> +<div><div style="bottom: calc(-50%)"></div></div> +<div><div style="bottom: calc(-25px - 50%)"></div></div> +<div><div style="bottom: calc(-150% / 2 + 30px)"></div></div> +<div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div></div> +<div><div style="bottom: calc(-40px + 10%)"></div></div> + +<!-- tests with an auto-top container --> +<div><div><div style="bottom: calc(-50px)"></div></div></div> +<div><div><div style="bottom: calc(-50%)"></div></div></div> +<div><div><div style="bottom: calc(-25px - 50%)"></div></div></div> +<div><div><div style="bottom: calc(-150% / 2 + 30px)"></div></div></div> +<div><div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div></div></div> +<div><div><div style="bottom: calc(-40px + 10%)"></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-left-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-left-1.xht new file mode 100644 index 00000000000..d4715a498fb --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-left-1.xht @@ -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 Test: Test for left:calc() on relatively positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-offsets-relative-left-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 100px; width: 100px } +div[style] { background: blue; position: relative; height: 3px; } +</style> +</head> +<body> + +<div style="left: calc(50px)"></div> +<div style="left: calc(-50%)"></div> +<div style="left: calc(25px + 50%)"></div> +<div style="left: calc(-150% / 2 + 30px)"></div> +<div style="left: calc(40px + 10% - 20% / 2)"></div> +<div style="left: calc(10% - 40px)"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-right-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-right-1.xht new file mode 100644 index 00000000000..187b0d624fd --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-right-1.xht @@ -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 Test: Test for right:calc() on relatively positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-offsets-relative-left-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 100px; width: 100px } +div[style] { background: blue; position: relative; height: 3px; } +</style> +</head> +<body> + +<div style="right: calc(-50px)"></div> +<div style="right: calc(50%)"></div> +<div style="right: calc(-25px - 50%)"></div> +<div style="right: calc(150% / 2 - 30px)"></div> +<div style="right: calc(-40px - 10% + 20% / 2)"></div> +<div style="right: calc(-10% + 40px)"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-top-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-top-1.xht new file mode 100644 index 00000000000..e5f6ef85fa5 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-offsets-relative-top-1.xht @@ -0,0 +1,33 @@ +<!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 Test: Test for top:calc() on relatively positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-offsets-relative-top-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; height: 100px; width: 3px; } +div[style] { background: blue; position: relative; height: 10px; } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div><div style="top: calc(50px)"></div></div> +<div><div style="top: calc(50%)"></div></div> +<div><div style="top: calc(25px + 50%)"></div></div> +<div><div style="top: calc(150% / 2 - 30px)"></div></div> +<div><div style="top: calc(40px + 10% - 20% / 2)"></div></div> +<div><div style="top: calc(40px - 10%)"></div></div> + +<!-- tests with an auto-top container --> +<div><div><div style="top: calc(50px)"></div></div></div> +<div><div><div style="top: calc(50%)"></div></div></div> +<div><div><div style="top: calc(25px + 50%)"></div></div></div> +<div><div><div style="top: calc(150% / 2 - 30px)"></div></div></div> +<div><div><div style="top: calc(40px + 10% - 20% / 2)"></div></div></div> +<div><div><div style="top: calc(40px - 10%)"></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-padding-block-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-padding-block-1.xht new file mode 100644 index 00000000000..bef20f627ee --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-padding-block-1.xht @@ -0,0 +1,25 @@ +<!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 Test: Test of padding-*: calc()</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-padding-block-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { width: 500px } +div { border: medium solid green } +p { background: yellow; margin: 0 } + +</style> +</head> +<body> + +<div style="padding: calc(10px + 1%) 0 0 0"><p>paragraph with padding</p></div> +<div style="padding: 0 calc(10px + 1%) 0 0"><p>paragraph with padding</p></div> +<div style="padding: 0 0 calc(10px + 1%) 0"><p>paragraph with padding</p></div> +<div style="padding: 0 0 0 calc(10px + 1%)"><p>paragraph with padding</p></div> +<div style="padding: calc(30px - 1%)"><p>paragraph with padding</p></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-text-indent-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-text-indent-1.xht new file mode 100644 index 00000000000..4f7881db6d1 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-text-indent-1.xht @@ -0,0 +1,26 @@ +<!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 Test: text-indent: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-text-indent-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { width: 500px } +p { font-size: 10px } + +</style> +</head> +<body> + +<p style="text-indent: calc(50% - 3px)">50% - 3px</p> +<p style="text-indent: calc(25% - 3px + 25%)">25% - 3px + 25%</p> +<p style="text-indent: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p> +<p style="text-indent: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p> +<p style="text-indent: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p> +<p style="text-indent: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p> +<p style="text-indent: calc(30% + 20%)">30% + 20%</p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-text-indent-intrinsic-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-text-indent-intrinsic-1.xht new file mode 100644 index 00000000000..800f6cbb23b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-text-indent-intrinsic-1.xht @@ -0,0 +1,27 @@ +<!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 Test: intrinsic width of text-indent: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-text-indent-intrinsic-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { font-size: 10px } +div { float: left; clear: left; + margin: 0 0 1px 0; background: blue; color: white; height: 5px } +span { display: inline-block; width: 10px } + +</style> +</head> +<body> + +<div style="text-indent: calc(50% - 3px)"><span></span></div> +<div style="text-indent: calc(5em - 3px)"><span></span></div> +<div style="text-indent: calc(5em - 0%)"><span></span></div> +<div style="text-indent: calc(50%)"><span></span></div> +<div style="text-indent: calc(50px)"><span></span></div> +<div style="text-indent: calc(25% + 25%)"><span></span></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-transform-origin-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-transform-origin-1.xht new file mode 100644 index 00000000000..933ac83d73a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-transform-origin-1.xht @@ -0,0 +1,28 @@ +<!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 Test: Test for calc() on transform-origin</title> + <link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-transform-origin-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { margin: 100px } + +p { + height: 50px; width: 200px; + background: yellow; + transform: rotate(15deg); +} + +#one { transform-origin: calc(50px + 50%) calc(100% - 30px); } +#two { transform-origin: calc(-12.5% + 3px) calc(-10px - 50%); } + +</style> +</head> +<body> +<p id="one">hello</p> +<p id="two">hello</p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-unit-analysis.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-unit-analysis.xht new file mode 100644 index 00000000000..e64082cbe50 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-unit-analysis.xht @@ -0,0 +1,91 @@ +<!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 Variables Allowed Syntax</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://mozilla.com/" rel="author" title="Mozilla Corporation" /> + <link href="http://www.w3.org/TR/css3-values/#lengths" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#calc-type-checking" rel="help" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +<style id="style"></style> +<script id="metadata_cache">/* +{ + "unitless_zero_in_calc_is_a_numeric_type_not_length": { "assert": "invalid calc expression: unitless zero in calc() is a numeric type, not length" }, + "0px_in_calc": { "assert": "invalid calc expression: 0px in calc()" }, + "addition_of_length_and_number": { "assert": "invalid calc expression: addition of length and number" }, + "addition_of_number_and_length": { "assert": "invalid calc expression: addition of number and length" }, + "subtraction_of_length_and_number": { "assert": "invalid calc expression: subtraction of length and number" }, + "subtraction_of_number_and_length": { "assert": "invalid calc expression: subtraction of number and length" }, + "multiplication_of_length_and_number": { "assert": "invalid calc expression: multiplication of length and number" }, + "multiplication_of_number_and_length": { "assert": "invalid calc expression: multiplication of number and length" }, + "multiplication_of_length_and_length": { "assert": "invalid calc expression: multiplication of length and length" } +} +*/</script> +</head> +<body onload="run()"> +<div id="log"></div> +<div id="test"></div> +<script> + +function run() { + var test_elt = document.getElementById("test"); + var test_cs = window.getComputedStyle(test_elt, ""); + + function description_to_name(description) { + return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, ""); + } + + function assert_invalid_value(property, value, description) { + test(function() { + test_elt.style.setProperty(property, "inherit"); + test_elt.style.setProperty(property, value); + assert_equals(test_elt.style.getPropertyValue(property), + "inherit"); + test_elt.style.setProperty(property, value); + test_elt.style.removeProperty(property); + }, + description_to_name(description), + { assert: "invalid calc expression: " + description }); + } + + function assert_valid_value(property, value, computes_to, description) { + test(function() { + test_elt.style.setProperty(property, "inherit"); + test_elt.style.setProperty(property, value); + assert_not_equals(test_elt.style.getPropertyValue(property), + "inherit"); + assert_equals(test_cs.getPropertyValue(property), + computes_to); + test_elt.style.removeProperty(property); + }, + description_to_name(description), + { assert: "valid calc expression: " + description }); + } + + assert_invalid_value("margin-left", "calc(0)", + "unitless zero in calc() is a numeric type, not length"); + assert_valid_value("margin-left", "calc(0px)", "0px", + "0px in calc()"); + assert_invalid_value("margin-left", "calc(1px + 2)", + "addition of length and number"); + assert_invalid_value("margin-left", "calc(2 + 1px)", + "addition of number and length"); + assert_invalid_value("margin-left", "calc(1px - 2)", + "subtraction of length and number"); + assert_invalid_value("margin-left", "calc(2 - 1px)", + "subtraction of number and length"); + assert_valid_value("margin-left", "calc(2px * 2)", "4px", + "multiplication of length and number"); + assert_valid_value("margin-left", "calc(2 * 2px)", "4px", + "multiplication of number and length"); + assert_invalid_value("margin-left", "calc(2px * 1px)", + "multiplication of length and length"); + +} + +run(); + +</script> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-vertical-align-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-vertical-align-1.xht new file mode 100644 index 00000000000..2a1a2925ef4 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-vertical-align-1.xht @@ -0,0 +1,20 @@ +<!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 Test: Test for vertical-align:calc()</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-vertical-align-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> + +</head><body><div style="line-height: 100px; margin-top: 100px"> + <span>x</span> + <span style="vertical-align: calc(50px)">x</span> + <span style="vertical-align: calc(50%)">x</span> + <span style="vertical-align: calc(25px + 50%)">x</span> + <span style="vertical-align: calc(150% / 2 - 30px)">x</span> + <span style="vertical-align: calc(40px + 10% - 20% / 2)">x</span> + <span style="vertical-align: calc(40px - 10%)">x</span> +</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-block-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-block-1.xht new file mode 100644 index 00000000000..0f5d4d217a6 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-block-1.xht @@ -0,0 +1,26 @@ +<!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 Test: width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-width-block-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { width: 500px } +p { background: green; color: white; margin: 1px 0; font-size: 10px } + +</style> +</head> +<body> + +<p style="width: calc(50% - 3px)">50% - 3px</p> +<p style="width: calc(25% - 3px + 25%)">25% - 3px + 25%</p> +<p style="width: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p> +<p style="width: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p> +<p style="width: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p> +<p style="width: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p> +<p style="width: calc(30% + 20%)">30% + 20%</p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-block-intrinsic-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-block-intrinsic-1.xht new file mode 100644 index 00000000000..1edcd7cad3c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-block-intrinsic-1.xht @@ -0,0 +1,27 @@ +<!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 Test: intrinsic width of width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-width-block-intrinsic-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { font-size: 10px } +body > div { float: left; clear: left; + margin: 0 0 1px 0; background: blue; color: white; height: 5px } +body > div > div > div { width: 200px } + +</style> +</head> +<body> + +<div><div style="width: calc(50% - 3px)"><div></div></div></div> +<div><div style="width: calc(5em - 3px)"><div></div></div></div> +<div><div style="width: calc(5em - 0%)"><div></div></div></div> +<div><div style="width: calc(50%)"><div></div></div></div> +<div><div style="width: calc(50px)"><div></div></div></div> +<div><div style="width: calc(25% + 25%)"><div></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-table-auto-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-table-auto-1.xht new file mode 100644 index 00000000000..775779cf031 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-table-auto-1.xht @@ -0,0 +1,25 @@ +<!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 Test: width: calc() on table-layout: auto tables</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-width-table-auto-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +</head><body><table border=""> + <tbody><tr> + <td style="width: calc(500px)">x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> +<table border=""> + <tbody><tr> + <td style="width: calc(50%)">x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> +<table border=""> + <tbody><tr> + <td style="width: calc(2 * 10% + 0.5 * 500px)">x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-table-fixed-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-table-fixed-1.xht new file mode 100644 index 00000000000..2de64e478ed --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/calc-width-table-fixed-1.xht @@ -0,0 +1,30 @@ +<!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 Test: width: calc() on table-layout: auto tables</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help" /> + <link href="reference/calc-width-table-fixed-1-ref.xht" rel="match" /> + <meta content="" name="flags" /> +<style type="text/css"> +table { table-layout: fixed; width: 500px; border-spacing: 0 } +</style> +</head> +<body> +<table border=""> + <tbody><tr> + <td style="width: calc(500px)">x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> +<table border=""> + <tbody><tr> + <td style="width: calc(50%)">x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> +<table border=""> + <tbody><tr> + <td style="width: calc(2 * 10% + 0.5 * 500px)">x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/ch-unit-001.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/ch-unit-001.xht new file mode 100644 index 00000000000..b4044d2b39a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/ch-unit-001.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /> +<title>CSS Values and Units Test: support for the ch unit</title> +<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal" /> +<link href="https://drafts.csswg.org/css-values-3/#font-relative-lengths" rel="help" /> +<meta content="" name="flags" /> +<link href="reference/ch-unit-001-ref.xht" rel="match" /> +<meta content="The ch unit is equal to the used advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it." name="assert" /> +<style> +span { + background: green; + color: green; + top: 0; bottom: 0; + position: absolute; +} +div { + background: red; + color: red; + position: relative; + height: 10ch; + width: 5ch; + float: left; +} + +div + div { + width: auto; +} + +div + div span { + width: 5ch; +} +</style> +</head><body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div><span>00000</span></div> + <div><span></span>00000</div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-1.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-1.xht new file mode 100644 index 00000000000..f63a499be97 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-1.xht @@ -0,0 +1,45 @@ + + +<!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>Introduction - CSS Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite</h1> + <h2>Introduction (0 tests)</h2> + <table width="100%"> + <col id="test-column"></col> + <col id="refs-column"></col> + <col id="flags-column"></col> + <col id="info-column"></col> + <thead> + <tr> + <th>Test</th> + <th><abbr title="Rendering References">Refs</abbr></th> + <th>Flags</th> + <th>Info</th> + </tr> + </thead> + <tbody id="s1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s1">+</a> + <a href="http://www.w3.org/TR/css3-values/#intro">1 Introduction</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s1.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s1.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#placement">1.1 Module Interactions</a></th></tr> + <!-- 0 tests --> + </tbody> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-2.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-2.xht new file mode 100644 index 00000000000..499700c0993 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-2.xht @@ -0,0 +1,117 @@ + + +<!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>Value Definition Syntax - CSS Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite</h1> + <h2>Value Definition Syntax (0 tests)</h2> + <table width="100%"> + <col id="test-column"></col> + <col id="refs-column"></col> + <col id="flags-column"></col> + <col id="info-column"></col> + <thead> + <tr> + <th>Test</th> + <th><abbr title="Rendering References">Refs</abbr></th> + <th>Flags</th> + <th>Info</th> + </tr> + </thead> + <tbody id="s2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s2">+</a> + <a href="http://www.w3.org/TR/css3-values/#value-defs">2 Value Definition Syntax</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s2.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s2.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#component-types">2.1 Component value types</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s2.1.#comb-comma"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.1.#example-1c610a4c"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s2.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#component-combinators">2.2 Component value combinators</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s2.2.#comb-all"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.2.#comb-any"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.2.#comb-one"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.3"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s2.3">+</a> + <a href="http://www.w3.org/TR/css3-values/#component-multipliers">2.3 Component value multipliers</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s2.3.#mult-comma"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.3.#mult-num"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.3.#mult-num-range"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.3.#mult-one-plus"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.3.#mult-opt"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.3.#mult-req"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.3.#mult-zero-plus"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.4"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s2.4">+</a> + <a href="http://www.w3.org/TR/css3-values/#combinator-multiplier-patterns">2.4 Combinator and Multiplier Patterns</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s2.5"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s2.5">+</a> + <a href="http://www.w3.org/TR/css3-values/#component-whitespace">2.5 Component values and white space</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s2.6"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s2.6">+</a> + <a href="http://www.w3.org/TR/css3-values/#value-examples">2.6 Property value examples</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s2.6.#example-ceb46dd6"> + <!-- 0 tests --> + </tbody> + <tbody id="s2.6.#propvalues"> + <!-- 0 tests --> + </tbody> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-3.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-3.xht new file mode 100644 index 00000000000..dd1785450ad --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-3.xht @@ -0,0 +1,156 @@ + + +<!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>Textual Data Types - CSS Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite</h1> + <h2>Textual Data Types (3 tests)</h2> + <table width="100%"> + <col id="test-column"></col> + <col id="refs-column"></col> + <col id="flags-column"></col> + <col id="info-column"></col> + <thead> + <tr> + <th>Test</th> + <th><abbr title="Rendering References">Refs</abbr></th> + <th>Flags</th> + <th>Info</th> + </tr> + </thead> + <tbody id="s3"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s3">+</a> + <a href="http://www.w3.org/TR/css3-values/#textual-values">3 Textual Data Types</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s3.#identifier"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s3.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#keywords">3.1 Pre-defined Keywords</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s3.1.#example-fefeae88"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.1.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s3.1.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#common-keywords">3.1.1 CSS-wide keywords: initial, inherit and unset</a></th></tr> + <!-- 3 tests --> + <tr id="multicol-inherit-002-3.1.1" class="ahem"> + <td> + <a href="multicol-inherit-002.xht">multicol-inherit-002</a></td> + <td><a href="reference/multicol-inherit-002-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'column-count' and inherit + <ul class="assert"> + <li>This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'.</li> + </ul> + </td> + </tr> + <tr id="multicol-rule-color-inherit-001-3.1.1" class="ahem"> + <td> + <a href="multicol-rule-color-inherit-001.xht">multicol-rule-color-inherit-001</a></td> + <td><a href="reference/multicol-rule-color-inherit-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>column-rule-color: inherit + <ul class="assert"> + <li>This test checks that, by default, column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case column-rule-color will be inherited from the parent's column-rule-color value.</li> + </ul> + </td> + </tr> + <tr id="multicol-rule-color-inherit-002-3.1.1" class="ahem"> + <td> + <a href="multicol-rule-color-inherit-002.xht">multicol-rule-color-inherit-002</a></td> + <td><a href="reference/multicol-rule-color-inherit-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>column-rule-color: inherit (complex) + <ul class="assert"> + <li>This test checks that, by default, column-rule-color is the current color applying to the element.</li> + </ul> + </td> + </tr> + </tbody> + <tbody id="s3.1.1.#css_wide-keywords"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s3.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#custom-idents">3.2 Author-defined Identifiers: the <custom-ident> type</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s3.2.#example-4adf48cf"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.2.#identifier-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.3"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s3.3">+</a> + <a href="http://www.w3.org/TR/css3-values/#strings">3.3 Quoted Strings: the <string> type</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s3.3.#example-a6100cec"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.3.#example-aecae029"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.3.#string"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.3.#string-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.4"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s3.4">+</a> + <a href="http://www.w3.org/TR/css3-values/#urls">3.4 Resource Locators: the <url> type</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s3.4.#example-f4b87e68"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.4.#url"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.4.#url-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.4.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s3.4.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#relative-urls">3.4.1 Relative URLs</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s3.4.1.#example-b20bc0e0"> + <!-- 0 tests --> + </tbody> + <tbody id="s3.4.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s3.4.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#url-modifiers">3.4.2 URL Modifiers</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s3.4.2.#typedef-url-modifier"> + <!-- 0 tests --> + </tbody> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-4.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-4.xht new file mode 100644 index 00000000000..e89cfa4d64f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-4.xht @@ -0,0 +1,117 @@ + + +<!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>Numeric Data Types - CSS Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite</h1> + <h2>Numeric Data Types (3 tests)</h2> + <table width="100%"> + <col id="test-column"></col> + <col id="refs-column"></col> + <col id="flags-column"></col> + <col id="info-column"></col> + <thead> + <tr> + <th>Test</th> + <th><abbr title="Rendering References">Refs</abbr></th> + <th>Flags</th> + <th>Info</th> + </tr> + </thead> + <tbody id="s4"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s4">+</a> + <a href="http://www.w3.org/TR/css3-values/#numeric-types">4 Numeric Data Types</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s4.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s4.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#integers">4.1 Integers: the <integer> type</a></th></tr> + <!-- 3 tests --> + <tr id="multicol-count-non-integer-001-4.1" class="ahem invalid"> + <td> + <a href="multicol-count-non-integer-001.xht">multicol-count-non-integer-001</a></td> + <td><a href="reference/multicol-columns-invalid-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> + <td>non-integer 'column-count' value + <ul class="assert"> + <li>This test checks that a specified real 'column-count' value is invalid and ignored.</li> + </ul> + </td> + </tr> + <tr id="multicol-count-non-integer-002-4.1" class="ahem invalid"> + <td> + <a href="multicol-count-non-integer-002.xht">multicol-count-non-integer-002</a></td> + <td><a href="reference/multicol-columns-invalid-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> + <td>non-integer 'column-count' value + <ul class="assert"> + <li>This test checks that a specified real 'column-count' value is invalid and ignored.</li> + </ul> + </td> + </tr> + <tr id="multicol-count-non-integer-003-4.1" class="ahem invalid"> + <td> + <a href="multicol-count-non-integer-003.xht">multicol-count-non-integer-003</a></td> + <td><a href="reference/multicol-columns-invalid-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> + <td>non-integer 'column-count' value + <ul class="assert"> + <li>This test checks that a specified real 'column-count' value is invalid and ignored.</li> + </ul> + </td> + </tr> + </tbody> + <tbody id="s4.1.#integer"> + <!-- 0 tests --> + </tbody> + <tbody id="s4.1.#integer-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s4.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s4.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#numbers">4.2 Real Numbers: the <number> type</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s4.2.#number"> + <!-- 0 tests --> + </tbody> + <tbody id="s4.2.#number-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s4.3"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s4.3">+</a> + <a href="http://www.w3.org/TR/css3-values/#percentages">4.3 Percentages: the <percentage> type</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s4.3.#percentage"> + <!-- 0 tests --> + </tbody> + <tbody id="s4.3.#percentage-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s4.4"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s4.4">+</a> + <a href="http://www.w3.org/TR/css3-values/#dimensions">4.4 Numbers with Units: dimensions</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s4.4.#dimension"> + <!-- 0 tests --> + </tbody> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-5.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-5.xht new file mode 100644 index 00000000000..5f676187ee0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-5.xht @@ -0,0 +1,468 @@ + + +<!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>Distance Units: the <length> type - CSS Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite</h1> + <h2>Distance Units: the <length> type (30 tests)</h2> + <table width="100%"> + <col id="test-column"></col> + <col id="refs-column"></col> + <col id="flags-column"></col> + <col id="info-column"></col> + <thead> + <tr> + <th>Test</th> + <th><abbr title="Rendering References">Refs</abbr></th> + <th>Flags</th> + <th>Info</th> + </tr> + </thead> + <tbody id="s5"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s5">+</a> + <a href="http://www.w3.org/TR/css3-values/#lengths">5 Distance Units: the <length> type</a></th></tr> + <!-- 7 tests --> + <tr id="calc-unit-analysis-5" class="primary script"> + <td><strong> + <a href="calc-unit-analysis.xht">calc-unit-analysis</a></strong></td> + <td></td> + <td><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>CSS Variables Allowed Syntax + </td> + </tr> + <tr id="shape-outside-circle-002-5" class="dom script"> + <td> + <a href="shape-outside-circle-002.xht">shape-outside-circle-002</a></td> + <td></td> + <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Shape Outside Circle Valid Positions + <ul class="assert"> + <li>A circle's position argument may be any of the valid combinations: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ].</li> + </ul> + </td> + </tr> + <tr id="shape-outside-circle-004-5" class="dom script"> + <td> + <a href="shape-outside-circle-004.xht">shape-outside-circle-004</a></td> + <td></td> + <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Shape Outside Circle - Position Length Units + <ul class="assert"> + <li>A circle's position arguments may in any valid <length> unit allowed by a <position> value.</li> + </ul> + </td> + </tr> + <tr id="shape-outside-ellipse-002-5" class="dom script"> + <td> + <a href="shape-outside-ellipse-002.xht">shape-outside-ellipse-002</a></td> + <td></td> + <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Shape Outside Ellipse Valid Positions + <ul class="assert"> + <li>An ellipse's position argument may be any of the valid combinations: [ percentage|length left|center|right ] or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] or [ left|center|right ] or [ left|center|right top|center|bottom ] or [ top|center|bottom ].</li> + </ul> + </td> + </tr> + <tr id="shape-outside-ellipse-004-5" class="dom script"> + <td> + <a href="shape-outside-ellipse-004.xht">shape-outside-ellipse-004</a></td> + <td></td> + <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Shape Outside Ellipse - Position Length Units + <ul class="assert"> + <li>An ellipse's position arguments may in any valid <length> unit allowed by a <position> value.</li> + </ul> + </td> + </tr> + <tr id="shape-outside-inset-003-5" class="dom script"> + <td> + <a href="shape-outside-inset-003.xht">shape-outside-inset-003</a></td> + <td></td> + <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Shape Outside Inset Valid Round Length Units + <ul class="assert"> + <li>An inset's radial component's values can be in any length unit</li> + </ul> + </td> + </tr> + <tr id="shape-outside-polygon-004-5" class="dom script"> + <td> + <a href="shape-outside-polygon-004.xht">shape-outside-polygon-004</a></td> + <td></td> + <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Shape Outside Polygon - Argument Length Units + <ul class="assert"> + <li>A polygon's veritices may in percentage or any valid <length> units.</li> + </ul> + </td> + </tr> + </tbody> + <tbody id="s5.#length-value"> + <!-- 1 tests --> + <tr id="min-width-001-5.#length-value" class=""> + <td> + <a href="min-width-001.xht">min-width-001</a></td> + <td><a href="ref.xht">=</a> </td> + <td></td> + <td>min-width length value approximation + <ul class="assert"> + <li>min-width length values that are too large to be supported must be clamped, rounded to infinity, or approximated, but not overflowed to a small or negative value.</li> + </ul> + </td> + </tr> + </tbody> + <tbody id="s5.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s5.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#relative-lengths">5.1 Relative lengths</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.#relative-length"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s5.1.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#font-relative-lengths">5.1.1 Font-relative lengths: the em, ex, ch, rem units</a></th></tr> + <!-- 1 tests --> + <tr id="ch-unit-001-5.1.1" class="primary"> + <td><strong> + <a href="ch-unit-001.xht">ch-unit-001</a></strong></td> + <td><a href="reference/ch-unit-001-ref.xht">=</a> </td> + <td></td> + <td>support for the ch unit + <ul class="assert"> + <li>The ch unit is equal to the used advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.</li> + </ul> + </td> + </tr> + </tbody> + <tbody id="s5.1.1.#ch"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.1.#em"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.1.#ex"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.1.#example-14cae19d"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.1.#font-relative-length"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.1.#rem"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s5.1.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units</a></th></tr> + <!-- 21 tests --> + <tr id="absolute_length_units-5.1.2" class="primary"> + <td><strong> + <a href="absolute_length_units.xht">absolute_length_units</a></strong></td> + <td></td> + <td></td> + <td>elements should be the real world size given in mm, cm, inches... + <ul class="assert"> + <li>elements are not displayed with the real world size units they should be, when specified in millimeters, centimeters, inches, ...</li> + </ul> + </td> + </tr> + <tr id="regions-resizing-003-5.1.2" class="ahem dom http"> + <td> + <a href="regions-resizing-003.xht">regions-resizing-003</a></td> + <td><a href="reference/regions-resizing-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td> + <td>CSS Regions: resizing region that is sized using viewport units + <ul class="assert"> + <li>Test checks that resizing the viewport of a page containing a region sized using viewport units correctly relayouts the region's contents.</li> + </ul> + </td> + </tr> + <tr id="regions-resizing-007-5.1.2" class="ahem dom http"> + <td> + <a href="regions-resizing-007.xht">regions-resizing-007</a></td> + <td><a href="reference/regions-resizing-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td> + <td>CSS Regions: resizing region with percentage size inside a container that has size set in viewport units + <ul class="assert"> + <li>Test checks that resizing the viewport of a page containing a region that has a percentage size relative to a parent sized using viewport units correctly relayouts the region's contents.</li> + </ul> + </td> + </tr> + <tr id="regions-resizing-009-5.1.2" class="ahem dom http"> + <td> + <a href="regions-resizing-009.xht">regions-resizing-009</a></td> + <td><a href="reference/regions-resizing-001-ref.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td> + <td>CSS Regions: resizing autosized region when content flowed in it is sized with viewport units + <ul class="assert"> + <li>Test checks that resizing the viewport of a page containing an autosized region when the content flowed in it is sized with viewport units correctly relayouts the region's contents.</li> + </ul> + </td> + </tr> + <tr id="vh-calc-support-5.1.2" class="primary"> + <td><strong> + <a href="vh-calc-support.xht">vh-calc-support</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewport units are supported inside calc expressions. + <ul class="assert"> + <li>Check that viewport units add correctly to pixels in calc() expressions</li> + </ul> + </td> + </tr> + <tr id="vh-calc-support-pct-5.1.2" class="primary"> + <td><strong> + <a href="vh-calc-support-pct.xht">vh-calc-support-pct</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewport units are supported inside calc expressions. + <ul class="assert"> + <li>Check that viewport units add correctly to percentages in calc() expressions</li> + </ul> + </td> + </tr> + <tr id="vh-em-inherit-5.1.2" class="primary"> + <td><strong> + <a href="vh-em-inherit.xht">vh-em-inherit</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>0vh and 0vw are correctly treated as 0px + <ul class="assert"> + <li>0vh and 0vw are correctly treated as 0px</li> + </ul> + </td> + </tr> + <tr id="vh-inherit-5.1.2" class="primary"> + <td><strong> + <a href="vh-inherit.xht">vh-inherit</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewport units are inherited properly + <ul class="assert"> + <li>Viewport units are inherited properly</li> + </ul> + </td> + </tr> + <tr id="vh-interpolate-pct-5.1.2" class="primary"> + <td><strong> + <a href="vh-interpolate-pct.xht">vh-interpolate-pct</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewport units are interpolated correctly + <ul class="assert"> + <li>The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)</li> + </ul> + </td> + </tr> + <tr id="vh-interpolate-px-5.1.2" class="primary"> + <td><strong> + <a href="vh-interpolate-px.xht">vh-interpolate-px</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewport units are interpolated correctly + <ul class="assert"> + <li>The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)</li> + </ul> + </td> + </tr> + <tr id="vh-interpolate-vh-5.1.2" class="primary"> + <td><strong> + <a href="vh-interpolate-vh.xht">vh-interpolate-vh</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewport units are interpolated correctly + <ul class="assert"> + <li>The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)</li> + </ul> + </td> + </tr> + <tr id="vh-support-5.1.2" class="primary"> + <td><strong> + <a href="vh-support.xht">vh-support</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewports units are supported in sizing properties + <ul class="assert"> + <li>Viewports units are supported in sizing properties</li> + </ul> + </td> + </tr> + <tr id="vh-support-atviewport-5.1.2" class="primary"> + <td><strong> + <a href="vh-support-atviewport.xht">vh-support-atviewport</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewports units are supported in @viewport rules + <ul class="assert"> + <li>Viewports units are supported in @viewport rules</li> + </ul> + </td> + </tr> + <tr id="vh-support-margin-5.1.2" class="primary"> + <td><strong> + <a href="vh-support-margin.xht">vh-support-margin</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewports units are supported in margin properties + <ul class="assert"> + <li>Viewports units are supported in margin properties</li> + </ul> + </td> + </tr> + <tr id="vh-support-transform-origin-5.1.2" class="primary"> + <td><strong> + <a href="vh-support-transform-origin.xht">vh-support-transform-origin</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewports units are supported in transform properties + <ul class="assert"> + <li>Viewports units are supported in transform properties</li> + </ul> + </td> + </tr> + <tr id="vh-support-transform-translate-5.1.2" class="primary"> + <td><strong> + <a href="vh-support-transform-translate.xht">vh-support-transform-translate</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>Viewports units are supported in transform properties + <ul class="assert"> + <li>Viewports units are supported in transform properties (translate)</li> + </ul> + </td> + </tr> + <tr id="vh-zero-support-5.1.2" class="primary"> + <td><strong> + <a href="vh-zero-support.xht">vh-zero-support</a></strong></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td></td> + <td>0vh and 0vw are correctly treated as 0px + <ul class="assert"> + <li>0vh and 0vw are correctly treated as 0px</li> + </ul> + </td> + </tr> + <tr id="vh_not_refreshing_on_chrome-5.1.2" class="primary"> + <td><strong> + <a href="vh_not_refreshing_on_chrome.xht">vh_not_refreshing_on_chrome</a></strong></td> + <td><a href="reference/vh_not_refreshing_on_chrome-ref.xht">=</a> </td> + <td></td> + <td>vh-based dimension doesn't change when the element's other dimension doesn't change. + <ul class="assert"> + <li>vh-based dimension doesn't change when the element's other dimension doesn't change.</li> + </ul> + </td> + </tr> + <tr id="vh_not_refreshing_on_chrome_iframe-5.1.2" class="primary"> + <td><strong> + <a href="vh_not_refreshing_on_chrome_iframe.xht">vh_not_refreshing_on_chrome_iframe</a></strong></td> + <td><a href="reference/vh_not_refreshing_on_chrome-ref.xht">=</a> </td> + <td></td> + <td>vh-based dimension doesn't change when the element other dimension doesn't change. + <ul class="assert"> + <li>vh-based dimension doesn't change when the element other dimension doesn't change. Bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8</li> + </ul> + </td> + </tr> + <tr id="viewport-relative-lengths-scaled-viewport-5.1.2" class="primary script"> + <td><strong> + <a href="viewport-relative-lengths-scaled-viewport.xht">viewport-relative-lengths-scaled-viewport</a></strong></td> + <td></td> + <td><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Viewport units in scaled viewport + <ul class="assert"> + <li>viewport relative units scale with viewport.</li> + </ul> + </td> + </tr> + <tr id="viewport-units-css2-001-5.1.2" class="primary script"> + <td><strong> + <a href="viewport-units-css2-001.xht">viewport-units-css2-001</a></strong></td> + <td></td> + <td><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Checks viewport units against CSS 2.1 properties and the CSSOM + <ul class="assert"> + <li>Testing what happens when one applies and rereads viewport unit lengths to CSS 2.1 properties that accept length values</li> + </ul> + </td> + </tr> + </tbody> + <tbody id="s5.1.2.#example-74b4de35"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.2.#vh"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.2.#viewport_percentage-lengths"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.2.#vmax"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.2.#vmin"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.1.2.#vw"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s5.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#absolute-lengths">5.2 Absolute lengths: the cm, mm, q, in, pt, pc, px units</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#absolute-length"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#cm"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#example-42a5d4eb"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#in"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#mm"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#pc"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#physical-units"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#pt"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#px"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#q"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#reference-pixel"> + <!-- 0 tests --> + </tbody> + <tbody id="s5.2.#visual-angle-unit"> + <!-- 0 tests --> + </tbody> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-6.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-6.xht new file mode 100644 index 00000000000..aadf89cb06b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-6.xht @@ -0,0 +1,136 @@ + + +<!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>Other Quantities - CSS Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite</h1> + <h2>Other Quantities (2 tests)</h2> + <table width="100%"> + <col id="test-column"></col> + <col id="refs-column"></col> + <col id="flags-column"></col> + <col id="info-column"></col> + <thead> + <tr> + <th>Test</th> + <th><abbr title="Rendering References">Refs</abbr></th> + <th>Flags</th> + <th>Info</th> + </tr> + </thead> + <tbody id="s6"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s6">+</a> + <a href="http://www.w3.org/TR/css3-values/#other-units">6 Other Quantities</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s6.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s6.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#angles">6.1 Angle Units: the <angle> type and deg, grad, rad, turn units</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s6.1.#angle-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.1.#bearing-angle"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.1.#deg"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.1.#grad"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.1.#rad"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.1.#turn"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s6.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#time">6.2 Duration Units: the <time> type and s, ms units</a></th></tr> + <!-- 2 tests --> + <tr id="transition-delay-001-6.2" class="dom script"> + <td> + <a href="transition-delay-001.xht">transition-delay-001</a></td> + <td></td> + <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Parsing transition-delay + <ul class="assert"> + <li>Test checks that transition-delay values are parsed properly</li> + </ul> + </td> + </tr> + <tr id="transition-duration-001-6.2" class="dom script"> + <td> + <a href="transition-duration-001.xht">transition-duration-001</a></td> + <td></td> + <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>Parsing transition-duration + <ul class="assert"> + <li>Test checks that transition-duration values are parsed properly</li> + </ul> + </td> + </tr> + </tbody> + <tbody id="s6.2.#ms"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.2.#s"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.2.#time-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.3"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s6.3">+</a> + <a href="http://www.w3.org/TR/css3-values/#frequency">6.3 Frequency Units: the <frequency> type and Hz, kHz units</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s6.3.#frequency-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.3.#hz"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.3.#khz"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.4"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s6.4">+</a> + <a href="http://www.w3.org/TR/css3-values/#resolution">6.4 Resolution Units: the <resolution> type and dpi, dpcm, dppx units</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s6.4.#dpcm"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.4.#dpi"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.4.#dppx"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.4.#example-0c0bf820"> + <!-- 0 tests --> + </tbody> + <tbody id="s6.4.#resolution-value"> + <!-- 0 tests --> + </tbody> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-7.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-7.xht new file mode 100644 index 00000000000..711aebbe2ff --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-7.xht @@ -0,0 +1,57 @@ + + +<!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>Data Types Defined Elsewhere - CSS Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite</h1> + <h2>Data Types Defined Elsewhere (0 tests)</h2> + <table width="100%"> + <col id="test-column"></col> + <col id="refs-column"></col> + <col id="flags-column"></col> + <col id="info-column"></col> + <thead> + <tr> + <th>Test</th> + <th><abbr title="Rendering References">Refs</abbr></th> + <th>Flags</th> + <th>Info</th> + </tr> + </thead> + <tbody id="s7"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s7">+</a> + <a href="http://www.w3.org/TR/css3-values/#defined-elsewhere">7 Data Types Defined Elsewhere</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s7.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s7.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#colors">7.1 Colors: the <color> type</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s7.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s7.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#images">7.2 Images: the <image> type</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s7.3"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s7.3">+</a> + <a href="http://www.w3.org/TR/css3-values/#position">7.3 2D Positioning: the <position> type</a></th></tr> + <!-- 0 tests --> + </tbody> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-8.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-8.xht new file mode 100644 index 00000000000..9a6aab51354 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-8.xht @@ -0,0 +1,418 @@ + + +<!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>Functional Notations - CSS Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite</h1> + <h2>Functional Notations (32 tests)</h2> + <table width="100%"> + <col id="test-column"></col> + <col id="refs-column"></col> + <col id="flags-column"></col> + <col id="info-column"></col> + <thead> + <tr> + <th>Test</th> + <th><abbr title="Rendering References">Refs</abbr></th> + <th>Flags</th> + <th>Info</th> + </tr> + </thead> + <tbody id="s8"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s8">+</a> + <a href="http://www.w3.org/TR/css3-values/#functional-notations">8 Functional Notations</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s8.#example-9de05e52"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.#functional-notation"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s8.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#calc-notation">8.1 Mathematical Expressions: calc()</a></th></tr> + <!-- 31 tests --> + <tr id="calc-background-image-gradient-1-8.1" class="primary"> + <td><strong> + <a href="calc-background-image-gradient-1.xht">calc-background-image-gradient-1</a></strong></td> + <td><a href="reference/calc-background-image-gradient-1-ref.xht">=</a> </td> + <td></td> + <td>Test for calc() on background-image gradients + </td> + </tr> + <tr id="calc-background-linear-gradient-1-8.1" class="primary"> + <td><strong> + <a href="calc-background-linear-gradient-1.xht">calc-background-linear-gradient-1</a></strong></td> + <td><a href="reference/calc-background-linear-gradient-1-ref.xht">=</a> </td> + <td></td> + <td>Support calc() on gradient stop positions + </td> + </tr> + <tr id="calc-background-position-1-8.1" class="primary"> + <td><strong> + <a href="calc-background-position-1.xht">calc-background-position-1</a></strong></td> + <td><a href="reference/calc-background-position-1-ref.xht">=</a> </td> + <td></td> + <td>Test for calc() on background-position + </td> + </tr> + <tr id="calc-background-size-1-8.1" class="primary"> + <td><strong> + <a href="calc-background-size-1.xht">calc-background-size-1</a></strong></td> + <td><a href="reference/calc-background-size-1-ref.xht">=</a> </td> + <td></td> + <td>Test for calc() on background-size + </td> + </tr> + <tr id="calc-border-radius-1-8.1" class="primary"> + <td><strong> + <a href="calc-border-radius-1.xht">calc-border-radius-1</a></strong></td> + <td><a href="reference/calc-border-radius-1-ref.xht">=</a> </td> + <td></td> + <td>test for border-radius: calc() + </td> + </tr> + <tr id="calc-height-block-1-8.1" class="primary"> + <td><strong> + <a href="calc-height-block-1.xht">calc-height-block-1</a></strong></td> + <td><a href="reference/calc-height-block-1-ref.xht">=</a> </td> + <td></td> + <td>Test for height:calc() on blocks + </td> + </tr> + <tr id="calc-height-table-1-8.1" class="primary"> + <td><strong> + <a href="calc-height-table-1.xht">calc-height-table-1</a></strong></td> + <td><a href="reference/calc-height-table-1-ref.xht">=</a> </td> + <td></td> + <td>Test that height:calc() with no percentages has an effect on inner table elements + </td> + </tr> + <tr id="calc-margin-block-1-8.1" class="primary"> + <td><strong> + <a href="calc-margin-block-1.xht">calc-margin-block-1</a></strong></td> + <td><a href="reference/calc-margin-block-1-ref.xht">=</a> </td> + <td></td> + <td>Test of margin-*: calc() + </td> + </tr> + <tr id="calc-max-height-block-1-8.1" class="primary"> + <td><strong> + <a href="calc-max-height-block-1.xht">calc-max-height-block-1</a></strong></td> + <td><a href="reference/calc-max-height-block-1-ref.xht">=</a> </td> + <td></td> + <td>Test for max-height:calc() on blocks + </td> + </tr> + <tr id="calc-max-width-block-1-8.1" class="primary"> + <td><strong> + <a href="calc-max-width-block-1.xht">calc-max-width-block-1</a></strong></td> + <td><a href="reference/calc-width-block-1-ref.xht">=</a> </td> + <td></td> + <td>max-width: calc() on blocks + </td> + </tr> + <tr id="calc-max-width-block-intrinsic-1-8.1" class="primary"> + <td><strong> + <a href="calc-max-width-block-intrinsic-1.xht">calc-max-width-block-intrinsic-1</a></strong></td> + <td><a href="reference/calc-max-width-block-intrinsic-1-ref.xht">=</a> </td> + <td></td> + <td>intrinsic width of max-width: calc() on blocks + </td> + </tr> + <tr id="calc-min-height-block-1-8.1" class="primary"> + <td><strong> + <a href="calc-min-height-block-1.xht">calc-min-height-block-1</a></strong></td> + <td><a href="reference/calc-height-block-1-ref.xht">=</a> </td> + <td></td> + <td>Test for min-height:calc() on blocks + </td> + </tr> + <tr id="calc-min-width-block-1-8.1" class="primary"> + <td><strong> + <a href="calc-min-width-block-1.xht">calc-min-width-block-1</a></strong></td> + <td><a href="reference/calc-width-block-1-ref.xht">=</a> </td> + <td></td> + <td>min-width: calc() on blocks + </td> + </tr> + <tr id="calc-min-width-block-intrinsic-1-8.1" class="primary"> + <td><strong> + <a href="calc-min-width-block-intrinsic-1.xht">calc-min-width-block-intrinsic-1</a></strong></td> + <td><a href="reference/calc-min-width-block-intrinsic-1-ref.xht">=</a> </td> + <td></td> + <td>intrinsic width of min-width: calc() on blocks + </td> + </tr> + <tr id="calc-offsets-absolute-bottom-1-8.1" class="primary"> + <td><strong> + <a href="calc-offsets-absolute-bottom-1.xht">calc-offsets-absolute-bottom-1</a></strong></td> + <td><a href="reference/calc-offsets-absolute-top-1-ref.xht">=</a> </td> + <td></td> + <td>Test for bottom:calc() on absolutely positioned elements + </td> + </tr> + <tr id="calc-offsets-absolute-left-1-8.1" class="primary"> + <td><strong> + <a href="calc-offsets-absolute-left-1.xht">calc-offsets-absolute-left-1</a></strong></td> + <td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td> + <td></td> + <td>Test for left:calc() on absolutely positioned elements + </td> + </tr> + <tr id="calc-offsets-absolute-right-1-8.1" class="primary"> + <td><strong> + <a href="calc-offsets-absolute-right-1.xht">calc-offsets-absolute-right-1</a></strong></td> + <td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td> + <td></td> + <td>Test for right:calc() on absolutely positioned elements + </td> + </tr> + <tr id="calc-offsets-absolute-top-1-8.1" class="primary"> + <td><strong> + <a href="calc-offsets-absolute-top-1.xht">calc-offsets-absolute-top-1</a></strong></td> + <td><a href="reference/calc-offsets-absolute-top-1-ref.xht">=</a> </td> + <td></td> + <td>Test for top:calc() on absolutely positioned elements + </td> + </tr> + <tr id="calc-offsets-relative-bottom-1-8.1" class="primary"> + <td><strong> + <a href="calc-offsets-relative-bottom-1.xht">calc-offsets-relative-bottom-1</a></strong></td> + <td><a href="reference/calc-offsets-relative-top-1-ref.xht">=</a> </td> + <td></td> + <td>Test for bottom:calc() on relatively positioned elements + </td> + </tr> + <tr id="calc-offsets-relative-left-1-8.1" class="primary"> + <td><strong> + <a href="calc-offsets-relative-left-1.xht">calc-offsets-relative-left-1</a></strong></td> + <td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td> + <td></td> + <td>Test for left:calc() on relatively positioned elements + </td> + </tr> + <tr id="calc-offsets-relative-right-1-8.1" class="primary"> + <td><strong> + <a href="calc-offsets-relative-right-1.xht">calc-offsets-relative-right-1</a></strong></td> + <td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td> + <td></td> + <td>Test for right:calc() on relatively positioned elements + </td> + </tr> + <tr id="calc-offsets-relative-top-1-8.1" class="primary"> + <td><strong> + <a href="calc-offsets-relative-top-1.xht">calc-offsets-relative-top-1</a></strong></td> + <td><a href="reference/calc-offsets-relative-top-1-ref.xht">=</a> </td> + <td></td> + <td>Test for top:calc() on relatively positioned elements + </td> + </tr> + <tr id="calc-padding-block-1-8.1" class="primary"> + <td><strong> + <a href="calc-padding-block-1.xht">calc-padding-block-1</a></strong></td> + <td><a href="reference/calc-padding-block-1-ref.xht">=</a> </td> + <td></td> + <td>Test of padding-*: calc() + </td> + </tr> + <tr id="calc-text-indent-1-8.1" class="primary"> + <td><strong> + <a href="calc-text-indent-1.xht">calc-text-indent-1</a></strong></td> + <td><a href="reference/calc-text-indent-1-ref.xht">=</a> </td> + <td></td> + <td>text-indent: calc() on blocks + </td> + </tr> + <tr id="calc-text-indent-intrinsic-1-8.1" class="primary"> + <td><strong> + <a href="calc-text-indent-intrinsic-1.xht">calc-text-indent-intrinsic-1</a></strong></td> + <td><a href="reference/calc-text-indent-intrinsic-1-ref.xht">=</a> </td> + <td></td> + <td>intrinsic width of text-indent: calc() on blocks + </td> + </tr> + <tr id="calc-transform-origin-1-8.1" class="primary"> + <td><strong> + <a href="calc-transform-origin-1.xht">calc-transform-origin-1</a></strong></td> + <td><a href="reference/calc-transform-origin-1-ref.xht">=</a> </td> + <td></td> + <td>Test for calc() on transform-origin + </td> + </tr> + <tr id="calc-vertical-align-1-8.1" class="primary"> + <td><strong> + <a href="calc-vertical-align-1.xht">calc-vertical-align-1</a></strong></td> + <td><a href="reference/calc-vertical-align-1-ref.xht">=</a> </td> + <td></td> + <td>Test for vertical-align:calc() + </td> + </tr> + <tr id="calc-width-block-1-8.1" class="primary"> + <td><strong> + <a href="calc-width-block-1.xht">calc-width-block-1</a></strong></td> + <td><a href="reference/calc-width-block-1-ref.xht">=</a> </td> + <td></td> + <td>width: calc() on blocks + </td> + </tr> + <tr id="calc-width-block-intrinsic-1-8.1" class="primary"> + <td><strong> + <a href="calc-width-block-intrinsic-1.xht">calc-width-block-intrinsic-1</a></strong></td> + <td><a href="reference/calc-width-block-intrinsic-1-ref.xht">=</a> </td> + <td></td> + <td>intrinsic width of width: calc() on blocks + </td> + </tr> + <tr id="calc-width-table-auto-1-8.1" class="primary"> + <td><strong> + <a href="calc-width-table-auto-1.xht">calc-width-table-auto-1</a></strong></td> + <td><a href="reference/calc-width-table-auto-1-ref.xht">=</a> </td> + <td></td> + <td>width: calc() on table-layout: auto tables + </td> + </tr> + <tr id="calc-width-table-fixed-1-8.1" class="primary"> + <td><strong> + <a href="calc-width-table-fixed-1.xht">calc-width-table-fixed-1</a></strong></td> + <td><a href="reference/calc-width-table-fixed-1-ref.xht">=</a> </td> + <td></td> + <td>width: calc() on table-layout: auto tables + </td> + </tr> + </tbody> + <tbody id="s8.1.#example-0bd12a8e"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.#example-2b4e561f"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.#example-6e868f9c"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.#example-776de6b9"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.#example-f570e599"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.#funcdef-calc"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s8.1.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#calc-syntax">8.1.1 Syntax</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.1.#typedef-calc-product"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.1.#typedef-calc-sum"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.1.#typedef-calc-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.1.#typedef-dimension"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s8.1.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#calc-type-checking">8.1.2 Type Checking</a></th></tr> + <!-- 1 tests --> + <tr id="calc-unit-analysis-8.1.2" class="script"> + <td> + <a href="calc-unit-analysis.xht">calc-unit-analysis</a></td> + <td></td> + <td><abbr class="script" title="Executes tests in script">Script</abbr></td> + <td>CSS Variables Allowed Syntax + </td> + </tr> + </tbody> + <tbody id="s8.1.2.#resolved-type"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.3"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s8.1.3">+</a> + <a href="http://www.w3.org/TR/css3-values/#calc-computed-value">8.1.3 Computed Value</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.3.#example-240b0ace"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.4"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s8.1.4">+</a> + <a href="http://www.w3.org/TR/css3-values/#calc-range">8.1.4 Range Checking</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s8.1.4.#example-02a3b71f"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.2"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s8.2">+</a> + <a href="http://www.w3.org/TR/css3-values/#toggle-notation">8.2 Toggling Between Values: toggle()</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s8.2.#example-17046e65"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.2.#example-349c53dd"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.2.#example-851607de"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.2.#example-9492bba0"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.2.#funcdef-toggle"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.2.#typedef-toggle-value"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.3"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s8.3">+</a> + <a href="http://www.w3.org/TR/css3-values/#attr-notation">8.3 Attribute References: attr()</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s8.3.#example-0366e27a"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.3.#example-4771a1ff"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.3.#funcdef-attr"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.3.#typedef-attr-fallback"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.3.#typedef-attr-name"> + <!-- 0 tests --> + </tbody> + <tbody id="s8.3.#typedef-type-or-unit"> + <!-- 0 tests --> + </tbody> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-9.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-9.xht new file mode 100644 index 00000000000..38777ae4e2f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/chapter-9.xht @@ -0,0 +1,207 @@ + + +<!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>Appendix A: IANA Considerations - CSS Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite</h1> + <h2>Appendix A: IANA Considerations (0 tests)</h2> + <table width="100%"> + <col id="test-column"></col> + <col id="refs-column"></col> + <col id="flags-column"></col> + <col id="info-column"></col> + <thead> + <tr> + <th>Test</th> + <th><abbr title="Rendering References">Refs</abbr></th> + <th>Flags</th> + <th>Info</th> + </tr> + </thead> + <tbody id="s9"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s9">+</a> + <a href="http://www.w3.org/TR/css3-values/#iana">9 Appendix A: IANA Considerations</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s9.1"> + <tr><th colspan="4" scope="rowgroup"> + <a href="#s9.1">+</a> + <a href="http://www.w3.org/TR/css3-values/#about-invalid">9.1 Registration for the about:invalid URL scheme</a></th></tr> + <!-- 0 tests --> + </tbody> + <tbody id="s.#abstract"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#acknowledgments"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-compositing-1"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-animations-1"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-backgrounds-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-break-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-cascade-4"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-color-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-color-4"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-counter-styles-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-fonts-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-images-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-overflow-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-syntax-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-text-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-text-decor-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-transitions-1"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css-ui-3"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css21"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css3-fonts"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css3-images"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css3bg"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css3cascade"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css3color"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css3namespace"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css3page"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-css3syn"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-dom-ls"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-filters-1"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-mediaq"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-mediaqueries-4"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-rfc2119"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-rfc6694"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-selectors-4"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#biblio-url"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#changes"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#conformance"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#conformance-classes"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#contents"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#conventions"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#example-f839f6c8"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#experimental"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#index"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#index-defined-elsewhere"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#index-defined-here"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#informative"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#normative"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#partial"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#references"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#status"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#subtitle"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#testing"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#title"> + <!-- 0 tests --> + </tbody> + <tbody id="s.#w3c_process_revision"> + <!-- 0 tests --> + </tbody> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/min-width-001.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/min-width-001.xht new file mode 100644 index 00000000000..115a48398a3 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/min-width-001.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html SYSTEM "about:legacy-compat"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <meta charset="utf-8"/> + <title>CSS Media Queries Test: min-width length value approximation</title> + <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width"/> + <link rel="help" href="http://www.w3.org/TR/mediaqueries-4/#width"/> + <link rel="help" href="http://www.w3.org/TR/css3-values/#length-value"/> + <link rel="match" href="ref.xht"/> + <meta name="flags" content=""/> + <meta name="assert" content="min-width length values that are too large to be supported must be clamped, rounded to infinity, or approximated, but not overflowed to a small or negative value."/> + <style> +div { + width: 100px; + height: 100px; + background-color: green; +} +@media (min-width: 9999999999px) { + div { + background-color: red; + } +} + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div/> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-count-non-integer-001.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-count-non-integer-001.xht new file mode 100644 index 00000000000..0f829bc715d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-count-non-integer-001.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Multi-column Layout Test: non-integer 'column-count' value</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" /> + <link rel="match" href="reference/multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-count: 2.1; /* invalid; must be an integer */ + column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-count-non-integer-002.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-count-non-integer-002.xht new file mode 100644 index 00000000000..4f89303ffc5 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-count-non-integer-002.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Multi-column Layout Test: non-integer 'column-count' value</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" /> + <link rel="match" href="reference/multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-count: 1.9; /* invalid; must be an integer */ + column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-count-non-integer-003.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-count-non-integer-003.xht new file mode 100644 index 00000000000..2857395be42 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-count-non-integer-003.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Multi-column Layout Test: non-integer 'column-count' value</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" /> + <link rel="match" href="reference/multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-count: 2.0; /* invalid; must be an integer */ + column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-inherit-002.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-inherit-002.xht new file mode 100644 index 00000000000..3c4f450d75b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-inherit-002.xht @@ -0,0 +1,82 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Multi-column Layout Test: 'column-count' and inherit</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> + <link rel="match" href="reference/multicol-inherit-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." /> + <style type="text/css"><![CDATA[ + body > div + { + background-color: blue; + column-count: 3; + column-gap: 1em; + font: 1.25em/1 Ahem; + width: 32em; + + /* + N == 3; + + 32em + - 2em : 2 column gaps + ========== + 30em : available width of the 3 inner multi-column elements + + So, W == 10em; + + 30em + - 6em : 3 mult by 2em: horizontal margin of 3 inner multi-column elements + - 6em : 3 mult by 2em: horizontal column-gaps of all 3 inner multi-column elements + ========== + 18em : 6em for each of the 3 column boxes without their own horizontal margins + So, each column boxes of inner multi-column elements is 2em wide. + */ + } + + div + { + color: black; + margin: 1em; + orphans: 1; + widows: 1; + } + + div > div + { + background-color: yellow; + column-count: inherit; + column-gap: 1em; + } + + div > div:first-child {margin-top: 0;} + ]]></style> + </head> + <body> + + <div> + <div> + aa aa + aa aa + aa aa + aa aa + </div> + <div> + mm mm + mm mm + mm mm + mm mm + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-rule-color-inherit-001.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-rule-color-inherit-001.xht new file mode 100644 index 00000000000..83eb5968098 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-rule-color-inherit-001.xht @@ -0,0 +1,137 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Multi-column Layout Test: column-rule-color: inherit</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-02 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. 'column-rule-color'" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> + <link rel="match" href="reference/multicol-rule-color-inherit-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that, by default, column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case column-rule-color will be inherited from the parent's column-rule-color value." /> + <style type="text/css"><![CDATA[ + div#parent + { + column-rule-color: green; + column-rule-style: none; + font: 1.25em/1 Ahem; + width: 17em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (17em - ((3 - 1) * 1em)) / 3); + W == max(0, (17em - (2 * 1em)) / 3); + W == max(0, (17em - 2em) / 3); + W == max(0, 15em / 3); + W == max(0, 5em); + W == 5em; + + The height of column rule depends on number of line boxes in + each outer column box which depends on number of line boxes + in each inner column box. + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (5em - ((3 - 1) * 1em)) / 3); + W == max(0, (5em - (2 * 1em)) / 3); + W == max(0, (5em - 2em) / 3); + W == max(0, 3em / 3); + W == max(0, 1em); + W == 1em; + + */ + + div + { + color: red; /* both div#parent and div.child have and use 'color: red' */ + orphans: 1; + widows: 1; + + column-count: 3; + column-gap: 1em; + column-rule-width: 1em; + } + + div.child + { + column-rule-color: inherit; + column-rule-style: solid; + font-size: 1em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p> + + <div id="parent"> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-rule-color-inherit-002.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-rule-color-inherit-002.xht new file mode 100644 index 00000000000..96a210d39d2 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/multicol-rule-color-inherit-002.xht @@ -0,0 +1,120 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Multi-column Layout Test: column-rule-color: inherit (complex)</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. 'column-rule-color'" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> + <link rel="match" href="reference/multicol-rule-color-inherit-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that, by default, column-rule-color is the current color applying to the element." /> + <style type="text/css"><![CDATA[ + div#parent + { + color: green; + font: 1.25em/1 Ahem; + } + + div.child + { + color: red; + display: inline-block; + font-size: 1em; + width: 5em; + + column-count: 3; + column-gap: 1em; + column-rule-color: inherit; + column-rule-style: solid; + column-rule-width: 1em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (5em - ((3 - 1) * 1em)) / 3); + W == max(0, (5em - (2 * 1em)) / 3); + W == max(0, (5em - 2em) / 3); + W == max(0, 3em / 3); + W == max(0, 1em); + W == 1em; + + */ + + ]]></style> + </head> + + <body> + + <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p> + + <div id="parent"> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/ref.xht new file mode 100644 index 00000000000..c0148889a62 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/ref.xht @@ -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 Reftest Reference</title> + <link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal" /> + <style> + div { + background-color:green; + height:100px; + width:100px; + } + </style> + </head> + <body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/all-green.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/all-green.xht new file mode 100644 index 00000000000..76df4226c11 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/all-green.xht @@ -0,0 +1,2 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html style="background: green" xmlns="http://www.w3.org/1999/xhtml"><head></head><body></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-image-gradient-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-image-gradient-1-ref.xht new file mode 100644 index 00000000000..bdd6d0bbaf7 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-image-gradient-1-ref.xht @@ -0,0 +1,21 @@ +<!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 Reference: Test for calc() on background-image gradients</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +p { + height: 50px; width: 200px; + border: thin solid; +} + +#one { background-image: radial-gradient(circle farthest-side at 150px 20px, red, green); } + +</style> +</head> +<body> +<p id="one"></p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-linear-gradient-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-linear-gradient-1-ref.xht new file mode 100644 index 00000000000..00821726e83 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-linear-gradient-1-ref.xht @@ -0,0 +1,39 @@ +<!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 Reference: Support calc() on gradient stop positions</title> + <link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935" rel="author" title="Yu-Sian (Thomasy) Liu" /> + <meta content="" name="flags" /> +<style type="text/css"> +div { + width:100px; + height:100px; + background:red; + margin:5px 0 0 5px; + float:left; +} +div#one { + background: linear-gradient(lime 0px, lime 90px, blue 90px, blue 100%); +} +div#two { + background: linear-gradient(blue 0px ,green 30px ,red 40px ,white 60px , lime 80px); +} +div#three { + background: linear-gradient(blue 0px ,purple 20px ,red 40px ,blue 60px , lime 80px); +} +div#four { + background: linear-gradient(blue 0px ,green 30px ,red 40px ,blue 60px , yellow 80px); +} +div#five { + background: linear-gradient(red 0px ,green 30px); +} +</style> +</head> +<body> +<div id="one">1</div> +<div id="two">2</div> +<div id="three">3</div> +<div id="four">4</div> +<div id="five">5</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-position-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-position-1-ref.xht new file mode 100644 index 00000000000..55d8613c6aa --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-position-1-ref.xht @@ -0,0 +1,25 @@ +<!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 Reference: Test for calc() on background-position</title> + <link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +p { + height: 50px; width: 200px; + border: thin solid; + background-image: url(../backgrounds/blue-32x32.png); + background-repeat: no-repeat; +} + +#one { background-position: 134px -12px } +#two { background-position: -18px -19px } + +</style> +</head> +<body> +<p id="one"></p> +<p id="two"></p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-size-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-size-1-ref.xht new file mode 100644 index 00000000000..413caf4c30f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-background-size-1-ref.xht @@ -0,0 +1,25 @@ +<!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 Reference: Test for calc() on background-size</title> + <link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +p { + height: 50px; width: 200px; + border: thin solid; + background-image: url(../backgrounds/blue-32x32.png); + background-repeat: no-repeat; +} + +#one { background-size: 150px 20px; } +#two { background-image: none } + +</style> +</head> +<body> +<p id="one"></p> +<p id="two"></p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-border-radius-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-border-radius-1-ref.xht new file mode 100644 index 00000000000..45ee7ccfffe --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-border-radius-1-ref.xht @@ -0,0 +1,21 @@ +<!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 Reference: test for border-radius: calc()</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +p { + height: 256px; + width: 512px; + background: blue; + border-radius: 21px 6px 12px 29px / 5px 16px 10px 3px; +} + +</style> +</head> +<body> +<p></p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-height-block-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-height-block-1-ref.xht new file mode 100644 index 00000000000..dc9655c456d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-height-block-1-ref.xht @@ -0,0 +1,30 @@ +<!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 Reference: Test for height:calc() or min-height:calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; width: 1px; background: blue; } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div style="height: 50px"></div> +<div style="height: 50px"></div> +<div style="height: 75px"></div> +<div style="height: 45px"></div> +<div style="height: 40px"></div> +<div style="height: 30px"></div> + +<!-- tests with an auto-height container --> +<div style="height: 50px"></div> +<div style="height: 10px"></div> +<div style="height: 10px"></div> +<div style="height: 10px"></div> +<div style="height: 10px"></div> +<div style="height: 10px"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-height-table-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-height-table-1-ref.xht new file mode 100644 index 00000000000..256f3f933a0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-height-table-1-ref.xht @@ -0,0 +1,29 @@ +<!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 Reference: Test that height:calc() with no percentages has an effect on inner table elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> +tbody, tr, td { + height: 500px; + min-height: 700px; + max-height: 2px; +} +</style> +</head> +<body> +<table border=""> + <tbody> + <tr> + <td>cell</td> + <td>cell</td> + </tr> + <tr> + <td>cell</td> + <td>cell</td> + </tr> + </tbody> +</table> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-margin-block-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-margin-block-1-ref.xht new file mode 100644 index 00000000000..efc4922093d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-margin-block-1-ref.xht @@ -0,0 +1,22 @@ +<!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 Reference: Test of margin-*: calc()</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +div { border: medium solid green; width: 500px } +p { background: yellow } + +</style> +</head> +<body> + +<div><p style="margin: 15px 0 0 0">paragraph with margin</p></div> +<div><p style="margin: 0 15px 0 0">paragraph with margin</p></div> +<div><p style="margin: 0 0 15px 0">paragraph with margin</p></div> +<div><p style="margin: 0 0 0 15px">paragraph with margin</p></div> +<div><p style="margin: 25px 25px 25px 25px">paragraph with margin</p></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-max-height-block-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-max-height-block-1-ref.xht new file mode 100644 index 00000000000..f15566ccaba --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-max-height-block-1-ref.xht @@ -0,0 +1,30 @@ +<!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 Reference: Test for max-height:calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; width: 1px; background: blue; } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div style="height: 50px"></div> +<div style="height: 50px"></div> +<div style="height: 75px"></div> +<div style="height: 45px"></div> +<div style="height: 40px"></div> +<div style="height: 30px"></div> + +<!-- tests with an auto-height container --> +<div style="height: 50px"></div> +<div style="height: 300px"></div> +<div style="height: 300px"></div> +<div style="height: 300px"></div> +<div style="height: 300px"></div> +<div style="height: 300px"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-max-width-block-intrinsic-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-max-width-block-intrinsic-1-ref.xht new file mode 100644 index 00000000000..aab6648ac0a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-max-width-block-intrinsic-1-ref.xht @@ -0,0 +1,22 @@ +<!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 Reference: intrinsic width of max-width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px } + +</style> +</head> +<body> + +<div style="width: 400px"></div> +<div style="width: 47px"></div> +<div style="width: 400px"></div> +<div style="width: 400px"></div> +<div style="width: 50px"></div> +<div style="width: 400px"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-min-width-block-intrinsic-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-min-width-block-intrinsic-1-ref.xht new file mode 100644 index 00000000000..f643af4df23 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-min-width-block-intrinsic-1-ref.xht @@ -0,0 +1,22 @@ +<!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 Reference: intrinsic width of min-width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px } + +</style> +</head> +<body> + +<div style="width: 1px"></div> +<div style="width: 47px"></div> +<div style="width: 1px"></div> +<div style="width: 1px"></div> +<div style="width: 50px"></div> +<div style="width: 1px"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-offsets-absolute-top-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-offsets-absolute-top-1-ref.xht new file mode 100644 index 00000000000..eada32a5904 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-offsets-absolute-top-1-ref.xht @@ -0,0 +1,31 @@ +<!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 Reference: Test for top:calc() on absolutely positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; height: 100px; width: 3px; } +div[style] { background: blue; position: relative; height: 10px; } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div><div style="top: 50px"></div></div> +<div><div style="top: 50px"></div></div> +<div><div style="top: 75px"></div></div> +<div><div style="top: 45px"></div></div> +<div><div style="top: 40px"></div></div> +<div><div style="top: 30px"></div></div> + +<!-- tests with an auto-top container --> +<div><div style="top: 50px"></div></div> +<div><div style="top: 50px"></div></div> +<div><div style="top: 75px"></div></div> +<div><div style="top: 45px"></div></div> +<div><div style="top: 40px"></div></div> +<div><div style="top: 30px"></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-offsets-relative-left-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-offsets-relative-left-1-ref.xht new file mode 100644 index 00000000000..f5e5fa2cfd8 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-offsets-relative-left-1-ref.xht @@ -0,0 +1,21 @@ +<!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 Reference: Test for left:calc() on relatively positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 100px; width: 100px } +div[style] { background: blue; position: relative; height: 3px; } +</style> +</head> +<body> + +<div style="left: 50px"></div> +<div style="left: -50px"></div> +<div style="left: 75px"></div> +<div style="left: -45px"></div> +<div style="left: 40px"></div> +<div style="left: -30px"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-offsets-relative-top-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-offsets-relative-top-1-ref.xht new file mode 100644 index 00000000000..c7aecf7d642 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-offsets-relative-top-1-ref.xht @@ -0,0 +1,31 @@ +<!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 Reference: Test for top:calc() on relatively positioned elements</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> +body { margin: 0 } +body > div { float: left; height: 100px; width: 3px; } +div[style] { background: blue; position: relative; height: 10px; } +</style> +</head> +<body> + +<!-- tests with a fixed-height container --> +<div><div style="top: 50px"></div></div> +<div><div style="top: 50px"></div></div> +<div><div style="top: 75px"></div></div> +<div><div style="top: 45px"></div></div> +<div><div style="top: 40px"></div></div> +<div><div style="top: 30px"></div></div> + +<!-- tests with an auto-top container --> +<div><div style="top: 50px"></div></div> +<div><div style="top: 0px"></div></div> +<div><div style="top: 0px"></div></div> +<div><div style="top: 0px"></div></div> +<div><div style="top: 0px"></div></div> +<div><div style="top: 0px"></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-padding-block-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-padding-block-1-ref.xht new file mode 100644 index 00000000000..4e3bfb014fc --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-padding-block-1-ref.xht @@ -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 Reference: Test of padding-*: calc()</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { width: 500px } +div { border: medium solid green } +p { background: yellow; margin: 0 } + +</style> +</head> +<body> + +<div style="padding: 15px 0 0 0"><p>paragraph with padding</p></div> +<div style="padding: 0 15px 0 0"><p>paragraph with padding</p></div> +<div style="padding: 0 0 15px 0"><p>paragraph with padding</p></div> +<div style="padding: 0 0 0 15px"><p>paragraph with padding</p></div> +<div style="padding: 25px 25px 25px 25px"><p>paragraph with padding</p></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-text-indent-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-text-indent-1-ref.xht new file mode 100644 index 00000000000..d7e13079ddd --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-text-indent-1-ref.xht @@ -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"><head> + <title>CSS Reference: text-indent: calc()</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { width: 500px } +p { font-size: 10px } + +</style> +</head> +<body> + +<p style="text-indent: 247px">50% - 3px</p> +<p style="text-indent: 247px">25% - 3px + 25%</p> +<p style="text-indent: 247px">25% - 3px + 12.5% * 2</p> +<p style="text-indent: 247px">25% - 3px + 12.5%*2</p> +<p style="text-indent: 247px">25% - 3px + 2*12.5%</p> +<p style="text-indent: 247px">25% - 3px + 2 * 12.5%</p> +<p style="text-indent: 250px">30% + 20%</p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-text-indent-intrinsic-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-text-indent-intrinsic-1-ref.xht new file mode 100644 index 00000000000..6f191480bdc --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-text-indent-intrinsic-1-ref.xht @@ -0,0 +1,22 @@ +<!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 Reference: intrinsic width of text-indent: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px } + +</style> +</head> +<body> + +<div style="width: 10px"></div> +<div style="width: 57px"></div> +<div style="width: 10px"></div> +<div style="width: 10px"></div> +<div style="width: 60px"></div> +<div style="width: 10px"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-transform-origin-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-transform-origin-1-ref.xht new file mode 100644 index 00000000000..17e23014afd --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-transform-origin-1-ref.xht @@ -0,0 +1,26 @@ +<!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 Reference: Test for calc() on transform-origin</title> + <link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { margin: 100px } + +p { + height: 50px; width: 200px; + background: yellow; + transform: rotate(15deg); +} + +#one { transform-origin: 150px 20px; } +#two { transform-origin: -22px -35px; } + +</style> +</head> +<body> +<p id="one">hello</p> +<p id="two">hello</p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-vertical-align-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-vertical-align-1-ref.xht new file mode 100644 index 00000000000..baedf2121cc --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-vertical-align-1-ref.xht @@ -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 Reference: Test for vertical-align:calc()</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> + +</head><body><div style="line-height: 100px; margin-top: 100px"> + <span>x</span> + <span style="vertical-align: 50px">x</span> + <span style="vertical-align: 50px">x</span> + <span style="vertical-align: 75px">x</span> + <span style="vertical-align: 45px">x</span> + <span style="vertical-align: 40px">x</span> + <span style="vertical-align: 30px">x</span> +</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-block-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-block-1-ref.xht new file mode 100644 index 00000000000..eb0b500426c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-block-1-ref.xht @@ -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"><head> + <title>CSS Reference: width: calc() and min-width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body { width: 500px } +p { background: green; color: white; margin: 1px 0; font-size: 10px } + +</style> +</head> +<body> + +<p style="width: 247px">50% - 3px</p> +<p style="width: 247px">25% - 3px + 25%</p> +<p style="width: 247px">25% - 3px + 12.5% * 2</p> +<p style="width: 247px">25% - 3px + 12.5%*2</p> +<p style="width: 247px">25% - 3px + 2*12.5%</p> +<p style="width: 247px">25% - 3px + 2 * 12.5%</p> +<p style="width: 250px">30% + 20%</p> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-block-intrinsic-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-block-intrinsic-1-ref.xht new file mode 100644 index 00000000000..5cd8d8aa6e5 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-block-intrinsic-1-ref.xht @@ -0,0 +1,22 @@ +<!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 Reference: intrinsic width of width: calc() on blocks</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> + +body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px } + +</style> +</head> +<body> + +<div style="width: 200px"></div> +<div style="width: 47px"></div> +<div style="width: 200px"></div> +<div style="width: 200px"></div> +<div style="width: 50px"></div> +<div style="width: 200px"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-table-auto-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-table-auto-1-ref.xht new file mode 100644 index 00000000000..d4df3cf860d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-table-auto-1-ref.xht @@ -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 Reference: width: calc() on table-layout: auto tables</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +</head><body><table border=""> + <tbody><tr> + <td style="width: 500px">x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> +<table border=""> + <tbody><tr> + <td>x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> +<table border=""> + <tbody><tr> + <td>x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-table-fixed-1-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-table-fixed-1-ref.xht new file mode 100644 index 00000000000..f7b4e838a8f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/calc-width-table-fixed-1-ref.xht @@ -0,0 +1,28 @@ +<!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 Reference: width: calc() on table-layout: auto tables</title> + <link href="http://dbaron.org/" rel="author" title="L. David Baron" /> + <meta content="" name="flags" /> +<style type="text/css"> +table { table-layout: fixed; width: 500px; border-spacing: 0 } +</style> +</head> +<body> +<table border=""> + <tbody><tr> + <td style="width: 500px">x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> +<table border=""> + <tbody><tr> + <td>x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> +<table border=""> + <tbody><tr> + <td>x</td> + <td style="width: 100px">y</td> +</tr></tbody></table> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/ch-unit-001-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/ch-unit-001-ref.xht new file mode 100644 index 00000000000..729dda4f2e2 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/ch-unit-001-ref.xht @@ -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><meta charset="utf-8" /> +<title>CSS Values and Units Test Reference File</title> +<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal" /> +<meta content="" name="flags" /> +<style> +div { + background: green; + height: 10ch; + width: 10ch; + float: left; +} + +</style> +</head><body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/multicol-columns-invalid-001-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/multicol-columns-invalid-001-ref.xht new file mode 100644 index 00000000000..1340efb2620 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/multicol-columns-invalid-001-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 1em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/multicol-inherit-002-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/multicol-inherit-002-ref.xht new file mode 100644 index 00000000000..b99c00d0f27 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/multicol-inherit-002-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: blue; + font: 1.25em/1 serif; + margin: 1em; + padding: 0em 1em 1em; + width: 30em; + } + + img {vertical-align: top;} + + img.column-gap + { + margin-left: -2em; + margin-right: 3em; + vertical-align: bottom; + } + + img#last + { + margin-left: -2em; + vertical-align: bottom; + } + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/multicol-rule-color-inherit-001-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/multicol-rule-color-inherit-001-ref.xht new file mode 100644 index 00000000000..3a2cd30b451 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/multicol-rule-color-inherit-001-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div {font-size: 1.25em;} + img {padding-left: 1em;} + ]]></style> + </head> + <body> + + <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p> + + <div> + <img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/regions-resizing-001-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/regions-resizing-001-ref.xht new file mode 100644 index 00000000000..337a3d100fd --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/regions-resizing-001-ref.xht @@ -0,0 +1,11 @@ +<!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 Reftest Reference</title> + <link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" /> + </head> + <body> + <p>Test passes if you see a green square below and no red.</p> + <p>The test also fails if the there's a green block that is <strong>not</strong> a square (e.g. rectangle or polygon).</p> + <iframe width="160" height="400" frameborder="0" src="../support/80px-block-ref.html"></iframe> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-green.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-green.png Binary files differnew file mode 100644 index 00000000000..b98ca0ba0a0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-green.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-lime.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-lime.png Binary files differnew file mode 100644 index 00000000000..cb397fb090e --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-lime.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-maroon.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-maroon.png Binary files differnew file mode 100644 index 00000000000..3f86b072195 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-maroon.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-navy.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-navy.png Binary files differnew file mode 100644 index 00000000000..9b9a03955ba --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-navy.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-red.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-red.png Binary files differnew file mode 100644 index 00000000000..6bd73ac1018 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-red.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-white.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-white.png Binary files differnew file mode 100644 index 00000000000..dd43faec54a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/1x1-white.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/2-80px-block-ref.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/2-80px-block-ref.html new file mode 100644 index 00000000000..f616001554c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/2-80px-block-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + .content { + margin: 10px; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + </style> +</head> +<body> + <div class="content"> + xxxx<br> + xxxx<br> + xxxx<br> + xxxx + </div> + <div class="content"> + xxxx<br> + xxxx<br> + xxxx<br> + xxxx + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/60x60-gg-rr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 00000000000..84f5b2a4f1d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/60x60-gg-rr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/60x60-green.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/60x60-green.png Binary files differnew file mode 100644 index 00000000000..b3c8cf3eb4c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/60x60-green.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/60x60-red.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/60x60-red.png Binary files differnew file mode 100644 index 00000000000..823f125b8e4 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/60x60-red.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/80px-block-float-ref.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/80px-block-float-ref.html new file mode 100644 index 00000000000..6adeeb6fa99 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/80px-block-float-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #content { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + float: right; + } + </style> +</head> +<body> + <div id="content"> + xxxx<br> + xxxx<br> + xxxx<br> + xxxx + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/80px-block-ref.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/80px-block-ref.html new file mode 100644 index 00000000000..2c910e93411 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/80px-block-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #content { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + </style> +</head> +<body> + <div id="content"> + xxxx<br> + xxxx<br> + xxxx<br> + xxxx + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/README b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/README new file mode 100644 index 00000000000..69d1737bead --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/README @@ -0,0 +1,29 @@ +CSS Global Support Directory +============================ + +This directory contains common support files (such as images and external +style sheets). These are sync'ed into the support directories of all our +test suites. If you have test-suite-specific support files, please add +them to the appropriate test-suite-specific support/ directory. + +If you add to a support/ directory, please run the tools/supportprop.py +script from the top of the repository to cascade support files into the +lower-level support directories. + +Description of the Common Support File Collection +------------------------------------------------- + +The 1x1-* images are all exactly one pixel. + +The swatch-* images all use 15x15 cells. + +The square-* images all use 15x15 cells with one pixel borders. + +The pattern-* images use cells of various sizes: + + pattern-gg-gr.png 20x20 + pattern-grg-rgr-grg.png 20x20 + pattern-rgr-grg-rgr.png 20x20 + pattern-tr.png 15x15 + pattern-grg-rrg-rgg.png 15x15 + diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/a-green.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/a-green.css new file mode 100644 index 00000000000..b0dbb071d5b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/b-green.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/b-green.css new file mode 100644 index 00000000000..a0473f5ca26 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/black20x20.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/black20x20.png Binary files differnew file mode 100644 index 00000000000..ebf7027ee78 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/black20x20.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/c-red.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/c-red.css new file mode 100644 index 00000000000..d4ba5c64e95 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/cat.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/cat.png Binary files differnew file mode 100644 index 00000000000..85dd7324815 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/cat.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/generalParallelTest.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/generalParallelTest.js new file mode 100644 index 00000000000..1a4bf343df0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/generalParallelTest.js @@ -0,0 +1,231 @@ +(function(root) { +'use strict'; +// +var index = 0; +var suite = root.generalParallelTest = { + // prepare individual test + setup: function(data, options) { + suite._setupDom(data, options); + suite._setupEvents(data, options); + }, + // clone fixture and prepare data containers + _setupDom: function(data, options) { + // clone fixture into off-viewport test-canvas + data.fixture = document.getElementById('fixture').cloneNode(true); + data.fixture.id = 'test-' + (index++); + (document.getElementById('offscreen') || document.body).appendChild(data.fixture); + + // data container for #fixture > .container > .transition + data.transition = { + node: data.fixture.querySelector('.transition'), + values: [], + events: [], + computedStyle: function(property) { + return computedStyle(data.transition.node, property); + } + }; + + // data container for #fixture > .container + data.container = { + node: data.transition.node.parentNode, + values: [], + events: [], + computedStyle: function(property) { + return computedStyle(data.container.node, property); + } + }; + + // data container for #fixture > .container > .transition[:before | :after] + if (data.pseudo) { + data.pseudo = { + name: data.pseudo, + values: [], + computedStyle: function(property) { + return computedStyle(data.transition.node, property, ':' + data.pseudo.name); + } + }; + } + }, + // bind TransitionEnd event listeners + _setupEvents: function(data, options) { + ['transition', 'container'].forEach(function(elem) { + var handler = function(event) { + event.stopPropagation(); + var name = event.propertyName; + var time = Math.round(event.elapsedTime * 1000) / 1000; + var pseudo = event.pseudoElement ? (':' + event.pseudoElement) : ''; + data[elem].events.push(name + pseudo + ":" + time + "s"); + }; + data[elem].node.addEventListener('transitionend', handler, false); + data[elem]._events = {'transitionend': handler}; + }); + }, + // cleanup after individual test + teardown: function(data, options) { + // data.fixture.remove(); + if (data.fixture.parentNode) { + data.fixture.parentNode.removeChild(data.fixture); + } + }, + // invoked prior to running a slice of tests + sliceStart: function(options, tests) { + // inject styles into document + setStyle(options.styles); + // kick off value collection loop + generalParallelTest.startValueCollection(options); + }, + // invoked after running a slice of tests + sliceDone: function(options, tests) { + // stop value collection loop + generalParallelTest.stopValueCollection(options); + // reset styles cache + options.styles = {}; + }, + // called once all tests are done + done: function(options) { + // reset document styles + setStyle(); + reflow(); + }, + // add styles of individual test to slice cache + addStyles: function(data, options, styles) { + if (!options.styles) { + options.styles = {}; + } + + Object.keys(styles).forEach(function(key) { + var selector = '#' + data.fixture.id + // fixture must become #fixture.fixture rather than a child selector + + (key.substring(0, 8) === '.fixture' ? '' : ' ') + + key; + + options.styles[selector] = styles[key]; + }); + }, + // set style and compute values for container and transition + getStyle: function(data) { + reflow(); + // grab current styles: "initial state" + suite._getStyleFor(data, 'from'); + // apply target state + suite._addClass(data, 'to', true); + // grab current styles: "target state" + suite._getStyleFor(data, 'to'); + // remove target state + suite._removeClass(data, 'to', true); + + // clean up the mess created for value collection + data.container._values = []; + data.transition._values = []; + if (data.pseudo) { + data.pseudo._values = []; + } + }, + // grab current styles and store in respective element's data container + _getStyleFor: function(data, key) { + data.container[key] = data.container.computedStyle(data.property); + data.transition[key] = data.transition.computedStyle(data.property); + if (data.pseudo) { + data.pseudo[key] = data.pseudo.computedStyle(data.property); + } + }, + // add class to test's elements and possibly reflow + _addClass: function(data, className, forceReflow) { + data.container.node.classList.add(className); + data.transition.node.classList.add(className); + if (forceReflow) { + reflow(); + } + }, + // remove class from test's elements and possibly reflow + _removeClass: function(data, className, forceReflow) { + data.container.node.classList.remove(className); + data.transition.node.classList.remove(className); + if (forceReflow) { + reflow(); + } + }, + // add transition and to classes to container and transition + startTransition: function(data) { + // add transition-defining class + suite._addClass(data, 'how', true); + // add target state (without reflowing) + suite._addClass(data, 'to', false); + }, + // requestAnimationFrame runLoop to collect computed values + startValueCollection: function(options) { + var raf = window.requestAnimationFrame || function(callback){ + setTimeout(callback, 20); + }; + + // flag denoting if the runLoop should continue (true) or exit (false) + options._collectValues = true; + + function runLoop() { + if (!options._collectValues) { + // test's are done, stop annoying the CPU + return; + } + + // collect current style for test's elements + options.tests.forEach(function(data) { + if (!data.property) { + return; + } + + ['transition', 'container', 'pseudo'].forEach(function(elem) { + var pseudo = null; + if (!data[elem] || (elem === 'pseudo' && !data.pseudo)) { + return; + } + + var current = data[elem].computedStyle(data.property); + var values = data[elem].values; + var length = values.length; + if (!length || values[length - 1] !== current) { + values.push(current); + } + }); + }); + + // rinse and repeat + raf(runLoop); + } + + runLoop(); + }, + // stop requestAnimationFrame runLoop collecting computed values + stopValueCollection: function(options) { + options._collectValues = false; + }, + + // generate test.step function asserting collected events match expected + assertExpectedEventsFunc: function(data, elem, expected) { + return function() { + var _result = data[elem].events.sort().join(" "); + var _expected = typeof expected === 'string' ? expected : expected.sort().join(" "); + assert_equals(_result, _expected, "Expected TransitionEnd events triggered on ." + elem); + }; + }, + // generate test.step function asserting collected values are neither initial nor target + assertIntermediateValuesFunc: function(data, elem) { + return function() { + // the first value (index: 0) is always going to be the initial value + // the last value is always going to be the target value + var values = data[elem].values; + if (data.flags.discrete) { + // a discrete value will just switch from one state to another without having passed intermediate states. + assert_equals(values[0], data[elem].from, "must be initial value while transitioning on ." + elem); + assert_equals(values[1], data[elem].to, "must be target value after transitioning on ." + elem); + assert_equals(values.length, 2, "discrete property only has 2 values ." + elem); + } else { + assert_not_equals(values[1], data[elem].from, "may not be initial value while transitioning on ." + elem); + assert_not_equals(values[1], data[elem].to, "may not be target value while transitioning on ." + elem); + } + + // TODO: first value must be initial, last value must be target + }; + } +}; + +})(window); diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/helper.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/helper.js new file mode 100644 index 00000000000..242cd3ca635 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/helper.js @@ -0,0 +1,96 @@ +// +// Simple Helper Functions For Testing CSS +// + +(function(root) { +'use strict'; + +// serialize styles object and dump to dom +// appends <style id="dynamic-style"> to <head> +// setStyle("#some-selector", {"some-style" : "value"}) +// setStyle({"#some-selector": {"some-style" : "value"}}) +root.setStyle = function(selector, styles) { + var target = document.getElementById('dynamic-style'); + if (!target) { + target = document.createElement('style'); + target.id = 'dynamic-style'; + target.type = "text/css"; + document.getElementsByTagName('head')[0].appendChild(target); + } + + var data = []; + // single selector/styles + if (typeof selector === 'string' && styles !== undefined) { + data = [selector, '{', serializeStyles(styles), '}']; + target.textContent = data.join("\n"); + return; + } + // map of selector/styles + for (var key in selector) { + if (Object.prototype.hasOwnProperty.call(selector, key)) { + var _data = [key, '{', serializeStyles(selector[key]), '}']; + data.push(_data.join('\n')); + } + } + + target.textContent = data.join("\n"); +}; + +function serializeStyles(styles) { + var data = []; + for (var property in styles) { + if (Object.prototype.hasOwnProperty.call(styles, property)) { + var prefixedProperty = addVendorPrefix(property); + data.push(prefixedProperty + ":" + styles[property] + ";"); + } + } + + return data.join('\n'); +} + + +// shorthand for computed style +root.computedStyle = function(element, property, pseudo) { + var prefixedProperty = addVendorPrefix(property); + return window + .getComputedStyle(element, pseudo || null) + .getPropertyValue(prefixedProperty); +}; + +// flush rendering buffer +root.reflow = function() { + document.body.offsetWidth; +}; + +// merge objects +root.extend = function(target /*, ..rest */) { + Array.prototype.slice.call(arguments, 1).forEach(function(obj) { + Object.keys(obj).forEach(function(key) { + target[key] = obj[key]; + }); + }); + + return target; +}; + +// dom fixture helper ("resetting dom test elements") +var _domFixture; +var _domFixtureSelector; +root.domFixture = function(selector) { + var fixture = document.querySelector(selector || _domFixtureSelector); + if (!fixture) { + throw new Error('fixture ' + (selector || _domFixtureSelector) + ' not found!'); + } + if (!_domFixture && selector) { + // save a copy + _domFixture = fixture.cloneNode(true); + _domFixtureSelector = selector; + } else if (_domFixture) { + // restore the copy + var tmp = _domFixture.cloneNode(true); + fixture.parentNode.replaceChild(tmp, fixture); + } else { + throw new Error('domFixture must be initialized first!'); + } +}; +})(window); diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/import-green.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/import-green.css new file mode 100644 index 00000000000..537104e6633 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/import-red.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/import-red.css new file mode 100644 index 00000000000..9945ef47114 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/min-width-tables-001-iframe.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/min-width-tables-001-iframe.html new file mode 100644 index 00000000000..edc548a6aab --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/min-width-tables-001-iframe.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>iframe containing the meat of the test</title> + <style> +body { + margin: 0; + overflow: hidden; +} +/* green div that should cover the red divs */ +#green { + position: absolute; + left: 0; + top: 0; + background-color: green; + width: 100%; + height: 600px; +} +.spacer { + height: 98px; + width: 20px; +} +.item { + background-color: red; + display: block;/* property under test */ + /* border to aid understanding of boundaries between items */ + border-style: solid; + border-width: 1px; + border-color: red;/* Note: if you're trying to debug this, use a different color here */ +} +/* 100px = 10*(1 + 8 + 1) */ +@media (min-width: 100px) { + #green { + width: 100px; + height: 100px;/* = 1 + 98 + 1 */ + } + .item { + display: table-cell;/* property and value under test */ + } +} + </style> +</head> +<body> + <div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + </div> + <div id="green"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/one.gif b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/one.gif Binary files differnew file mode 100644 index 00000000000..74cf7839c9f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/one.gif diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/parsing-utils.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/parsing-utils.js new file mode 100644 index 00000000000..beea4958ce8 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/parsing-utils.js @@ -0,0 +1,866 @@ +var ParsingUtils = (function() { +function testInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', value); + var actual = div.style.getPropertyValue('shape-outside'); + assert_equals(actual, expected); +} + +function testComputedStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', value); + document.body.appendChild(div); + var style = getComputedStyle(div); + var actual = style.getPropertyValue('shape-outside'); + actual = roundResultStr(actual); + document.body.removeChild(div); + + // Some of the tests in this suite have either/or expected results + // so this check allows for testing that at least one of them passes. + // Description of the 2 expecteds is below near calcTestValues. + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_true(expected[0] == actual || expected[1] == actual) + } else { + assert_equals(actual, typeof expected !== 'undefined' ? expected : value); + } +} + +function testShapeMarginInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', "border-box inset(10px)"); + div.style.setProperty('shape-margin', value); + var actual = div.style.getPropertyValue('shape-margin'); + assert_equals(actual, expected); +} + +function testShapeMarginComputedStyle(value, expected) { + + var outerDiv = document.createElement('div'); + outerDiv.style.setProperty('width', '100px'); + + var innerDiv = document.createElement('div'); + innerDiv.style.setProperty('shape-outside', "border-box inset(10px)"); + innerDiv.style.setProperty('shape-margin', value); + + outerDiv.appendChild(innerDiv); + document.body.appendChild(outerDiv); + + var style = getComputedStyle(innerDiv); + var actual = style.getPropertyValue('shape-margin'); + + assert_not_equals(actual, null); + if(actual.indexOf('calc') == -1 ) + actual = roundResultStr(actual); + document.body.removeChild(outerDiv); + + // See comment above about multiple expected results + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_true(expected[0] == actual || expected[1] == actual) + } else { + assert_equals(actual, !expected ? '0px' : expected); + } +} + +function testShapeThresholdInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', 'url(someimage.png)'); + div.style.setProperty('shape-image-threshold', value); + var actual = div.style.getPropertyValue('shape-image-threshold'); + assert_equals(actual, expected); +} + +function testShapeThresholdComputedStyle(value, expected) { + + var div = document.createElement('div'); + div.style.setProperty('shape-outside', 'url(someimage.png)'); + div.style.setProperty('shape-image-threshold', value); + document.body.appendChild(div); + + var style = getComputedStyle(div); + var actual = style.getPropertyValue('shape-image-threshold'); + + assert_not_equals(actual, null); + if(actual.indexOf('calc') == -1 ) + actual = roundResultStr(actual); + document.body.removeChild(div); + + // See comment above about multiple expected results + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_true(expected[0] == actual || expected[1] == actual) + } else { + assert_equals(actual, !expected ? '0' : expected); + } +} + +// Builds an array of test cases to send to testharness.js where one test case is: [name, actual, expected] +// These test cases will verify results from testInlineStyle() or testComputedStyle() +function buildTestCases(testCases, testType) { + var results = []; + + // If test_type isn't specified, test inline style + var type = typeof testType == 'undefined' ? 'invalid': testType; + + testCases.forEach(function(test) { + oneTestCase = []; + + // name - annotated by type (inline vs. computed) + if ( test.hasOwnProperty('name') ) { + oneTestCase.push(test['name'] +' - '+ type); + } else { + // If test_name isn't specified, use the actual + oneTestCase.push(test['actual'] +' - '+ type); + } + + // actual + oneTestCase.push(test['actual']) + + // expected + if( type.indexOf('invalid') != -1 ){ + oneTestCase.push(null) + } else if( type == 'inline' ) { + oneTestCase.push(test['expected_inline']); + } else if( type == 'computed' ){ + oneTestCase.push( convertToPx(test['expected_computed']) ); + } + results.push(oneTestCase); + }); + return results; +} + + +function buildPositionTests(shape, valid, type, units) { + var results = new Array(); + var convert = type.indexOf('computed') != -1 ? true : false; + + if(Object.prototype.toString.call( units ) === '[object Array]') { + units.forEach(function(unit) { + positionTests = buildPositionTests(shape, valid, type, unit); + results = results.concat(positionTests); + }); + } else { + if (valid) { + validPositions.forEach(function(test) { + var testCase = [], testName, actual, expected; + // skip if this isn't explicitly testing length units + if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1)) { + // actual + actual = shape + '(at ' + setUnit(test[0], false, units) +')'; + + // expected + // if(convert && shape == 'circle') + // expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + // else if(convert && shape == 'ellipse') + // expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + // else + expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + + // name + if (type == 'lengthUnit + inline') + testName = 'test unit (inline): ' + units +' - '+ actual; + else if (type == 'lengthUnit + computed') + testName = 'test unit (computed): ' + units +' - '+ actual; + else + testName = (actual + ' serializes as ' + expected +' - '+ type); + + testCase.push(testName) + testCase.push(actual); + testCase.push(expected); + results.push(testCase); + } + }); + } else { + invalidPositions.forEach(function(test) { + var testValue = shape + '(at ' + setUnit(test, false, units) +')'; + testCase = new Array(); + testCase.push(testValue + ' is invalid'); + testCase.push(testValue); + testCase.push(null); + results.push(testCase); + }); + } + } + return unique(results); +} + +function buildRadiiTests(shape, type, units) { + var results = new Array(); + var testUnits = typeof units == 'undefined' ? 'px': units; + var convert = type.indexOf('computed') != -1 ? true : false; + + if(Object.prototype.toString.call( testUnits ) === '[object Array]') { + testUnits.forEach(function(unit) { + radiiTests = buildRadiiTests(shape, type, unit); + results = results.concat(radiiTests); + }); + } else { + var validRadii = shape == 'circle' ? validCircleRadii : validEllipseRadii; + validRadii.forEach(function(test) { + var testCase = [], name, actual, expected; + + // skip if this isn't explicitly testing length units + if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1) ) { + actual = shape + '(' + setUnit(test[0], false, testUnits) +')'; + // name + if (type.indexOf('lengthUnit') != -1) { + name = 'test unit: ' + units +' - '+ actual; + if(type.indexOf('computed') != -1) + name = name + ' - computed'; + else + name = name + ' - inline'; + } + else + name = actual +' - '+ type; + + testCase.push(name); + + // actual + testCase.push(actual); + + // expected + if(type.indexOf('computed') != -1 && test.length == 3) { + expected = shape + '(' + setUnit(test[2], convert, testUnits) +')'; + } else { + expected = shape + '(' + setUnit(test[1], convert, testUnits) +')'; + } + testCase.push(expected); + results.push(testCase); + } + }); + } + return unique(results); +} + +function buildInsetTests(unit1, unit2, type) { + var results = new Array(); + var convert = type == 'computed' ? true : false; + + if(Object.prototype.toString.call( unit1 ) === '[object Array]') { + unit1.forEach(function(unit) { + insetTests = buildInsetTests(unit, unit2, type); + results = results.concat(insetTests); + }); + } else { + validInsets.forEach(function(test) { + var testCase = [], name, actual, expected; + + name = setUnit(test[0], false, unit1, unit2) +' - '+ type; + actual = 'inset(' + setUnit(test[1], convert, unit1, unit2) +')'; + expected = actual; + + testCase.push(name); + testCase.push(actual); + testCase.push(expected); + + results.push(testCase); + }); + } + return unique(results); +} + +function buildPolygonTests(unitSet, type) { + var results = new Array(); + var convert = type == 'computed' ? true : false; + + unitSet.forEach(function(set) { + validPolygons.forEach(function(test) { + var testCase = []; + // name + testCase.push(setUnit(test[0], false, set[0], set[1], set[2]) +' - '+ type); + // actual + testCase.push('polygon(' + setUnit(test[1], false, set[0], set[1], set[2]) +')'); + // expected + testCase.push('polygon(' + setUnit(test[1], convert, set[0], set[1], set[2]) +')'); + results.push(testCase); + }); + }); + return unique(results); +} + +function buildCalcTests(testCases, type) { + var results = new Array(); + testCases.forEach(function(test){ + var testCase = []; + if(type == 'computed') { + testCase.push(test[0] + ' - computed style'); + testCase.push(test[0]); + testCase.push(test[2]); + } + else { + testCase.push(test[0] + ' - inline style'); + testCase.push(test[0]); + testCase.push(test[1]); + } + testCase.push(type); + results.push(testCase) + }); + return unique(results); +} + +function unique(tests) { + var list = tests.concat(); + for(var i = 0; i< list.length; ++i) { + for(var j = i+1; j < list.length; ++j) { + if(list[i][0] === list[j][0]) + list.splice(j--, 1); + } + } + return list; +} + +function setUnit(str, convert, unit1, unit2, unit3) { + var retStr = str; + if(typeof unit1 !== 'undefined') { + retStr = retStr.replace(new RegExp('u1', 'g'), unit1); + } + if(typeof unit2 !== 'undefined') { + retStr = retStr.replace(new RegExp("u2", 'g'), unit2); + } + if(typeof unit3 !== 'undefined') { + retStr = retStr.replace(new RegExp("u3", 'g'), unit3); + } + retStr = convert ? convertToPx(retStr) : retStr; + return retStr; +} + +function convertToPx(origValue) { + + var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%)/g); + if(!valuesToConvert) + return origValue; + + var retStr = origValue; + for(var i = 0; i < valuesToConvert.length; i++) { + var unit = valuesToConvert[i].match(/[a-z]{2,4}|%/).toString(); + var numberStr = valuesToConvert[i].match(/[0-9]+(\.[0-9]+)?/)[0]; + + var number = parseFloat(numberStr); + var convertedUnit = 'px'; + if( typeof number !== 'NaN' ) + { + if (unit == 'in') { + number = (96 * number); + } else if (unit == 'cm') { + number = (37.795275591 * number); + } else if (unit == 'mm') { + number = (3.779527559 * number); + } else if (unit == 'pt') { + number = (1.333333333333 * number); + } else if (unit == 'pc') { + number = (16 * number); + } else if (unit == 'em') { + number = (16 * number); + } else if (unit == 'ex') { + number = (7.1796875 * number); + } else if (unit == 'ch') { + number = (8 * number); + } else if (unit == 'rem') { + number = (16 * number); + } else if (unit == 'vw') { + number = ((.01 * window.innerWidth) * number); + } else if (unit == 'vh') { + number = ((.01 * window.innerHeight) * number); + } else if (unit == 'vmin') { + number = Math.min( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number; + } else if (unit == 'vmax') { + number = Math.max( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number; + } + else { + convertedUnit = unit; + } + number = Math.round(number * 1000) / 1000; + var find = valuesToConvert[i]; + var replace = number.toString() + convertedUnit; + retStr = retStr.replace(valuesToConvert[i], number.toString() + convertedUnit); + } + } + return retStr.replace(',,', ','); +} + +function roundResultStr(str) { + if(Object.prototype.toString.call( str ) !== '[object String]') + return str; + + var numbersToRound = str.match(/[0-9]+\.[0-9]+/g); + if(!numbersToRound) + return str; + + var retStr = str; + for(var i = 0; i < numbersToRound.length; i++) { + num = parseFloat(numbersToRound[i]); + if( !isNaN(num) ) { + roundedNum = Math.round(num*1000)/1000; + retStr = retStr.replace(numbersToRound[i].toString(), roundedNum.toString()); + } + } + + return retStr; +} + +function generateInsetRoundCases(units, testType) { + var convert = testType.indexOf('computed') != -1 ? true : false; + var testUnit = units; + var sizes = [ + '10' + units, + '20' + units, + '30' + units, + '40' + units + ]; + + function insetRound(value) { + return 'inset(10' +testUnit+ ' round ' + value + ')'; + } + + function serializedInsetRound(lhsValues, rhsValues, convert) { + var retStr = ''; + if(!rhsValues) + retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +')'; + else + retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +' / '+ rhsValues +')'; + + if(convert) + return convertToPx(retStr); + + return retStr; + } + + var results = [], left, lhs, right, rhs; + for (left = 1; left <= 4; left++) { + lhs = sizes.slice(0, left).join(' '); + results.push([insetRound(lhs) +' - '+ testType, insetRound(lhs), serializedInsetRound(lhs, null, convert)]); + for (right = 1; right <= 4; right++) { + rhs = sizes.slice(0, right).join(' '); + if(lhs == rhs) + results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, null, convert)]); + else + results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, rhs, convert)]); + } + } + return results; +} + +var validUnits = [ + "cm","mm","in","pt","pc", // Absolute length units (omitting px b/c we default to that in all tests) + "em","ex","ch","rem", // Font relative length units + "vw","vh","vmin","vmax" // Viewport percentage units + ] + +/// [actual, expected] +var validPositions = [ + +/// [ percent ], [ length ], [ percent | percent ], [ percent | length ], [ length | percent ], [ length | length ] + ["50%", "50% 50%"], + ["50u1", "50u1 50%"], + ["50% 50%", "50% 50%"], + ["50% 50u1", "50% 50u1"], + ["50u1 50%", "50u1 50%"], + ["50u1 50u1", "50u1 50u1"], + +///// [ keyword ], [ keyword keyword ] x 5 keywords + ["left", "0% 50%"], + ["top", "50% 0%"], + ["right", "100% 50%"], + ["bottom", "50% 100%"], + ["center", "50% 50%"], + + ["left top", "0% 0%"], + ["left bottom", "0% 100%"], + ["left center", "0% 50%"], + + ["top left", "0% 0%"], + ["top right", "100% 0%"], + ["top center", "50% 0%"], + + ["right top", "100% 0%"], + ["right bottom", "100% 100%"], + ["right center", "100% 50%"], + + ["bottom left", "0% 100%"], + ["bottom right", "100% 100%"], + ["bottom center", "50% 100%"], + + ["center top", "50% 0%"], + ["center left", "0% 50%"], + ["center right", "100% 50%"], + ["center bottom", "50% 100%"], + ["center center", "50% 50%"], + +////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords + ["left 50%", "0% 50%"], + ["left 50u1", "0% 50u1"], + + ["50% top", "50% 0%"], + ["50u1 top", "50u1 0%"], + + ["right 80%", "100% 80%"], + ["right 80u1", "100% 80u1"], + + ["70% bottom", "70% 100%"], + ["70u1 bottom", "70u1 100%"], + + ["center 60%", "50% 60%"], + ["center 60u1", "50% 60u1"], + ["60% center", "60% 50%"], + ["60u1 center", "60u1 50%"], + +////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords + ["center top 50%", "50% 50%"], + ["center top 50u1", "50% 50u1"], + ["center left 50%", "50% 50%"], + ["center left 50u1", "50u1 50%"], + ["center right 70%", "30% 50%"], + ["center right 70u1", "right 70u1 top 50%"], + ["center bottom 70%", "50% 30%"], + ["center bottom 70u1", "left 50% bottom 70u1"], + + ["left top 50%", "0% 50%"], + ["left top 50u1", "0% 50u1"], + ["left bottom 70%", "0% 30%"], + ["left bottom 70u1", "left 0% bottom 70u1"], + + ["top left 50%", "50% 0%"], + ["top left 50u1", "50u1 0%"], + ["top right 70%", "30% 0%"], + ["top right 70u1", "right 70u1 top 0%"], + + ["bottom left 50%", "50% 100%"], + ["bottom left 50u1", "50u1 100%"], + ["bottom right 70%", "30% 100%"], + ["bottom right 70u1", "right 70u1 top 100%"], + + ["right bottom 70%", "100% 30%"], + ["right bottom 70u1", "left 100% bottom 70u1"], + ["right top 50%", "100% 50%"], + ["right top 50u1", "100% 50u1"], + +////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords + ["left 50% center", "50% 50%"], + ["left 50u1 center", "50u1 50%"], + ["left 50% top", "50% 0%"], + ["left 50u1 top", "50u1 0%"], + ["left 50% bottom", "50% 100%"], + ["left 50u1 bottom", "50u1 100%"], + + ["top 50% center", "50% 50%"], + ["top 50u1 center", "50% 50u1"], + ["top 50% left", "0% 50%"], + ["top 50u1 left", "0% 50u1"], + ["top 50% right", "100% 50%"], + ["top 50u1 right", "100% 50u1"], + + ["bottom 70% center", "50% 30%"], + ["bottom 70u1 center", "left 50% bottom 70u1"], + ["bottom 70% left", "0% 30%"], + ["bottom 70u1 left", "left 0% bottom 70u1"], + ["bottom 70% right", "100% 30%"], + ["bottom 70u1 right", "left 100% bottom 70u1"], + + ["right 80% center", "20% 50%"], + ["right 80u1 center", "right 80u1 top 50%"], + ["right 80% bottom", "20% 100%"], + ["right 80u1 bottom", "right 80u1 top 100%"], + ["right 80% top", "20% 0%"], + ["right 80u1 top", "right 80u1 top 0%"], + +////// [ keyword percent | keyword percent], [ keyword percent | keyword length], +////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords + ["left 50% top 50%", "50% 50%"], + ["left 50% top 50u1", "50% 50u1"], + ["left 50% bottom 70%", "50% 30%"], + ["left 50% bottom 70u1", "left 50% bottom 70u1"], + ["left 50u1 top 50%", "50u1 50%"], + ["left 50u1 top 50u1", "50u1 50u1"], + ["left 50u1 bottom 70%", "50u1 30%"], + ["left 50u1 bottom 70u1", "left 50u1 bottom 70u1"], + + ["top 50% left 50%", "50% 50%"], + ["top 50% left 50u1", "50u1 50%"], + ["top 50% right 80%", "20% 50%"], + ["top 50% right 80u1", "right 80u1 top 50%"], + ["top 50u1 left 50%", "50% 50u1"], + ["top 50u1 left 50u1", "50u1 50u1"], + ["top 50u1 right 80%", "20% 50u1"], + ["top 50u1 right 80u1", "right 80u1 top 50u1"], + + ["bottom 70% left 50%", "50% 30%"], + ["bottom 70% left 50u1", "50u1 30%"], + ["bottom 70% right 80%", "20% 30%"], + ["bottom 70% right 80u1", "right 80u1 top 30%"], + ["bottom 70u1 left 50%", "left 50% bottom 70u1"], + ["bottom 70u1 left 50u1", "left 50u1 bottom 70u1"], + ["bottom 70u1 right 80%", "left 20% bottom 70u1"], + ["bottom 70u1 right 80u1", "right 80u1 bottom 70u1"], + + ["right 80% top 50%", "20% 50%"], + ["right 80% top 50u1", "20% 50u1"], + ["right 80% bottom 70%", "20% 30%"], + ["right 80% bottom 70u1", "left 20% bottom 70u1"], + ["right 80u1 top 50%", "right 80u1 top 50%"], + ["right 80u1 top 50u1", "right 80u1 top 50u1"], + ["right 80u1 bottom 70%", "right 80u1 top 30%"], + ["right 80u1 bottom 70u1", "right 80u1 bottom 70u1"], +]; + +var invalidPositions = [ +////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords + "50% left", + "50px left", + "top 50%", + "80% right", + "80px right", + "bottom 70%", + "bottom 70px", + +////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords + "center center 60%", + "center center 60px", + + "left center 60%", + "left center 60px", + "left right 80%", + "left right 80px", + "left left 50%", + "left left 50px", + + "top center 60%", + "top center 60px", + "top bottom 80%", + "top bottom 80px", + "top top 50%", + "top top 50px", + + "bottom center 60%", + "bottom center 60px", + "bottom top 50%", + "bottom top 50px", + "bottom bottom 50%", + "bottom bottom 50px", + + "right center 60%", + "right center 60px", + "right left 50%", + "right left 50px", + "right right 70%", + "right right 70px", + +////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords + "center 60% top", + "center 60px top", + "center 60% bottom", + "center 60px bottom", + "center 60% left", + "center 60px left", + "center 60% right", + "center 60px right", + "center 60% center", + "center 60px center", + + "left 50% right", + "left 50px right", + "left 50% left", + "left 50px left", + + "top 50% bottom", + "top 50px bottom", + "top 50% top", + "top 50px top", + + "bottom 70% top", + "bottom 70px top", + "bottom 70% bottom", + "bottom 70px bottom", + + "right 80% left", + "right 80px left", + +////// [ keyword percent | keyword percent], [ keyword percent | keyword length], +////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords + "center 60% top 50%", + "center 60% top 50px", + "center 60% bottom 70%", + "center 60% bottom 70px", + "center 60% left 50%", + "center 60% left 50px", + "center 60% right 70%", + "center 60% right 70px", + "center 60% center 65%", + "center 60% center 65px", + "center 60px top 50%", + "center 60px top 50px", + "center 60px bottom 70%", + "center 60px bottom 70px", + "center 60px left 50%", + "center 60px left 50px", + "center 60px right 70%", + "center 60px right 70px", + "center 60px center 65%", + "center 60px center 65px", + + "left 50% center 60%", + "left 50% center 60px", + "left 50% right 80%", + "left 50% right 80px", + "left 50% left 50%", + "left 50% left 50px", + "left 50px center 60%", + "left 50px center 60px", + "left 50px right 80%", + "left 50px right 80px", + "left 50px left 50%", + "left 50px left 50px", + + "top 50% center 60%", + "top 50% center 60px", + "top 50% bottom 50%", + "top 50% bottom 50px", + "top 50% top 50%", + "top 50% top 50px", + "top 50px center 60%", + "top 50px center 60px", + "top 50px bottom 70%", + "top 50px bottom 70px", + "top 50px top 50%", + "top 50px top 50px", + + "bottom 70% center 60%", + "bottom 70% center 60px", + "bottom 70% top 50%", + "bottom 70% top 50px", + "bottom 70% bottom 50%", + "bottom 70% bottom 50px", + "bottom 70px center 60%", + "bottom 70px center 60px", + "bottom 70px top 50%", + "bottom 70px top 50px", + "bottom 70px bottom 50%", + "bottom 70px bottom 50px", + + "right 80% center 60%", + "right 80% center 60px", + "right 80% left 50%", + "right 80% left 50px", + "right 80% right 85%", + "right 80% right 85px", + "right 80px center 60%", + "right 80px center 60px", + "right 80px left 50%", + "right 80px left 50px", + "right 80px right 85%", + "right 80px right 85px" +]; + +// valid radii values for circle + ellipse +// [value, expected_inline, [expected_computed?]] +var validCircleRadii = [ + ['', 'at 50% 50%', 'at 50% 50%'], + ['50u1', '50u1 at 50% 50%'], + ['50%', '50% at 50% 50%'], + ['closest-side', 'at 50% 50%'], + ['farthest-side', 'farthest-side at 50% 50%'] +] +var validEllipseRadii = [ + ['', 'at 50% 50%', 'at 50% 50%'], + ['50u1', '50u1 at 50% 50%', '50u1 at 50% 50%'], + ['50%', '50% at 50% 50%', '50% at 50% 50%'], + ['closest-side', 'at 50% 50%', 'at 50% 50%'], + ['farthest-side', 'farthest-side at 50% 50%', 'farthest-side at 50% 50%'], + ['50u1 100u1', '50u1 100u1 at 50% 50%'], + ['100u1 100px', '100u1 100px at 50% 50%'], + ['25% 50%', '25% 50% at 50% 50%'], + ['50u1 25%', '50u1 25% at 50% 50%'], + ['25% 50u1', '25% 50u1 at 50% 50%'], + ['25% closest-side', '25% at 50% 50%'], + ['25u1 closest-side', '25u1 at 50% 50%'], + ['closest-side 75%', 'closest-side 75% at 50% 50%'], + ['closest-side 75u1', 'closest-side 75u1 at 50% 50%'], + ['25% farthest-side', '25% farthest-side at 50% 50%'], + ['25u1 farthest-side', '25u1 farthest-side at 50% 50%'], + ['farthest-side 75%', 'farthest-side 75% at 50% 50%'], + ['farthest-side 75u1', 'farthest-side 75u1 at 50% 50%'], + ['closest-side closest-side', 'at 50% 50%'], + ['farthest-side farthest-side', 'farthest-side farthest-side at 50% 50%'], + ['closest-side farthest-side', 'closest-side farthest-side at 50% 50%'], + ['farthest-side closest-side', 'farthest-side at 50% 50%'] +] + +var validInsets = [ + ["One arg - u1", "10u1"], + ["One arg - u2", "10u2"], + ["Two args - u1 u1", "10u1 20u1"], + ["Two args - u1 u2", "10u1 20u2"], + ["Two args - u2 u1", "10u2 20u1"], + ["Two args - u2 u2", "10u2 20u2"], + ["Three args - u1 u1 u1", "10u1 20u1 30u1"], + ["Three args - u1 u1 u2", "10u1 20u1 30u2"], + ["Three args - u1 u2 u1", "10u1 20u2 30u1"], + ["Three args - u1 u2 u2 ", "10u1 20u2 30u2"], + ["Three args - u2 u1 u1", "10u2 20u1 30u1"], + ["Three args - u2 u1 u2 ", "10u2 20u1 30u2"], + ["Three args - u2 u2 u1 ", "10u2 20u2 30u1"], + ["Three args - u2 u2 u2 ","10u2 20u2 30u2"], + ["Four args - u1 u1 u1 u1", "10u1 20u1 30u1 40u1"], + ["Four args - u1 u1 u1 u2", "10u1 20u1 30u1 40u2"], + ["Four args - u1 u1 u2 u1", "10u1 20u1 30u2 40u1"], + ["Four args - u1 u1 u2 u2", "10u1 20u1 30u2 40u2"], + ["Four args - u1 u2 u1 u1", "10u1 20u2 30u1 40u1"], + ["Four args - u1 u2 u1 u2", "10u1 20u2 30u1 40u2"], + ["Four args - u1 u2 u2 u1", "10u1 20u2 30u2 40u1"], + ["Four args - u1 u2 u2 u2", "10u1 20u2 30u2 40u2"], + ["Four args - u2 u1 u1 u1", "10u2 20u1 30u1 40u1"], + ["Four args - u2 u1 u1 u2", "10u2 20u1 30u1 40u2"], + ["Four args - u2 u1 u2 u1", "10u2 20u1 30u2 40u1"], + ["Four args - u2 u1 u2 u2", "10u2 20u1 30u2 40u2"], + ["Four args - u2 u2 u1 u1", "10u2 20u2 30u1 40u1"], + ["Four args - u2 u2 u1 u2", "10u2 20u2 30u1 40u2"], + ["Four args - u2 u2 u2 u1", "10u2 20u2 30u2 40u1"], + ["Four args - u2 u2 u2 u2", "10u2 20u2 30u2 40u2"] +] + +var validPolygons = [ + ["One vertex - u1 u1", "10u1 20u1"], + ["One vertex - u1 u2", "10u1 20u2"], + ["Two vertices - u1 u1, u1 u1", "10u1 20u1, 30u1 40u1"], + ["Two vertices - u1 u1, u2 u2", "10u1 20u1, 30u2 40u2"], + ["Two vertices - u2 u2, u1 u1", "10u2 20u2, 30u1 40u1"], + ["Two vertices - u1 u2, u2 u1", "10u1 20u2, 30u2 40u1"], + ["Three vertices - u1 u1, u1 u1, u1 u1", "10u1 20u1, 30u1 40u1, 50u1 60u1"], + ["Three vertices - u2 u2, u2 u2, u2 u2", "10u2 20u2, 30u2 40u2, 50u2 60u2"], + ["Three vertices - u3 u3, u3 u3, u3 u3", "10u3 20u3, 30u3 40u3, 50u3 60u3"], + ["Three vertices - u1 u1, u2 u2, u3 u3", "10u1 20u1, 30u2 40u2, 50u3 60u3"], + ["Three vertices - u3 u3, u1, u1, u2 u2", "10u3 20u3, 30u1 40u1, 50u2 60u2"], +] + +// [test value, expected property value, expected computed style] +var calcTestValues = [ + ["calc(10in)", "calc(10in)", "960px"], + ["calc(10in + 20px)", "calc(980px)", "980px"], + ["calc(30%)", "calc(30%)", "30%"], + ["calc(100%/4)", "calc(25%)", "25%"], + ["calc(25%*3)", "calc(75%)", "75%"], + // These following two test cases represent an either/or situation in the spec + // computed value is always supposed to be, at most, a tuple of a length and a percentage. + // the computed value of a ‘calc()’ expression can be represented as either a number or a tuple + // of a dimension and a percentage. + // http://www.w3.org/TR/css3-values/#calc-notation + ["calc(25%*3 - 10in)", "calc(75% - 10in)", ["calc(75% - 960px)", "calc(-960px + 75%)"]], + ["calc((12.5%*6 + 10in) / 4)", "calc((75% + 10in) / 4)", ["calc((75% + 960px) / 4)", "calc(240px + 18.75%)"]] +] + +return { + testInlineStyle: testInlineStyle, + testComputedStyle: testComputedStyle, + testShapeMarginInlineStyle: testShapeMarginInlineStyle, + testShapeMarginComputedStyle: testShapeMarginComputedStyle, + testShapeThresholdInlineStyle: testShapeThresholdInlineStyle, + testShapeThresholdComputedStyle: testShapeThresholdComputedStyle, + buildTestCases: buildTestCases, + buildRadiiTests: buildRadiiTests, + buildPositionTests: buildPositionTests, + buildInsetTests: buildInsetTests, + buildPolygonTests: buildPolygonTests, + generateInsetRoundCases: generateInsetRoundCases, + buildCalcTests: buildCalcTests, + validUnits: validUnits, + calcTestValues: calcTestValues, + roundResultStr: roundResultStr +} +})(); diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-gg-gr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-gg-gr.png Binary files differnew file mode 100644 index 00000000000..091de70bb72 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-gg-gr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-grg-rgr-grg.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 00000000000..6fcfeb4883e --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-grg-rgr-grg.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-grg-rrg-rgg.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 00000000000..fcf4f3fd7d9 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-grg-rrg-rgg.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-rgr-grg-rgr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 00000000000..db8ed5cf7bd --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-rgr-grg-rgr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-tr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-tr.png Binary files differnew file mode 100644 index 00000000000..8b4b25364e0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/pattern-tr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/properties.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/properties.js new file mode 100644 index 00000000000..ddecfb6e336 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/properties.js @@ -0,0 +1,449 @@ +(function(root){ + +/* + * General Value Types definition + * they return an object of arrays of type { <name>: [<start-value>, <end-value>], ... } + */ +var values = { + 'length' : function() { + // http://www.w3.org/TR/css3-values/#lengths + return { + // CSS Values and Module Level 3 + // ch: ['1ch', '10ch'], + // rem: ['1rem', '10rem'], + // vw: ['1vw', '10vw'], + // vh: ['1vh', '10vh'], + // vmin: ['1vmin', '10vmin'], + // vmax: ['1vmax', '10vmax'], + // CSS Values and Module Level 2 + pt: ['1pt', '10pt'], + pc: ['1pc', '10pc'], + px: ['1px', '10px'], + // CSS Values and Module Level 1 + em: ['1em', '10em'], + ex: ['1ex', '10ex'], + mm: ['1mm', '10mm'], + cm: ['1cm', '10cm'], + 'in': ['1in', '10in'] + }; + }, + 'length-em': function() { + return { + em: ['1.1em', '1.5em'] + }; + }, + 'percentage': function() { + // http://www.w3.org/TR/css3-values/#percentages + return { + '%': ['33%', '80%'] + }; + }, + 'color': function() { + // http://www.w3.org/TR/css3-values/#colors + // http://www.w3.org/TR/css3-color/ + return { + rgba: ['rgba(100,100,100,1)', 'rgba(10,10,10,0.4)'] + }; + }, + 'rectangle': function() { + // http://www.w3.org/TR/CSS2/visufx.html#value-def-shape + return { + rectangle: ['rect(10px,10px,10px,10px)', 'rect(15px,15px,5px,5px)'] + }; + }, + 'font-weight': function() { + // http://www.w3.org/TR/css3-fonts/#font-weight-prop + return { + keyword: ["normal", "bold"], + numeric: ["100", "900"] + }; + }, + 'number': function() { + // http://www.w3.org/TR/css3-values/#number + return { + integer: ["1", "10"], + decimal: ["1.1", "9.55"] + }; + }, + 'number[0,1]': function() { + // http://www.w3.org/TR/css3-values/#number + // applies to [0,1]-ranged properties like opacity + return { + "zero-to-one": ["0.2", "0.9"] + }; + }, + 'integer': function() { + // http://www.w3.org/TR/css3-values/#integer + return { + integer: ["1", "10"] + }; + }, + 'shadow': function() { + // http://www.w3.org/TR/css-text-decor-3/#text-shadow-property + return { + shadow: ['rgba(0,0,0,0.1) 5px 6px 7px', 'rgba(10,10,10,0.9) 5px 6px 7px'] + }; + }, + 'visibility': function() { + // http://www.w3.org/TR/CSS2/visufx.html#visibility + return { + keyword: ['visible', 'hidden', {discrete: true}] + }; + }, + 'auto': function(property) { + var types = properties[property] || unspecified_properties[property]; + var val = values[types[0]](property); + var key = Object.keys(val).shift(); + return { + to: [val[key][1], 'auto'], + from: ['auto', val[key][1]] + }; + }, + // types reqired for non-specified properties + 'border-radius': function() { + return { + px: ['1px', '10px'], + "px-px": ['1px 3px', '10px 13px'] + }; + }, + 'image' : function() { + var prefix = getValueVendorPrefix('background-image', 'linear-gradient(top, hsl(0, 80%, 70%), #bada55)'); + return { + // Chrome implements this + url: ['url(support/one.gif)', 'url(support/two.gif)'], + data: ['url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=)', 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)'], + // A hunch, as from the spec: + // http://www.w3.org/TR/css3-transitions/#animatable-types + // gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition. + gradient: [prefix + 'linear-gradient(top, hsl(0, 80%, 70%), #bada55)', prefix + 'linear-gradient(top, #bada55, hsl(0, 80%, 70%))'] + }; + }, + 'background-size': function() { + return { + keyword: ['cover', 'contain'] + }; + }, + 'box-shadow': function() { + // http://www.w3.org/TR/css3-background/#ltshadowgt + return { + shadow: ['60px -16px teal', '60px -16px red'] + }; + }, + 'vertical': function() { + return { + keyword: ['top', 'bottom'] + }; + }, + 'horizontal': function() { + return { + keyword: ['left', 'right'] + }; + }, + 'font-stretch': function() { + return { + keyword: ['condensed', 'expanded'] + }; + }, + 'transform': function() { + return { + rotate: ['rotate(10deg)', 'rotate(20deg)'] + }; + }, + 'position': function() { + return { + 'static to absolute': ['static', 'absolute', {discrete: true}], + 'relative to absolute': ['relative', 'absolute', {discrete: true}], + 'absolute to fixed': ['absolute', 'fixed', {discrete: true}] + }; + }, + 'display': function() { + return { + 'static to absolute': ['none', 'block', {discrete: true}], + 'block to inline-block': ['block', 'inline-block', {discrete: true}] + }; + } +}; + +/* + * Property to Type table + * (as stated in specification) + */ +var properties = { + 'background-color': ['color'], + 'background-position': ['length', 'percentage'], + + 'border-top-width': ['length'], + 'border-right-width': ['length'], + 'border-bottom-width': ['length'], + 'border-left-width': ['length'], + + 'border-top-color': ['color'], + 'border-right-color': ['color'], + 'border-bottom-color': ['color'], + 'border-left-color': ['color'], + + 'padding-bottom': ['length'], + 'padding-left': ['length'], + 'padding-right': ['length'], + 'padding-top': ['length'], + + 'margin-bottom': ['length'], + 'margin-left': ['length'], + 'margin-right': ['length'], + 'margin-top': ['length'], + + 'height': ['length', 'percentage'], + 'width': ['length', 'percentage'], + 'min-height': ['length', 'percentage'], + 'min-width': ['length', 'percentage'], + 'max-height': ['length', 'percentage'], + 'max-width': ['length', 'percentage'], + + 'top': ['length', 'percentage'], + 'right': ['length', 'percentage'], + 'bottom': ['length', 'percentage'], + 'left': ['length', 'percentage'], + + 'color': ['color'], + 'font-size': ['length', 'percentage'], + 'font-weight': ['font-weight'], + 'line-height': ['number', 'length', 'percentage'], + 'letter-spacing': ['length'], + // Note: percentage is Level3 and not implemented anywhere yet + // https://drafts.csswg.org/css3-text/#word-spacing + 'word-spacing': ['length', 'percentage'], + 'text-indent': ['length', 'percentage'], + 'text-shadow': ['shadow'], + + 'outline-color': ['color'], + // outline-offset <integer> used to be an error in the spec + 'outline-offset': ['length'], + 'outline-width': ['length'], + + 'clip': ['rectangle'], + // Note: doesn't seem implemented anywhere + 'crop': ['rectangle'], + + 'vertical-align': ['length', 'percentage'], + 'opacity': ['number[0,1]'], + 'visibility': ['visibility'], + 'z-index': ['integer'] +}; + +/* + * Property to auto-value mapping + * (lazily taken from http://www.siliconbaytraining.com/pages/csspv.html) + */ +var properties_auto = [ + 'margin-top', + 'margin-right', + 'margin-bottom', + 'margin-left', + 'height', + 'width', + 'clip', + 'marker-offset', + 'top', + 'right', + 'left', + 'bottom', + 'z-index' +]; + +/* + * Property to Type table + * (missing value-types of specified properties) + */ +var missing_properties = { + 'margin-bottom': ['percentage'], + 'margin-left': ['percentage'], + 'margin-right': ['percentage'], + 'margin-top': ['percentage'], + 'padding-bottom': ['percentage'], + 'padding-left': ['percentage'], + 'padding-right': ['percentage'], + 'padding-top': ['percentage'], + 'vertical-align': ['vertical'] +}; + +/* + * Property to Type table + * (properties that haven't been specified but implemented) + */ +var unspecified_properties = { + // http://oli.jp/2010/css-animatable-properties/ + 'border-top-left-radius': ['border-radius'], + 'border-top-right-radius': ['border-radius'], + 'border-bottom-left-radius': ['border-radius'], + 'border-bottom-right-radius': ['border-radius'], + 'background-image': ['image'], + 'background-size': ['background-size'], + // https://drafts.csswg.org/css3-background/#the-box-shadow + // Animatable: yes, except between inner and outer shadows (Transition to/from an absent shadow is a transition to/from ‘0 0 transparent’ or ‘0 0 transparent inset’, as appropriate.) + 'box-shadow': ['box-shadow'], + 'font-size-adjust': ['number'], + 'font-stretch': ['font-stretch'], + 'marker-offset': ['length'], + 'text-decoration-color': ['color'], + 'column-count': ['integer'], + 'column-gap': ['length'], + 'column-rule-color': ['color'], + 'column-rule-width': ['length'], + 'column-width': ['length'], + 'transform': ['transform'], + 'transform-origin': ['horizontal'], + 'zoom': ['number'], + 'outline-radius-topleft': ['length', 'percentage'], + 'outline-radius-topright': ['length', 'percentage'], + 'outline-radius-bottomright': ['length', 'percentage'], + 'outline-radius-bottomleft': ['length', 'percentage'], + 'display': ['display'], + 'position': ['position'] +}; + +/* + * additional styles required to actually render + * (different browsers expect different environment) + */ +var additional_styles = { + // all browsers + 'border-top-width': {'border-top-style' : 'solid'}, + 'border-right-width': {'border-right-style' : 'solid'}, + 'border-bottom-width': {'border-bottom-style' : 'solid'}, + 'border-left-width': {'border-left-style' : 'solid'}, + 'top': {'position': 'absolute'}, + 'right': {'position': 'absolute'}, + 'bottom': {'position': 'absolute'}, + 'left': {'position': 'absolute'}, + 'z-index': {'position': 'absolute'}, + 'outline-offset': {'outline-style': 'solid'}, + 'outline-width': {'outline-style': 'solid'}, + 'word-spacing': {'width': '100px', 'height': '100px'}, + // unspecified properties + 'column-rule-width': {'column-rule-style': 'solid'}, + 'position': {'width': '50px', 'height': '50px', top: '10px', left: '50px'} +}; + +/* + * additional styles required *on the parent* to actually render + * (different browsers expect different environment) + */ +var parent_styles = { + 'border-top-width': {'border-top-style' : 'solid'}, + 'border-right-width': {'border-right-style' : 'solid'}, + 'border-bottom-width': {'border-bottom-style' : 'solid'}, + 'border-left-width': {'border-left-style' : 'solid'}, + 'height': {'width': '100px', 'height': '100px'}, + 'min-height': {'width': '100px', 'height': '100px'}, + 'max-height': {'width': '100px', 'height': '100px'}, + 'width': {'width': '100px', 'height': '100px'}, + 'min-width': {'width': '100px', 'height': '100px'}, + 'max-width': {'width': '100px', 'height': '100px'}, + // unspecified properties + 'position': {'position': 'relative', 'width': '100px', 'height': '100px'}, + // inheritance tests + 'top': {'width': '100px', 'height': '100px', 'position': 'relative'}, + 'right': {'width': '100px', 'height': '100px', 'position': 'relative'}, + 'bottom': {'width': '100px', 'height': '100px', 'position': 'relative'}, + 'left': {'width': '100px', 'height': '100px', 'position': 'relative'} +}; + + +function assemble(props) { + var tests = []; + + // assemble tests + for (var property in props) { + props[property].forEach(function(type) { + var _values = values[type](property); + Object.keys(_values).forEach(function(unit) { + var data = { + name: property + ' ' + type + '(' + unit + ')', + property: property, + valueType : type, + unit : unit, + parentStyle: extend({}, parent_styles[property] || {}), + from: extend({}, additional_styles[property] || {}), + to: {} + }; + + data.from[property] = _values[unit][0]; + data.to[property] = _values[unit][1]; + data.flags = _values[unit][2] || {}; + + tests.push(data); + }); + }); + } + + return tests; +} + +root.getPropertyTests = function() { + return assemble(properties); +}; + +root.getMissingPropertyTests = function() { + return assemble(missing_properties); +}; + +root.getUnspecifiedPropertyTests = function() { + return assemble(unspecified_properties); +}; + +root.getFontSizeRelativePropertyTests = function() { + var accepted = {}; + + for (var key in properties) { + if (!Object.prototype.hasOwnProperty.call(properties, key) || key === "font-size") { + continue; + } + + if (properties[key].indexOf('length') > -1) { + accepted[key] = ['length-em']; + } + } + + return assemble(accepted); +}; + +root.getAutoPropertyTests = function() { + var accepted = {}; + + for (var i = 0, key; key = properties_auto[i]; i++) { + accepted[key] = ['auto']; + } + + return assemble(accepted); +}; + +root.filterPropertyTests = function(tests, names) { + var allowed = {}; + var accepted = []; + + if (typeof names === "string") { + names = [names]; + } + + if (!(names instanceof RegExp)) { + names.forEach(function(name) { + allowed[name] = true; + }); + } + + tests.forEach(function(test) { + if (names instanceof RegExp) { + if (!test.name.match(names)) { + return; + } + } else if (!allowed[test.name]) { + return; + } + + accepted.push(test); + }); + + return accepted; +}; + +})(window);
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/red20x20.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/red20x20.png Binary files differnew file mode 100644 index 00000000000..5d44ef210e1 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/red20x20.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/region-in-body.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/region-in-body.html new file mode 100644 index 00000000000..78038fd28ff --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/region-in-body.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #container { + background: red; + } + #content { + flow-into: flow; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + #region { + flow-from: flow; + } + </style> + <script src="util.js" type="text/javascript"></script> +</head> +<body> + <div id="container"> + <!-- The ​ entity is a zerowidth space. It enables me to create nicely reflowing rectangles of Ahem text --> + <div id="content"> + xxxx​xxxx​xxxx​xxxx + </div> + </div> + <div id="region"> + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/region-in-container.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/region-in-container.html new file mode 100644 index 00000000000..219fce6503c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/region-in-container.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #container { + background: red; + } + #content { + flow-into: flow; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + #region { + flow-from: flow; + } + </style> +</head> +<body> + <div id="container"> + <!-- The ​ entity is a zerowidth space. It enables me to create nicely reflowing rectangles of Ahem text --> + <div id="content"> + xxxx​xxxx​xxxx​xxxx + </div> + </div> + <div id="region-parent"> + <div id="region"> + </div> + </div> + <script src="util.js" type="text/javascript"></script> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-h-50%.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-h-50%.png Binary files differnew file mode 100644 index 00000000000..cf2eea6b438 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-h-50%.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-h-50px.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-h-50px.png Binary files differnew file mode 100644 index 00000000000..9f46583665c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-h-50px.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-v-100px.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-v-100px.png Binary files differnew file mode 100644 index 00000000000..a837eca2225 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-v-100px.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-v-50px.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-v-50px.png Binary files differnew file mode 100644 index 00000000000..84141028020 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/ruler-v-50px.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/runParallelAsyncHarness.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/runParallelAsyncHarness.js new file mode 100644 index 00000000000..460f467930e --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/runParallelAsyncHarness.js @@ -0,0 +1,145 @@ +(function(root){ +'use strict'; +// testharness doesn't know about async test queues, +// so this wrapper takes care of that + +/* USAGE: + runParallelAsyncHarness({ + // list of data to test, must be array of objects. + // each object must contain a "name" property to describe the test + // besides name, the object can contain whatever data you need + tests: [ + {name: "name of test 1", custom: "data"}, + {name: "name of test 2", custom: "data"}, + // ... + ], + + // number of tests (tests, not test-cases!) to run concurrently + testsPerSlice: 100, + + // time in milliseconds a test-run takes + duration: 1000, + + // test-cases to run for for the test - there must be at least one + // each case creates its separate async_test() instance + cases: { + // test case named "test1" + test1: { + // run as a async_test.step() this callback contains your primary assertions + start: function(testCaseKey, data, options){}, + // run as a async_test.step() this callback contains assertions to be run + // when the test ended, immediately before teardown + done: function(testCaseKey, data, options){} + }, + // ... + } + + // all callbacks are optional: + + // invoked for individual test before it starts so you can setup the environment + // like DOM, CSS, adding event listeners and such + setup: function(data, options){}, + + // invoked after a test ended, so you can clean up the environment + // like DOM, CSS, removing event listeners and such + teardown: function(data, options){}, + + // invoked before a batch of tests ("slice") are run concurrently + // tests is an array of test data objects + sliceStart: function(options, tests) + + // invoked after a batch of tests ("slice") were run concurrently + // tests is an array of test data objects + sliceDone: function(options, tests) + + // invoked once all tests are done + done: function(options){} + }) +*/ +root.runParallelAsyncHarness = function(options) { + if (!options.cases) { + throw new Error("Options don't contain test cases!"); + } + + var noop = function(){}; + + // add a 100ms buffer to the test timeout, just in case + var duration = Math.ceil(options.duration + 100); + + // names of individual tests + var cases = Object.keys(options.cases); + + // run tests in a batch of slices + // primarily not to overload weak devices (tablets, phones, …) + // with too many tests running simultaneously + var iteration = -1; + var testPerSlice = options.testsPerSlice || 100; + var slices = Math.ceil(options.tests.length / testPerSlice); + + // initialize all async test cases + // Note: satisfying testharness.js needs to know all async tests before load-event + options.tests.forEach(function(data, index) { + data.cases = {}; + cases.forEach(function(name) { + data.cases[name] = async_test(data.name + " / " + name, {timeout: options.timeout || 60000}); + }); + }); + + function runLoop() { + iteration++; + if (iteration >= slices) { + // no more slice, we're done + (options.done || noop)(options); + return; + } + + // grab a slice of testss and initialize them + var offset = iteration * testPerSlice; + var tests = options.tests.slice(offset, offset + testPerSlice); + tests.forEach(function(data) { + (options.setup || noop)(data, options); + + }); + + // kick off the current slice of tests + (options.sliceStart || noop)(options, tests); + + // perform individual "start" test-case + tests.forEach(function(data) { + cases.forEach(function(name) { + data.cases[name].step(function() { + (options.cases[name].start || noop)(data.cases[name], data, options); + }); + }); + }); + + // conclude test (possibly abort) + setTimeout(function() { + tests.forEach(function(data) { + // perform individual "done" test-case + cases.forEach(function(name) { + data.cases[name].step(function() { + (options.cases[name].done || noop)(data.cases[name], data, options); + }); + }); + // clean up after individual test + (options.teardown || noop)(data, options); + // tell harness we're done with individual test-cases + cases.forEach(function(name) { + data.cases[name].done(); + }); + }); + + // finish the test for current slice of tests + (options.sliceDone || noop)(options, tests); + + // next test please, give the browser 50ms to do catch its breath + setTimeout(runLoop, 50); + }, duration); + } + + // allow DOMContentLoaded before actually doing something + setTimeout(runLoop, 100); +}; + +})(window);
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/square-purple.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/square-purple.png Binary files differnew file mode 100644 index 00000000000..0f522d78728 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/square-purple.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/square-teal.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/square-teal.png Binary files differnew file mode 100644 index 00000000000..e567f51b91b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/square-teal.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/square-white.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/square-white.png Binary files differnew file mode 100644 index 00000000000..5853cbb238c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/square-white.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-blue.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-blue.png Binary files differnew file mode 100644 index 00000000000..bf2759634d4 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-blue.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-gray.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-gray.png Binary files differnew file mode 100644 index 00000000000..92c73561f3a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-gray.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-green.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-green.png Binary files differnew file mode 100644 index 00000000000..0aa79b0c86b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-green.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-lime.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-lime.png Binary files differnew file mode 100644 index 00000000000..55fd7fdaedf --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-lime.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-navy.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-navy.png Binary files differnew file mode 100644 index 00000000000..28dae8a3e12 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-navy.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-orange.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-orange.png Binary files differnew file mode 100644 index 00000000000..d3cd498b52b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-orange.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-pink.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-pink.png Binary files differnew file mode 100644 index 00000000000..95b84499a3d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-pink.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-purple.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-purple.png Binary files differnew file mode 100644 index 00000000000..73bea775175 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-purple.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-red.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-red.png Binary files differnew file mode 100644 index 00000000000..1caf25c992a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-red.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-teal.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-teal.png Binary files differnew file mode 100644 index 00000000000..0293ce89dea --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-teal.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-white.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-white.png Binary files differnew file mode 100644 index 00000000000..1a7d4323d77 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-white.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-yellow.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-yellow.png Binary files differnew file mode 100644 index 00000000000..1591aa0e2e2 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/swatch-yellow.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-bl.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-bl.png Binary files differnew file mode 100644 index 00000000000..904e24e996a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-bl.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-br.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-br.png Binary files differnew file mode 100644 index 00000000000..f413ff5c1a0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-br.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-inner-half-size.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-inner-half-size.png Binary files differnew file mode 100644 index 00000000000..e473bf80efc --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-inner-half-size.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-outer.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-outer.png Binary files differnew file mode 100644 index 00000000000..82eeace7fc0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-outer.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-tl.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-tl.png Binary files differnew file mode 100644 index 00000000000..f6ac0ef7e8f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-tl.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-tr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-tr.png Binary files differnew file mode 100644 index 00000000000..59843ae54b6 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/test-tr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/two-regions-in-container.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/two-regions-in-container.html new file mode 100644 index 00000000000..2fc65261da0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/two-regions-in-container.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #container { + background: red; + } + #content { + flow-into: flow; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + #region1, #region2 { + flow-from: flow; + } + </style> +</head> +<body> + <div id="container"> + <!-- The ​ entity is a zerowidth space. It enables me to create nicely reflowing rectangles of Ahem text --> + <div id="content"> + xxxx​xxxx​xxxx​xxxx​xxxx​xxxx​xxxx​xxxx + </div> + </div> + <div id="region-parent"> + <div id="region1"></div> + <div id="region2"></div> + </div> + <script src="util.js" type="text/javascript"></script> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/two.gif b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/two.gif Binary files differnew file mode 100644 index 00000000000..01435c80209 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/two.gif diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/util.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/util.js new file mode 100644 index 00000000000..a7ce4283e45 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/util.js @@ -0,0 +1,29 @@ +function resizeViewportTo(viewportSelector, width, height) { + var iframe = document.querySelector(viewportSelector); + // Commonly used trick to trigger a layout + iframe.contentWindow.document.body.offsetTop; + + iframe.width = width; + iframe.height = height; + + iframe.contentWindow.document.body.offsetTop; +} + +function injectStylesInIFrame(styleSelector, frameSelector) { + var style = document.querySelector(styleSelector), + frame = document.querySelector(frameSelector); + + frame.contentWindow.addNewStyles(style.textContent); +} + + +if (window.parent != window) { + // we're in an iframe, so expose the bits that allow setting styles inside + window.addNewStyles = function (cssText) { + var styleTag = document.createElement("style"), + textNode = document.createTextNode(cssText); + + styleTag.appendChild(textNode); + document.head.appendChild(styleTag); + } +}
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/vendorPrefix.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/vendorPrefix.js new file mode 100644 index 00000000000..6cf3c5a3783 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/support/vendorPrefix.js @@ -0,0 +1,86 @@ +// +// Vendor-Prefix Helper Functions For Testing CSS +// + +(function(root) { +'use strict'; + +var prefixCache = {}; + +// convert "foo-bar" to "fooBar" +function camelCase(str) { + return str.replace(/\-(\w)/g, function(match, letter){ + return letter.toUpperCase(); + }); +} + +// vendor-prefix a css property +root.addVendorPrefix = function (name) { + var prefix = getVendorPrefix(name); + if (prefix === false) { + // property unknown to browser + return name; + } + + return prefix + name; +}; + +// vendor-prefix a css property value +root.addValueVendorPrefix = function (property, value) { + var prefix = getValueVendorPrefix(property, value); + if (prefix === false) { + // property unknown to browser + return name; + } + + return prefix + value; +}; + +// identify vendor-prefix for css property +root.getVendorPrefix = function(name) { + if (prefixCache[name] !== undefined) { + return prefixCache[name]; + } + + var elem = document.createElement("div"); + name = camelCase(name); + + if (name in elem.style) { + return prefixCache[name] = ""; + } + + var prefixes = ["Webkit", "Moz", "O", "ms"]; + var styles = ["-webkit-", "-moz-", "-o-", "-ms-"]; + var _name = name.substring(0, 1).toUpperCase() + name.substring(1); + + for (var i = 0, length = prefixes.length; i < length; i++) { + if (prefixes[i] + _name in elem.style) { + return prefixCache[name] = styles[i]; + } + } + + return prefixCache[name] = name in elem.style ? "" : false; +}; + +// identify vendor-prefix for css property value +root.getValueVendorPrefix = function(property, value) { + var elem = document.createElement("div"); + // note: webkit needs the element to be attached to the dom + document.body.appendChild(elem); + var styles = ["-webkit-", "-moz-", "-o-", "-ms-", ""]; + var _property = getVendorPrefix(property) + property; + for (var i=0, length = styles.length; i < length; i++) { + var _value = styles[i] + value; + elem.setAttribute('style', _property + ": " + _value); + var _computed = computedStyle(elem, _property); + if (_computed && _computed !== 'none') { + document.body.removeChild(elem); + return styles[i]; + } + } + document.body.removeChild(elem); + return false; +}; + + +})(window);
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/vh_not_refreshing_on_chrome-ref.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/vh_not_refreshing_on_chrome-ref.xht new file mode 100644 index 00000000000..ebe18dae540 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reference/vh_not_refreshing_on_chrome-ref.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><!-- Submitted from TestTWF Paris --><head> + + <title>CSS Reference File</title> + <link href="mailto:marc@bourlon.com" rel="author" title="Marc Bourlon" /> + + <style type="text/css"> + + * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } + + #frameTest { width: 600px; height: 200px; border: 1px solid #000; } + + </style> + + <script type="text/javascript"> + var height = 200; + + function resizeReference() { + + var frameTest = document.getElementById('frameTest'); + + // let's resize the iframe vertically only, showing that the vh sizes is not updated. + if (height <= 300) { + + //frameTest.style.width = height++ + "px"; + frameTest.style.height = height++ + "px"; + + setTimeout(resizeReference, 10); + + } else { + + // uncomment the next line to see how a width resize triggers a layout recalculation + //frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px"; + + } + + } + + setTimeout(resizeReference, 10); + </script> + +</head> +<body> + +<iframe src="vh_not_refreshing_on_chrome_iframe-ref.html" id="frameTest" frameborder="0"></iframe> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reftest-toc.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reftest-toc.xht new file mode 100644 index 00000000000..81b546e585a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reftest-toc.xht @@ -0,0 +1,486 @@ + + +<!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 Values and Units Module Level 3 CR Test Suite Reftest Index</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> + + <body> + + <h1>CSS Values and Units Module Level 3 CR Test Suite Reftest Index</h1> + <table width="100%"> + <col id="test-column"></col> + <col id="ref-column"></col> + <col id="flags-column"></col> + <thead> + <tr> + <th>Test</th> + <th>Reference</th> + <th>Flags</th> + </tr> + </thead> + <tbody id="calc-background-image-gradient-1" class=""> + <tr> + <td rowspan="1" title="Test for calc() on background-image gradients"> + <a href="calc-background-image-gradient-1.xht">calc-background-image-gradient-1</a></td> + <td><a href="reference/calc-background-image-gradient-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-background-linear-gradient-1" class=""> + <tr> + <td rowspan="1" title="Support calc() on gradient stop positions"> + <a href="calc-background-linear-gradient-1.xht">calc-background-linear-gradient-1</a></td> + <td><a href="reference/calc-background-linear-gradient-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-background-position-1" class=""> + <tr> + <td rowspan="1" title="Test for calc() on background-position"> + <a href="calc-background-position-1.xht">calc-background-position-1</a></td> + <td><a href="reference/calc-background-position-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-background-size-1" class=""> + <tr> + <td rowspan="1" title="Test for calc() on background-size"> + <a href="calc-background-size-1.xht">calc-background-size-1</a></td> + <td><a href="reference/calc-background-size-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-border-radius-1" class=""> + <tr> + <td rowspan="1" title="test for border-radius: calc()"> + <a href="calc-border-radius-1.xht">calc-border-radius-1</a></td> + <td><a href="reference/calc-border-radius-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-height-block-1" class=""> + <tr> + <td rowspan="1" title="Test for height:calc() on blocks"> + <a href="calc-height-block-1.xht">calc-height-block-1</a></td> + <td><a href="reference/calc-height-block-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-height-table-1" class=""> + <tr> + <td rowspan="1" title="Test that height:calc() with no percentages has an effect on inner table elements"> + <a href="calc-height-table-1.xht">calc-height-table-1</a></td> + <td><a href="reference/calc-height-table-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-margin-block-1" class=""> + <tr> + <td rowspan="1" title="Test of margin-*: calc()"> + <a href="calc-margin-block-1.xht">calc-margin-block-1</a></td> + <td><a href="reference/calc-margin-block-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-max-height-block-1" class=""> + <tr> + <td rowspan="1" title="Test for max-height:calc() on blocks"> + <a href="calc-max-height-block-1.xht">calc-max-height-block-1</a></td> + <td><a href="reference/calc-max-height-block-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-max-width-block-1" class=""> + <tr> + <td rowspan="1" title="max-width: calc() on blocks"> + <a href="calc-max-width-block-1.xht">calc-max-width-block-1</a></td> + <td><a href="reference/calc-width-block-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-max-width-block-intrinsic-1" class=""> + <tr> + <td rowspan="1" title="intrinsic width of max-width: calc() on blocks"> + <a href="calc-max-width-block-intrinsic-1.xht">calc-max-width-block-intrinsic-1</a></td> + <td><a href="reference/calc-max-width-block-intrinsic-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-min-height-block-1" class=""> + <tr> + <td rowspan="1" title="Test for min-height:calc() on blocks"> + <a href="calc-min-height-block-1.xht">calc-min-height-block-1</a></td> + <td><a href="reference/calc-height-block-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-min-width-block-1" class=""> + <tr> + <td rowspan="1" title="min-width: calc() on blocks"> + <a href="calc-min-width-block-1.xht">calc-min-width-block-1</a></td> + <td><a href="reference/calc-width-block-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-min-width-block-intrinsic-1" class=""> + <tr> + <td rowspan="1" title="intrinsic width of min-width: calc() on blocks"> + <a href="calc-min-width-block-intrinsic-1.xht">calc-min-width-block-intrinsic-1</a></td> + <td><a href="reference/calc-min-width-block-intrinsic-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-offsets-absolute-bottom-1" class=""> + <tr> + <td rowspan="1" title="Test for bottom:calc() on absolutely positioned elements"> + <a href="calc-offsets-absolute-bottom-1.xht">calc-offsets-absolute-bottom-1</a></td> + <td><a href="reference/calc-offsets-absolute-top-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-offsets-absolute-left-1" class=""> + <tr> + <td rowspan="1" title="Test for left:calc() on absolutely positioned elements"> + <a href="calc-offsets-absolute-left-1.xht">calc-offsets-absolute-left-1</a></td> + <td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-offsets-absolute-right-1" class=""> + <tr> + <td rowspan="1" title="Test for right:calc() on absolutely positioned elements"> + <a href="calc-offsets-absolute-right-1.xht">calc-offsets-absolute-right-1</a></td> + <td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-offsets-absolute-top-1" class=""> + <tr> + <td rowspan="1" title="Test for top:calc() on absolutely positioned elements"> + <a href="calc-offsets-absolute-top-1.xht">calc-offsets-absolute-top-1</a></td> + <td><a href="reference/calc-offsets-absolute-top-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-offsets-relative-bottom-1" class=""> + <tr> + <td rowspan="1" title="Test for bottom:calc() on relatively positioned elements"> + <a href="calc-offsets-relative-bottom-1.xht">calc-offsets-relative-bottom-1</a></td> + <td><a href="reference/calc-offsets-relative-top-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-offsets-relative-left-1" class=""> + <tr> + <td rowspan="1" title="Test for left:calc() on relatively positioned elements"> + <a href="calc-offsets-relative-left-1.xht">calc-offsets-relative-left-1</a></td> + <td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-offsets-relative-right-1" class=""> + <tr> + <td rowspan="1" title="Test for right:calc() on relatively positioned elements"> + <a href="calc-offsets-relative-right-1.xht">calc-offsets-relative-right-1</a></td> + <td><a href="reference/calc-offsets-relative-left-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-offsets-relative-top-1" class=""> + <tr> + <td rowspan="1" title="Test for top:calc() on relatively positioned elements"> + <a href="calc-offsets-relative-top-1.xht">calc-offsets-relative-top-1</a></td> + <td><a href="reference/calc-offsets-relative-top-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-padding-block-1" class=""> + <tr> + <td rowspan="1" title="Test of padding-*: calc()"> + <a href="calc-padding-block-1.xht">calc-padding-block-1</a></td> + <td><a href="reference/calc-padding-block-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-text-indent-1" class=""> + <tr> + <td rowspan="1" title="text-indent: calc() on blocks"> + <a href="calc-text-indent-1.xht">calc-text-indent-1</a></td> + <td><a href="reference/calc-text-indent-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-text-indent-intrinsic-1" class=""> + <tr> + <td rowspan="1" title="intrinsic width of text-indent: calc() on blocks"> + <a href="calc-text-indent-intrinsic-1.xht">calc-text-indent-intrinsic-1</a></td> + <td><a href="reference/calc-text-indent-intrinsic-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-transform-origin-1" class=""> + <tr> + <td rowspan="1" title="Test for calc() on transform-origin"> + <a href="calc-transform-origin-1.xht">calc-transform-origin-1</a></td> + <td><a href="reference/calc-transform-origin-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-vertical-align-1" class=""> + <tr> + <td rowspan="1" title="Test for vertical-align:calc()"> + <a href="calc-vertical-align-1.xht">calc-vertical-align-1</a></td> + <td><a href="reference/calc-vertical-align-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-width-block-1" class=""> + <tr> + <td rowspan="1" title="width: calc() on blocks"> + <a href="calc-width-block-1.xht">calc-width-block-1</a></td> + <td><a href="reference/calc-width-block-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-width-block-intrinsic-1" class=""> + <tr> + <td rowspan="1" title="intrinsic width of width: calc() on blocks"> + <a href="calc-width-block-intrinsic-1.xht">calc-width-block-intrinsic-1</a></td> + <td><a href="reference/calc-width-block-intrinsic-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-width-table-auto-1" class=""> + <tr> + <td rowspan="1" title="width: calc() on table-layout: auto tables"> + <a href="calc-width-table-auto-1.xht">calc-width-table-auto-1</a></td> + <td><a href="reference/calc-width-table-auto-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="calc-width-table-fixed-1" class=""> + <tr> + <td rowspan="1" title="width: calc() on table-layout: auto tables"> + <a href="calc-width-table-fixed-1.xht">calc-width-table-fixed-1</a></td> + <td><a href="reference/calc-width-table-fixed-1-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="ch-unit-001" class=""> + <tr> + <td rowspan="1" title="support for the ch unit"> + <a href="ch-unit-001.xht">ch-unit-001</a></td> + <td><a href="reference/ch-unit-001-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="min-width-001" class=""> + <tr> + <td rowspan="1" title="min-width length value approximation"> + <a href="min-width-001.xht">min-width-001</a></td> + <td><a href="ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="multicol-count-non-integer-001" class="ahem invalid"> + <tr> + <td rowspan="1" title="non-integer 'column-count' value"> + <a href="multicol-count-non-integer-001.xht">multicol-count-non-integer-001</a></td> + <td><a href="reference/multicol-columns-invalid-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> + </tr> + </tbody> + <tbody id="multicol-count-non-integer-002" class="ahem invalid"> + <tr> + <td rowspan="1" title="non-integer 'column-count' value"> + <a href="multicol-count-non-integer-002.xht">multicol-count-non-integer-002</a></td> + <td><a href="reference/multicol-columns-invalid-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> + </tr> + </tbody> + <tbody id="multicol-count-non-integer-003" class="ahem invalid"> + <tr> + <td rowspan="1" title="non-integer 'column-count' value"> + <a href="multicol-count-non-integer-003.xht">multicol-count-non-integer-003</a></td> + <td><a href="reference/multicol-columns-invalid-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td> + </tr> + </tbody> + <tbody id="multicol-inherit-002" class="ahem"> + <tr> + <td rowspan="1" title="'column-count' and inherit"> + <a href="multicol-inherit-002.xht">multicol-inherit-002</a></td> + <td><a href="reference/multicol-inherit-002-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="multicol-rule-color-inherit-001" class="ahem"> + <tr> + <td rowspan="1" title="column-rule-color: inherit"> + <a href="multicol-rule-color-inherit-001.xht">multicol-rule-color-inherit-001</a></td> + <td><a href="reference/multicol-rule-color-inherit-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="multicol-rule-color-inherit-002" class="ahem"> + <tr> + <td rowspan="1" title="column-rule-color: inherit (complex)"> + <a href="multicol-rule-color-inherit-002.xht">multicol-rule-color-inherit-002</a></td> + <td><a href="reference/multicol-rule-color-inherit-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="regions-resizing-003" class="ahem dom http"> + <tr> + <td rowspan="1" title="CSS Regions: resizing region that is sized using viewport units"> + <a href="regions-resizing-003.xht">regions-resizing-003</a></td> + <td><a href="reference/regions-resizing-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td> + </tr> + </tbody> + <tbody id="regions-resizing-007" class="ahem dom http"> + <tr> + <td rowspan="1" title="CSS Regions: resizing region with percentage size inside a container that has size set in viewport units"> + <a href="regions-resizing-007.xht">regions-resizing-007</a></td> + <td><a href="reference/regions-resizing-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td> + </tr> + </tbody> + <tbody id="regions-resizing-009" class="ahem dom http"> + <tr> + <td rowspan="1" title="CSS Regions: resizing autosized region when content flowed in it is sized with viewport units"> + <a href="regions-resizing-009.xht">regions-resizing-009</a></td> + <td><a href="reference/regions-resizing-001-ref.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="http" title="Requires HTTP headers">HTTP</abbr></td> + </tr> + </tbody> + <tbody id="vh-calc-support" class=""> + <tr> + <td rowspan="1" title="Viewport units are supported inside calc expressions."> + <a href="vh-calc-support.xht">vh-calc-support</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-calc-support-pct" class=""> + <tr> + <td rowspan="1" title="Viewport units are supported inside calc expressions."> + <a href="vh-calc-support-pct.xht">vh-calc-support-pct</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-em-inherit" class=""> + <tr> + <td rowspan="1" title="0vh and 0vw are correctly treated as 0px"> + <a href="vh-em-inherit.xht">vh-em-inherit</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-inherit" class=""> + <tr> + <td rowspan="1" title="Viewport units are inherited properly"> + <a href="vh-inherit.xht">vh-inherit</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-interpolate-pct" class=""> + <tr> + <td rowspan="1" title="Viewport units are interpolated correctly"> + <a href="vh-interpolate-pct.xht">vh-interpolate-pct</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-interpolate-px" class=""> + <tr> + <td rowspan="1" title="Viewport units are interpolated correctly"> + <a href="vh-interpolate-px.xht">vh-interpolate-px</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-interpolate-vh" class=""> + <tr> + <td rowspan="1" title="Viewport units are interpolated correctly"> + <a href="vh-interpolate-vh.xht">vh-interpolate-vh</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-support" class=""> + <tr> + <td rowspan="1" title="Viewports units are supported in sizing properties"> + <a href="vh-support.xht">vh-support</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-support-atviewport" class=""> + <tr> + <td rowspan="1" title="Viewports units are supported in @viewport rules"> + <a href="vh-support-atviewport.xht">vh-support-atviewport</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-support-margin" class=""> + <tr> + <td rowspan="1" title="Viewports units are supported in margin properties"> + <a href="vh-support-margin.xht">vh-support-margin</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-support-transform-origin" class=""> + <tr> + <td rowspan="1" title="Viewports units are supported in transform properties"> + <a href="vh-support-transform-origin.xht">vh-support-transform-origin</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-support-transform-translate" class=""> + <tr> + <td rowspan="1" title="Viewports units are supported in transform properties"> + <a href="vh-support-transform-translate.xht">vh-support-transform-translate</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh-zero-support" class=""> + <tr> + <td rowspan="1" title="0vh and 0vw are correctly treated as 0px"> + <a href="vh-zero-support.xht">vh-zero-support</a></td> + <td><a href="reference/all-green.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh_not_refreshing_on_chrome" class=""> + <tr> + <td rowspan="1" title="vh-based dimension doesn't change when the element's other dimension doesn't change."> + <a href="vh_not_refreshing_on_chrome.xht">vh_not_refreshing_on_chrome</a></td> + <td><a href="reference/vh_not_refreshing_on_chrome-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="vh_not_refreshing_on_chrome_iframe" class=""> + <tr> + <td rowspan="1" title="vh-based dimension doesn't change when the element other dimension doesn't change."> + <a href="vh_not_refreshing_on_chrome_iframe.xht">vh_not_refreshing_on_chrome_iframe</a></td> + <td><a href="reference/vh_not_refreshing_on_chrome-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + </table> + + </body> +</html> diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/reftest.list b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reftest.list new file mode 100644 index 00000000000..3087d767568 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/reftest.list @@ -0,0 +1,58 @@ + +calc-background-image-gradient-1.xht == reference/calc-background-image-gradient-1-ref.xht +calc-background-linear-gradient-1.xht == reference/calc-background-linear-gradient-1-ref.xht +calc-background-position-1.xht == reference/calc-background-position-1-ref.xht +calc-background-size-1.xht == reference/calc-background-size-1-ref.xht +calc-border-radius-1.xht == reference/calc-border-radius-1-ref.xht +calc-height-block-1.xht == reference/calc-height-block-1-ref.xht +calc-height-table-1.xht == reference/calc-height-table-1-ref.xht +calc-margin-block-1.xht == reference/calc-margin-block-1-ref.xht +calc-max-height-block-1.xht == reference/calc-max-height-block-1-ref.xht +calc-max-width-block-1.xht == reference/calc-width-block-1-ref.xht +calc-max-width-block-intrinsic-1.xht == reference/calc-max-width-block-intrinsic-1-ref.xht +calc-min-height-block-1.xht == reference/calc-height-block-1-ref.xht +calc-min-width-block-1.xht == reference/calc-width-block-1-ref.xht +calc-min-width-block-intrinsic-1.xht == reference/calc-min-width-block-intrinsic-1-ref.xht +calc-offsets-absolute-bottom-1.xht == reference/calc-offsets-absolute-top-1-ref.xht +calc-offsets-absolute-left-1.xht == reference/calc-offsets-relative-left-1-ref.xht +calc-offsets-absolute-right-1.xht == reference/calc-offsets-relative-left-1-ref.xht +calc-offsets-absolute-top-1.xht == reference/calc-offsets-absolute-top-1-ref.xht +calc-offsets-relative-bottom-1.xht == reference/calc-offsets-relative-top-1-ref.xht +calc-offsets-relative-left-1.xht == reference/calc-offsets-relative-left-1-ref.xht +calc-offsets-relative-right-1.xht == reference/calc-offsets-relative-left-1-ref.xht +calc-offsets-relative-top-1.xht == reference/calc-offsets-relative-top-1-ref.xht +calc-padding-block-1.xht == reference/calc-padding-block-1-ref.xht +calc-text-indent-1.xht == reference/calc-text-indent-1-ref.xht +calc-text-indent-intrinsic-1.xht == reference/calc-text-indent-intrinsic-1-ref.xht +calc-transform-origin-1.xht == reference/calc-transform-origin-1-ref.xht +calc-vertical-align-1.xht == reference/calc-vertical-align-1-ref.xht +calc-width-block-1.xht == reference/calc-width-block-1-ref.xht +calc-width-block-intrinsic-1.xht == reference/calc-width-block-intrinsic-1-ref.xht +calc-width-table-auto-1.xht == reference/calc-width-table-auto-1-ref.xht +calc-width-table-fixed-1.xht == reference/calc-width-table-fixed-1-ref.xht +ch-unit-001.xht == reference/ch-unit-001-ref.xht +min-width-001.xht == ref.xht +multicol-count-non-integer-001.xht == reference/multicol-columns-invalid-001-ref.xht +multicol-count-non-integer-002.xht == reference/multicol-columns-invalid-001-ref.xht +multicol-count-non-integer-003.xht == reference/multicol-columns-invalid-001-ref.xht +multicol-inherit-002.xht == reference/multicol-inherit-002-ref.xht +multicol-rule-color-inherit-001.xht == reference/multicol-rule-color-inherit-001-ref.xht +multicol-rule-color-inherit-002.xht == reference/multicol-rule-color-inherit-001-ref.xht +regions-resizing-003.xht == reference/regions-resizing-001-ref.xht +regions-resizing-007.xht == reference/regions-resizing-001-ref.xht +regions-resizing-009.xht == reference/regions-resizing-001-ref.xht +vh-calc-support.xht == reference/all-green.xht +vh-calc-support-pct.xht == reference/all-green.xht +vh-em-inherit.xht == reference/all-green.xht +vh-inherit.xht == reference/all-green.xht +vh-interpolate-pct.xht == reference/all-green.xht +vh-interpolate-px.xht == reference/all-green.xht +vh-interpolate-vh.xht == reference/all-green.xht +vh-support.xht == reference/all-green.xht +vh-support-atviewport.xht == reference/all-green.xht +vh-support-margin.xht == reference/all-green.xht +vh-support-transform-origin.xht == reference/all-green.xht +vh-support-transform-translate.xht == reference/all-green.xht +vh-zero-support.xht == reference/all-green.xht +vh_not_refreshing_on_chrome.xht == reference/vh_not_refreshing_on_chrome-ref.xht +vh_not_refreshing_on_chrome_iframe.xht == reference/vh_not_refreshing_on_chrome-ref.xht diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/regions-resizing-003.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/regions-resizing-003.xht new file mode 100644 index 00000000000..aae2512e97a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/regions-resizing-003.xht @@ -0,0 +1,33 @@ +<!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 Regions: resizing region that is sized using viewport units</title> + <link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" /> + <link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" /> + <link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <meta content="dom ahem http" name="flags" /> + <meta content="Test checks that resizing the viewport of a page containing a region + sized using viewport units correctly relayouts the region's contents." name="assert" /> + <link href="reference/regions-resizing-001-ref.xht" rel="match" /> + <!-- The <script type="text/css"> below is just a textual container for styles that will be + injected in the iframe at load time.--> + <script type="text/css" id="test-styles"> + #region { + width: 80vw; + height: 100vh; + } + </script> + <script src="support/util.js" type="text/javascript"></script> + <script type="text/javascript"> + window.addEventListener("load", function() { + injectStylesInIFrame("#test-styles", "iframe"); + resizeViewportTo("iframe", 100, 100); + }) + </script> + </head> + <body> + <p>Test passes if you see a green square below and no red.</p> + <p>The test also fails if the there's a green block that is <strong>not</strong> a square (e.g. rectangle or polygon).</p> + <iframe width="400" height="400" frameborder="0" src="support/region-in-body.html"></iframe> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/regions-resizing-007.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/regions-resizing-007.xht new file mode 100644 index 00000000000..7978fd22f08 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/regions-resizing-007.xht @@ -0,0 +1,41 @@ +<!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 Regions: resizing region with percentage size inside a container that has size set in viewport units</title> + <link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" /> + <link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" /> + <link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <meta content="dom ahem http" name="flags" /> + <meta content="Test checks that resizing the viewport of a page containing a region + that has a percentage size relative to a parent sized using viewport units correctly + relayouts the region's contents." name="assert" /> + <link href="reference/regions-resizing-001-ref.xht" rel="match" /> + <!-- The <script type="text/css"> below is just a textual container for styles that will be + injected in the iframe at load time.--> + <script type="text/css" id="test-styles"> + html, body { + height: 100%; + } + #region-parent { + width: 50vw; + height: 80vh; + } + #region { + width: 80%; + height: 70%; + } + </script> + <script src="support/util.js" type="text/javascript"></script> + <script type="text/javascript"> + window.addEventListener("load", function() { + injectStylesInIFrame("#test-styles", "iframe"); + resizeViewportTo("iframe", 200, 200); + }) + </script> + </head> + <body> + <p>Test passes if you see a green square below and no red.</p> + <p>The test also fails if the there's a green block that is <strong>not</strong> a square (e.g. rectangle or polygon).</p> + <iframe width="437" height="143" frameborder="0" src="support/region-in-container.html"></iframe> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/regions-resizing-009.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/regions-resizing-009.xht new file mode 100644 index 00000000000..d7255bdd971 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/regions-resizing-009.xht @@ -0,0 +1,39 @@ +<!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 Regions: resizing autosized region when content flowed in it is sized with viewport units</title> + <link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" /> + <link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" /> + <link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help" /> + <link href="http://www.w3.org/TR/css3-regions/#regions-visual-formatting-details" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <meta content="dom ahem http" name="flags" /> + <meta content="Test checks that resizing the viewport of a page containing an + autosized region when the content flowed in it is sized with viewport units correctly + relayouts the region's contents." name="assert" /> + <link href="reference/regions-resizing-001-ref.xht" rel="match" /> + <!-- The <script type="text/css"> below is just a textual container for styles that will be + injected in the iframe at load time.--> + <script type="text/css" id="test-styles"> + #content { + width: 40vw; + height: 40vh; + } + #region { + width: auto; + height: auto; + } + </script> + <script src="support/util.js" type="text/javascript"></script> + <script type="text/javascript"> + window.addEventListener("load", function() { + injectStylesInIFrame("#test-styles", "iframe"); + resizeViewportTo("iframe", 200, 200); + }) + </script> + </head> + <body> + <p>Test passes if you see a green square below and no red.</p> + <p>The test also fails if the there's a green block that is <strong>not</strong> a square (e.g. rectangle or polygon).</p> + <iframe width="437" height="143" frameborder="0" src="support/region-in-body.html"></iframe> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-circle-002.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-circle-002.xht new file mode 100644 index 00000000000..c1586399674 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-circle-002.xht @@ -0,0 +1,30 @@ +<!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>Shape Outside Circle Valid Positions</title> + <link href="http://html.adobe.com/" rel="author" title="Adobe" /> + <link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis" /> + <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" /> + <link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns" /> <!-- 2014-03-04 --> + <link href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle" rel="help" /> + <link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#lengths" rel="help" /> + <meta content="A circle's position argument may be any of the valid combinations: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. " name="assert" /> + <meta content="dom" name="flags" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests('circle', true, 'inline', 'px')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildPositionTests('circle', true, 'computed', 'px')); + </script> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-circle-004.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-circle-004.xht new file mode 100644 index 00000000000..2b06df0a4ba --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-circle-004.xht @@ -0,0 +1,26 @@ +<!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>Shape Outside Circle - Position Length Units</title> + <link href="http://html.adobe.com/" rel="author" title="Adobe" /> + <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" /> + <link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns" /> <!-- 2014-03-04 --> + <link href="http://www.w3.org/TR/css-shapes-1/#funcdef-circle" rel="help" /> + <link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#lengths" rel="help" /> + <meta content="A circle's position arguments may in any valid <length> unit allowed by a <position> value." name="assert" /> + <meta content="dom" name="flags" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + inline', ParsingUtils.validUnits) ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + computed', ParsingUtils.validUnits) ); + </script> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-ellipse-002.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-ellipse-002.xht new file mode 100644 index 00000000000..b62861f81de --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-ellipse-002.xht @@ -0,0 +1,30 @@ +<!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>Shape Outside Ellipse Valid Positions</title> + <link href="http://html.adobe.com/" rel="author" title="Adobe" /> + <link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis" /> + <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" /> + <link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns" /> <!-- 2014-03-04 --> + <link href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse" rel="help" /> + <link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#lengths" rel="help" /> + <meta content="An ellipse's position argument may be any of the valid combinations: + [ percentage|length left|center|right ] + or [ percentage|length left|center|right ] [ percentage|length top|center|bottom ] + or [ left|center|right ] + or [ left|center|right top|center|bottom ] + or [ top|center|bottom ]. " name="assert" /> + <meta content="dom" name="flags" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildPositionTests('ellipse', true, 'inline', 'px')); + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildPositionTests('ellipse', true, 'computed', 'px')); + </script> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-ellipse-004.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-ellipse-004.xht new file mode 100644 index 00000000000..ff027d7deea --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-ellipse-004.xht @@ -0,0 +1,26 @@ +<!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>Shape Outside Ellipse - Position Length Units</title> + <link href="http://html.adobe.com/" rel="author" title="Adobe" /> + <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" /> + <link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns" /> <!-- 2014-03-04 --> + <link href="http://www.w3.org/TR/css-shapes-1/#funcdef-ellipse" rel="help" /> + <link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#lengths" rel="help" /> + <meta content="An ellipse's position arguments may in any valid <length> unit allowed by a <position> value." name="assert" /> + <meta content="dom" name="flags" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + inline', ParsingUtils.validUnits) ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + computed', ParsingUtils.validUnits) ); + </script> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-inset-003.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-inset-003.xht new file mode 100644 index 00000000000..80bed79f39e --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-inset-003.xht @@ -0,0 +1,28 @@ +<!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>Shape Outside Inset Valid Round Length Units</title> + <link href="http://html.adobe.com/" rel="author" title="Adobe" /> + <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" /> + <link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns" /> <!-- 2014-03-04 --> + <link href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset" rel="help" /> + <link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#lengths" rel="help" /> + <meta content="An inset's radial component's values can be in any length unit" name="assert" /> + <meta content="dom" name="flags" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + ParsingUtils.validUnits.forEach(function(unit) { + generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.generateInsetRoundCases(unit, 'inline')); + }); + ParsingUtils.validUnits.forEach(function(unit) { + generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.generateInsetRoundCases(unit, 'computed')); + }); + </script> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-polygon-004.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-polygon-004.xht new file mode 100644 index 00000000000..6f94e32b4d4 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/shape-outside-polygon-004.xht @@ -0,0 +1,38 @@ +<!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>Shape Outside Polygon - Argument Length Units</title> + <link href="http://html.adobe.com/" rel="author" title="Adobe" /> + <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" /> + <link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns" /> <!-- 2014-03-04 --> + <link href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon" rel="help" /> + <link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#lengths" rel="help" /> + <meta content="A polygon's veritices may in percentage or any valid <length> units." name="assert" /> + <meta content="dom" name="flags" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="support/parsing-utils.js"></script> + </head> + <body> + <div id="log"></div> + <script type="text/javascript"> + var arg_length_units_tests = [ + ['%', 'px', 'px'], + ['px', '%', 'px'], + ['px', 'px', '%'], + ['%', '%', '%'], + ['em', 'em', 'ex'], + ['vw', 'vh', '%'], + ['cm', 'mm', 'pc'], + ['vmin', 'vmin', 'vmax'], + ['rem', 'ch', 'rem'], + ['in', 'pt', '%'] + ]; + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildPolygonTests(arg_length_units_tests, 'inline') ); + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildPolygonTests(arg_length_units_tests, 'computed') ); + </script> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-green.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-green.png Binary files differnew file mode 100644 index 00000000000..b98ca0ba0a0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-green.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-lime.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-lime.png Binary files differnew file mode 100644 index 00000000000..cb397fb090e --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-lime.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-maroon.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-maroon.png Binary files differnew file mode 100644 index 00000000000..3f86b072195 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-maroon.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-navy.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-navy.png Binary files differnew file mode 100644 index 00000000000..9b9a03955ba --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-navy.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-red.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-red.png Binary files differnew file mode 100644 index 00000000000..6bd73ac1018 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-red.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-white.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-white.png Binary files differnew file mode 100644 index 00000000000..dd43faec54a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/1x1-white.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/2-80px-block-ref.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/2-80px-block-ref.html new file mode 100644 index 00000000000..f616001554c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/2-80px-block-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + .content { + margin: 10px; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + </style> +</head> +<body> + <div class="content"> + xxxx<br> + xxxx<br> + xxxx<br> + xxxx + </div> + <div class="content"> + xxxx<br> + xxxx<br> + xxxx<br> + xxxx + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/60x60-gg-rr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 00000000000..84f5b2a4f1d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/60x60-gg-rr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/60x60-green.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/60x60-green.png Binary files differnew file mode 100644 index 00000000000..b3c8cf3eb4c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/60x60-green.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/60x60-red.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/60x60-red.png Binary files differnew file mode 100644 index 00000000000..823f125b8e4 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/60x60-red.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/80px-block-float-ref.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/80px-block-float-ref.html new file mode 100644 index 00000000000..6adeeb6fa99 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/80px-block-float-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #content { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + float: right; + } + </style> +</head> +<body> + <div id="content"> + xxxx<br> + xxxx<br> + xxxx<br> + xxxx + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/80px-block-ref.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/80px-block-ref.html new file mode 100644 index 00000000000..2c910e93411 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/80px-block-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #content { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + </style> +</head> +<body> + <div id="content"> + xxxx<br> + xxxx<br> + xxxx<br> + xxxx + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/README b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/README new file mode 100644 index 00000000000..69d1737bead --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/README @@ -0,0 +1,29 @@ +CSS Global Support Directory +============================ + +This directory contains common support files (such as images and external +style sheets). These are sync'ed into the support directories of all our +test suites. If you have test-suite-specific support files, please add +them to the appropriate test-suite-specific support/ directory. + +If you add to a support/ directory, please run the tools/supportprop.py +script from the top of the repository to cascade support files into the +lower-level support directories. + +Description of the Common Support File Collection +------------------------------------------------- + +The 1x1-* images are all exactly one pixel. + +The swatch-* images all use 15x15 cells. + +The square-* images all use 15x15 cells with one pixel borders. + +The pattern-* images use cells of various sizes: + + pattern-gg-gr.png 20x20 + pattern-grg-rgr-grg.png 20x20 + pattern-rgr-grg-rgr.png 20x20 + pattern-tr.png 15x15 + pattern-grg-rrg-rgg.png 15x15 + diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/a-green.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/a-green.css new file mode 100644 index 00000000000..b0dbb071d5b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/b-green.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/b-green.css new file mode 100644 index 00000000000..a0473f5ca26 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/black20x20.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/black20x20.png Binary files differnew file mode 100644 index 00000000000..ebf7027ee78 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/black20x20.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/c-red.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/c-red.css new file mode 100644 index 00000000000..d4ba5c64e95 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/cat.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/cat.png Binary files differnew file mode 100644 index 00000000000..85dd7324815 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/cat.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/generalParallelTest.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/generalParallelTest.js new file mode 100644 index 00000000000..1a4bf343df0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/generalParallelTest.js @@ -0,0 +1,231 @@ +(function(root) { +'use strict'; +// +var index = 0; +var suite = root.generalParallelTest = { + // prepare individual test + setup: function(data, options) { + suite._setupDom(data, options); + suite._setupEvents(data, options); + }, + // clone fixture and prepare data containers + _setupDom: function(data, options) { + // clone fixture into off-viewport test-canvas + data.fixture = document.getElementById('fixture').cloneNode(true); + data.fixture.id = 'test-' + (index++); + (document.getElementById('offscreen') || document.body).appendChild(data.fixture); + + // data container for #fixture > .container > .transition + data.transition = { + node: data.fixture.querySelector('.transition'), + values: [], + events: [], + computedStyle: function(property) { + return computedStyle(data.transition.node, property); + } + }; + + // data container for #fixture > .container + data.container = { + node: data.transition.node.parentNode, + values: [], + events: [], + computedStyle: function(property) { + return computedStyle(data.container.node, property); + } + }; + + // data container for #fixture > .container > .transition[:before | :after] + if (data.pseudo) { + data.pseudo = { + name: data.pseudo, + values: [], + computedStyle: function(property) { + return computedStyle(data.transition.node, property, ':' + data.pseudo.name); + } + }; + } + }, + // bind TransitionEnd event listeners + _setupEvents: function(data, options) { + ['transition', 'container'].forEach(function(elem) { + var handler = function(event) { + event.stopPropagation(); + var name = event.propertyName; + var time = Math.round(event.elapsedTime * 1000) / 1000; + var pseudo = event.pseudoElement ? (':' + event.pseudoElement) : ''; + data[elem].events.push(name + pseudo + ":" + time + "s"); + }; + data[elem].node.addEventListener('transitionend', handler, false); + data[elem]._events = {'transitionend': handler}; + }); + }, + // cleanup after individual test + teardown: function(data, options) { + // data.fixture.remove(); + if (data.fixture.parentNode) { + data.fixture.parentNode.removeChild(data.fixture); + } + }, + // invoked prior to running a slice of tests + sliceStart: function(options, tests) { + // inject styles into document + setStyle(options.styles); + // kick off value collection loop + generalParallelTest.startValueCollection(options); + }, + // invoked after running a slice of tests + sliceDone: function(options, tests) { + // stop value collection loop + generalParallelTest.stopValueCollection(options); + // reset styles cache + options.styles = {}; + }, + // called once all tests are done + done: function(options) { + // reset document styles + setStyle(); + reflow(); + }, + // add styles of individual test to slice cache + addStyles: function(data, options, styles) { + if (!options.styles) { + options.styles = {}; + } + + Object.keys(styles).forEach(function(key) { + var selector = '#' + data.fixture.id + // fixture must become #fixture.fixture rather than a child selector + + (key.substring(0, 8) === '.fixture' ? '' : ' ') + + key; + + options.styles[selector] = styles[key]; + }); + }, + // set style and compute values for container and transition + getStyle: function(data) { + reflow(); + // grab current styles: "initial state" + suite._getStyleFor(data, 'from'); + // apply target state + suite._addClass(data, 'to', true); + // grab current styles: "target state" + suite._getStyleFor(data, 'to'); + // remove target state + suite._removeClass(data, 'to', true); + + // clean up the mess created for value collection + data.container._values = []; + data.transition._values = []; + if (data.pseudo) { + data.pseudo._values = []; + } + }, + // grab current styles and store in respective element's data container + _getStyleFor: function(data, key) { + data.container[key] = data.container.computedStyle(data.property); + data.transition[key] = data.transition.computedStyle(data.property); + if (data.pseudo) { + data.pseudo[key] = data.pseudo.computedStyle(data.property); + } + }, + // add class to test's elements and possibly reflow + _addClass: function(data, className, forceReflow) { + data.container.node.classList.add(className); + data.transition.node.classList.add(className); + if (forceReflow) { + reflow(); + } + }, + // remove class from test's elements and possibly reflow + _removeClass: function(data, className, forceReflow) { + data.container.node.classList.remove(className); + data.transition.node.classList.remove(className); + if (forceReflow) { + reflow(); + } + }, + // add transition and to classes to container and transition + startTransition: function(data) { + // add transition-defining class + suite._addClass(data, 'how', true); + // add target state (without reflowing) + suite._addClass(data, 'to', false); + }, + // requestAnimationFrame runLoop to collect computed values + startValueCollection: function(options) { + var raf = window.requestAnimationFrame || function(callback){ + setTimeout(callback, 20); + }; + + // flag denoting if the runLoop should continue (true) or exit (false) + options._collectValues = true; + + function runLoop() { + if (!options._collectValues) { + // test's are done, stop annoying the CPU + return; + } + + // collect current style for test's elements + options.tests.forEach(function(data) { + if (!data.property) { + return; + } + + ['transition', 'container', 'pseudo'].forEach(function(elem) { + var pseudo = null; + if (!data[elem] || (elem === 'pseudo' && !data.pseudo)) { + return; + } + + var current = data[elem].computedStyle(data.property); + var values = data[elem].values; + var length = values.length; + if (!length || values[length - 1] !== current) { + values.push(current); + } + }); + }); + + // rinse and repeat + raf(runLoop); + } + + runLoop(); + }, + // stop requestAnimationFrame runLoop collecting computed values + stopValueCollection: function(options) { + options._collectValues = false; + }, + + // generate test.step function asserting collected events match expected + assertExpectedEventsFunc: function(data, elem, expected) { + return function() { + var _result = data[elem].events.sort().join(" "); + var _expected = typeof expected === 'string' ? expected : expected.sort().join(" "); + assert_equals(_result, _expected, "Expected TransitionEnd events triggered on ." + elem); + }; + }, + // generate test.step function asserting collected values are neither initial nor target + assertIntermediateValuesFunc: function(data, elem) { + return function() { + // the first value (index: 0) is always going to be the initial value + // the last value is always going to be the target value + var values = data[elem].values; + if (data.flags.discrete) { + // a discrete value will just switch from one state to another without having passed intermediate states. + assert_equals(values[0], data[elem].from, "must be initial value while transitioning on ." + elem); + assert_equals(values[1], data[elem].to, "must be target value after transitioning on ." + elem); + assert_equals(values.length, 2, "discrete property only has 2 values ." + elem); + } else { + assert_not_equals(values[1], data[elem].from, "may not be initial value while transitioning on ." + elem); + assert_not_equals(values[1], data[elem].to, "may not be target value while transitioning on ." + elem); + } + + // TODO: first value must be initial, last value must be target + }; + } +}; + +})(window); diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/helper.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/helper.js new file mode 100644 index 00000000000..242cd3ca635 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/helper.js @@ -0,0 +1,96 @@ +// +// Simple Helper Functions For Testing CSS +// + +(function(root) { +'use strict'; + +// serialize styles object and dump to dom +// appends <style id="dynamic-style"> to <head> +// setStyle("#some-selector", {"some-style" : "value"}) +// setStyle({"#some-selector": {"some-style" : "value"}}) +root.setStyle = function(selector, styles) { + var target = document.getElementById('dynamic-style'); + if (!target) { + target = document.createElement('style'); + target.id = 'dynamic-style'; + target.type = "text/css"; + document.getElementsByTagName('head')[0].appendChild(target); + } + + var data = []; + // single selector/styles + if (typeof selector === 'string' && styles !== undefined) { + data = [selector, '{', serializeStyles(styles), '}']; + target.textContent = data.join("\n"); + return; + } + // map of selector/styles + for (var key in selector) { + if (Object.prototype.hasOwnProperty.call(selector, key)) { + var _data = [key, '{', serializeStyles(selector[key]), '}']; + data.push(_data.join('\n')); + } + } + + target.textContent = data.join("\n"); +}; + +function serializeStyles(styles) { + var data = []; + for (var property in styles) { + if (Object.prototype.hasOwnProperty.call(styles, property)) { + var prefixedProperty = addVendorPrefix(property); + data.push(prefixedProperty + ":" + styles[property] + ";"); + } + } + + return data.join('\n'); +} + + +// shorthand for computed style +root.computedStyle = function(element, property, pseudo) { + var prefixedProperty = addVendorPrefix(property); + return window + .getComputedStyle(element, pseudo || null) + .getPropertyValue(prefixedProperty); +}; + +// flush rendering buffer +root.reflow = function() { + document.body.offsetWidth; +}; + +// merge objects +root.extend = function(target /*, ..rest */) { + Array.prototype.slice.call(arguments, 1).forEach(function(obj) { + Object.keys(obj).forEach(function(key) { + target[key] = obj[key]; + }); + }); + + return target; +}; + +// dom fixture helper ("resetting dom test elements") +var _domFixture; +var _domFixtureSelector; +root.domFixture = function(selector) { + var fixture = document.querySelector(selector || _domFixtureSelector); + if (!fixture) { + throw new Error('fixture ' + (selector || _domFixtureSelector) + ' not found!'); + } + if (!_domFixture && selector) { + // save a copy + _domFixture = fixture.cloneNode(true); + _domFixtureSelector = selector; + } else if (_domFixture) { + // restore the copy + var tmp = _domFixture.cloneNode(true); + fixture.parentNode.replaceChild(tmp, fixture); + } else { + throw new Error('domFixture must be initialized first!'); + } +}; +})(window); diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/import-green.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/import-green.css new file mode 100644 index 00000000000..537104e6633 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/import-red.css b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/import-red.css new file mode 100644 index 00000000000..9945ef47114 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/min-width-tables-001-iframe.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/min-width-tables-001-iframe.html new file mode 100644 index 00000000000..edc548a6aab --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/min-width-tables-001-iframe.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>iframe containing the meat of the test</title> + <style> +body { + margin: 0; + overflow: hidden; +} +/* green div that should cover the red divs */ +#green { + position: absolute; + left: 0; + top: 0; + background-color: green; + width: 100%; + height: 600px; +} +.spacer { + height: 98px; + width: 20px; +} +.item { + background-color: red; + display: block;/* property under test */ + /* border to aid understanding of boundaries between items */ + border-style: solid; + border-width: 1px; + border-color: red;/* Note: if you're trying to debug this, use a different color here */ +} +/* 100px = 10*(1 + 8 + 1) */ +@media (min-width: 100px) { + #green { + width: 100px; + height: 100px;/* = 1 + 98 + 1 */ + } + .item { + display: table-cell;/* property and value under test */ + } +} + </style> +</head> +<body> + <div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + <div class="item"><div class="spacer"></div></div> + </div> + <div id="green"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/one.gif b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/one.gif Binary files differnew file mode 100644 index 00000000000..74cf7839c9f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/one.gif diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/parsing-utils.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/parsing-utils.js new file mode 100644 index 00000000000..beea4958ce8 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/parsing-utils.js @@ -0,0 +1,866 @@ +var ParsingUtils = (function() { +function testInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', value); + var actual = div.style.getPropertyValue('shape-outside'); + assert_equals(actual, expected); +} + +function testComputedStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', value); + document.body.appendChild(div); + var style = getComputedStyle(div); + var actual = style.getPropertyValue('shape-outside'); + actual = roundResultStr(actual); + document.body.removeChild(div); + + // Some of the tests in this suite have either/or expected results + // so this check allows for testing that at least one of them passes. + // Description of the 2 expecteds is below near calcTestValues. + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_true(expected[0] == actual || expected[1] == actual) + } else { + assert_equals(actual, typeof expected !== 'undefined' ? expected : value); + } +} + +function testShapeMarginInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', "border-box inset(10px)"); + div.style.setProperty('shape-margin', value); + var actual = div.style.getPropertyValue('shape-margin'); + assert_equals(actual, expected); +} + +function testShapeMarginComputedStyle(value, expected) { + + var outerDiv = document.createElement('div'); + outerDiv.style.setProperty('width', '100px'); + + var innerDiv = document.createElement('div'); + innerDiv.style.setProperty('shape-outside', "border-box inset(10px)"); + innerDiv.style.setProperty('shape-margin', value); + + outerDiv.appendChild(innerDiv); + document.body.appendChild(outerDiv); + + var style = getComputedStyle(innerDiv); + var actual = style.getPropertyValue('shape-margin'); + + assert_not_equals(actual, null); + if(actual.indexOf('calc') == -1 ) + actual = roundResultStr(actual); + document.body.removeChild(outerDiv); + + // See comment above about multiple expected results + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_true(expected[0] == actual || expected[1] == actual) + } else { + assert_equals(actual, !expected ? '0px' : expected); + } +} + +function testShapeThresholdInlineStyle(value, expected) { + var div = document.createElement('div'); + div.style.setProperty('shape-outside', 'url(someimage.png)'); + div.style.setProperty('shape-image-threshold', value); + var actual = div.style.getPropertyValue('shape-image-threshold'); + assert_equals(actual, expected); +} + +function testShapeThresholdComputedStyle(value, expected) { + + var div = document.createElement('div'); + div.style.setProperty('shape-outside', 'url(someimage.png)'); + div.style.setProperty('shape-image-threshold', value); + document.body.appendChild(div); + + var style = getComputedStyle(div); + var actual = style.getPropertyValue('shape-image-threshold'); + + assert_not_equals(actual, null); + if(actual.indexOf('calc') == -1 ) + actual = roundResultStr(actual); + document.body.removeChild(div); + + // See comment above about multiple expected results + if(Object.prototype.toString.call( expected ) === '[object Array]' && expected.length == 2) { + assert_true(expected[0] == actual || expected[1] == actual) + } else { + assert_equals(actual, !expected ? '0' : expected); + } +} + +// Builds an array of test cases to send to testharness.js where one test case is: [name, actual, expected] +// These test cases will verify results from testInlineStyle() or testComputedStyle() +function buildTestCases(testCases, testType) { + var results = []; + + // If test_type isn't specified, test inline style + var type = typeof testType == 'undefined' ? 'invalid': testType; + + testCases.forEach(function(test) { + oneTestCase = []; + + // name - annotated by type (inline vs. computed) + if ( test.hasOwnProperty('name') ) { + oneTestCase.push(test['name'] +' - '+ type); + } else { + // If test_name isn't specified, use the actual + oneTestCase.push(test['actual'] +' - '+ type); + } + + // actual + oneTestCase.push(test['actual']) + + // expected + if( type.indexOf('invalid') != -1 ){ + oneTestCase.push(null) + } else if( type == 'inline' ) { + oneTestCase.push(test['expected_inline']); + } else if( type == 'computed' ){ + oneTestCase.push( convertToPx(test['expected_computed']) ); + } + results.push(oneTestCase); + }); + return results; +} + + +function buildPositionTests(shape, valid, type, units) { + var results = new Array(); + var convert = type.indexOf('computed') != -1 ? true : false; + + if(Object.prototype.toString.call( units ) === '[object Array]') { + units.forEach(function(unit) { + positionTests = buildPositionTests(shape, valid, type, unit); + results = results.concat(positionTests); + }); + } else { + if (valid) { + validPositions.forEach(function(test) { + var testCase = [], testName, actual, expected; + // skip if this isn't explicitly testing length units + if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1)) { + // actual + actual = shape + '(at ' + setUnit(test[0], false, units) +')'; + + // expected + // if(convert && shape == 'circle') + // expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + // else if(convert && shape == 'ellipse') + // expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + // else + expected = shape + '(at ' + setUnit(test[1], convert, units) +')'; + + // name + if (type == 'lengthUnit + inline') + testName = 'test unit (inline): ' + units +' - '+ actual; + else if (type == 'lengthUnit + computed') + testName = 'test unit (computed): ' + units +' - '+ actual; + else + testName = (actual + ' serializes as ' + expected +' - '+ type); + + testCase.push(testName) + testCase.push(actual); + testCase.push(expected); + results.push(testCase); + } + }); + } else { + invalidPositions.forEach(function(test) { + var testValue = shape + '(at ' + setUnit(test, false, units) +')'; + testCase = new Array(); + testCase.push(testValue + ' is invalid'); + testCase.push(testValue); + testCase.push(null); + results.push(testCase); + }); + } + } + return unique(results); +} + +function buildRadiiTests(shape, type, units) { + var results = new Array(); + var testUnits = typeof units == 'undefined' ? 'px': units; + var convert = type.indexOf('computed') != -1 ? true : false; + + if(Object.prototype.toString.call( testUnits ) === '[object Array]') { + testUnits.forEach(function(unit) { + radiiTests = buildRadiiTests(shape, type, unit); + results = results.concat(radiiTests); + }); + } else { + var validRadii = shape == 'circle' ? validCircleRadii : validEllipseRadii; + validRadii.forEach(function(test) { + var testCase = [], name, actual, expected; + + // skip if this isn't explicitly testing length units + if( !(type.indexOf('lengthUnit') != -1 && test[0].indexOf("u1") == -1) ) { + actual = shape + '(' + setUnit(test[0], false, testUnits) +')'; + // name + if (type.indexOf('lengthUnit') != -1) { + name = 'test unit: ' + units +' - '+ actual; + if(type.indexOf('computed') != -1) + name = name + ' - computed'; + else + name = name + ' - inline'; + } + else + name = actual +' - '+ type; + + testCase.push(name); + + // actual + testCase.push(actual); + + // expected + if(type.indexOf('computed') != -1 && test.length == 3) { + expected = shape + '(' + setUnit(test[2], convert, testUnits) +')'; + } else { + expected = shape + '(' + setUnit(test[1], convert, testUnits) +')'; + } + testCase.push(expected); + results.push(testCase); + } + }); + } + return unique(results); +} + +function buildInsetTests(unit1, unit2, type) { + var results = new Array(); + var convert = type == 'computed' ? true : false; + + if(Object.prototype.toString.call( unit1 ) === '[object Array]') { + unit1.forEach(function(unit) { + insetTests = buildInsetTests(unit, unit2, type); + results = results.concat(insetTests); + }); + } else { + validInsets.forEach(function(test) { + var testCase = [], name, actual, expected; + + name = setUnit(test[0], false, unit1, unit2) +' - '+ type; + actual = 'inset(' + setUnit(test[1], convert, unit1, unit2) +')'; + expected = actual; + + testCase.push(name); + testCase.push(actual); + testCase.push(expected); + + results.push(testCase); + }); + } + return unique(results); +} + +function buildPolygonTests(unitSet, type) { + var results = new Array(); + var convert = type == 'computed' ? true : false; + + unitSet.forEach(function(set) { + validPolygons.forEach(function(test) { + var testCase = []; + // name + testCase.push(setUnit(test[0], false, set[0], set[1], set[2]) +' - '+ type); + // actual + testCase.push('polygon(' + setUnit(test[1], false, set[0], set[1], set[2]) +')'); + // expected + testCase.push('polygon(' + setUnit(test[1], convert, set[0], set[1], set[2]) +')'); + results.push(testCase); + }); + }); + return unique(results); +} + +function buildCalcTests(testCases, type) { + var results = new Array(); + testCases.forEach(function(test){ + var testCase = []; + if(type == 'computed') { + testCase.push(test[0] + ' - computed style'); + testCase.push(test[0]); + testCase.push(test[2]); + } + else { + testCase.push(test[0] + ' - inline style'); + testCase.push(test[0]); + testCase.push(test[1]); + } + testCase.push(type); + results.push(testCase) + }); + return unique(results); +} + +function unique(tests) { + var list = tests.concat(); + for(var i = 0; i< list.length; ++i) { + for(var j = i+1; j < list.length; ++j) { + if(list[i][0] === list[j][0]) + list.splice(j--, 1); + } + } + return list; +} + +function setUnit(str, convert, unit1, unit2, unit3) { + var retStr = str; + if(typeof unit1 !== 'undefined') { + retStr = retStr.replace(new RegExp('u1', 'g'), unit1); + } + if(typeof unit2 !== 'undefined') { + retStr = retStr.replace(new RegExp("u2", 'g'), unit2); + } + if(typeof unit3 !== 'undefined') { + retStr = retStr.replace(new RegExp("u3", 'g'), unit3); + } + retStr = convert ? convertToPx(retStr) : retStr; + return retStr; +} + +function convertToPx(origValue) { + + var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%)/g); + if(!valuesToConvert) + return origValue; + + var retStr = origValue; + for(var i = 0; i < valuesToConvert.length; i++) { + var unit = valuesToConvert[i].match(/[a-z]{2,4}|%/).toString(); + var numberStr = valuesToConvert[i].match(/[0-9]+(\.[0-9]+)?/)[0]; + + var number = parseFloat(numberStr); + var convertedUnit = 'px'; + if( typeof number !== 'NaN' ) + { + if (unit == 'in') { + number = (96 * number); + } else if (unit == 'cm') { + number = (37.795275591 * number); + } else if (unit == 'mm') { + number = (3.779527559 * number); + } else if (unit == 'pt') { + number = (1.333333333333 * number); + } else if (unit == 'pc') { + number = (16 * number); + } else if (unit == 'em') { + number = (16 * number); + } else if (unit == 'ex') { + number = (7.1796875 * number); + } else if (unit == 'ch') { + number = (8 * number); + } else if (unit == 'rem') { + number = (16 * number); + } else if (unit == 'vw') { + number = ((.01 * window.innerWidth) * number); + } else if (unit == 'vh') { + number = ((.01 * window.innerHeight) * number); + } else if (unit == 'vmin') { + number = Math.min( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number; + } else if (unit == 'vmax') { + number = Math.max( (.01 * window.innerWidth), (.01 * window.innerHeight) ) * number; + } + else { + convertedUnit = unit; + } + number = Math.round(number * 1000) / 1000; + var find = valuesToConvert[i]; + var replace = number.toString() + convertedUnit; + retStr = retStr.replace(valuesToConvert[i], number.toString() + convertedUnit); + } + } + return retStr.replace(',,', ','); +} + +function roundResultStr(str) { + if(Object.prototype.toString.call( str ) !== '[object String]') + return str; + + var numbersToRound = str.match(/[0-9]+\.[0-9]+/g); + if(!numbersToRound) + return str; + + var retStr = str; + for(var i = 0; i < numbersToRound.length; i++) { + num = parseFloat(numbersToRound[i]); + if( !isNaN(num) ) { + roundedNum = Math.round(num*1000)/1000; + retStr = retStr.replace(numbersToRound[i].toString(), roundedNum.toString()); + } + } + + return retStr; +} + +function generateInsetRoundCases(units, testType) { + var convert = testType.indexOf('computed') != -1 ? true : false; + var testUnit = units; + var sizes = [ + '10' + units, + '20' + units, + '30' + units, + '40' + units + ]; + + function insetRound(value) { + return 'inset(10' +testUnit+ ' round ' + value + ')'; + } + + function serializedInsetRound(lhsValues, rhsValues, convert) { + var retStr = ''; + if(!rhsValues) + retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +')'; + else + retStr = 'inset(10' +testUnit+ ' round ' + lhsValues +' / '+ rhsValues +')'; + + if(convert) + return convertToPx(retStr); + + return retStr; + } + + var results = [], left, lhs, right, rhs; + for (left = 1; left <= 4; left++) { + lhs = sizes.slice(0, left).join(' '); + results.push([insetRound(lhs) +' - '+ testType, insetRound(lhs), serializedInsetRound(lhs, null, convert)]); + for (right = 1; right <= 4; right++) { + rhs = sizes.slice(0, right).join(' '); + if(lhs == rhs) + results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, null, convert)]); + else + results.push([insetRound(lhs + ' / ' + rhs) +' - '+ testType, insetRound(lhs + ' / ' + rhs), serializedInsetRound(lhs, rhs, convert)]); + } + } + return results; +} + +var validUnits = [ + "cm","mm","in","pt","pc", // Absolute length units (omitting px b/c we default to that in all tests) + "em","ex","ch","rem", // Font relative length units + "vw","vh","vmin","vmax" // Viewport percentage units + ] + +/// [actual, expected] +var validPositions = [ + +/// [ percent ], [ length ], [ percent | percent ], [ percent | length ], [ length | percent ], [ length | length ] + ["50%", "50% 50%"], + ["50u1", "50u1 50%"], + ["50% 50%", "50% 50%"], + ["50% 50u1", "50% 50u1"], + ["50u1 50%", "50u1 50%"], + ["50u1 50u1", "50u1 50u1"], + +///// [ keyword ], [ keyword keyword ] x 5 keywords + ["left", "0% 50%"], + ["top", "50% 0%"], + ["right", "100% 50%"], + ["bottom", "50% 100%"], + ["center", "50% 50%"], + + ["left top", "0% 0%"], + ["left bottom", "0% 100%"], + ["left center", "0% 50%"], + + ["top left", "0% 0%"], + ["top right", "100% 0%"], + ["top center", "50% 0%"], + + ["right top", "100% 0%"], + ["right bottom", "100% 100%"], + ["right center", "100% 50%"], + + ["bottom left", "0% 100%"], + ["bottom right", "100% 100%"], + ["bottom center", "50% 100%"], + + ["center top", "50% 0%"], + ["center left", "0% 50%"], + ["center right", "100% 50%"], + ["center bottom", "50% 100%"], + ["center center", "50% 50%"], + +////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords + ["left 50%", "0% 50%"], + ["left 50u1", "0% 50u1"], + + ["50% top", "50% 0%"], + ["50u1 top", "50u1 0%"], + + ["right 80%", "100% 80%"], + ["right 80u1", "100% 80u1"], + + ["70% bottom", "70% 100%"], + ["70u1 bottom", "70u1 100%"], + + ["center 60%", "50% 60%"], + ["center 60u1", "50% 60u1"], + ["60% center", "60% 50%"], + ["60u1 center", "60u1 50%"], + +////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords + ["center top 50%", "50% 50%"], + ["center top 50u1", "50% 50u1"], + ["center left 50%", "50% 50%"], + ["center left 50u1", "50u1 50%"], + ["center right 70%", "30% 50%"], + ["center right 70u1", "right 70u1 top 50%"], + ["center bottom 70%", "50% 30%"], + ["center bottom 70u1", "left 50% bottom 70u1"], + + ["left top 50%", "0% 50%"], + ["left top 50u1", "0% 50u1"], + ["left bottom 70%", "0% 30%"], + ["left bottom 70u1", "left 0% bottom 70u1"], + + ["top left 50%", "50% 0%"], + ["top left 50u1", "50u1 0%"], + ["top right 70%", "30% 0%"], + ["top right 70u1", "right 70u1 top 0%"], + + ["bottom left 50%", "50% 100%"], + ["bottom left 50u1", "50u1 100%"], + ["bottom right 70%", "30% 100%"], + ["bottom right 70u1", "right 70u1 top 100%"], + + ["right bottom 70%", "100% 30%"], + ["right bottom 70u1", "left 100% bottom 70u1"], + ["right top 50%", "100% 50%"], + ["right top 50u1", "100% 50u1"], + +////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords + ["left 50% center", "50% 50%"], + ["left 50u1 center", "50u1 50%"], + ["left 50% top", "50% 0%"], + ["left 50u1 top", "50u1 0%"], + ["left 50% bottom", "50% 100%"], + ["left 50u1 bottom", "50u1 100%"], + + ["top 50% center", "50% 50%"], + ["top 50u1 center", "50% 50u1"], + ["top 50% left", "0% 50%"], + ["top 50u1 left", "0% 50u1"], + ["top 50% right", "100% 50%"], + ["top 50u1 right", "100% 50u1"], + + ["bottom 70% center", "50% 30%"], + ["bottom 70u1 center", "left 50% bottom 70u1"], + ["bottom 70% left", "0% 30%"], + ["bottom 70u1 left", "left 0% bottom 70u1"], + ["bottom 70% right", "100% 30%"], + ["bottom 70u1 right", "left 100% bottom 70u1"], + + ["right 80% center", "20% 50%"], + ["right 80u1 center", "right 80u1 top 50%"], + ["right 80% bottom", "20% 100%"], + ["right 80u1 bottom", "right 80u1 top 100%"], + ["right 80% top", "20% 0%"], + ["right 80u1 top", "right 80u1 top 0%"], + +////// [ keyword percent | keyword percent], [ keyword percent | keyword length], +////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords + ["left 50% top 50%", "50% 50%"], + ["left 50% top 50u1", "50% 50u1"], + ["left 50% bottom 70%", "50% 30%"], + ["left 50% bottom 70u1", "left 50% bottom 70u1"], + ["left 50u1 top 50%", "50u1 50%"], + ["left 50u1 top 50u1", "50u1 50u1"], + ["left 50u1 bottom 70%", "50u1 30%"], + ["left 50u1 bottom 70u1", "left 50u1 bottom 70u1"], + + ["top 50% left 50%", "50% 50%"], + ["top 50% left 50u1", "50u1 50%"], + ["top 50% right 80%", "20% 50%"], + ["top 50% right 80u1", "right 80u1 top 50%"], + ["top 50u1 left 50%", "50% 50u1"], + ["top 50u1 left 50u1", "50u1 50u1"], + ["top 50u1 right 80%", "20% 50u1"], + ["top 50u1 right 80u1", "right 80u1 top 50u1"], + + ["bottom 70% left 50%", "50% 30%"], + ["bottom 70% left 50u1", "50u1 30%"], + ["bottom 70% right 80%", "20% 30%"], + ["bottom 70% right 80u1", "right 80u1 top 30%"], + ["bottom 70u1 left 50%", "left 50% bottom 70u1"], + ["bottom 70u1 left 50u1", "left 50u1 bottom 70u1"], + ["bottom 70u1 right 80%", "left 20% bottom 70u1"], + ["bottom 70u1 right 80u1", "right 80u1 bottom 70u1"], + + ["right 80% top 50%", "20% 50%"], + ["right 80% top 50u1", "20% 50u1"], + ["right 80% bottom 70%", "20% 30%"], + ["right 80% bottom 70u1", "left 20% bottom 70u1"], + ["right 80u1 top 50%", "right 80u1 top 50%"], + ["right 80u1 top 50u1", "right 80u1 top 50u1"], + ["right 80u1 bottom 70%", "right 80u1 top 30%"], + ["right 80u1 bottom 70u1", "right 80u1 bottom 70u1"], +]; + +var invalidPositions = [ +////// [ keyword | percent ], [ keyword | length ], [ percent | keyword ], [ length | keyword ] x 5 keywords + "50% left", + "50px left", + "top 50%", + "80% right", + "80px right", + "bottom 70%", + "bottom 70px", + +////// [ keyword | keyword percent ], [ keyword | keyword length ] x 5 keywords + "center center 60%", + "center center 60px", + + "left center 60%", + "left center 60px", + "left right 80%", + "left right 80px", + "left left 50%", + "left left 50px", + + "top center 60%", + "top center 60px", + "top bottom 80%", + "top bottom 80px", + "top top 50%", + "top top 50px", + + "bottom center 60%", + "bottom center 60px", + "bottom top 50%", + "bottom top 50px", + "bottom bottom 50%", + "bottom bottom 50px", + + "right center 60%", + "right center 60px", + "right left 50%", + "right left 50px", + "right right 70%", + "right right 70px", + +////// [ keyword percent | keyword], [ keyword length | keyword ] x 5 keywords + "center 60% top", + "center 60px top", + "center 60% bottom", + "center 60px bottom", + "center 60% left", + "center 60px left", + "center 60% right", + "center 60px right", + "center 60% center", + "center 60px center", + + "left 50% right", + "left 50px right", + "left 50% left", + "left 50px left", + + "top 50% bottom", + "top 50px bottom", + "top 50% top", + "top 50px top", + + "bottom 70% top", + "bottom 70px top", + "bottom 70% bottom", + "bottom 70px bottom", + + "right 80% left", + "right 80px left", + +////// [ keyword percent | keyword percent], [ keyword percent | keyword length], +////// [ keyword length | keyword length], [ keyword length | keyword percent] x 5 keywords + "center 60% top 50%", + "center 60% top 50px", + "center 60% bottom 70%", + "center 60% bottom 70px", + "center 60% left 50%", + "center 60% left 50px", + "center 60% right 70%", + "center 60% right 70px", + "center 60% center 65%", + "center 60% center 65px", + "center 60px top 50%", + "center 60px top 50px", + "center 60px bottom 70%", + "center 60px bottom 70px", + "center 60px left 50%", + "center 60px left 50px", + "center 60px right 70%", + "center 60px right 70px", + "center 60px center 65%", + "center 60px center 65px", + + "left 50% center 60%", + "left 50% center 60px", + "left 50% right 80%", + "left 50% right 80px", + "left 50% left 50%", + "left 50% left 50px", + "left 50px center 60%", + "left 50px center 60px", + "left 50px right 80%", + "left 50px right 80px", + "left 50px left 50%", + "left 50px left 50px", + + "top 50% center 60%", + "top 50% center 60px", + "top 50% bottom 50%", + "top 50% bottom 50px", + "top 50% top 50%", + "top 50% top 50px", + "top 50px center 60%", + "top 50px center 60px", + "top 50px bottom 70%", + "top 50px bottom 70px", + "top 50px top 50%", + "top 50px top 50px", + + "bottom 70% center 60%", + "bottom 70% center 60px", + "bottom 70% top 50%", + "bottom 70% top 50px", + "bottom 70% bottom 50%", + "bottom 70% bottom 50px", + "bottom 70px center 60%", + "bottom 70px center 60px", + "bottom 70px top 50%", + "bottom 70px top 50px", + "bottom 70px bottom 50%", + "bottom 70px bottom 50px", + + "right 80% center 60%", + "right 80% center 60px", + "right 80% left 50%", + "right 80% left 50px", + "right 80% right 85%", + "right 80% right 85px", + "right 80px center 60%", + "right 80px center 60px", + "right 80px left 50%", + "right 80px left 50px", + "right 80px right 85%", + "right 80px right 85px" +]; + +// valid radii values for circle + ellipse +// [value, expected_inline, [expected_computed?]] +var validCircleRadii = [ + ['', 'at 50% 50%', 'at 50% 50%'], + ['50u1', '50u1 at 50% 50%'], + ['50%', '50% at 50% 50%'], + ['closest-side', 'at 50% 50%'], + ['farthest-side', 'farthest-side at 50% 50%'] +] +var validEllipseRadii = [ + ['', 'at 50% 50%', 'at 50% 50%'], + ['50u1', '50u1 at 50% 50%', '50u1 at 50% 50%'], + ['50%', '50% at 50% 50%', '50% at 50% 50%'], + ['closest-side', 'at 50% 50%', 'at 50% 50%'], + ['farthest-side', 'farthest-side at 50% 50%', 'farthest-side at 50% 50%'], + ['50u1 100u1', '50u1 100u1 at 50% 50%'], + ['100u1 100px', '100u1 100px at 50% 50%'], + ['25% 50%', '25% 50% at 50% 50%'], + ['50u1 25%', '50u1 25% at 50% 50%'], + ['25% 50u1', '25% 50u1 at 50% 50%'], + ['25% closest-side', '25% at 50% 50%'], + ['25u1 closest-side', '25u1 at 50% 50%'], + ['closest-side 75%', 'closest-side 75% at 50% 50%'], + ['closest-side 75u1', 'closest-side 75u1 at 50% 50%'], + ['25% farthest-side', '25% farthest-side at 50% 50%'], + ['25u1 farthest-side', '25u1 farthest-side at 50% 50%'], + ['farthest-side 75%', 'farthest-side 75% at 50% 50%'], + ['farthest-side 75u1', 'farthest-side 75u1 at 50% 50%'], + ['closest-side closest-side', 'at 50% 50%'], + ['farthest-side farthest-side', 'farthest-side farthest-side at 50% 50%'], + ['closest-side farthest-side', 'closest-side farthest-side at 50% 50%'], + ['farthest-side closest-side', 'farthest-side at 50% 50%'] +] + +var validInsets = [ + ["One arg - u1", "10u1"], + ["One arg - u2", "10u2"], + ["Two args - u1 u1", "10u1 20u1"], + ["Two args - u1 u2", "10u1 20u2"], + ["Two args - u2 u1", "10u2 20u1"], + ["Two args - u2 u2", "10u2 20u2"], + ["Three args - u1 u1 u1", "10u1 20u1 30u1"], + ["Three args - u1 u1 u2", "10u1 20u1 30u2"], + ["Three args - u1 u2 u1", "10u1 20u2 30u1"], + ["Three args - u1 u2 u2 ", "10u1 20u2 30u2"], + ["Three args - u2 u1 u1", "10u2 20u1 30u1"], + ["Three args - u2 u1 u2 ", "10u2 20u1 30u2"], + ["Three args - u2 u2 u1 ", "10u2 20u2 30u1"], + ["Three args - u2 u2 u2 ","10u2 20u2 30u2"], + ["Four args - u1 u1 u1 u1", "10u1 20u1 30u1 40u1"], + ["Four args - u1 u1 u1 u2", "10u1 20u1 30u1 40u2"], + ["Four args - u1 u1 u2 u1", "10u1 20u1 30u2 40u1"], + ["Four args - u1 u1 u2 u2", "10u1 20u1 30u2 40u2"], + ["Four args - u1 u2 u1 u1", "10u1 20u2 30u1 40u1"], + ["Four args - u1 u2 u1 u2", "10u1 20u2 30u1 40u2"], + ["Four args - u1 u2 u2 u1", "10u1 20u2 30u2 40u1"], + ["Four args - u1 u2 u2 u2", "10u1 20u2 30u2 40u2"], + ["Four args - u2 u1 u1 u1", "10u2 20u1 30u1 40u1"], + ["Four args - u2 u1 u1 u2", "10u2 20u1 30u1 40u2"], + ["Four args - u2 u1 u2 u1", "10u2 20u1 30u2 40u1"], + ["Four args - u2 u1 u2 u2", "10u2 20u1 30u2 40u2"], + ["Four args - u2 u2 u1 u1", "10u2 20u2 30u1 40u1"], + ["Four args - u2 u2 u1 u2", "10u2 20u2 30u1 40u2"], + ["Four args - u2 u2 u2 u1", "10u2 20u2 30u2 40u1"], + ["Four args - u2 u2 u2 u2", "10u2 20u2 30u2 40u2"] +] + +var validPolygons = [ + ["One vertex - u1 u1", "10u1 20u1"], + ["One vertex - u1 u2", "10u1 20u2"], + ["Two vertices - u1 u1, u1 u1", "10u1 20u1, 30u1 40u1"], + ["Two vertices - u1 u1, u2 u2", "10u1 20u1, 30u2 40u2"], + ["Two vertices - u2 u2, u1 u1", "10u2 20u2, 30u1 40u1"], + ["Two vertices - u1 u2, u2 u1", "10u1 20u2, 30u2 40u1"], + ["Three vertices - u1 u1, u1 u1, u1 u1", "10u1 20u1, 30u1 40u1, 50u1 60u1"], + ["Three vertices - u2 u2, u2 u2, u2 u2", "10u2 20u2, 30u2 40u2, 50u2 60u2"], + ["Three vertices - u3 u3, u3 u3, u3 u3", "10u3 20u3, 30u3 40u3, 50u3 60u3"], + ["Three vertices - u1 u1, u2 u2, u3 u3", "10u1 20u1, 30u2 40u2, 50u3 60u3"], + ["Three vertices - u3 u3, u1, u1, u2 u2", "10u3 20u3, 30u1 40u1, 50u2 60u2"], +] + +// [test value, expected property value, expected computed style] +var calcTestValues = [ + ["calc(10in)", "calc(10in)", "960px"], + ["calc(10in + 20px)", "calc(980px)", "980px"], + ["calc(30%)", "calc(30%)", "30%"], + ["calc(100%/4)", "calc(25%)", "25%"], + ["calc(25%*3)", "calc(75%)", "75%"], + // These following two test cases represent an either/or situation in the spec + // computed value is always supposed to be, at most, a tuple of a length and a percentage. + // the computed value of a ‘calc()’ expression can be represented as either a number or a tuple + // of a dimension and a percentage. + // http://www.w3.org/TR/css3-values/#calc-notation + ["calc(25%*3 - 10in)", "calc(75% - 10in)", ["calc(75% - 960px)", "calc(-960px + 75%)"]], + ["calc((12.5%*6 + 10in) / 4)", "calc((75% + 10in) / 4)", ["calc((75% + 960px) / 4)", "calc(240px + 18.75%)"]] +] + +return { + testInlineStyle: testInlineStyle, + testComputedStyle: testComputedStyle, + testShapeMarginInlineStyle: testShapeMarginInlineStyle, + testShapeMarginComputedStyle: testShapeMarginComputedStyle, + testShapeThresholdInlineStyle: testShapeThresholdInlineStyle, + testShapeThresholdComputedStyle: testShapeThresholdComputedStyle, + buildTestCases: buildTestCases, + buildRadiiTests: buildRadiiTests, + buildPositionTests: buildPositionTests, + buildInsetTests: buildInsetTests, + buildPolygonTests: buildPolygonTests, + generateInsetRoundCases: generateInsetRoundCases, + buildCalcTests: buildCalcTests, + validUnits: validUnits, + calcTestValues: calcTestValues, + roundResultStr: roundResultStr +} +})(); diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-gg-gr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-gg-gr.png Binary files differnew file mode 100644 index 00000000000..091de70bb72 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-gg-gr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-grg-rgr-grg.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 00000000000..6fcfeb4883e --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-grg-rgr-grg.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-grg-rrg-rgg.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 00000000000..fcf4f3fd7d9 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-grg-rrg-rgg.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-rgr-grg-rgr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 00000000000..db8ed5cf7bd --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-rgr-grg-rgr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-tr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-tr.png Binary files differnew file mode 100644 index 00000000000..8b4b25364e0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/pattern-tr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/properties.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/properties.js new file mode 100644 index 00000000000..ddecfb6e336 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/properties.js @@ -0,0 +1,449 @@ +(function(root){ + +/* + * General Value Types definition + * they return an object of arrays of type { <name>: [<start-value>, <end-value>], ... } + */ +var values = { + 'length' : function() { + // http://www.w3.org/TR/css3-values/#lengths + return { + // CSS Values and Module Level 3 + // ch: ['1ch', '10ch'], + // rem: ['1rem', '10rem'], + // vw: ['1vw', '10vw'], + // vh: ['1vh', '10vh'], + // vmin: ['1vmin', '10vmin'], + // vmax: ['1vmax', '10vmax'], + // CSS Values and Module Level 2 + pt: ['1pt', '10pt'], + pc: ['1pc', '10pc'], + px: ['1px', '10px'], + // CSS Values and Module Level 1 + em: ['1em', '10em'], + ex: ['1ex', '10ex'], + mm: ['1mm', '10mm'], + cm: ['1cm', '10cm'], + 'in': ['1in', '10in'] + }; + }, + 'length-em': function() { + return { + em: ['1.1em', '1.5em'] + }; + }, + 'percentage': function() { + // http://www.w3.org/TR/css3-values/#percentages + return { + '%': ['33%', '80%'] + }; + }, + 'color': function() { + // http://www.w3.org/TR/css3-values/#colors + // http://www.w3.org/TR/css3-color/ + return { + rgba: ['rgba(100,100,100,1)', 'rgba(10,10,10,0.4)'] + }; + }, + 'rectangle': function() { + // http://www.w3.org/TR/CSS2/visufx.html#value-def-shape + return { + rectangle: ['rect(10px,10px,10px,10px)', 'rect(15px,15px,5px,5px)'] + }; + }, + 'font-weight': function() { + // http://www.w3.org/TR/css3-fonts/#font-weight-prop + return { + keyword: ["normal", "bold"], + numeric: ["100", "900"] + }; + }, + 'number': function() { + // http://www.w3.org/TR/css3-values/#number + return { + integer: ["1", "10"], + decimal: ["1.1", "9.55"] + }; + }, + 'number[0,1]': function() { + // http://www.w3.org/TR/css3-values/#number + // applies to [0,1]-ranged properties like opacity + return { + "zero-to-one": ["0.2", "0.9"] + }; + }, + 'integer': function() { + // http://www.w3.org/TR/css3-values/#integer + return { + integer: ["1", "10"] + }; + }, + 'shadow': function() { + // http://www.w3.org/TR/css-text-decor-3/#text-shadow-property + return { + shadow: ['rgba(0,0,0,0.1) 5px 6px 7px', 'rgba(10,10,10,0.9) 5px 6px 7px'] + }; + }, + 'visibility': function() { + // http://www.w3.org/TR/CSS2/visufx.html#visibility + return { + keyword: ['visible', 'hidden', {discrete: true}] + }; + }, + 'auto': function(property) { + var types = properties[property] || unspecified_properties[property]; + var val = values[types[0]](property); + var key = Object.keys(val).shift(); + return { + to: [val[key][1], 'auto'], + from: ['auto', val[key][1]] + }; + }, + // types reqired for non-specified properties + 'border-radius': function() { + return { + px: ['1px', '10px'], + "px-px": ['1px 3px', '10px 13px'] + }; + }, + 'image' : function() { + var prefix = getValueVendorPrefix('background-image', 'linear-gradient(top, hsl(0, 80%, 70%), #bada55)'); + return { + // Chrome implements this + url: ['url(support/one.gif)', 'url(support/two.gif)'], + data: ['url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=)', 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)'], + // A hunch, as from the spec: + // http://www.w3.org/TR/css3-transitions/#animatable-types + // gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition. + gradient: [prefix + 'linear-gradient(top, hsl(0, 80%, 70%), #bada55)', prefix + 'linear-gradient(top, #bada55, hsl(0, 80%, 70%))'] + }; + }, + 'background-size': function() { + return { + keyword: ['cover', 'contain'] + }; + }, + 'box-shadow': function() { + // http://www.w3.org/TR/css3-background/#ltshadowgt + return { + shadow: ['60px -16px teal', '60px -16px red'] + }; + }, + 'vertical': function() { + return { + keyword: ['top', 'bottom'] + }; + }, + 'horizontal': function() { + return { + keyword: ['left', 'right'] + }; + }, + 'font-stretch': function() { + return { + keyword: ['condensed', 'expanded'] + }; + }, + 'transform': function() { + return { + rotate: ['rotate(10deg)', 'rotate(20deg)'] + }; + }, + 'position': function() { + return { + 'static to absolute': ['static', 'absolute', {discrete: true}], + 'relative to absolute': ['relative', 'absolute', {discrete: true}], + 'absolute to fixed': ['absolute', 'fixed', {discrete: true}] + }; + }, + 'display': function() { + return { + 'static to absolute': ['none', 'block', {discrete: true}], + 'block to inline-block': ['block', 'inline-block', {discrete: true}] + }; + } +}; + +/* + * Property to Type table + * (as stated in specification) + */ +var properties = { + 'background-color': ['color'], + 'background-position': ['length', 'percentage'], + + 'border-top-width': ['length'], + 'border-right-width': ['length'], + 'border-bottom-width': ['length'], + 'border-left-width': ['length'], + + 'border-top-color': ['color'], + 'border-right-color': ['color'], + 'border-bottom-color': ['color'], + 'border-left-color': ['color'], + + 'padding-bottom': ['length'], + 'padding-left': ['length'], + 'padding-right': ['length'], + 'padding-top': ['length'], + + 'margin-bottom': ['length'], + 'margin-left': ['length'], + 'margin-right': ['length'], + 'margin-top': ['length'], + + 'height': ['length', 'percentage'], + 'width': ['length', 'percentage'], + 'min-height': ['length', 'percentage'], + 'min-width': ['length', 'percentage'], + 'max-height': ['length', 'percentage'], + 'max-width': ['length', 'percentage'], + + 'top': ['length', 'percentage'], + 'right': ['length', 'percentage'], + 'bottom': ['length', 'percentage'], + 'left': ['length', 'percentage'], + + 'color': ['color'], + 'font-size': ['length', 'percentage'], + 'font-weight': ['font-weight'], + 'line-height': ['number', 'length', 'percentage'], + 'letter-spacing': ['length'], + // Note: percentage is Level3 and not implemented anywhere yet + // https://drafts.csswg.org/css3-text/#word-spacing + 'word-spacing': ['length', 'percentage'], + 'text-indent': ['length', 'percentage'], + 'text-shadow': ['shadow'], + + 'outline-color': ['color'], + // outline-offset <integer> used to be an error in the spec + 'outline-offset': ['length'], + 'outline-width': ['length'], + + 'clip': ['rectangle'], + // Note: doesn't seem implemented anywhere + 'crop': ['rectangle'], + + 'vertical-align': ['length', 'percentage'], + 'opacity': ['number[0,1]'], + 'visibility': ['visibility'], + 'z-index': ['integer'] +}; + +/* + * Property to auto-value mapping + * (lazily taken from http://www.siliconbaytraining.com/pages/csspv.html) + */ +var properties_auto = [ + 'margin-top', + 'margin-right', + 'margin-bottom', + 'margin-left', + 'height', + 'width', + 'clip', + 'marker-offset', + 'top', + 'right', + 'left', + 'bottom', + 'z-index' +]; + +/* + * Property to Type table + * (missing value-types of specified properties) + */ +var missing_properties = { + 'margin-bottom': ['percentage'], + 'margin-left': ['percentage'], + 'margin-right': ['percentage'], + 'margin-top': ['percentage'], + 'padding-bottom': ['percentage'], + 'padding-left': ['percentage'], + 'padding-right': ['percentage'], + 'padding-top': ['percentage'], + 'vertical-align': ['vertical'] +}; + +/* + * Property to Type table + * (properties that haven't been specified but implemented) + */ +var unspecified_properties = { + // http://oli.jp/2010/css-animatable-properties/ + 'border-top-left-radius': ['border-radius'], + 'border-top-right-radius': ['border-radius'], + 'border-bottom-left-radius': ['border-radius'], + 'border-bottom-right-radius': ['border-radius'], + 'background-image': ['image'], + 'background-size': ['background-size'], + // https://drafts.csswg.org/css3-background/#the-box-shadow + // Animatable: yes, except between inner and outer shadows (Transition to/from an absent shadow is a transition to/from ‘0 0 transparent’ or ‘0 0 transparent inset’, as appropriate.) + 'box-shadow': ['box-shadow'], + 'font-size-adjust': ['number'], + 'font-stretch': ['font-stretch'], + 'marker-offset': ['length'], + 'text-decoration-color': ['color'], + 'column-count': ['integer'], + 'column-gap': ['length'], + 'column-rule-color': ['color'], + 'column-rule-width': ['length'], + 'column-width': ['length'], + 'transform': ['transform'], + 'transform-origin': ['horizontal'], + 'zoom': ['number'], + 'outline-radius-topleft': ['length', 'percentage'], + 'outline-radius-topright': ['length', 'percentage'], + 'outline-radius-bottomright': ['length', 'percentage'], + 'outline-radius-bottomleft': ['length', 'percentage'], + 'display': ['display'], + 'position': ['position'] +}; + +/* + * additional styles required to actually render + * (different browsers expect different environment) + */ +var additional_styles = { + // all browsers + 'border-top-width': {'border-top-style' : 'solid'}, + 'border-right-width': {'border-right-style' : 'solid'}, + 'border-bottom-width': {'border-bottom-style' : 'solid'}, + 'border-left-width': {'border-left-style' : 'solid'}, + 'top': {'position': 'absolute'}, + 'right': {'position': 'absolute'}, + 'bottom': {'position': 'absolute'}, + 'left': {'position': 'absolute'}, + 'z-index': {'position': 'absolute'}, + 'outline-offset': {'outline-style': 'solid'}, + 'outline-width': {'outline-style': 'solid'}, + 'word-spacing': {'width': '100px', 'height': '100px'}, + // unspecified properties + 'column-rule-width': {'column-rule-style': 'solid'}, + 'position': {'width': '50px', 'height': '50px', top: '10px', left: '50px'} +}; + +/* + * additional styles required *on the parent* to actually render + * (different browsers expect different environment) + */ +var parent_styles = { + 'border-top-width': {'border-top-style' : 'solid'}, + 'border-right-width': {'border-right-style' : 'solid'}, + 'border-bottom-width': {'border-bottom-style' : 'solid'}, + 'border-left-width': {'border-left-style' : 'solid'}, + 'height': {'width': '100px', 'height': '100px'}, + 'min-height': {'width': '100px', 'height': '100px'}, + 'max-height': {'width': '100px', 'height': '100px'}, + 'width': {'width': '100px', 'height': '100px'}, + 'min-width': {'width': '100px', 'height': '100px'}, + 'max-width': {'width': '100px', 'height': '100px'}, + // unspecified properties + 'position': {'position': 'relative', 'width': '100px', 'height': '100px'}, + // inheritance tests + 'top': {'width': '100px', 'height': '100px', 'position': 'relative'}, + 'right': {'width': '100px', 'height': '100px', 'position': 'relative'}, + 'bottom': {'width': '100px', 'height': '100px', 'position': 'relative'}, + 'left': {'width': '100px', 'height': '100px', 'position': 'relative'} +}; + + +function assemble(props) { + var tests = []; + + // assemble tests + for (var property in props) { + props[property].forEach(function(type) { + var _values = values[type](property); + Object.keys(_values).forEach(function(unit) { + var data = { + name: property + ' ' + type + '(' + unit + ')', + property: property, + valueType : type, + unit : unit, + parentStyle: extend({}, parent_styles[property] || {}), + from: extend({}, additional_styles[property] || {}), + to: {} + }; + + data.from[property] = _values[unit][0]; + data.to[property] = _values[unit][1]; + data.flags = _values[unit][2] || {}; + + tests.push(data); + }); + }); + } + + return tests; +} + +root.getPropertyTests = function() { + return assemble(properties); +}; + +root.getMissingPropertyTests = function() { + return assemble(missing_properties); +}; + +root.getUnspecifiedPropertyTests = function() { + return assemble(unspecified_properties); +}; + +root.getFontSizeRelativePropertyTests = function() { + var accepted = {}; + + for (var key in properties) { + if (!Object.prototype.hasOwnProperty.call(properties, key) || key === "font-size") { + continue; + } + + if (properties[key].indexOf('length') > -1) { + accepted[key] = ['length-em']; + } + } + + return assemble(accepted); +}; + +root.getAutoPropertyTests = function() { + var accepted = {}; + + for (var i = 0, key; key = properties_auto[i]; i++) { + accepted[key] = ['auto']; + } + + return assemble(accepted); +}; + +root.filterPropertyTests = function(tests, names) { + var allowed = {}; + var accepted = []; + + if (typeof names === "string") { + names = [names]; + } + + if (!(names instanceof RegExp)) { + names.forEach(function(name) { + allowed[name] = true; + }); + } + + tests.forEach(function(test) { + if (names instanceof RegExp) { + if (!test.name.match(names)) { + return; + } + } else if (!allowed[test.name]) { + return; + } + + accepted.push(test); + }); + + return accepted; +}; + +})(window);
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/red20x20.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/red20x20.png Binary files differnew file mode 100644 index 00000000000..5d44ef210e1 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/red20x20.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/region-in-body.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/region-in-body.html new file mode 100644 index 00000000000..78038fd28ff --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/region-in-body.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #container { + background: red; + } + #content { + flow-into: flow; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + #region { + flow-from: flow; + } + </style> + <script src="util.js" type="text/javascript"></script> +</head> +<body> + <div id="container"> + <!-- The ​ entity is a zerowidth space. It enables me to create nicely reflowing rectangles of Ahem text --> + <div id="content"> + xxxx​xxxx​xxxx​xxxx + </div> + </div> + <div id="region"> + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/region-in-container.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/region-in-container.html new file mode 100644 index 00000000000..219fce6503c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/region-in-container.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #container { + background: red; + } + #content { + flow-into: flow; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + #region { + flow-from: flow; + } + </style> +</head> +<body> + <div id="container"> + <!-- The ​ entity is a zerowidth space. It enables me to create nicely reflowing rectangles of Ahem text --> + <div id="content"> + xxxx​xxxx​xxxx​xxxx + </div> + </div> + <div id="region-parent"> + <div id="region"> + </div> + </div> + <script src="util.js" type="text/javascript"></script> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-h-50%.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-h-50%.png Binary files differnew file mode 100644 index 00000000000..cf2eea6b438 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-h-50%.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-h-50px.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-h-50px.png Binary files differnew file mode 100644 index 00000000000..9f46583665c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-h-50px.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-v-100px.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-v-100px.png Binary files differnew file mode 100644 index 00000000000..a837eca2225 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-v-100px.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-v-50px.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-v-50px.png Binary files differnew file mode 100644 index 00000000000..84141028020 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/ruler-v-50px.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/runParallelAsyncHarness.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/runParallelAsyncHarness.js new file mode 100644 index 00000000000..460f467930e --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/runParallelAsyncHarness.js @@ -0,0 +1,145 @@ +(function(root){ +'use strict'; +// testharness doesn't know about async test queues, +// so this wrapper takes care of that + +/* USAGE: + runParallelAsyncHarness({ + // list of data to test, must be array of objects. + // each object must contain a "name" property to describe the test + // besides name, the object can contain whatever data you need + tests: [ + {name: "name of test 1", custom: "data"}, + {name: "name of test 2", custom: "data"}, + // ... + ], + + // number of tests (tests, not test-cases!) to run concurrently + testsPerSlice: 100, + + // time in milliseconds a test-run takes + duration: 1000, + + // test-cases to run for for the test - there must be at least one + // each case creates its separate async_test() instance + cases: { + // test case named "test1" + test1: { + // run as a async_test.step() this callback contains your primary assertions + start: function(testCaseKey, data, options){}, + // run as a async_test.step() this callback contains assertions to be run + // when the test ended, immediately before teardown + done: function(testCaseKey, data, options){} + }, + // ... + } + + // all callbacks are optional: + + // invoked for individual test before it starts so you can setup the environment + // like DOM, CSS, adding event listeners and such + setup: function(data, options){}, + + // invoked after a test ended, so you can clean up the environment + // like DOM, CSS, removing event listeners and such + teardown: function(data, options){}, + + // invoked before a batch of tests ("slice") are run concurrently + // tests is an array of test data objects + sliceStart: function(options, tests) + + // invoked after a batch of tests ("slice") were run concurrently + // tests is an array of test data objects + sliceDone: function(options, tests) + + // invoked once all tests are done + done: function(options){} + }) +*/ +root.runParallelAsyncHarness = function(options) { + if (!options.cases) { + throw new Error("Options don't contain test cases!"); + } + + var noop = function(){}; + + // add a 100ms buffer to the test timeout, just in case + var duration = Math.ceil(options.duration + 100); + + // names of individual tests + var cases = Object.keys(options.cases); + + // run tests in a batch of slices + // primarily not to overload weak devices (tablets, phones, …) + // with too many tests running simultaneously + var iteration = -1; + var testPerSlice = options.testsPerSlice || 100; + var slices = Math.ceil(options.tests.length / testPerSlice); + + // initialize all async test cases + // Note: satisfying testharness.js needs to know all async tests before load-event + options.tests.forEach(function(data, index) { + data.cases = {}; + cases.forEach(function(name) { + data.cases[name] = async_test(data.name + " / " + name, {timeout: options.timeout || 60000}); + }); + }); + + function runLoop() { + iteration++; + if (iteration >= slices) { + // no more slice, we're done + (options.done || noop)(options); + return; + } + + // grab a slice of testss and initialize them + var offset = iteration * testPerSlice; + var tests = options.tests.slice(offset, offset + testPerSlice); + tests.forEach(function(data) { + (options.setup || noop)(data, options); + + }); + + // kick off the current slice of tests + (options.sliceStart || noop)(options, tests); + + // perform individual "start" test-case + tests.forEach(function(data) { + cases.forEach(function(name) { + data.cases[name].step(function() { + (options.cases[name].start || noop)(data.cases[name], data, options); + }); + }); + }); + + // conclude test (possibly abort) + setTimeout(function() { + tests.forEach(function(data) { + // perform individual "done" test-case + cases.forEach(function(name) { + data.cases[name].step(function() { + (options.cases[name].done || noop)(data.cases[name], data, options); + }); + }); + // clean up after individual test + (options.teardown || noop)(data, options); + // tell harness we're done with individual test-cases + cases.forEach(function(name) { + data.cases[name].done(); + }); + }); + + // finish the test for current slice of tests + (options.sliceDone || noop)(options, tests); + + // next test please, give the browser 50ms to do catch its breath + setTimeout(runLoop, 50); + }, duration); + } + + // allow DOMContentLoaded before actually doing something + setTimeout(runLoop, 100); +}; + +})(window);
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/square-purple.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/square-purple.png Binary files differnew file mode 100644 index 00000000000..0f522d78728 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/square-purple.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/square-teal.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/square-teal.png Binary files differnew file mode 100644 index 00000000000..e567f51b91b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/square-teal.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/square-white.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/square-white.png Binary files differnew file mode 100644 index 00000000000..5853cbb238c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/square-white.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-blue.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-blue.png Binary files differnew file mode 100644 index 00000000000..bf2759634d4 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-blue.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-gray.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-gray.png Binary files differnew file mode 100644 index 00000000000..92c73561f3a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-gray.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-green.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-green.png Binary files differnew file mode 100644 index 00000000000..0aa79b0c86b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-green.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-lime.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-lime.png Binary files differnew file mode 100644 index 00000000000..55fd7fdaedf --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-lime.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-navy.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-navy.png Binary files differnew file mode 100644 index 00000000000..28dae8a3e12 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-navy.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-orange.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-orange.png Binary files differnew file mode 100644 index 00000000000..d3cd498b52b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-orange.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-pink.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-pink.png Binary files differnew file mode 100644 index 00000000000..95b84499a3d --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-pink.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-purple.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-purple.png Binary files differnew file mode 100644 index 00000000000..73bea775175 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-purple.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-red.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-red.png Binary files differnew file mode 100644 index 00000000000..1caf25c992a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-red.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-teal.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-teal.png Binary files differnew file mode 100644 index 00000000000..0293ce89dea --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-teal.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-white.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-white.png Binary files differnew file mode 100644 index 00000000000..1a7d4323d77 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-white.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-yellow.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-yellow.png Binary files differnew file mode 100644 index 00000000000..1591aa0e2e2 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/swatch-yellow.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-bl.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-bl.png Binary files differnew file mode 100644 index 00000000000..904e24e996a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-bl.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-br.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-br.png Binary files differnew file mode 100644 index 00000000000..f413ff5c1a0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-br.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-inner-half-size.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-inner-half-size.png Binary files differnew file mode 100644 index 00000000000..e473bf80efc --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-inner-half-size.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-outer.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-outer.png Binary files differnew file mode 100644 index 00000000000..82eeace7fc0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-outer.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-tl.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-tl.png Binary files differnew file mode 100644 index 00000000000..f6ac0ef7e8f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-tl.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-tr.png b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-tr.png Binary files differnew file mode 100644 index 00000000000..59843ae54b6 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/test-tr.png diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/two-regions-in-container.html b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/two-regions-in-container.html new file mode 100644 index 00000000000..2fc65261da0 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/two-regions-in-container.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"><head> + <meta charset="UTF-8"> + <title>One region in body</title> + <style> + html, body { + margin: 0; + padding: 0; + } + #container { + background: red; + } + #content { + flow-into: flow; + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + #region1, #region2 { + flow-from: flow; + } + </style> +</head> +<body> + <div id="container"> + <!-- The ​ entity is a zerowidth space. It enables me to create nicely reflowing rectangles of Ahem text --> + <div id="content"> + xxxx​xxxx​xxxx​xxxx​xxxx​xxxx​xxxx​xxxx + </div> + </div> + <div id="region-parent"> + <div id="region1"></div> + <div id="region2"></div> + </div> + <script src="util.js" type="text/javascript"></script> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/two.gif b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/two.gif Binary files differnew file mode 100644 index 00000000000..01435c80209 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/two.gif diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/util.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/util.js new file mode 100644 index 00000000000..a7ce4283e45 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/util.js @@ -0,0 +1,29 @@ +function resizeViewportTo(viewportSelector, width, height) { + var iframe = document.querySelector(viewportSelector); + // Commonly used trick to trigger a layout + iframe.contentWindow.document.body.offsetTop; + + iframe.width = width; + iframe.height = height; + + iframe.contentWindow.document.body.offsetTop; +} + +function injectStylesInIFrame(styleSelector, frameSelector) { + var style = document.querySelector(styleSelector), + frame = document.querySelector(frameSelector); + + frame.contentWindow.addNewStyles(style.textContent); +} + + +if (window.parent != window) { + // we're in an iframe, so expose the bits that allow setting styles inside + window.addNewStyles = function (cssText) { + var styleTag = document.createElement("style"), + textNode = document.createTextNode(cssText); + + styleTag.appendChild(textNode); + document.head.appendChild(styleTag); + } +}
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/vendorPrefix.js b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/vendorPrefix.js new file mode 100644 index 00000000000..6cf3c5a3783 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/support/vendorPrefix.js @@ -0,0 +1,86 @@ +// +// Vendor-Prefix Helper Functions For Testing CSS +// + +(function(root) { +'use strict'; + +var prefixCache = {}; + +// convert "foo-bar" to "fooBar" +function camelCase(str) { + return str.replace(/\-(\w)/g, function(match, letter){ + return letter.toUpperCase(); + }); +} + +// vendor-prefix a css property +root.addVendorPrefix = function (name) { + var prefix = getVendorPrefix(name); + if (prefix === false) { + // property unknown to browser + return name; + } + + return prefix + name; +}; + +// vendor-prefix a css property value +root.addValueVendorPrefix = function (property, value) { + var prefix = getValueVendorPrefix(property, value); + if (prefix === false) { + // property unknown to browser + return name; + } + + return prefix + value; +}; + +// identify vendor-prefix for css property +root.getVendorPrefix = function(name) { + if (prefixCache[name] !== undefined) { + return prefixCache[name]; + } + + var elem = document.createElement("div"); + name = camelCase(name); + + if (name in elem.style) { + return prefixCache[name] = ""; + } + + var prefixes = ["Webkit", "Moz", "O", "ms"]; + var styles = ["-webkit-", "-moz-", "-o-", "-ms-"]; + var _name = name.substring(0, 1).toUpperCase() + name.substring(1); + + for (var i = 0, length = prefixes.length; i < length; i++) { + if (prefixes[i] + _name in elem.style) { + return prefixCache[name] = styles[i]; + } + } + + return prefixCache[name] = name in elem.style ? "" : false; +}; + +// identify vendor-prefix for css property value +root.getValueVendorPrefix = function(property, value) { + var elem = document.createElement("div"); + // note: webkit needs the element to be attached to the dom + document.body.appendChild(elem); + var styles = ["-webkit-", "-moz-", "-o-", "-ms-", ""]; + var _property = getVendorPrefix(property) + property; + for (var i=0, length = styles.length; i < length; i++) { + var _value = styles[i] + value; + elem.setAttribute('style', _property + ": " + _value); + var _computed = computedStyle(elem, _property); + if (_computed && _computed !== 'none') { + document.body.removeChild(elem); + return styles[i]; + } + } + document.body.removeChild(elem); + return false; +}; + + +})(window);
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/toc.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/toc.xht new file mode 100644 index 00000000000..63effef1727 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/toc.xht @@ -0,0 +1,69 @@ + +<!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 Values and Units Module Level 3 CR Test Suite</title> + <style type="text/css"> + @import "http://www.w3.org/StyleSheets/TR/base.css"; + @import "../indices.css"; + </style> + </head> +<body> + <h1>CSS Values and Units Module Level 3 CR Test Suite By Chapter</h1> + + <p>This index contains both + <a href="http://wiki.csswg.org/test/selftest">self-describing tests</a> + and reftests. + A separate <a href="reftest-toc.xht">alphabetical reftest index</a> + is provided for tests in <a href="http://wiki.csswg.org/test/reftest">reftest + format</a> along with the <a href="reftest.list">reftest manifest</a>.</p> + + <table> + <tbody id="s1"> + <tr><th><a href="chapter-1.xht">Chapter 1 - + Introduction</a></th> + <td>(0 Tests)</td></tr> + </tbody> + <tbody id="s2"> + <tr><th><a href="chapter-2.xht">Chapter 2 - + Value Definition Syntax</a></th> + <td>(0 Tests)</td></tr> + </tbody> + <tbody id="s3"> + <tr><th><a href="chapter-3.xht">Chapter 3 - + Textual Data Types</a></th> + <td>(3 Tests)</td></tr> + </tbody> + <tbody id="s4"> + <tr><th><a href="chapter-4.xht">Chapter 4 - + Numeric Data Types</a></th> + <td>(3 Tests)</td></tr> + </tbody> + <tbody id="s5"> + <tr><th><a href="chapter-5.xht">Chapter 5 - + Distance Units: the <length> type</a></th> + <td>(30 Tests)</td></tr> + </tbody> + <tbody id="s6"> + <tr><th><a href="chapter-6.xht">Chapter 6 - + Other Quantities</a></th> + <td>(2 Tests)</td></tr> + </tbody> + <tbody id="s7"> + <tr><th><a href="chapter-7.xht">Chapter 7 - + Data Types Defined Elsewhere</a></th> + <td>(0 Tests)</td></tr> + </tbody> + <tbody id="s8"> + <tr><th><a href="chapter-8.xht">Chapter 8 - + Functional Notations</a></th> + <td>(32 Tests)</td></tr> + </tbody> + <tbody id="s9"> + <tr><th><a href="chapter-9.xht">Chapter 9 - + Appendix A: IANA Considerations</a></th> + <td>(0 Tests)</td></tr> + </tbody> + </table> +</body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/transition-delay-001.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/transition-delay-001.xht new file mode 100644 index 00000000000..1a00c9b32d1 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/transition-delay-001.xht @@ -0,0 +1,106 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Transitions Test: Parsing transition-delay</title> + <meta content="Test checks that transition-delay values are parsed properly" name="assert" /> + <link href="http://www.w3.org/TR/css3-transitions/#transition-delay-property" rel="help" title="2.4. The 'transition-delay' Property" /> + <link href="http://www.w3.org/TR/css3-values/#time" rel="help" title="CSS Values and Units Module Level 3 - 6.2. Times: the ‘<time>’ type and ‘s’, ‘ms’ units" /> + <link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm" /> + <meta content="dom" name="flags" /> + + <script src="/resources/testharness.js" type="text/javascript"></script> + <script src="/resources/testharnessreport.js" type="text/javascript"></script> + + <script src="./support/vendorPrefix.js" type="text/javascript"></script> + <script src="./support/helper.js" type="text/javascript"></script> + + <script id="metadata_cache">/* + { + "parse '10.2s'": {}, + "parse '1s'": {}, + "parse '0.1s'": {}, + "parse '0.01s'": {}, + "parse '0.001s'": {}, + "parse '0.009s'": {}, + "parse '0s'": {}, + "parse '.0s'": {}, + "parse '0.0s'": {}, + "parse '.3s'": {}, + "parse '-5s'": {}, + "parse '10200ms'": {}, + "parse '1000ms'": {}, + "parse '100ms'": {}, + "parse '10ms'": {}, + "parse '9ms'": {}, + "parse '1ms'": {}, + "parse '0ms'": {}, + "parse '-500ms'": {}, + "parse '1s, 0.1s, 10ms'": {}, + "parse 'foobar'": { "flags": "invalid" } + } + */</script> + </head> + <body> + <!-- required by testharnessreport.js --> + <div id="log"></div> + <!-- elements used for testing --> + <div id="container"> + <div id="transition"></div> + </div> + + <script> + var transition = document.getElementById('transition'); + // <time> [, <time>]* + var values = { + // seconds + '10.2s': '10.2s', + '1s': '1s', + '0.1s': '0.1s', + '0.01s': '0.01s', + '0.001s': '0.001s', + '0.009s': '0.009s', + '0s': '0s', + '0s': '0s', + '.0s': '0s', + '0.0s': '0s', + '.3s': '0.3s', + '-5s' : '-5s', + // milliseconds + '10200ms': '10.2s', + '1000ms': '1s', + '100ms': '0.1s', + '10ms': '0.01s', + '9ms': '0.009s', + '1ms': '0.001s', + '0ms': '0s', + '-500ms' : '-0.5s', + // combination + '1s, 0.1s, 10ms': '1s, 0.1s, 0.01s', + // invalid + 'foobar': '0s' + }; + + // these tests are supposed to fail and + // possibly make the engine issue a parser warning + var invalidTests = { + 'foobar': true + }; + + for (var key in values) { + if (Object.prototype.hasOwnProperty.call(values, key)) { + test(function() { + setStyle('#transition', { + 'transition-delay': key + }); + var result = computedStyle(transition, 'transition-delay'); + assert_equals(result, values[key], "Expected computed value"); + }, "parse '" + key + "'", + { + // mark tests that fail as such + flags: invalidTests[key] ? "invalid" : "" + }); + } + } + </script> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/transition-duration-001.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/transition-duration-001.xht new file mode 100644 index 00000000000..275b58d7b2c --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/transition-duration-001.xht @@ -0,0 +1,107 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Transitions Test: Parsing transition-duration</title> + <meta content="Test checks that transition-duration values are parsed properly" name="assert" /> + <link href="http://www.w3.org/TR/css3-transitions/#transition-duration-property" rel="help" title="2.2. The 'transition-duration' Property" /> + <link href="http://www.w3.org/TR/css3-values/#time" rel="help" title="CSS Values and Units Module Level 3 - 6.2. Times: the ‘<time>’ type and ‘s’, ‘ms’ units" /> + <link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm" /> + <meta content="dom" name="flags" /> + + <script src="/resources/testharness.js" type="text/javascript"></script> + <script src="/resources/testharnessreport.js" type="text/javascript"></script> + + <script src="./support/vendorPrefix.js" type="text/javascript"></script> + <script src="./support/helper.js" type="text/javascript"></script> + + <script id="metadata_cache">/* + { + "parse '10.2s'": {}, + "parse '1s'": {}, + "parse '0.1s'": {}, + "parse '0.01s'": {}, + "parse '0.001s'": {}, + "parse '0.009s'": {}, + "parse '0s'": {}, + "parse '.0s'": {}, + "parse '0.0s'": {}, + "parse '.3s'": {}, + "parse '-5s'": { "flags": "invalid" }, + "parse '10200ms'": {}, + "parse '1000ms'": {}, + "parse '100ms'": {}, + "parse '10ms'": {}, + "parse '9ms'": {}, + "parse '1ms'": {}, + "parse '0ms'": {}, + "parse '-500ms'": { "flags": "invalid" }, + "parse '1s, 0.1s, 10ms'": {}, + "parse 'foobar'": { "flags": "invalid" } + } + */</script> + </head> + <body> + <!-- required by testharnessreport.js --> + <div id="log"></div> + <!-- elements used for testing --> + <div id="container"> + <div id="transition"></div> + </div> + + <script> + var transition = document.getElementById('transition'); + // <time> [, <time>]* + var values = { + // seconds + '10.2s': '10.2s', + '1s': '1s', + '0.1s': '0.1s', + '0.01s': '0.01s', + '0.001s': '0.001s', + '0.009s': '0.009s', + '0s': '0s', + '.0s': '0s', + '0.0s': '0s', + '.3s': '0.3s', + '-5s' : '0s', + // milliseconds + '10200ms': '10.2s', + '1000ms': '1s', + '100ms': '0.1s', + '10ms': '0.01s', + '9ms': '0.009s', + '1ms': '0.001s', + '0ms': '0s', + '-500ms' : '0s', + // combination + '1s, 0.1s, 10ms': '1s, 0.1s, 0.01s', + // invalid + 'foobar': '0s' + }; + + // these tests are supposed to fail and + // possibly make the engine issue a parser warning + var invalidTests = { + '-5s': true, + '-500ms': true, + 'foobar': true + }; + + for (var key in values) { + if (Object.prototype.hasOwnProperty.call(values, key)) { + test(function() { + setStyle('#transition', { + 'transition-duration': key + }); + var result = computedStyle(transition, 'transition-duration'); + assert_equals(result, values[key], "Expected computed value"); + }, "parse '" + key + "'", + { + // mark tests that fail as such + flags: invalidTests[key] ? "invalid" : "" + }); + } + } + </script> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-calc-support-pct.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-calc-support-pct.xht new file mode 100644 index 00000000000..35b5a772f90 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-calc-support-pct.xht @@ -0,0 +1,36 @@ +<!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 Values and Units Test: + Viewport units are supported inside calc expressions. + </title> + <meta content=" + Check that viewport units add correctly to percentages in calc() expressions + " name="assert" /> + + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#calc" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; } + #target { position: absolute; background: green; width: calc(100vw + 50%); height: calc(100vh + 50%); top: -50%; left: -50%; } + + </style> + +</head> +<body> + + <div id="target"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-calc-support.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-calc-support.xht new file mode 100644 index 00000000000..fcd8260fd4b --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-calc-support.xht @@ -0,0 +1,36 @@ +<!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 Values and Units Test: + Viewport units are supported inside calc expressions. + </title> + <meta content=" + Check that viewport units add correctly to pixels in calc() expressions + " name="assert" /> + + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <link href="http://www.w3.org/TR/css3-values/#calc" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; } + #target { position: absolute; background: green; width: calc(100vw + 50px); height: calc(100vh + 50px); top: -50px; left: -50px; } + + </style> + +</head> +<body> + + <div id="target"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-em-inherit.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-em-inherit.xht new file mode 100644 index 00000000000..a99faef4d30 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-em-inherit.xht @@ -0,0 +1,34 @@ +<!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 Values and Units Test: + 0vh and 0vw are correctly treated as 0px + </title> + <meta content=" + 0vh and 0vw are correctly treated as 0px + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; font-size: 100vw; } + #target { background: green; width: 1rem; height: 1em; font-size: 100vh; } + + </style> + +</head> +<body> + + <div id="target"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-inherit.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-inherit.xht new file mode 100644 index 00000000000..df89a9c338f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-inherit.xht @@ -0,0 +1,35 @@ +<!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 Values and Units Test: + Viewport units are inherited properly + </title> + <meta content=" + Viewport units are inherited properly + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: red; } + #outer { position: relative; background: green; width: 50vw; height: 100vh; } + #inner { position: absolute; background: green; left: 100%; width: inherit; height: inherit; } + + </style> + +</head> +<body> + + <div id="outer"><div id="inner"></div></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-interpolate-pct.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-interpolate-pct.xht new file mode 100644 index 00000000000..1e8c0b817bb --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-interpolate-pct.xht @@ -0,0 +1,41 @@ +<!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 Values and Units Test: + Viewport units are interpolated correctly + </title> + <meta content=" + The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw) + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + @keyframes anim { + from { width: 0%; height: 0%; } + to { width: 200vw; height: 200vh; } + } + + html, body { margin: 0px; padding: 0px; } + + html { background: red; overflow: hidden; } + #outer { position: relative; background: green; } + #outer { animation: anim 2000000s; animation-delay: -1000000s; } + + </style> + +</head> +<body> + + <div id="outer"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-interpolate-px.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-interpolate-px.xht new file mode 100644 index 00000000000..ec81223cbb4 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-interpolate-px.xht @@ -0,0 +1,41 @@ +<!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 Values and Units Test: + Viewport units are interpolated correctly + </title> + <meta content=" + The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw) + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + @keyframes anim { + from { width: 0px; height: 0px; } + to { width: 200vw; height: 200vh; } + } + + html, body { margin: 0px; padding: 0px; } + + html { background: red; overflow: hidden; } + #outer { position: relative; background: green; } + #outer { animation: anim 2000000s; animation-delay: -1000000s; } + + </style> + +</head> +<body> + + <div id="outer"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-interpolate-vh.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-interpolate-vh.xht new file mode 100644 index 00000000000..88aefecc347 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-interpolate-vh.xht @@ -0,0 +1,41 @@ +<!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 Values and Units Test: + Viewport units are interpolated correctly + </title> + <meta content=" + The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw) + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + @keyframes anim { + from { width: 75vw; height: 75vh; } + to { width: 125vw; height: 125vh; } + } + + html, body { margin: 0px; padding: 0px; } + + html { background: red; overflow: hidden; } + #outer { position: relative; background: green; } + #outer { animation: anim 2000000s; animation-delay: -1000000s; } + + </style> + +</head> +<body> + + <div id="outer"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-atviewport.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-atviewport.xht new file mode 100644 index 00000000000..e089fd664d4 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-atviewport.xht @@ -0,0 +1,37 @@ +<!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 Values and Units Test: + Viewports units are supported in @viewport rules + </title> + <meta content=" + Viewports units are supported in @viewport rules + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <link href="https://drafts.csswg.org/css-device-adapt-1/" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; overflow: hidden; } + + @viewport { width: 1vw; } + + html { background: red; } + #target { background: green; width: 100vw; height: 100vh; } + + </style> + +</head> +<body> + + <div id="target"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-margin.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-margin.xht new file mode 100644 index 00000000000..5a41e1bc307 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-margin.xht @@ -0,0 +1,34 @@ +<!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 Values and Units Test: + Viewports units are supported in margin properties + </title> + <meta content=" + Viewports units are supported in margin properties + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: green; } + #target { background: red; width: 100%; height: 100%; margin-left: -100vw; margin-top: -100vh; } + + </style> + +</head> +<body> + + <div id="target"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-transform-origin.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-transform-origin.xht new file mode 100644 index 00000000000..6aea46f1810 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-transform-origin.xht @@ -0,0 +1,35 @@ +<!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 Values and Units Test: + Viewports units are supported in transform properties + </title> + <meta content=" + Viewports units are supported in transform properties + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <link href="http://www.w3.org/TR/css3-2d-transforms/#css-values" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; overflow: hidden; } + + html { background: green; } + iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; } + + </style> + +</head> +<body> + + <iframe src="iframe/vh-support-transform-origin.html"></iframe> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-transform-translate.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-transform-translate.xht new file mode 100644 index 00000000000..966eb4f4d5e --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support-transform-translate.xht @@ -0,0 +1,35 @@ +<!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 Values and Units Test: + Viewports units are supported in transform properties + </title> + <meta content=" + Viewports units are supported in transform properties (translate) + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <link href="http://www.w3.org/TR/css3-2d-transforms/#css-values" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; overflow: hidden; } + + html { background: green; } + iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; } + + </style> + +</head> +<body> + + <iframe src="iframe/vh-support-transform-translate.html"></iframe> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support.xht new file mode 100644 index 00000000000..68f7b65d36f --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-support.xht @@ -0,0 +1,32 @@ +<!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 Values and Units Test: + Viewports units are supported in sizing properties + </title> + <meta content=" + Viewports units are supported in sizing properties + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + #target { background: green; width: 100vw; height: 100vh; } + </style> + +</head> +<body> + + <div id="target"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-zero-support.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-zero-support.xht new file mode 100644 index 00000000000..1c304dd7916 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh-zero-support.xht @@ -0,0 +1,34 @@ +<!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 Values and Units Test: + 0vh and 0vw are correctly treated as 0px + </title> + <meta content=" + 0vh and 0vw are correctly treated as 0px + " name="assert" /> + + <link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" /> + + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + + <link href="reference/all-green.xht" rel="match" /> + + <style type="text/css"> + + html, body { margin: 0px; padding: 0px; } + + html { background: green; } + #target { background: red; width: 0vw; height: 0vh; } + + </style> + +</head> +<body> + + <div id="target"></div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh_not_refreshing_on_chrome.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh_not_refreshing_on_chrome.xht new file mode 100644 index 00000000000..61263c7baeb --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh_not_refreshing_on_chrome.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- Submitted from TestTWF Paris --><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Values and Units Test: vh-based dimension doesn't change when the element's other dimension doesn't change.</title> + <link href="mailto:marc@bourlon.com" rel="author" title="Marc Bourlon" /> + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <link href="reference/vh_not_refreshing_on_chrome-ref.xht" rel="match" /> + <meta content="vh-based dimension doesn't change when the element's other dimension doesn't change." name="assert" /> + <!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 --> + + <style type="text/css"> + + * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } + + #frameTest { width: 600px; height: 200px; border: 1px solid #000; } + + </style> + + <script type="text/javascript"> + var height = 200; + + function resizeReference() { + + var frameTest = document.getElementById('frameTest'); + + // let's resize the iframe vertically only, showing that the vh sizes is not updated. + if (height <= 300) { + + //frameTest.style.width = height++ + "px"; + frameTest.style.height = height++ + "px"; + + setTimeout(resizeReference, 10); + + } else { + + // uncomment the next line to see how a width resize triggers a layout recalculation + //frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px"; + + } + + } + + setTimeout(resizeReference, 10); + </script> + +</head> +<body> + +<iframe src="vh_not_refreshing_on_chrome_iframe.html" id="frameTest" frameborder="0"></iframe> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh_not_refreshing_on_chrome_iframe.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh_not_refreshing_on_chrome_iframe.xht new file mode 100644 index 00000000000..c655927ce3a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/vh_not_refreshing_on_chrome_iframe.xht @@ -0,0 +1,84 @@ +<!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"><!-- Submitted from TestTWF Paris --><head> + + <title>CSS Values and Units Test: vh-based dimension doesn't change when the element other dimension doesn't change.</title> + <meta content="vh-based dimension doesn't change when the element other dimension doesn't change. Bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8" name="assert" /> + <link href="mailto:marc@bourlon.com" rel="author" title="Marc Bourlon" /> + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units" /> + <link href="reference/vh_not_refreshing_on_chrome-ref.xht" rel="match" /> + + <style type="text/css"> + + * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } + + /* the first test box has its vertical dimension is set to some vh units */ + #testBoxWithVhOnly { background: #F00; width: 60px; height: 20vh; float: left; } + + /* the second test box, with fixed height */ + #testBoxNotGrownHorizontallyByJS { background: #F0F; width: 20vh; height: 60px; float: left; } + + /* third box, changed by using CSS transition */ + #testBoxWithTransition { background: #FF0; width: 20vh; height: 40px; float: left; + transition-property: width, height; + transition-duration: 1.5s; + transition-delay: 0; + } + + /* the reference box, growing in both directions (height by js, width by vh unit */ + #referenceBoxGrownHorizontallyByJS { background: #0F0; width: 20vh; height: 40px; float: left; } + + p { clear: both; margin: 10px 0; } + + </style> + +</head> +<body> + +<p> + All boxes should end up the same size. The green box is the reference one. +</p> + +<div id="testBoxWithVhOnly"></div> +<div id="testBoxNotGrownHorizontallyByJS"></div> +<div id="testBoxWithTransition"></div> +<div id="referenceBoxGrownHorizontallyByJS"></div> + +<script type="text/javascript"> + + // In case this file was opened by mistake, redirects to proper test + if (window.top.location.href === document.location.href) { + + window.top.location.href = "vh_not_refreshing_on_chrome.html"; + + } + + function setDimension(id, dimension, value) { + + var element = document.getElementById(id); + + element.style[dimension] = value + "px"; + + } + + function animate() { + + var viewportHeight = document.documentElement.clientHeight; + + var sizeH = 20; + + var referenceDimension = Math.round(sizeH * viewportHeight / 100); + + setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension); + + setTimeout(animate, 20); + } + + setTimeout(animate, 20); + + var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style; + transitionedTestBoxStyle.height = "60px"; +</script> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/viewport-relative-lengths-scaled-viewport.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/viewport-relative-lengths-scaled-viewport.xht new file mode 100644 index 00000000000..cf260482f8a --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/viewport-relative-lengths-scaled-viewport.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><!-- Submitted from TestTWF Paris --><head> + <title>CSS Values and Units Test: Viewport units in scaled viewport</title> + <meta content="viewport relative units scale with viewport." name="assert" /> + <link href="mailto:eae@chromium.org" rel="author" title="Emil A Eklund" /> + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + iframe { border: 0; } + </style> + </head> + <body> + <div id="log"></div> + <iframe src="javascript:void(0)" id="testFrame"></iframe> + <script> + test(function() { + var frameElement = document.getElementById('testFrame'); + var frameDocument = frameElement.contentDocument; + + var testElement = frameDocument.createElement('div'); + testElement.style.width = '50vw'; + testElement.style.height = '50vh'; + testElement.style.position = 'absolute'; + testElement.style.left = '0'; + testElement.style.top = '0'; + testElement.style.backgroundColor = 'black'; + frameDocument.body.appendChild(testElement); + + var frameWidth = frameElement.getBoundingClientRect().width; + var frameHeight = frameElement.getBoundingClientRect().height; + for (var i = 1; i <= 200; i++) { + var scale = i / 100; + frameDocument.body.style.transform = 'scale(' + scale + ')'; + var rect = testElement.getBoundingClientRect(); + var actualWidth = rect.width; + var actualHeight = rect.height; + var expectedWidth = frameWidth * scale / 2; + var expectedHeight = frameHeight * scale / 2; + + assert_approx_equals(actualWidth, expectedWidth, 0.1, '50vw at ' + scale + ' scale'); + assert_approx_equals(actualHeight, expectedHeight, 0.1, '50vh at ' + scale + ' scale'); + } + }, 'viewport relative units in scaled viewport'); + </script> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-values-3_dev/xhtml1/viewport-units-css2-001.xht b/tests/wpt/css-tests/css-values-3_dev/xhtml1/viewport-units-css2-001.xht new file mode 100644 index 00000000000..4feb0c35bf2 --- /dev/null +++ b/tests/wpt/css-tests/css-values-3_dev/xhtml1/viewport-units-css2-001.xht @@ -0,0 +1,255 @@ +<!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 Values and Units Test: + Checks viewport units against CSS 2.1 properties and the CSSOM + </title> + <meta content="Testing what happens when one applies and rereads viewport unit lengths to CSS 2.1 properties that accept length values" name="assert" /> + + <link href="mailto:schaepp@gmx.de" rel="author" title="Christian Schaefer" /> + + <!-- You must have at least one spec link, but may have as many as are covered in the test. --> + <!-- Be sure to make the main testing area first in the order --> + <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" /> + + <!-- testharness inclusion for later submission --> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + + <!-- testharness fallback for local testing --> + <script> + window.test || document.write('\ + <script src="http://www.w3c-test.org/resources/testharness.js"><\/script>\ + <script src="http://www.w3c-test.org/resources/testharnessreport.js"><\/script>\ + '); + </script> + + <style> + + #div { + position: relative; + width: 50vw; + height: 10vw; + background: green; + border: 0 green solid; + font-size: 4vw; + } + + #table td { + border: 1px solid green; + } + + </style> + +</head> +<body> + <div id="log"></div> + + <p> + Checks viewport units. Also re-check with zoom in/out. + </p> + + <div id="div"> + Test the Web Forward! + </div> + + <table id="table"> + <tbody> + <tr> + <td id="td">Test</td> + <td>T</td> + <td>W</td> + <td>F</td> + </tr> + </tbody> + </table> + + <script> + + /* Boilerplate code */ + + var camelize = function (str) { + return str.replace(/\-(\w)/g, function(str, letter){ + return letter.toUpperCase(); + }); + }; + + var retrieveComputedStyle = function(element,property){ + var result = + document + .defaultView + .getComputedStyle(element,null) + .getPropertyValue(property); + + // If there are multiple values, cut down to the first + result = result.split(' ')[0]; + + if(window.console) console.log('Retrieving ' + property + ' property. Result: ' + result); + + return result; + } + + var testit = function(element,vunit,property,expectedResult){ + + element.style[camelize(property)] = '0px'; + element.style[camelize(property)] = lengthAmount + vunit; + + if(window.console) console.log(element.nodeName.toLowerCase() + '.style.' + camelize(property) + ' = ' + lengthAmount + vunit); + + var result = retrieveComputedStyle(element,property); + + // Test against WebKit's getComputedStyle bug, where it does not return absolute values + // As required here: http://www.w3.org/TR/1998/REC-CSS2-19980512/cascade.html#computed-value + // If it returns a pixel value, but this value is 0px then it is considered a fail, too. + var px_result = result.search(/^[-\d\.]+px$/) !== -1 && result !== '0px' ? 'non-zero px-based value' : result; + + // If browser returns pixel value, we compare against our expected pixel value + if(px_result === 'non-zero px-based value'){ + test(function(){ + assert_equals(Math.round(parseFloat(result.replace(/[^-\d\.]+/g,''))),expectedResult); + },vunit + ' length applied to ' + property); + } + // If not, we compare against the value we set initially + else { + test(function(){ + assert_equals(result,lengthAmount + vunit); + },vunit + ' length applied to ' + property); + } + + // Does the browser have a bug in getComputedStyle or not? + test(function(){ + assert_equals(px_result,'non-zero px-based value'); + },vunit + ' length applied to ' + property + ': getComputedStyle returns a non-zero px-based value'); + + element.style[camelize(property)] = ''; + } + + var lengthAmount = 10; + var layoutViewportWidth = document.documentElement.clientWidth; + var layoutViewportHeight = document.documentElement.clientHeight; + + var viewportUnits = [ + { + ident: 'vw', + expectedResult: Math.round(layoutViewportWidth * (lengthAmount / 100)) + } + ,{ + ident: 'vh', + expectedResult: Math.round(layoutViewportHeight * (lengthAmount / 100)) + } + ,{ + ident: 'vmin', + expectedResult: layoutViewportWidth &lt; layoutViewportHeight ? Math.round(layoutViewportWidth * (lengthAmount / 100)) : Math.round(layoutViewportHeight * (lengthAmount / 100)) + } + ,{ + ident: 'vmax', + expectedResult: layoutViewportWidth &gt; layoutViewportHeight ? Math.round(layoutViewportWidth * (lengthAmount / 100)) : Math.round(layoutViewportHeight * (lengthAmount / 100)) + } + ] + + // List of length accepting properties and which element they map to + // http://www.w3.org/TR/CSS21/propidx.html + var lengthAcceptingProperties = [ + { + name: 'width', + element: 'div' + } + ,{ + name: 'height', + element: 'div' + } + ,{ + name: 'min-width', + element: 'div' + } + ,{ + name: 'min-height', + element: 'div' + } + ,{ + name: 'max-width', + element: 'div' + } + ,{ + name: 'max-height', + element: 'div' + } + ,{ + name: 'margin-top', + element: 'div' + } + ,{ + name: 'padding-top', + element: 'div' + } + ,{ + name: 'border-top-width', + element: 'div' + } + ,{ + name: 'font-size', + element: 'div' + } + ,{ + name: 'line-height', + element: 'div' + } + ,{ + name: 'border-spacing', + element: 'table' + } + ,{ + name: 'top', + element: 'div' + } + ,{ + name: 'right', + element: 'div' + } + ,{ + name: 'bottom', + element: 'div' + } + ,{ + name: 'left', + element: 'div' + } + ,{ + name: 'letter-spacing', + element: 'div' + } + ,{ + name: 'text-indent', + element: 'div' + } + ,{ + name: 'vertical-align', + element: 'td' + } + ,{ + name: 'word-spacing', + element: 'div' + } + ]; + + var div = document.getElementById('div'); + var table = document.getElementById('table'); + var td = document.getElementById('td'); + + for(unitEntry in viewportUnits){ + for(propertyEntry in lengthAcceptingProperties){ + + var vunit = viewportUnits[unitEntry].ident; + var expectedResult = viewportUnits[unitEntry].expectedResult; + var property = lengthAcceptingProperties[propertyEntry].name; + var element = window[lengthAcceptingProperties[propertyEntry].element]; + + testit(element,vunit,property,expectedResult); + } + } + + </script> + + +</body></html>
\ No newline at end of file |
