diff options
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/visufx')
106 files changed, 3465 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/visufx/animation/visibility-interpolation.html b/testing/web-platform/tests/css/CSS2/visufx/animation/visibility-interpolation.html new file mode 100644 index 0000000000..683b393a9c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/animation/visibility-interpolation.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>visibility interpolation</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/visufx.html#visibility"> +<meta name="assert" content="visibility supports"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_interpolation({ + property: 'visibility', + from: 'visible', + to: 'visible' +}, [ + {at: -1, expect: 'visible'}, + {at: 0, expect: 'visible'}, + {at: 0.5, expect: 'visible'}, + {at: 1, expect: 'visible'}, + {at: 1.5, expect: 'visible'}, +]); + +test_interpolation({ + property: 'visibility', + from: 'visible', + to: 'hidden' +}, [ + {at: -1, expect: 'visible'}, + {at: 0, expect: 'visible'}, + {at: 0.1, expect: 'visible'}, + {at: 0.9, expect: 'visible'}, + {at: 1, expect: 'hidden'}, + {at: 1.5, expect: 'hidden'}, +]); + +test_interpolation({ + property: 'visibility', + from: 'hidden', + to: 'visible' +}, [ + {at: -1, expect: 'hidden'}, + {at: 0, expect: 'hidden'}, + {at: 0.1, expect: 'visible'}, + {at: 0.9, expect: 'visible'}, + {at: 1, expect: 'visible'}, + {at: 1.5, expect: 'visible'}, +]); + +test_interpolation({ + property: 'visibility', + from: 'collapse', + to: 'visible' +}, [ + {at: -1, expect: 'collapse'}, + {at: 0, expect: 'collapse'}, + {at: 0.1, expect: 'visible'}, + {at: 0.9, expect: 'visible'}, + {at: 1, expect: 'visible'}, + {at: 1.5, expect: 'visible'}, +]); + +test_no_interpolation({ + property: 'visibility', + from: 'collapse', + to: 'hidden' +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-001.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-001.xht new file mode 100644 index 0000000000..0c1b9a08e0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-001.xht @@ -0,0 +1,64 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: clip - auto value</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Vasil Dinkov" href="http://www.vadikom.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta content="dom" name="flags" /> + <meta content="An element must not clip when clip is set to auto." name="assert" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + + <style type="text/css"><![CDATA[ + #red-overlapped-layer + { + background-color: red; + height: 100px; + position: absolute; + width: 100px; + } + + #red-parent + { + background-color: red; + clip: rect(0, 1px, 1px, 0); + height: 2px; + position: absolute; + width: 2px; + } + + #green-child + { + background-color: green; + height: 100px; + width: 100px; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function startTest() + { + document.getElementById("red-parent").style.clip = "auto"; + } + ]]></script> + + </head> + + <body onload="startTest();"> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="red-overlapped-layer"></div> + + <div id="red-parent"> + <div id="green-child"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-004.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-004.xht new file mode 100644 index 0000000000..ac9d3cc5a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-004.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: Clip using pixels with a negative zero value, -0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a negative zero value, in pixels, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(-0px, -0px, -0px, -0px); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-005.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-005.xht new file mode 100644 index 0000000000..fbe4b45612 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-005.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: Clip using pixels with a zero value, 0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in pixels, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(0px, 0px, 0px, 0px); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-006.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-006.xht new file mode 100644 index 0000000000..7e3e89c817 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-006.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: Clip using pixels with a zero value, +0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in pixels, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+0px, +0px, +0px, +0px); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-007.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-007.xht new file mode 100644 index 0000000000..e3f7f92206 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-007.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: Clip using pixels with a nominal value, 96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a value of ninety-six pixels, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(96px, 96px, 96px, 96px); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-008.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-008.xht new file mode 100644 index 0000000000..a6b88263bc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-008.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: Clip using pixels with a positive nominal value, +96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a value of ninety-six pixels, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+96px, +96px, +96px, +96px); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-016.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-016.xht new file mode 100644 index 0000000000..d53a95f538 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-016.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: Clip using points with a negative zero value, -0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a negative zero value, in points, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(-0pt, -0pt, -0pt, -0pt); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-017.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-017.xht new file mode 100644 index 0000000000..4b390046b3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-017.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: Clip using points with a zero value, 0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in points, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(0pt, 0pt, 0pt, 0pt); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-018.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-018.xht new file mode 100644 index 0000000000..9f9b379eb2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-018.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: Clip using points with a zero value, +0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in points, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+0pt, +0pt, +0pt, +0pt); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-019.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-019.xht new file mode 100644 index 0000000000..2aad6d08b5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-019.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: Clip using points with a nominal value, 72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a of seventy-two points for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(72pt, 72pt, 72pt, 72pt); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-020.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-020.xht new file mode 100644 index 0000000000..d7fc41eb1c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-020.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: Clip using points with a positive nominal value, +72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a of seventy-two points for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+72pt, +72pt, +72pt, +72pt); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-028.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-028.xht new file mode 100644 index 0000000000..518400140e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-028.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: Clip using picas with a negative zero value, -0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a negative zero value, in picas, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(-0pc, -0pc, -0pc, -0pc); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-029.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-029.xht new file mode 100644 index 0000000000..4bd852ceff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-029.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: Clip using picas with a zero value, 0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in picas, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(0pc, 0pc, 0pc, 0pc); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-030.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-030.xht new file mode 100644 index 0000000000..413b344cca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-030.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: Clip using picas with a zero value, +0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in picas, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+0pc, +0pc, +0pc, +0pc); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-031.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-031.xht new file mode 100644 index 0000000000..4d49739226 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-031.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: Clip using picas with a nominal value, 6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a of six picas for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(6pc, 6pc, 6pc, 6pc); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-032.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-032.xht new file mode 100644 index 0000000000..22677f35cb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-032.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: Clip using picas with a positive nominal value, +6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a of six picas for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+6pc, +6pc, +6pc, +6pc); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-040.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-040.xht new file mode 100644 index 0000000000..038bf639b8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-040.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: Clip using centimeters with a negative zero value, -0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a negative zero value, in centimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(-0cm, -0cm, -0cm, -0cm); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-041.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-041.xht new file mode 100644 index 0000000000..61a9d0fd9b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-041.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: Clip using centimeters with a zero value, 0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in centimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(0cm, 0cm, 0cm, 0cm); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-042.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-042.xht new file mode 100644 index 0000000000..46b70fadca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-042.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: Clip using centimeters with a zero value, +0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in centimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+0cm, +0cm, +0cm, +0cm); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-043.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-043.xht new file mode 100644 index 0000000000..8d6c46b32c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-043.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: Clip using centimeters with a nominal value, 2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a value of 2.54 centimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(2.54cm, 2.54cm, 2.54cm, 2.54cm); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-044.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-044.xht new file mode 100644 index 0000000000..3d871b72e0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-044.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: Clip using centimeters with a positive nominal value, +2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a value of 2.54 centimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+2.54cm, +2.54cm, +2.54cm, +2.54cm); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-052.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-052.xht new file mode 100644 index 0000000000..351aa81afc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-052.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: Clip using millimeters with a negative zero value, -0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a negative zero value, in millimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(-0mm, -0mm, -0mm, -0mm); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-053.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-053.xht new file mode 100644 index 0000000000..e8301d10d8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-053.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: Clip using millimeters with a zero value, 0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in millimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(0mm, 0mm, 0mm, 0mm); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-054.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-054.xht new file mode 100644 index 0000000000..f16375a99e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-054.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: Clip using millimeters with a zero value, +0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in millimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+0mm, +0mm, +0mm, +0mm); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-055.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-055.xht new file mode 100644 index 0000000000..c42933e081 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-055.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: Clip using millimeters with a nominal value, 25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a value of 25.4 millimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(25.4mm, 25.4mm, 25.4mm, 25.4mm); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-056.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-056.xht new file mode 100644 index 0000000000..64ff07ab23 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-056.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: Clip using millimeters with a positive nominal value, +25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a value of 25.4 millimeters, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+25.4mm, +25.4mm, +25.4mm, +25.4mm); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-064.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-064.xht new file mode 100644 index 0000000000..1bab7064fe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-064.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: Clip using inches with a negative zero value, -0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a negative zero value, in inches, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(-0in, -0in, -0in, -0in); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-065.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-065.xht new file mode 100644 index 0000000000..970bd3582d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-065.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: Clip using inches with a zero value, 0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in inches, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(0in, 0in, 0in, 0in); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-066.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-066.xht new file mode 100644 index 0000000000..9d44330cc4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-066.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: Clip using inches with a zero value, +0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value, in inches, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+0in, +0in, +0in, +0in); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-067.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-067.xht new file mode 100644 index 0000000000..817f3b4a67 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-067.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: Clip using inches with a nominal value, 1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a value, in inches, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(1in, 1in, 1in, 1in); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-068.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-068.xht new file mode 100644 index 0000000000..55dbe85dbd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-068.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: Clip using inches with a positive nominal value, +96in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a value, in inches, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+96in, +96in, +96in, +96in); + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-076.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-076.xht new file mode 100644 index 0000000000..176df20f9b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-076.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: Clip using 'em' units with a negative zero value, -0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a negative zero value, in 'em' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(-0em, -0em, -0em, -0em); + font: 20px/1 Ahem; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-077.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-077.xht new file mode 100644 index 0000000000..a85621e1d4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-077.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: Clip using 'em' units with a zero value, 0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a zero value, in 'em' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(0em, 0em, 0em, 0em); + font: 20px/1 Ahem; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-078.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-078.xht new file mode 100644 index 0000000000..e21f74a8a2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-078.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: Clip using 'em' units with a positive zero value, +0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a positive zero value, in 'em' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(+0em, +0em, +0em, +0em); + font: 20px/1 Ahem; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-079.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-079.xht new file mode 100644 index 0000000000..866f0b87a7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-079.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: Clip using 'em' units with a nominal value, 6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a value, in 'em' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(6em, 6em, 6em, 6em); + font: 20px/1 Ahem; + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-080.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-080.xht new file mode 100644 index 0000000000..3685000a49 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-080.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: Clip using 'em' units with a positive nominal value, +6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a value, in 'em' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(+6em, +6em, +6em, +6em); + font: 20px/1 Ahem; + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-088.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-088.xht new file mode 100644 index 0000000000..c5dd51ecff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-088.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: Clip using 'ex' units with a negative zero value, -0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a negative zero value, in 'ex' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(-0ex, -0ex, -0ex, -0ex); + font: 20px/1 Ahem; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-089.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-089.xht new file mode 100644 index 0000000000..5def0b9a3c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-089.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: Clip using 'ex' units with a zero value, 0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a zero value, in 'ex' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(0ex, 0ex, 0ex, 0ex); + font: 20px/1 Ahem; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-090.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-090.xht new file mode 100644 index 0000000000..c9b8b44402 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-090.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: Clip using 'ex' units with a positive zero value, +0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a positive zero value, in 'ex' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(+0ex, +0ex, +0ex, +0ex); + font: 20px/1 Ahem; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-091.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-091.xht new file mode 100644 index 0000000000..afb687df52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-091.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: Clip using 'ex' units with a nominal value, 7.5ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a value, in 'ex' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(7.5ex, 7.5ex, 7.5ex, 7.5ex); + font: 20px/1 Ahem; + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-092.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-092.xht new file mode 100644 index 0000000000..10377c0ded --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-092.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: Clip using 'ex' units with a positive nominal value, +7.5ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'clip' property sets a value, in 'ex' units, for all sides of the clipping rectangle." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + clip: rect(+7.5ex, +7.5ex, +7.5ex, +7.5ex); + font: 20px/1 Ahem; + height: 3in; + position: absolute; + width: 3in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-097.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-097.xht new file mode 100644 index 0000000000..ac547dafb7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-097.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: Clip with a negative zero value with no units, -0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a negative zero value and no units, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(-0, -0, -0, -0); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-098.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-098.xht new file mode 100644 index 0000000000..58fab32a23 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-098.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: Clip with a zero value with no units, 0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a zero value and no units, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(0, 0, 0, 0); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-099.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-099.xht new file mode 100644 index 0000000000..5c0e77bc28 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-099.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: Clip with a positive zero value with no units, +0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property sets a positive zero value and no units, for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + background: red; + clip: rect(+0, +0, +0, +0); + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-100.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-100.xht new file mode 100644 index 0000000000..b8ec413d99 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-100.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: Clip using the 'rect()' function and specifying all values as 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <meta name="assert" content="The 'clip' property sets an 'auto' value for all sides of the clipping rectangle." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: red; + } + div div + { + background: green; + clip: rect(auto, auto, auto, auto); + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there is a green box visible and there is no red visible on the page.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-101.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-101.xht new file mode 100644 index 0000000000..07787fcb13 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-101.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: Clip specifying only the value 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <meta name="assert" content="The 'clip' properly applies the value of 'auto'." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: red; + } + #div2 + { + background: green; + clip: auto; + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there is a green box visible and there is no red visible on the page.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-102.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-102.xht new file mode 100644 index 0000000000..4cb0dbe7a6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-102.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: Clip with the value 'inherit'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'clip' property set to 'inherit' properly inherits the appropriate value for the parent element." /> + <style type="text/css"> + #div1 + { + clip: rect(0, 0, 0, 0); + } + #div2 + { + background: red; + clip: inherit; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-inherit-001.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-inherit-001.xht new file mode 100644 index 0000000000..9e8c6fd188 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-inherit-001.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: clip: Inheriting 'auto' arguments of rect()</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping"/> + <meta name="assert" content="The 'auto' keywords in rect() resolve to a + used (not computed) value that aligns them with the border edges."/> + <style type="text/css"> + .container { + position: relative; + width: 100px; height: 100px; + background: red; } + #outer { + position: absolute; + top: 50px; left: 50px; + clip: rect(-50px, auto, auto, -50px); + height: 40px; width: 40px; + border: solid 5px transparent; } + #inner { + position: absolute; + top: -55px; left: -55px; + width: 60px; height: 60px; + border: solid 20px green; + background: green; clip: inherit; } + </style> + + </head> + <body> + <p>There must be a green box below and no red.</p> + <div class="container"> + <div id="outer"> + <div id="inner"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-non-absolute-001.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-non-absolute-001.xht new file mode 100644 index 0000000000..b78039ba69 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-non-absolute-001.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: Clip on non-positioned element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <meta name="assert" content="Clip does not apply to non-positioned elements." /> + <style type="text/css"> + div + { + clip: rect(10px, 25px, 50px, 10px); + color: green; + } + </style> + </head> + <body> + <p>Test passes if there are the words "Filler Text" below.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-rect-001.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-rect-001.xht new file mode 100644 index 0000000000..e342d29109 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-rect-001.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: clip: Missing commas in rect()</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping"/> + <meta name="flags" content="invalid may"/> + <meta name="assert" content="User agents may support separation of values + within rect() by whitespace instead of commas, but not a combination of + whitespace and commas."/> + <style type="text/css"> + div { + background: red; + width: 100px; height: 100px; + } + .inner { + position: absolute; + background: green; + clip: rect(0,0,0,0); + clip: rect( 0 auto auto 0 ); + clip: rect(0,0 0,0); + clip: rect(0 0,0,0); + clip: rect(0,0,0 0); + clip: rect(0 0,0 0); + } + </style> + + </head> + <body> + <p>There must be a green box below and no red.</p> + <div class="outer"> + <div class="inner"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clip-shape-001.xht b/testing/web-platform/tests/css/CSS2/visufx/clip-shape-001.xht new file mode 100644 index 0000000000..6199dc0c68 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clip-shape-001.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: Clip with other invalid shape</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <meta name="assert" content="A shape value other than 'rect()' is not supported." /> + <style type="text/css"> + div + { + clip: circle(10px, 25px); + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there are the words "Filler Text" below.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-001.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-001.xht new file mode 100644 index 0000000000..a493e53a57 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-001.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: 'clip': Basic Test</title> + <link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/clipping/001.html" type="text/html"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> +<style type="text/css"> +.green { + width: 200px; + height: 200px; + background-color: green; +} + +.red { + width: 100px; + height: 100px; + background-color: red; +} + +.clip { + position: absolute; + clip: rect(100px, 200px, 200px, 100px); +} +</style> +</head> +<body> + +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<div class="green clip"><div class="red"></div></div></body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-002.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-002.xht new file mode 100644 index 0000000000..e7507328d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-002.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: 'overflow': Basic Test</title> + <link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/clipping/002.html" type="text/html"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; +} + +.red { + width: 100px; + height: 100px; + background-color: red; + margin-top:100px; +} + +.overflow { + overflow: hidden; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<div class="green overflow"><div class="red"></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-003.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-003.xht new file mode 100644 index 0000000000..a687c142dd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-003.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Test: CSS test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; +} + +.red { + width: 100px; + height: 100px; + margin-top: 100px; + margin-left: 100px; + background-color: red; +} + +.overflow { + overflow: hidden; + width: 100px; + height: 100px; +} + +.positioned { + position: absolute; + left:150px; + top: 100px; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<div class="overflow"> +<div class="red"></div> +<div class="green positioned"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-004.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-004.xht new file mode 100644 index 0000000000..3a5209e40a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-004.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: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; +} + +.red { + width: 100px; + height: 100px; + margin-top: 100px; + margin-left: 100px; + background-color: red; +} + +.overflow { + overflow: hidden; +} + +.positioned { + position: absolute; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<!-- This test is checking to make sure overflow is done using a containing +block model. --> + +<div class="overflow green positioned"> +<div class="red"></div> +<div class="red positioned"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-005.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-005.xht new file mode 100644 index 0000000000..abc8d243dd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-005.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: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; +} + +.red { + width: 100px; + height: 100px; + margin-top: 100px; + margin-left: 100px; + background-color: red; +} + +.overflow { + overflow: hidden; +} + +.positioned { + position: relative; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<!-- This test is checking to make sure overflow is done using a containing +block model. --> + +<div class="overflow green positioned"> +<div class="red"></div> +<div class="red positioned"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-006.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-006.xht new file mode 100644 index 0000000000..9b292b2fdc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-006.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"> +<head> +<title>CSS Test: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; + left: 100px; + top: 70px; +} + +.red { + width: 100px; + height: 100px; + margin-top: 100px; + margin-left: 100px; + background-color: red; +} + +.overflow { + overflow: hidden; + width: 100px; + height: 100px; +} + +.positioned { + position: fixed; +} +</style> +</head> +<body> + +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<!-- This test is checking to make sure overflow is done using a containing +block model, and that a fixed positioned element inside another fixed positioned +element is not considered overflow. --> + +<div class="overflow positioned"> +<div class="red"></div> +<div class="green positioned"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-007.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-007.xht new file mode 100644 index 0000000000..24905ec930 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-007.xht @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<style type="text/css"> +div { + width: 100px; + height: 100px; +} + +.green { + background-color: green; +} + +.red { + background-color: red; +} + +.overflow { + overflow: hidden; +} + +.positioned { + position: absolute; +} + +.fixed { + position: fixed; + left: 100px; + top: 100px; +} + +.offset { + left: 100px; + top: 100px; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> +<!-- This test is checking to make sure overflow is done using a containing +block model, and that a fixed positioned element inside an absolute positioned +element is not considered overflow. --> + +<div class="overflow positioned"> + <div class="fixed"> + <div class="offset green positioned"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-008.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-008.xht new file mode 100644 index 0000000000..1598b2985e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-008.xht @@ -0,0 +1,56 @@ +<!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: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> + +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> +<style type="text/css"> +div { + width: 100px; + height: 100px; +} + +.green { + background-color: green; +} + +.red { + background-color: red; +} + +.overflow { + overflow: hidden; +} + +.positioned { + position: absolute; +} + +.fixed { + position: fixed; + left: 100px; + top: 100px; +} + +.offset { + margin-left: 100px; + margin-top: 100px; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + + <!-- This test is checking to make sure overflow is done using a containing +block model, and that a fixed positioned element inside an absolute positioned +element is not considered overflow. --> + +<div class="overflow positioned"> + <div class="fixed"> + <div class="offset green overflow"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-009.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-009.xht new file mode 100644 index 0000000000..0f19a2bba6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-009.xht @@ -0,0 +1,40 @@ +<!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> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; +} + +.red { + width: 100px; + height: 100px; + margin-top: 100px; + margin-left: 100px; + background-color: red; +} + +.clip { + clip: rect(0px 100px 100px 0px); +} + +.positioned { + position: absolute; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<!-- This test is checking to make sure clip is applying to all descendants. --> + +<div class="clip green positioned"> +<div class="red"></div> +<div class="red positioned"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-010.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-010.xht new file mode 100644 index 0000000000..329d63d33f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-010.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 Test: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; +} + +.red { + width: 100px; + height: 100px; + margin-top: 100px; + margin-left: 100px; + background-color: red; +} + +.clip { + clip: rect(0px 100px 100px 0px); +} + +.positioned { + position: fixed; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<!-- This test is checking to make sure clip is applying to all descendants. --> + +<div class="clip green positioned"> +<div class="red"></div> +<div class="red positioned"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-011.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-011.xht new file mode 100644 index 0000000000..51729a7cef --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-011.xht @@ -0,0 +1,46 @@ +<!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: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; +} + +.red { + width: 100px; + height: 100px; + margin-top: 100px; + margin-left: 100px; + background-color: red; +} + +.clip { + clip: rect(0px 100px 100px 0px); +} + +.positioned { + position: fixed; +} + +.overflow { + overflow: hidden; +} + +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<!-- This test is checking to make sure clip is applying to all descendants. --> + +<div class="clip green positioned"> +<div class="red"></div> +<div class="red overflow"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-012.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-012.xht new file mode 100644 index 0000000000..6fd6a20fb3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-012.xht @@ -0,0 +1,46 @@ +<!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: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> + +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; +} + +.red { + width: 100px; + height: 100px; + margin-top: 100px; + margin-left: 100px; + background-color: red; +} + +.clip { + clip: rect(0px 100px 100px 0px); +} + +.positioned { + position: absolute; +} + +.overflow { + overflow: hidden; +} + +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> +<!-- This test is checking to make sure clip is applying to all descendants. --> + +<div class="clip green positioned"> +<div class="red"></div> +<div class="red overflow"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-013.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-013.xht new file mode 100644 index 0000000000..008247f664 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-013.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: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> +<style type="text/css"> +.green { + width: 100px; + height: 100px; + background-color: green; + border: 10px solid red; +} + +.clip { + clip: rect(10px 110px 110px 10px); +} + +.positioned { + position: absolute; +} +p +{ + height: 40px; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> +<!-- This test is checking to make sure clip applies to the element itself +and starts from the border edge. --> + +<div class="clip green positioned"> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-014.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-014.xht new file mode 100644 index 0000000000..291d8ab315 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-014.xht @@ -0,0 +1,44 @@ +<!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: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> +<style type="text/css"> +.green { + width: 100px; + height: 200px; + background-color: green; + border: 10px solid red; +} + +.clip { + clip: rect(10px 110px 110px 10px); +} + +.positioned { + position: absolute; + overflow: scroll; +} + +.tall { + height: 1000px; +} +p +{ + height: 40px; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<!-- This test is checking to make sure clip applies to the element itself, +starts from the border edge, and clips out scrollbars. The bottom +of the scrolling mechanism should be clipped. --> + +<div class="clip green positioned"> +<div class="tall"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-015.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-015.xht new file mode 100644 index 0000000000..f7bb82bc8d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-015.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"> +<head> +<title>CSS Test: CSS clipping test</title> +<link rel="author" title="David Hyatt" href="mailto:hyatt@netscape.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> +<style type="text/css"> +div { + width: 100px; + height: 100px; +} + +.green { + background-color: green; +} + +.red { + background-color: red; +} + +.absolute { + position: absolute; + top:100px; + left:100px; +} + +.relative { + position: relative; + top:100px; + left:100px; +} + +.overflow { + overflow: hidden; +} +</style> +</head> +<body> +<p>Test passes if there is <strong>a green square</strong> and <strong>no red</strong>.</p> + +<!-- This test makes sure overflow uses containing blocks when clipping. --> + +<div class="green overflow"> + <div class="red relative"> + <div class="absolute red"></div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-016.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-016.xht new file mode 100644 index 0000000000..a72870d8bd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-016.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: 'clip': Basic Test</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/clipping/016.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> +<style type="text/css"> +.clip { + width: 60px; + height: 60px; + background: url(support/60x60-gg-rr.png) no-repeat red; + position: absolute; + clip: rect(0px, 60px, 30px, 0px); +} +</style> +</head> +<body> + +<p>Test passes if there is <strong>a green rectangle</strong> and <strong>no red</strong>.</p> + +<div class="clip"></div></body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-017.xht b/testing/web-platform/tests/css/CSS2/visufx/clipping-017.xht new file mode 100644 index 0000000000..8bcdcff982 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-017.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" lang="en" xml:lang="en"> + <head> + <!-- Based on http://www.brothercake.com/Ref/clip.html --> + <title>CSS Test: Convoluted clip() test</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/clipping/017.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <style type="text/css"> + #test-outer { + width: 150px; height: 150px; border: 20px solid lime; background-color: teal; + position: absolute; left: 60px; top: 60px; clip: rect(0px, 100px, 100px, 0px); + } + #test-middle { + width: 250px; height: 150px; border: 10px solid fuchsia; background-color: red; + position: absolute; left: 0px; top: 0px; clip: rect(0px, 50px, 50px, 0px); + } + #test-inner { + width: 150px; height: 250px; border: 10px solid aqua; background-color: yellow; + } + p { margin: 20px; font: 20px/1 serif; } + #control-outer { + width: 80px; height: 80px; border: 20px lime; border-style: solid none none solid; background: teal; + margin: 20px 0 0 200px; + } + #control-middle { + width: 40px; height: 40px; border: 10px fuchsia; border-style: solid none none solid; background: red; + } + #control-inner { + width: 30px; height: 30px; border: 10px aqua; border-style: solid none none solid; background: yellow; + } + </style> + </head> + <body> + <p>The following two pictograms should look identical.</p> + <div id="test-outer"> + <div id="test-middle"> + <div id="test-inner"> + </div> + </div> + </div> + <div id="control-outer"> + <div id="control-middle"> + <div id="control-inner"> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/clipping-README b/testing/web-platform/tests/css/CSS2/visufx/clipping-README new file mode 100644 index 0000000000..a6072f592a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/clipping-README @@ -0,0 +1,7 @@ +Tests 001 to 015 courtesy of David Hyatt. +Tests 003 to 015 need validating and correcting. + +See also: + ../absolute/overflow/ + ../absolute/clip/ + ../../overflow/
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/overflow-006.xht b/testing/web-platform/tests/css/CSS2/visufx/overflow-006.xht new file mode 100644 index 0000000000..f00553c299 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/overflow-006.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: Floats and overflow</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/overflow/box/002.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> + <style type="text/css"> + p { color: green; } + .container { border: solid white; position: relative; } + .overflow { overflow: auto; color: yellow; background: red; height: 0; } + .float { float: left; background: red; color: yellow; width: 10em; } + .pass { background: white; color: black; width: 10em; } + .fail { background: black; position: absolute; top: 1em; } + </style> + </head> + <body> + <p>It should say "PASS" below:</p> + <div class="container"> + <div class="fail"> XXXX </div> + <div class="overflow"> <div class="float"> FAIL </div> FAIL </div> + <div class="pass"> PASS </div> <!-- the float should be contained inside the overflow block --> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/overflow-007.xht b/testing/web-platform/tests/css/CSS2/visufx/overflow-007.xht new file mode 100644 index 0000000000..8bc0a881ec --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/overflow-007.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: margin and overflow</title> + <link rel="author" title="Eira Monstad" href="mailto:eiram@opera.com"/> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/overflow/box/003.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + div.outer { width: 10em; height: 5em; overflow: scroll; + background: navy; border: 1px solid blue; } + div.inner { margin: 3em 0 3em 0; background: white; } + </style> + </head> + <body> + <p>Scroll to see the instructions:</p> + <div class="outer"> + <div class="inner"> + You should see the same amount of blue above and below this text. + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/overflow-008.xht b/testing/web-platform/tests/css/CSS2/visufx/overflow-008.xht new file mode 100644 index 0000000000..ae48ce5691 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/overflow-008.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: margin and overflow</title> + <link rel="author" title="Eira Monstad" href="mailto:eiram@opera.com"/> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/overflow/box/004.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + div.outer { width: 10em; height: 5em; overflow: auto; + background: navy; border: 1px solid blue; } + div.inner { margin: 3em 0 3em 0; background: white; } + </style> + </head> + <body> + <p>Scroll to see the instructions:</p> + <div class="outer"> + <div class="inner"> + You should see the same amount of blue above and below this text. + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/overflow-009.html b/testing/web-platform/tests/css/CSS2/visufx/overflow-009.html new file mode 100644 index 0000000000..c6bda8df8b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/overflow-009.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test (Overflow): body with overflow:hidden</title> + <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> + <link rel="help" href="https://www.w3.org/TR/CSS2/visufx.html#overflow"> + <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#propdef-overflow"> + <meta name="flags" content="interact"> + <meta name="assert" content="position:fixed layer should not be able to cause scrolling of body styled as overflow:hidden"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> +body { + /* what we're testing */ + overflow: hidden; +} +h1 { + /* bottom of #overlay-inner */ + position: absolute; + bottom: 0; + left: 0; +} +.margin-0 { + /* remove extra space */ + margin: 0; +} +.tall { + height: 100vh; + width: 100%; +} +#bad { + background-color: red; +} +#overlay { + overflow: auto; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +#overlay-inner { + position: relative;/* needed for the h1 */ + width: 60%;/* leave room for #bad to be visible */ + height: 150vh;/* force scroll */ + /* make this visually distinct */ + background-color: blue; + color: white; +} + </style> +</head> +<body class="margin-0"> + <div id="overlay"> + <div id="overlay-inner"> + <ol class="margin-0"> + <li>Scroll the blue square downward until you see the word "BOTTOM".</li> + <li>End your scrolling action/gesture. (e.g. Remove your finger from the touchscreen.)</li> + <li>Attempt to scroll the blue square further downward.</li> + <li>If you see any red, then the test result is FAILED. Otherwise, it is PASSED.</li> + </ol> + <h1 class="margin-0">BOTTOM</h1> + </div> + </div> + <div class="tall"></div> + <div id="bad" class="tall"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/overflow-applies-to-001-ref.xht b/testing/web-platform/tests/css/CSS2/visufx/overflow-applies-to-001-ref.xht new file mode 100644 index 0000000000..a8c54ab6d6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/overflow-applies-to-001-ref.xht @@ -0,0 +1,54 @@ +<!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 File</title> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + <style type="text/css"> + #container {width: 20em; background: green; text-align: center; + line-height: 1.2em} + + #child3 {display: inline} + #grandchild3 {width: 20em; height: 1.2em; background: green; + vertical-align: bottom} + + #child4 {table-layout: fixed; width: 20em; border-collapse: collapse} + #grandchild4 {width: 20em} + </style> + </head> + + <body> + + <p>There should be no red.</p> + + <div id="container"> + <div id="child1"> + <div id="grandchild1"> + Block 1 + </div> + </div> + + <div id="child2"> + <div id="grandchild2"> + Block 2 + </div> + </div> + + <div id="child3"> + <img id="grandchild3" src="support/1x1-green.png" alt="green" /> + </div> + + <table id="child4"> + <tr> + <td> + <div id="grandchild4"> + Block 4a + </div> + </td> + </tr> + <tr><td>Block 4b</td></tr> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/overflow-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/visufx/overflow-applies-to-001.xht new file mode 100644 index 0000000000..e63bb0ee0c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/overflow-applies-to-001.xht @@ -0,0 +1,72 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: What overflow applies to</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visufx.html#overflow" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.11.1.1a" /> + <link rel="match" href="overflow-applies-to-001-ref.xht" /> + <meta name="assert" content="Name: overflow [...] Applies to: +block containers and boxes that establish a formatting context" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + <style type="text/css"> + #container {width: 20em; background: red; text-align: center; + line-height: 1.2em} + + /* The visible overflow of grandchild1 hides the red container background */ + #child1 {width: 10em; overflow: visible} + #grandchild1 {width: 20em; background: green} + + /* The red border on grandchild2 is clipped by child2 */ + #child2 {width: 20em; background: green; overflow: hidden} + #grandchild2 {width: 20em; border-right: solid 1em red} + + /* Overflow (and width) don't apply to child3 and so grandchild3 is visible */ + #child3 {display: inline; width: 10em; overflow: hidden; background: red} + #grandchild3 {width: 20em; height: 1.2em; background: red; + vertical-align: bottom} + + /* Child4 establishes a formatting context and so can clip grandchild4 */ + #child4 {table-layout: fixed; width: 20em; border-collapse: collapse; + background: green; overflow: hidden} + #grandchild4 {width: 20em; background: green; border-right: solid 1em red; + margin-right: -1em} + </style> + </head> + + <body> + + <p>There should be no red.</p> + + <div id="container"> + <div id="child1"> + <div id="grandchild1"> + Block 1 + </div> + </div> + + <div id="child2"> + <div id="grandchild2"> + Block 2 + </div> + </div> + + <div id="child3"> + <img id="grandchild3" src="support/1x1-green.png" alt="Image download support must be enabled" /> + </div> + + <table id="child4"> + <tr> + <td> + <div id="grandchild4"> + Block 4a + </div> + </td> + </tr> + <tr><td>Block 4b</td></tr> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/overflow-propagation-001a.html b/testing/web-platform/tests/css/CSS2/visufx/overflow-propagation-001a.html new file mode 100644 index 0000000000..77107d8faf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/overflow-propagation-001a.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset=utf-8> +<title>Ensure that body propagates its scrollbars</title> +<link rel=match href="support/overflow-propagation-001-ref.html"> +<link rel=help href="https://www.w3.org/TR/CSS21/visufx.html#overflow-clipping"> +<body style="overflow: hidden; margin: 100px; width: 100px; height: 100px; border: 1px solid green; position: absolute; top: 0; left: 0"> + The body should have visible overflow of the text that totally doesn't fit + in the little box. +</body> diff --git a/testing/web-platform/tests/css/CSS2/visufx/overflow-propagation-001b.html b/testing/web-platform/tests/css/CSS2/visufx/overflow-propagation-001b.html new file mode 100644 index 0000000000..c72994b8c4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/overflow-propagation-001b.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset=utf-8> +<title>Ensure that body propagates its scrollbars</title> +<link rel=match href="support/overflow-propagation-001-ref.html"> +<link rel=help href="https://www.w3.org/TR/CSS21/visufx.html#overflow-clipping"> +<script> + onload = function() { + document.body.remove(); + var b = document.createElement("body"); + b.style = "overflow: hidden; margin: 100px; width: 100px; height: 100px; border: 1px solid green; position: absolute; top: 0; left: 0"; + b.textContent = "The body should have visible overflow of the text that totally doesn't fit in the little box."; + document.documentElement.appendChild(b); + } +</script> diff --git a/testing/web-platform/tests/css/CSS2/visufx/overflow-propagation-001c.html b/testing/web-platform/tests/css/CSS2/visufx/overflow-propagation-001c.html new file mode 100644 index 0000000000..6956ff4143 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/overflow-propagation-001c.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset=utf-8> +<title>Ensure that body propagates its scrollbars even if there is a preceding frameset</title> +<link rel=match href="support/overflow-propagation-001-ref.html"> +<link rel=help href="https://www.w3.org/TR/CSS21/visufx.html#overflow-clipping"> +<script> + onload = function() { + document.body.remove(); + var f = document.createElement("frameset"); + document.documentElement.appendChild(f); + var b = document.createElement("body"); + b.style = "overflow: hidden; margin: 100px; width: 100px; height: 100px; border: 1px solid green; position: absolute; top: 0; left: 0"; + b.textContent = "The body should have visible overflow of the text that totally doesn't fit in the little box."; + document.documentElement.appendChild(b); + } +</script> diff --git a/testing/web-platform/tests/css/CSS2/visufx/shape-spaces-001.xht b/testing/web-platform/tests/css/CSS2/visufx/shape-spaces-001.xht new file mode 100644 index 0000000000..0c98112612 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/shape-spaces-001.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: Clip with 'rect()' function values separated</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" /> + <meta name="flags" content="may" /> + <meta name="assert" content="User agent may also support separation of the 'rect()' function values 'top', 'right', 'bottom', and 'left' with spaces." /> + <style type="text/css"> + div + { + border: 10px solid green; + background: red; + clip: rect(5px 50px 8px 0); + color: yellow; + height: 100px; + position: absolute; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a single horizontal green line below and no red visible on the page.</p> + <div>FAIL</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/support/1x1-green.png b/testing/web-platform/tests/css/CSS2/visufx/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/support/1x1-green.png diff --git a/testing/web-platform/tests/css/CSS2/visufx/support/60x60-gg-rr.png b/testing/web-platform/tests/css/CSS2/visufx/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/CSS2/visufx/support/overflow-propagation-001-ref.html b/testing/web-platform/tests/css/CSS2/visufx/support/overflow-propagation-001-ref.html new file mode 100644 index 0000000000..f0693fbea2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/support/overflow-propagation-001-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<html style="overflow: hidden"> +<meta charset=utf-8> +<body style="margin: 100px; width: 100px; height: 100px; border: 1px solid green; position: absolute; top: 0; left: 0"> + The body should have visible overflow of the text that totally doesn't fit + in the little box. +</body> diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-001.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-001.xht new file mode 100644 index 0000000000..da8eb98a82 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-001.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 Test: Visibility set to 'collapse'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="A block with 'visibility' set to 'collapse' will not be rendered on the page but will still affect layout flow." /> + <style type="text/css"> + div + { + background: green; + width: 1in; + } + div div + { + height: 1in; + } + #div1 + { + background: red; + visibility: collapse; + } + #div2 + { + background: blue; + } + </style> + </head> + <body> + <p>Test passes if there is a green box above a blue box below.</p> + <div> + <div id="div1">FAIL FAIL</div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-002.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-002.xht new file mode 100644 index 0000000000..64dfd1cdc2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-002.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: Visibility set to 'hidden'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="A block with 'visibility' set to 'collapse' will not be rendered on the page but will still affect layout flow." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + } + #div2 + { + background: red; + visibility: hidden; + } + #div3 + { + background: blue; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange boxes below are not touching and there is no red visible on the page.</p> + <div id="div1"></div> + <div id="div2">FAIL FAIL</div> + <div id="div3"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-003.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-003.xht new file mode 100644 index 0000000000..39a0d344c3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-003.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: Visibility set to 'visible'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="A block with 'visibility' set to 'visible' will be rendered on the page." /> + <style type="text/css"> + div + { + background: green; + height: 100px; + visibility: visible; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a box below this line.</p> + <div>PASS PASS</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-004.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-004.xht new file mode 100644 index 0000000000..4347328b0c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-004.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: Visibility set to 'inherit'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="A block can inherit its 'visibility' behavior from its parent container." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + } + #div2 + { + visibility: hidden; + } + div div + { + background: red; + visibility: inherit; + } + #div3 + { + background: blue; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange boxes below are not touching and there is no red visible on the page.</p> + <div id="div1"></div> + <div id="div2"> + <div>FAIL FAIL</div> + </div> + <div id="div3"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-005.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-005.xht new file mode 100644 index 0000000000..90e4d1868d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-005.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> + + <title>CSS Test: visibility - descendants of a 'visibility: hidden' element</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/changes.html#q250" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Descendants of a 'visibility: hidden' element will be visible if they have 'visibility: visible'" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div {visibility: hidden;} + + span + { + color: red; + font: 100px/1 Ahem; + } + + span#testpassed + { + color: green; + visibility: visible; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div> + <span id="testpassed">X</span> <span>X</span> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-001.xht new file mode 100644 index 0000000000..e8ec005f0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-001.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Visibility applied to elements with 'display' set to 'table-row-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'table-row-group'." /> + <style type="text/css"> + #test + { + display: table-row-group; + visibility: hidden; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: red; + display: table-cell; + height: 1in; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-002.xht new file mode 100644 index 0000000000..d219f99732 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-002.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Visibility applied to elements with 'display' set to 'table-header-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'table-header-group'." /> + <style type="text/css"> + #test + { + display: table-header-group; + visibility: hidden; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: red; + display: table-cell; + height: 1in; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-003.xht new file mode 100644 index 0000000000..67a0a4b5fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-003.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Visibility applied to elements with 'display' set to 'table-footer-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'table-footer-group'." /> + <style type="text/css"> + #test + { + display: table-footer-group; + visibility: hidden; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: red; + display: table-cell; + height: 1in; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-004.xht new file mode 100644 index 0000000000..63c359ca04 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-004.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> + <title>CSS Test: Visibility applied to elements with 'display' set to 'table-row'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'table-row'." /> + <style type="text/css"> + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + visibility: hidden; + } + #cell + { + background: red; + display: table-cell; + height: 1in; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-005.xht new file mode 100644 index 0000000000..1d87d192a8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-005.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Visibility applied to elements with 'display' set to 'table-column-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'table-column-group'." /> + <style type="text/css"> + #test + { + display: table-column-group; + visibility: collapse; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: red; + display: table-cell; + height: 1in; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-006.xht new file mode 100644 index 0000000000..1964f13508 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-006.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Visibility applied to elements with 'display' set to 'table-column'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'table-column'." /> + <style type="text/css"> + #test + { + display: table-column; + visibility: collapse; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: red; + display: table-cell; + height: 1in; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-007.xht new file mode 100644 index 0000000000..8e83b6cace --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-007.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> + <title>CSS Test: Visibility applied to elements with 'display' set to 'table-cell'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'table-cell'." /> + <style type="text/css"> + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: red; + display: table-cell; + height: 1in; + visibility: hidden; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-008.xht new file mode 100644 index 0000000000..894fbea046 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-008.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: Visibility applied to elements with 'display' set to 'inline'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'inline'." /> + <style type="text/css"> + #div1 + { + background: red; + display: inline; + visibility: hidden; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="div1">Filler Text</div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-009.xht new file mode 100644 index 0000000000..710a73b6fa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-009.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: Visibility applied to elements with 'display' set to 'block'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'block'." /> + <style type="text/css"> + span + { + background: red; + display: block; + height: 1in; + visibility: hidden; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div> + <span></span> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-010.xht new file mode 100644 index 0000000000..9985641317 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-010.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 Test: Visibility applied to elements with 'display' set to 'list-item'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'list-item'." /> + <style type="text/css"> + div + { + margin-left: 2em; + } + #div1 + { + background: red; + color: red; + display: list-item; + height: 1in; + visibility: hidden; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="div1"></div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-012.xht new file mode 100644 index 0000000000..dd0efbc3aa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-012.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 Test: Visibility applied to elements with 'display' set to 'inline-block'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'inline-block'." /> + <style type="text/css"> + #div1 + { + background: red; + display: inline-block; + height: 1in; + visibility: hidden; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="div1"></div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-013.xht new file mode 100644 index 0000000000..f4d14e7df6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-013.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> + <title>CSS Test: Visibility applied to elements with 'display' set to 'table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'table'." /> + <style type="text/css"> + #table + { + display: table; + table-layout: fixed; + visibility: hidden; + } + #row + { + display: table-row; + } + #cell + { + background: red; + display: table-cell; + height: 1in; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-014.xht new file mode 100644 index 0000000000..d44dd8e423 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-014.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> + <title>CSS Test: Visibility applied to elements with 'display' set to 'inline-table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'inline-table'." /> + <style type="text/css"> + #table + { + display: inline-table; + table-layout: fixed; + visibility: hidden; + } + #row + { + display: table-row; + } + #cell + { + background: red; + display: table-cell; + height: 1in; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div class="box"></div> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + <div class="box"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-015.xht new file mode 100644 index 0000000000..e84118f816 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-applies-to-015.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Visibility applied to elements with 'display' set to 'table-caption'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="The 'visibility' property applies to elements with 'display' set to 'table-caption'." /> + <style type="text/css"> + #table + { + display: table; + } + #caption + { + background: red; + visibility: hidden; + display: table-caption; + height: 1in; + width: 1in; + } + #row + { + display: table-row; + } + #cell + { + background: black; + display: table-cell; + height: 1em; + width: 1in; + } + #box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is white space between the boxes below and there is no red visible on the page.</p> + <div id="box"></div> + <div id="table"> + <div id="caption"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-block-001.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-block-001.xht new file mode 100644 index 0000000000..945d85deaf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-block-001.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 Test: Visibility 'collapse' on non-table row or column elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <link rel="match" href="../reference/no-red-on-blank-page-ref.xht"/> + <meta name="assert" content="The 'visibility' property set to 'collapse' acts like 'hidden' when applied to non-table row or column elements." /> + <style type="text/css"> + div + { + visibility: collapse; + color: red; + } + </style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div>This test fails if this text is visible on the page.</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-collapse-001.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-collapse-001.xht new file mode 100644 index 0000000000..33ad2432ef --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-collapse-001.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Tables: Visibility</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/011.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#dynamic-effects"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility"/> + <meta name="flags" content="dom interact"/> + <style type="text/css"> + body { background: white; color: black; } + span[onclick] { text-decoration: underline; color: blue; cursor: pointer; } + span[onclick]:hover { color: red; } + .collapse { visibility: collapse; } + table { border-spacing: 1em; } + </style> + <script type="text/javascript"> + function toggle(element) { + element = document.getElementById(element); + if (element.className == '') { + element.className = 'collapse'; + } else { + element.className = ''; + } + } + </script> + </head> + <body> + <p>Toggle: <span onclick="toggle('col2')">Column 2</span> + <span onclick="toggle('col3')">Column 3</span> + <span onclick="toggle('row2')">Row 2</span> + <span onclick="toggle('row3')">Row 3</span></p> + <p>When column 3 is collapsed, row 3 shouldn't move up. When row 2 + is collapsed, column 3 shouldn't move left. However, when column 2 + is collapsed, column 3 should move left, and when row 2 is + collapsed, row 3 should move up.</p> + <table> + <colgroup><col/><col id="col2"/><col id="col3"/></colgroup> + <tr> + <td/> + <th onclick="toggle('col2')">Column 2</th> + <th onclick="toggle('col3')">Column 3</th> + </tr> + <tr id="row2"> + <th onclick="toggle('row2')">Row 2</th> + <td>Some really very long data</td> + <td>Some data<br/>on two lines</td> + </tr> + <tr id="row3"> + <th onclick="toggle('row3')">Row 3</th> + <td>Data</td> + <td>Yet more data</td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-descendants-001.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-descendants-001.xht new file mode 100644 index 0000000000..0d4a9bff59 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-descendants-001.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: Descendents of hidden elements can specify a different visibility</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="Descendents of a hidden element will be visible if they have 'visibility' set to 'visible'." /> + <style type="text/css"> + #div1 + { + border: 1px solid blue; + } + #div2 + { + color: red; + visibility: hidden; + } + div div div + { + color: green; + visibility: visible; + } + </style> + </head> + <body> + <p>Test passes if the content "Filler Text" is contained within the blue box and there is no red visible on the page.</p> + <div id="div1"> + <div id="div2"> + This test fails if this text is visible on the page. + <div>Filler Text</div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visufx/visibility-layout-001.xht b/testing/web-platform/tests/css/CSS2/visufx/visibility-layout-001.xht new file mode 100644 index 0000000000..4ecdf7cf9a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visufx/visibility-layout-001.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 Test: Hidden elements still affect layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility" /> + <meta name="assert" content="Invisible boxes still affect layout." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + } + #div2 + { + background: red; + visibility: hidden; + } + #div3 + { + background: blue; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange boxes below are not touching and there is no red visible on the page.</p> + <div id="div1"></div> + <div id="div2">FAIL FAIL</div> + <div id="div3"></div> + </body> +</html>
\ No newline at end of file |
