diff options
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/visuren')
94 files changed, 2881 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001a-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001a-ref.xht new file mode 100644 index 0000000000..e8a9a61ebb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001a-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + div + { + background-color: green; + height: 100px; + margin-left: 200px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001a.xht b/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001a.xht new file mode 100644 index 0000000000..4a578e1950 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001a.xht @@ -0,0 +1,71 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Percent height inside anonymous block</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/visuren.html#anonymous-block-level" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="match" href="anonymous-boxes-001a-ref.xht" /> + + <meta content="ahem image" name="flags" /> + <meta content="Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + div#overlapped-red + { + background-color: red; + height: 100px; + left: 208px; + /* + 8px : body's margin-left + + + 160px : 4 characters of "Some" 40px wide each + + + 40px : one blank white space of 40px wide + -------------------------------------------------- + 208px + */ + position: absolute; + width: 100px; + z-index: -1; + } + + div#closest-non-anonymous-ancestor + { + color: white; + font: 2.5em/1.25 Ahem; /* equivalent to 40px/50px in absolute units */ + height: 200px; + } + + img#child-of-anonymous-block-box {height: 50%;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="overlapped-red"></div> + + <div id="closest-non-anonymous-ancestor">Some <img id="child-of-anonymous-block-box" src="support/1x1-green.png" alt="Image download support must be enabled" /> text + <p>More text</p> + </div> + + <!-- + For example, if the child of the anonymous block box inside the DIV + above needs to know the height of its containing block to resolve a + percentage height, then it will use the height of the containing + block formed by the DIV, not of the anonymous block box. + --> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001b-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001b-ref.xht new file mode 100644 index 0000000000..9f9d24f6d4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001b-ref.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> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body + { + font: 1em/1.25 serif; + margin: 8px; + } + + p {margin: 1em 0;} + + strong {line-height: 1;} + + div + { + background-color: green; + height: 100px; + margin-top: 66px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green<br /> + rectangle across the page and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001b.xht b/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001b.xht new file mode 100644 index 0000000000..087a030ff4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/anonymous-boxes-001b.xht @@ -0,0 +1,89 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Percent height inside anonymous block</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/visuren.html#anonymous-block-level" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="match" href="anonymous-boxes-001b-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + font: 1em/1.25 serif; + margin: 8px; + } + + p {margin: 1em 0;} + + strong {line-height: 1;} + + div#overlapped-red + { + background-color: red; + height: 100px; + left: 8px; + position: absolute; + top: 122px; + /* + 16px : max(body's margin-top, p's margin-top) + + + 20px : p's 1st line box height + + + 20px : p's 2nd line box height + + + 16px : p's margin-bottom + + + 50px : div#closest-non-anonymous-ancestor line box height + ----------------------------------------------------------- + 122px + */ + right: 8px; + z-index: -1; + } + + div#closest-non-anonymous-ancestor + { + color: white; + font: 2.5em/1.25 Ahem; /* equivalent to 40px/50px in absolute units */ + height: 200px; + } + + div#child-of-anonymous-block-box + { + background-color: green; + height: 50%; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green<br /> + rectangle across the page and <strong>no red</strong>.</p> + + <div id="overlapped-red"></div> + + <div id="closest-non-anonymous-ancestor">Some <div id="child-of-anonymous-block-box"></div> text + <p>More text</p> + </div> + + <!-- + For example, if the child of the anonymous block box inside the DIV + above needs to know the height of its containing block to resolve a + percentage height, then it will use the height of the containing + block formed by the DIV, not of the anonymous block box. + --> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-direction-001.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-direction-001.xht new file mode 100644 index 0000000000..489ec6ce61 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-direction-001.xht @@ -0,0 +1,25 @@ +<!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: direction:rtl on body</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="direction:rtl on body should inherit to paragraphs"/> + <style type="text/css"><![CDATA[ + body {direction: rtl;} + .passcond {direction:ltr;} + .control {direction:ltr;text-align:right;} + ]]></style> + </head> + + <body> + + <p class="passcond">The lines below should be identical:</p> + <p class="control">a b c!</p> + + <p>!a b c</p> + +</body> +</html> + diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-direction-002.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-direction-002.xht new file mode 100644 index 0000000000..7915da9375 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-direction-002.xht @@ -0,0 +1,31 @@ +<!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: direction - nested ltr and rtl</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="Direction on paragraph should override direction on body"/> + <style type="text/css"><![CDATA[ + body { + direction: rtl; + } + .lefttoright { + direction: ltr; + } + ]]></style> + </head> + + <body> + + <p>The lines below should be aligned as specified, and end with an exclamation mark</p> + + <p> + !Right-aligned + </p> + <p class="lefttoright"> + Left-aligned! + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-display-block-001.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-display-block-001.xht new file mode 100644 index 0000000000..9b187f6caf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-display-block-001.xht @@ -0,0 +1,25 @@ +<!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: bidi and inline with display:block</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="An inline with display:block should be treated as a paragraph in the bidi algorithm"/> + <style type="text/css"><![CDATA[ + div {direction:rtl;} + span {display:block;} + ]]></style> + </head> + + <body> + <p>These lines should be identical:</p> + <div> + <span> + a (1) اسأل TEXT + </span> + <span> + a (1) اسأل TEXT + </span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-list-001.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-001.xht new file mode 100644 index 0000000000..7ff3c7d671 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-001.xht @@ -0,0 +1,23 @@ +<!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: direction:rtl - unordered list</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" /> + <meta name="assert" content="direction:rtl should apply to unordered lists, putting bullets on the right"/> + <style type="text/css"><![CDATA[ + ul {direction: rtl;} + ul,li {padding-left:2em;padding-right:2em;} + ]]></style> + </head> + + <body> + <ul> + <li>This list has three items</li> + <li>And should be right-aligned</li> + <li>With bullets to the right</li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-list-002.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-002.xht new file mode 100644 index 0000000000..5ae9d5b13f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-002.xht @@ -0,0 +1,29 @@ +<!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: direction:rtl - nested unordered list</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" /> + <meta name="assert" content="direction:rtl should apply to nested unordered lists, putting bullets on the right and offset leftwards"/> + <style type="text/css"><![CDATA[ + ul {direction: rtl;} + ul,li {padding-left:2em;padding-right:2em;} + ]]></style> + </head> + + <body> + <ul> + <li>This list has three items</li> + <li>And should be right-aligned</li> + <li>With bullets to the right + <ul> + <li>This list should be indented from the right</li> + <li>And should be right-aligned</li> + <li>With bullets to the right</li> + </ul> + </li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-list-003.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-003.xht new file mode 100644 index 0000000000..263e72397a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-003.xht @@ -0,0 +1,28 @@ +<!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: direction:rtl - ordered list</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" /> + <meta name="assert" content="direction:rtl should apply to nested ordered lists, putting bullets on the right and offset leftwards"/> + <style type="text/css"><![CDATA[ + ol {direction: rtl;} + ul,li {padding-left:2em;padding-right:2em;} + ]]></style> + </head> + <body> + <ol> + <li>This list has three items</li> + <li>And should be right-aligned</li> + <li>With numbers to the right + <ol> + <li>This list should be indented from the right</li> + <li>And should be right-aligned</li> + <li>With numbers to the right</li> + </ol> + </li> + </ol> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-list-004.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-004.xht new file mode 100644 index 0000000000..eefa0588cf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-004.xht @@ -0,0 +1,31 @@ +<!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: text-align: justify and direction:rtl - unordered list</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style"/> + <meta name="assert" content="text-align: justify should apply to unordered lists in rtl context without affecting their rtlness"/> + <style type="text/css"><![CDATA[ + html {direction:rtl;} + div {width: 14em; border: 1px solid black;} + li {text-align: justify;} + ul,li {padding-left:2em;padding-right:2em;} + ]]></style> + </head> + + <body> + + <p>The list should have a bullet to the right of each item, and the text in each item should be justified: the text should line up with the box edges + on both the left and right sides.</p> + + <div> + <ul> + <li>This is the first of three items that are justified</li> + <li>And this is the second of the three items that are justified</li> + <li>And this is the third and last of the three items</li> + </ul> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-list-005.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-005.xht new file mode 100644 index 0000000000..4a78a76cac --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-005.xht @@ -0,0 +1,28 @@ +<!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: text-align: left and direction:rtl - unordered list</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style"/> + <meta name="assert" content="text-align:left should be applied to unordered list in rtl context without affecting its rtlness"/> + <style type="text/css"><![CDATA[ + html {direction: rtl;} + li {text-align: left;} + ul,li {padding-left:2em;padding-right:2em;} + ]]></style> + </head> + + <body> + + <p>The list should be left-aligned and have a bullet to the right of each item</p> + + <ul> + <li>First</li> + <li>Second</li> + <li>Third</li> + </ul> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-list-006.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-006.xht new file mode 100644 index 0000000000..4524fe5fe4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-006.xht @@ -0,0 +1,28 @@ +<!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: text-align: right and direction:rtl - unordered list</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style"/> + <meta name="assert" content="text-align:right should be applied to unordered list in rtl context without affecting its rtlness"/> + <style type="text/css"><![CDATA[ + html {direction: rtl;} + li {text-align: right;} + ul,li {padding-left:2em;padding-right:2em;} + ]]></style> + </head> + + <body> + + <p>The list should be right-aligned and have a bullet to the right of each item</p> + + <ul> + <li>First</li> + <li>Second</li> + <li>Third</li> + </ul> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-list-007.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-007.xht new file mode 100644 index 0000000000..069d7ea450 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-list-007.xht @@ -0,0 +1,28 @@ +<!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: text-align: center and direction:rtl - unordered list</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style"/> + <meta name="assert" content="text-align: center should apply to unordered lists in rtl context without affecting their rtlness"/> + <style type="text/css"><![CDATA[ + html {direction:rtl;} + div {width: 14em; border: 1px solid black;} + li {text-align: center;} + ul,li {padding-left:2em;padding-right:2em;} + ]]></style> + </head> + + <body> + + <p>The list should have a bullet to the right of each item, and the text in each item should be centered</p> + + <ul> + <li>This is the first of three items that are centered</li> + <li>And this is the second of the three items that are centered</li> + <li>And this is the third and last of the three items</li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-override-001.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-001.xht new file mode 100644 index 0000000000..43e4853bd2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-001.xht @@ -0,0 +1,34 @@ +<!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: unicode-bidi: bidi-override on table</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="bidi-override should not be applied to table cell content when specified on table"/> + <style type="text/css"><![CDATA[ + .override { + direction: rtl; + unicode-bidi: bidi-override; + } + ]]></style> + </head> + + <body> + <p> + The lines below should be identical, except whitespace: + </p> + <table class="override"> + <tr> + <td> + abc + </td> + </tr> + </table> + + <p> + abc + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-override-002.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-002.xht new file mode 100644 index 0000000000..1c48d3dd26 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-002.xht @@ -0,0 +1,34 @@ +<!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: unicode-bidi: bidi-override on table cell</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="bidi-override should be applied to table-cell content when specified on the cell"/> + <style type="text/css"><![CDATA[ + .override { + direction: rtl; + unicode-bidi: bidi-override; + } + ]]></style> + </head> + + <body> + <p> + The lines below should be identical, except whitespace: + </p> + <table> + <tr> + <td class="override"> + cba + </td> + </tr> + </table> + + <p> + abc + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-override-003.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-003.xht new file mode 100644 index 0000000000..715c49ae0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-003.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: unicode-bidi: bidi-override on list</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="bidi-override should not be applied to list item when specified on ul"/> + <style type="text/css"><![CDATA[ + ul, li { margin: 1em 2em; padding: 0; } + .override { + direction: rtl; + unicode-bidi: bidi-override; + } + ]]></style> + </head> + + <body> + <p>Test passes if the word PASS appears below (followed by a bullet on the right).</p> + <ul class="override"> + <li> + PASS + </li> + </ul> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-override-004.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-004.xht new file mode 100644 index 0000000000..d4230bba95 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-004.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: unicode-bidi: bidi-override on list item</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="bidi-override should be applied when specified on list item"/> + <style type="text/css"><![CDATA[ + ul, li { margin: 1em 2em; padding: 0; } + .override { + direction: rtl; + unicode-bidi: bidi-override; + } + ]]></style> + </head> + + <body> + <p>Test passes if the word PASS appears below (followed by a bullet on the right).</p> + <ul> + <li class="override"> + SSAP + </li> + </ul> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-override-005.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-005.xht new file mode 100644 index 0000000000..88fdbf5b24 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-override-005.xht @@ -0,0 +1,29 @@ +<!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: unicode-bidi: bidi-override on nested div</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="bidi-override should be applied to inline-level descendants but not block-level descendants"/> + <style type="text/css"><![CDATA[ + .override { + direction: rtl; + unicode-bidi: bidi-override; + } + ]]></style> + </head> + + <body> + <p> + The lines below should be identical, ignoring whitespace: + </p> + + <div class="override"> + cba + <div> + abc + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-position-fixed-001.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-position-fixed-001.xht new file mode 100644 index 0000000000..dcc2362c39 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-position-fixed-001.xht @@ -0,0 +1,23 @@ +<!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: position:fixed in rtl context</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop"/> + <meta name="assert" content="Default horizontal position of position:fixed block should be right in rtl context, and ancestor direction should still be applied inside the block taken out of normal flow"/> + <style type="text/css"><![CDATA[ + body {direction:rtl;} + .note {direction:ltr;position:fixed;margin-top:2em;} + ]]></style> + </head> + + <body> + + <div style="position:fixed;">!Right</div> + + <p class="note">The word above should be right-aligned on the page and end with an exclamation mark.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-table-001.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-table-001.xht new file mode 100644 index 0000000000..ba8b548c0b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-table-001.xht @@ -0,0 +1,37 @@ +<!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: direction: rtl on table</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layout"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="direction:rtl on table should reverse order of table cells"/> + <style type="text/css"><![CDATA[ + table {border-spacing: 0; margin-bottom: 1em;} + table.test {direction:rtl;} + td.a {background-color: navy; color: navy;} + td.b {background-color: magenta; color: magenta;} + td.c {background-color: cyan; color: cyan;} + ]]></style> + </head> + <body> + + <p>You should see two identical colored bands below:</p> + + <table class="test"> + <tr> + <td class="a">xxxxxx</td> + <td class="b">xxxxxx</td> + <td class="c">xxxxxx</td> + </tr> + </table> + + <table> + <tr> + <td class="c">xxxxxx</td> + <td class="b">xxxxxx</td> + <td class="a">xxxxxx</td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-table-002.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-table-002.xht new file mode 100644 index 0000000000..edee246c06 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-table-002.xht @@ -0,0 +1,43 @@ +<!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: direction: on nested tables</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layout"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="direction: should affect order of table cells"/> + <style type="text/css"><![CDATA[ + table {direction: rtl;border-spacing: 0;} + table table {direction: ltr;} + td {padding:0;} + td.a {background-color: navy; color: navy;} + td.b {background-color: magenta; color: magenta;} + td.c {background-color: cyan; color: cyan;} + ]]></style> + </head> + + <body> + + <p>You should see three solid rectangles below, forming a band:</p> + + <table> + <tr> + <td class="a">xxxxxx</td> + <td class="b">xxxxxx</td> + <td class="c">xxxxxx</td> + </tr> + <tr> + <td colspan="3"> + <table> + <tr> + <td class="c">xxxxxx</td> + <td class="b">xxxxxx</td> + <td class="a">xxxxxx</td> + </tr> + </table> + </td> + </tr> + </table> + </body> +</html> + diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-unicode-bidi-001.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-unicode-bidi-001.xht new file mode 100644 index 0000000000..09bb06b4de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-unicode-bidi-001.xht @@ -0,0 +1,28 @@ +<!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: unicode-bidi: bidi-override - rtl</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="unicode-bidi: bidi-override should order characters strictly according to value of direction property"/> + <style type="text/css"><![CDATA[ + .override { + direction: rtl; + unicode-bidi: bidi-override; + } + .passcond {direction:ltr;} + .control {direction:ltr;} + ]]></style> + </head> + + <body> + + <p class="passcond">The lines below should be identical:</p> + <p class="control">a b, c d.</p> + + <p>a b, <span class="override">d c</span>.</p> + + </body> +</html> + diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-unicode-bidi-003.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-unicode-bidi-003.xht new file mode 100644 index 0000000000..3d958aca64 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-unicode-bidi-003.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: unicode-bidi: embed - nested ltr and rtl</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#direction"/> + <meta name="assert" content="unicode-bidi: embed should open a new bidi embedding level for inline-level element"/> + <style type="text/css"><![CDATA[ + .firstembed {direction: ltr; unicode-bidi: embed} + .secondembed {direction: rtl; unicode-bidi: embed; font-weight: bold;} + ]]></style> + </head> + + <body> + + <p>You should see a longer arabic word to the left, and a shorter one to the right:</p> + + <div class="firstembed"> + <span class="secondembed">من and أمريكا</span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/bidi-unicode-bidi-004.xht b/testing/web-platform/tests/css/CSS2/visuren/bidi-unicode-bidi-004.xht new file mode 100644 index 0000000000..85f4674944 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/bidi-unicode-bidi-004.xht @@ -0,0 +1,32 @@ +<!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: direction and borders - normal</title> + <link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#bidi-box-model"/> + <meta name="assert" content="Borders should be unaffected by directionality"/> + <style type="text/css"><![CDATA[ + span { + border: 5px solid gray; + border-color: green purple yellow blue; + } + + .rtol { + direction: rtl; + unicode-bidi: normal; + } + + p {text-align: left;} + ]]></style> + </head> + + <body> + <p>Two identical lines:</p> + <p> + First <span>Second</span> + </p> + <p class="rtol"> + First <span>Second</span> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/box-offsets-abs-pos-001.xht b/testing/web-platform/tests/css/CSS2/visuren/box-offsets-abs-pos-001.xht new file mode 100644 index 0000000000..06cf9866a8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/box-offsets-abs-pos-001.xht @@ -0,0 +1,77 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: box offsets - containing block for absolute positioned boxes</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta content="image" name="flags" /> + <meta content="Box offsets (bottom, left, right, top) for an absolutely positioned box refers to the padding box of its nearest positioned ancestor; such padding box forms and acts as the containing block of the absolutely positioned box." name="assert" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + #nearest-positioned-ancestor + { + background-color: yellow; /* padding box will be yellow */ + border: orange solid 50px; /* border box will be orange */ + height: 100px; /* a bright green square 100px by 100px image will serve as content box */ + margin-left: 100px; + padding: 50px; + position: relative; + top: auto; + width: 100px; + } + + div > div + { + background-color: blue; + color: white; + height: 25px; + position: absolute; + width: 25px; + } + + div#top-left + { + left: 0px; + top: 0px; + } + + div#top-right + { + right: 0px; + top: 0px; + } + + div#bottom-left + { + bottom: 0px; + left: 0px; + } + + div#bottom-right + { + bottom: 0px; + right: 0px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a blue square at each corner of the yellow square.</p> + + <div id="nearest-positioned-ancestor"><img src="support/100x100-lime.png" alt="Image download support must be enabled" /> + <div id="top-left">TL</div> + <div id="top-right">TR</div> + <div id="bottom-left">BL</div> + <div id="bottom-right">BR</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visuren/box-offsets-rel-pos-001.xht b/testing/web-platform/tests/css/CSS2/visuren/box-offsets-rel-pos-001.xht new file mode 100644 index 0000000000..2bad30fbab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/box-offsets-rel-pos-001.xht @@ -0,0 +1,161 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: box offsets - relatively positioned boxes</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta content="image" name="flags" /> + <meta content="Box offsets (bottom, left, right, top) expressed in absolute units (not with percentage unit) for relatively positioned boxes are with respect to the edges of the boxes themselves." name="assert" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + div#statically-positioned-box + { + background-color: yellow; /* padding box will be yellow */ + border: orange solid 50px; /* border box will be orange */ + height: 100px; /* a bright green square 100px by 100px image will serve as content box */ + margin-left: 100px; + padding: 50px; + position: static; + width: 100px; + } + + div.blue-relatively-positioned + { + background-color: blue; + color: white; + height: 25px; + position: relative; + width: 25px; + } + + div#top-left + { + left: 150px; + /* + Calculation of left offset: + + 100px (div#statically-positioned-box's margin-left) + + 50px (div#statically-positioned-box's border-left) + ================== + 150px + */ + + top: -250px; + /* + Calculation of top offset: + - 50px (div#statically-positioned-box's border-bottom) + - 50px (div#statically-positioned-box's padding-bottom) + - 100px (div#statically-positioned-box's content height) + - 50px (div#statically-positioned-box's padding-top) + ================== + -250px + */ + } + + div#top-right + { + right: -325px; + /* + Calculation of right offset: + + - 100px (div#statically-positioned-box's margin-left) + - 50px (div#statically-positioned-box's border-left) + - 50px (div#statically-positioned-box's padding-left) + - 100px (div#statically-positioned-box's content height) + - 50px (div#statically-positioned-box's padding-right) + + 25px (div#top-right's content width) + ================== + -325px + */ + + top: -275px; + /* + Calculation of top offset: + - 25px (div#top-left's content height) + - 50px (div#statically-positioned-box's border-bottom) + - 50px (div#statically-positioned-box's padding-bottom) + - 100px (div#statically-positioned-box's content height) + - 50px (div#statically-positioned-box's padding-top) + ================== + -275px + */ + } + + div#bottom-left + { + bottom: 125px; + /* + Calculation of bottom offset: + 25px (div#top-left's content height) + + 25px (div#top-right's content height) + + 50px (div#statically-positioned-box's border-bottom) + + 25px (div#bottom-left's content height) + ================== + 125px + */ + + left: 150px; + /* + Calculation of left offset: + + 100px (div#statically-positioned-box's margin-left) + + 50px (div#statically-positioned-box's border-left) + ================== + 150px + */ + } + + div#bottom-right + { + bottom: 150px; + /* + Calculation of bottom offset: + 25px (div#top-left's content height) + + 25px (div#top-right's content height) + + 25px (div#bottom-left's content height) + + 50px (div#statically-positioned-box's border-bottom) + + 25px (div#bottom-right's content height) + ================== + 150px + */ + + right: -325px; + /* + Calculation of right offset: + + - 100px (div#statically-positioned-box's margin-left) + - 50px (div#statically-positioned-box's border-left) + - 50px (div#statically-positioned-box's padding-left) + - 100px (div#statically-positioned-box's content height) + - 50px (div#statically-positioned-box's padding-right) + + 25px (div#bottom-right's content width) + ================== + -325px + */ + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a blue square at each corner of the yellow square.</p> + + <div id="statically-positioned-box"><img src="support/100x100-lime.png" alt="Image download support must be enabled" /></div> + + <div class="blue-relatively-positioned" id="top-left">TL</div> + + <div class="blue-relatively-positioned" id="top-right">TR</div> + + <div class="blue-relatively-positioned" id="bottom-left">BL</div> + + <div class="blue-relatively-positioned" id="bottom-right">BR</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/box-offsets-rel-pos-002-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/box-offsets-rel-pos-002-ref.xht new file mode 100644 index 0000000000..deaa71d9d0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/box-offsets-rel-pos-002-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 100px; + margin: 116px 100px 100px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visuren/box-offsets-rel-pos-002.xht b/testing/web-platform/tests/css/CSS2/visuren/box-offsets-rel-pos-002.xht new file mode 100644 index 0000000000..7e17de23d1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/box-offsets-rel-pos-002.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 Test: box offsets - position relative</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="box-offsets-rel-pos-002-ref.xht" /> + + <meta content="image" name="flags" /> + <meta content="The 'top', 'right', 'bottom', 'left' property, for relative positioning, specify the offset of the box itself from its normal in-flow position, from the position it would have had if it had been static." name="assert" /> + + <style type="text/css"><![CDATA[ + img + { + position: relative; + vertical-align: bottom; + /* so that images do not "sit" on the + baseline but at bottom of line box */ + } + + img.moves-toward-left {right: 100px;} + + img.moves-toward-top {bottom: 100px;} + + img.moves-toward-right {left: 100px;} + + img.moves-toward-bottom {top: 100px;} + + /* + In this testcase, 7 red 100px wide by 100px squares overlap + another red 100px wide by 100px square (placed in the center of + a 3 by 3 grid of squares) and then, at the end, one single + green 100px wide by 100px square overlaps all 8 other red boxes. + */ + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div><img class="moves-toward-right moves-toward-bottom" src="support/100x100-red.png" width="100" height="100" alt="Image download support must be enabled" /><img class="moves-toward-bottom" src="support/100x100-red.png" width="100" height="100" alt="Image download support must be enabled" /><img class="moves-toward-left moves-toward-bottom" src="support/100x100-red.png" width="100" height="100" alt="Image download support must be enabled" /></div> + + <div><img class="moves-toward-right" src="support/100x100-red.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/100x100-red.png" width="100" height="100" alt="Image download support must be enabled" /><img class="moves-toward-left" src="support/100x100-red.png" width="100" height="100" alt="Image download support must be enabled" /></div> + + <div><img class="moves-toward-right moves-toward-top" src="support/100x100-red.png" width="100" height="100" alt="Image download support must be enabled" /><img class="moves-toward-top" src="support/100x100-red.png" width="100" height="100" alt="Image download support must be enabled" /><img class="moves-toward-left moves-toward-top" src="support/green_box.png" width="100" height="100" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visuren/clear-applies-to-016.xht b/testing/web-platform/tests/css/CSS2/visuren/clear-applies-to-016.xht new file mode 100644 index 0000000000..a72b5d2924 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/clear-applies-to-016.xht @@ -0,0 +1,86 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: 'clear' applied to the table wrapper box (has 1 caption at top)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <!-- + "(...) list of properties that are used on the table wrapper box and not + the table box. (...) this is the case for 'clear' as well: + If 'clear' is to have an effect, the table and its captions (if any) + should stay together and not be separated by clearance. + Re: [CSS21] The 'clear' property on table wrappers. + http://lists.w3.org/Archives/Public/www-style/2012Jun/0072.html + --> + + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="../floats-clear/clear-applies-to-009-ref.xht" /> + + <meta name="assert" content="The 'clear' property apply to elements with a display of 'table' and is applied to the table wrapper box and not on the table box. In this test, the table wrapper box has a table caption placed before the table box." /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + + div#table + { + background-color: blue; + clear: both; + display: table; + table-layout: fixed; + width: 1in; + } + + div#caption + { + background-color: blue; + caption-side: top; + color: blue; + display: table-caption; + height: 0.5in; + width: 1in; + } + + div.row {display: table-row;} + + div.cell + { + color: blue; + display: table-cell; + height: 0.25in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled blue square <strong>below this text</strong>.</p> + + <div id="table"> + + <div id="caption">cap</div> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/clear-applies-to-017.xht b/testing/web-platform/tests/css/CSS2/visuren/clear-applies-to-017.xht new file mode 100644 index 0000000000..c421afce02 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/clear-applies-to-017.xht @@ -0,0 +1,88 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: 'clear' applied to the table wrapper box (has 1 caption at bottom)</title> + + + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <!-- + "(...) list of properties that are used on the table wrapper box and not + the table box. (...) this is the case for 'clear' as well: + If 'clear' is to have an effect, the table and its captions (if any) + should stay together and not be separated by clearance. + Re: [CSS21] The 'clear' property on table wrappers. + http://lists.w3.org/Archives/Public/www-style/2012Jun/0072.html + --> + + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="../floats-clear/clear-applies-to-009-ref.xht" /> + + <meta name="assert" content="The 'clear' property apply to elements with a display of 'table' and is applied to the table wrapper box and not on the table box. In this test, the table wrapper box has a table caption placed after the table box." /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + + div#table + { + background-color: blue; + clear: both; + display: table; + table-layout: fixed; + width: 1in; + } + + div.row {display: table-row;} + + div.cell + { + color: blue; + display: table-cell; + height: 0.25in; + } + + div#caption + { + background-color: blue; + caption-side: bottom; + color: blue; + display: table-caption; + height: 0.5in; + width: 1in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled blue square <strong>below this text</strong>.</p> + + <div id="table"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + <div id="caption">cap</div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/emptyspan-1-ref.html b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-1-ref.html new file mode 100644 index 0000000000..a66a85e762 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<body style="direction: ltr"> + <span style="display: block">x</span> + <span style="border: 5px solid blue; border-left: none; border-right: none; + padding-right: 10px"></span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/emptyspan-1.html b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-1.html new file mode 100644 index 0000000000..dcf9367d2a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="emptyspan-1-ref.html"> +<body style="direction: ltr"> + <span style="border: 5px solid blue; border-left: none; border-right: none; + padding-right: 10px"> + <span style="display: block">x</span> + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/emptyspan-2-ref.html b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-2-ref.html new file mode 100644 index 0000000000..941044b926 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-2-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<body style="direction: rtl"> + <span style="border: 5px solid blue; border-left: none; border-right: none; + padding-right: 10px"></span> + <span style="display: block">x</span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/emptyspan-2.html b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-2.html new file mode 100644 index 0000000000..b740fad71b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-2.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="emptyspan-2-ref.html"> +<body style="direction: rtl"> + <span style="border: 5px solid blue; border-left: none; border-right: none; + padding-right: 10px"> + <span style="display: block">x</span> + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/emptyspan-3-ref.html b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-3-ref.html new file mode 100644 index 0000000000..629c3424ca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-3-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<body style="direction: ltr"> + <span style="border: 5px solid blue; border-left: none; border-right: none; + padding-left: 10px"></span> + <span style="display: block">x</span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/emptyspan-3.html b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-3.html new file mode 100644 index 0000000000..1be809ec2d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-3.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="emptyspan-3-ref.html"> +<body style="direction: ltr"> + <span style="border: 5px solid blue; border-left: none; border-right: none; + padding-left: 10px"> + <span style="display: block">x</span> + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/emptyspan-4-ref.html b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-4-ref.html new file mode 100644 index 0000000000..af74e690e1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-4-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<body style="direction: rtl"> + <span style="display: block">x</span> + <span style="border: 5px solid blue; border-left: none; border-right: none; + padding-left: 10px"></span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/emptyspan-4.html b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-4.html new file mode 100644 index 0000000000..3656ada504 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/emptyspan-4.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="emptyspan-4-ref.html"> +<body style="direction: rtl"> + <span style="border: 5px solid blue; border-left: none; border-right: none; + padding-left: 10px"> + <span style="display: block">x</span> + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/fixed-pos-stacking-001-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/fixed-pos-stacking-001-ref.xht new file mode 100644 index 0000000000..e85be0e691 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/fixed-pos-stacking-001-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + <style type="text/css"> + div {width: 5em; height: 2em} + + /* absolute with 'z-index: auto' does not create a stacking context */ + #absolute {position: absolute; left: 1em; top: 3em; background: green} + #absolute div {position: absolute} + #absolute div div {position: absolute; z-index: -1; background: green} + + /* fixed with 'z-index: auto' *does* create a stacking context */ + #fixed {position: fixed; left: 10em; top: 3em; background: green} + #fixed div {position: absolute} + #fixed div div {position: absolute; z-index: -1; background: green} + </style> + </head> + + <body> + <p>There should be no red.</p> + + <div id="absolute"> + <div> + <div></div> + </div> + </div> + + <div id="fixed"> + <div> + <div></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/fixed-pos-stacking-001.xht b/testing/web-platform/tests/css/CSS2/visuren/fixed-pos-stacking-001.xht new file mode 100644 index 0000000000..1912d70938 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/fixed-pos-stacking-001.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: fixed positioning makes a stacking context</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visuren.html#z-index" title="9.9.1 Specifying the stack level: the 'z-index' property" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.9.9.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="auto The stack level of the generated box in the current stacking context is 0. If the box has 'position: fixed' or if it is the root, it also establishes a new stacking context." /> + <link rel="match" href="fixed-pos-stacking-001-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"> + div {width: 5em; height: 2em} + + /* absolute with 'z-index: auto' does not create a stacking context */ + #absolute {position: absolute; left: 1em; top: 3em; background: green} + #absolute div {position: absolute} + #absolute div div {position: absolute; z-index: -1; background: red} + + /* fixed with 'z-index: auto' *does* create a stacking context */ + #fixed {position: fixed; left: 10em; top: 3em; background: red} + #fixed div {position: absolute} + #fixed div div {position: absolute; z-index: -1; background: green} + </style> + </head> + + <body> + <p>There should be no red.</p> + + <div id="absolute"> + <div> + <div></div> + </div> + </div> + + <div id="fixed"> + <div> + <div></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/float-inside-inline-between-blocks-1-ref.html b/testing/web-platform/tests/css/CSS2/visuren/float-inside-inline-between-blocks-1-ref.html new file mode 100644 index 0000000000..d9146e2ae0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/float-inside-inline-between-blocks-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<div style="position: relative; left: 100px"> + aaa +</div> +<span style="position: relative; left: 100px"> + <span style="float: left">bbb</span> +</span> +<div style="position: relative; left: 100px"> + aaa +</div> diff --git a/testing/web-platform/tests/css/CSS2/visuren/float-inside-inline-between-blocks-1.html b/testing/web-platform/tests/css/CSS2/visuren/float-inside-inline-between-blocks-1.html new file mode 100644 index 0000000000..296dcb9bde --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/float-inside-inline-between-blocks-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="float-inside-inline-between-blocks-1-ref.html"> +<span style="position: relative; left: 100px"> + <span style="display: block"> + aaa + </span> + <span style="float: left">bbb</span> + <span style="display: block"> + aaa + </span> +</span> diff --git a/testing/web-platform/tests/css/CSS2/visuren/inherit-static-offset-001.xht b/testing/web-platform/tests/css/CSS2/visuren/inherit-static-offset-001.xht new file mode 100644 index 0000000000..6db781c9b9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/inherit-static-offset-001.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: top and left - inherit keyword on element with statically positioned parent</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/visuren.html#position-props" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit" title="6.2.1 The 'inherit' value" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#inherit" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-4/#inherit" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta content="image" name="flags" /> + <meta content="When using the 'inherit' reserved keyword value, the property takes the same specified value as the property for the element's parent, even in cases where such property does not apply. This test covers the case where the parent has absolute value lengths for left and top." name="assert" /> + + <style type="text/css"><![CDATA[ + div#parent + { + background: red url("support/pattern-gg-gr-100x100.png") no-repeat; + height: 100px; + left: 50px; + position: static; + top: 50px; + /* + The 'top', 'right', 'bottom', and 'left' properties + do not apply on a statically positioned element + */ + width: 100px; + } + + div#child + { + background-color: green; + height: 50px; + left: inherit; + position: relative; + top: inherit; + width: 50px; + } + + /* + In this test, left and top offset values will be inherited + */ + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="parent"> + <div id="child"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/inherit-static-offset-002.xht b/testing/web-platform/tests/css/CSS2/visuren/inherit-static-offset-002.xht new file mode 100644 index 0000000000..1860e76ebc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/inherit-static-offset-002.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: top and left - inherit keyword on element with statically positioned parent</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/visuren.html#position-props" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit" title="6.2.1 The 'inherit' value" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#inherit" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-4/#inherit" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta content="image" name="flags" /> + <meta content="When using the 'inherit' reserved keyword value, the property takes the same specified value as the property for the element's parent, even in cases where such property does not apply. This test covers the case where the parent has percentage value lengths for left and top. Box offset specified as a percentage refer to the height (for top and bottom) or to the width (for left and right) of its containing block. If an element's position is 'relative', then its containing block is formed by the content edge of the nearest block container ancestor box." name="assert" /> + + <style type="text/css"><![CDATA[ + div#parent + { + background: red url("support/pattern-gg-gr-100x100.png") no-repeat; + height: 100px; + left: 50%; + position: static; + top: 50%; + /* + The 'top', 'right', 'bottom', and 'left' properties + do not apply on a statically positioned element + */ + width: 100px; + } + + div#child + { + background-color: green; + height: 50px; + left: inherit; + position: relative; + top: inherit; + width: 50px; + } + + /* + In this test, left and top offset values will be inherited + */ + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="parent"> + <div id="child"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/inherit-static-offset-003.xht b/testing/web-platform/tests/css/CSS2/visuren/inherit-static-offset-003.xht new file mode 100644 index 0000000000..32533df5e6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/inherit-static-offset-003.xht @@ -0,0 +1,66 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: top and left - inherit keyword on element with statically positioned parent</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/visuren.html#position-props" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit" title="6.2.1 The 'inherit' value" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#inherit" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-4/#inherit" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta content="image" name="flags" /> + <meta content="When using the 'inherit' reserved keyword value, the property takes the same specified value as the property for the element's parent, even in cases where such property does not apply. This test covers the case where the parent has relative value lengths for left and top." name="assert" /> + + <style type="text/css"><![CDATA[ + div#parent + { + background: red url("support/pattern-gg-gr-100x100.png") no-repeat; + height: 100px; + left: 3.125em; + position: static; + top: 3.125em; + /* + The 'top', 'right', 'bottom', and 'left' properties + do not apply on a statically positioned element + */ + width: 100px; + } + + div#child + { + background-color: green; + height: 50px; + font-size: 6.25em; + left: inherit; + position: relative; + top: inherit; + /* + What is inherited is a computed value + (which is, in this test, 3.125em mult by 16px == 50px), + not the specified value (6.25em) of parent. + */ + width: 50px; + } + + /* + In this test, left and top offset values will be inherited + */ + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="parent"> + <div id="child"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/inline-formatting-context-001-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/inline-formatting-context-001-ref.xht new file mode 100644 index 0000000000..42f12fe4bc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/inline-formatting-context-001-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + <style type="text/css"><![CDATA[ + #block {display: block; min-width: 25em} + ]]></style> + </head> + + <body> + <div id="block"> + Test + passes + if + all + words + are + on + one + line. + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/inline-formatting-context-001.xht b/testing/web-platform/tests/css/CSS2/visuren/inline-formatting-context-001.xht new file mode 100644 index 0000000000..e6917a26b5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/inline-formatting-context-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: Establishing an Inline Formatting Context</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visuren.html#inline-formatting" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.9.4.2" /> + <link rel="match" href="inline-formatting-context-001-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + <meta name="assert" content="An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block." /> + + <style type="text/css"><![CDATA[ + #block {display: block; min-width: 25em} + .inline {display: inline} + ]]></style> + </head> + + <body> + <div id="block"> + <div class="inline">Test</div> + passes + <div class="inline">if</div> + all + words + <div class="inline">are</div> + on + <div class="inline">one</div> + line. + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/left-offset-position-fixed-001-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/left-offset-position-fixed-001-ref.xht new file mode 100644 index 0000000000..00e2afe4e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/left-offset-position-fixed-001-ref.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Chris Rebert" href="http://chrisrebert.com" /> + <style type="text/css"> +#greensquare { + background-color: green; + position: absolute; + left: 50%; + width: 100px; + height: 100px; +} + </style> + </head> + <body> + <p>Test passes if there is a solid green square and <strong>no red</strong>.</p> + + <div id="greensquare"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/left-offset-position-fixed-001.xht b/testing/web-platform/tests/css/CSS2/visuren/left-offset-position-fixed-001.xht new file mode 100644 index 0000000000..646552c308 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/left-offset-position-fixed-001.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: left:auto offset of position:fixed box in a position:relative containing block</title> + <link rel="author" title="Chris Rebert" href="http://chrisrebert.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" /> + <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#position-props" /> + <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="left-offset-position-fixed-001-ref.xht" /> + <meta name="assert" content="The 'left' box offset property, for fixed positioning, when set to 'auto' specifies the offset of the box from its 'static-position containing block'. Here, in this test, the 'static-position containing block' is #shifted-column and the containing block for #red is established by the viewport." /> + <style type="text/css"> +#shifted-column { + left: 50%; + width: 50%; + position: relative; +} +.square { + width: 100px; + height: 100px; +} +#red { + background-color: red; + position: fixed; + left: auto; +} +#green { + background-color: green; + position: absolute; + left: 50%; +} + </style> + </head> + <body> + <p>Test passes if there is a solid green square and <strong>no red</strong>.</p> + + <div id="shifted-column"> + <div id="red" class="square"></div> + </div> + <div id="green" class="square"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/percent-height-1-ref.html b/testing/web-platform/tests/css/CSS2/visuren/percent-height-1-ref.html new file mode 100644 index 0000000000..0f74e18a85 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/percent-height-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<div style="height: 100px; border: 10px solid black"></div> diff --git a/testing/web-platform/tests/css/CSS2/visuren/percent-height-1.html b/testing/web-platform/tests/css/CSS2/visuren/percent-height-1.html new file mode 100644 index 0000000000..91c1594b27 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/percent-height-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="percent-height-1-ref.html"> +<body style="height: 200px"> + <span> + <span style="display: block; height: 50%; border: 10px solid black"> + </span> + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/position-absolute-008a.xht b/testing/web-platform/tests/css/CSS2/visuren/position-absolute-008a.xht new file mode 100644 index 0000000000..bf8cb26127 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/position-absolute-008a.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: Float is computed to 'none' when element is absolutely positioned</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/visuren.html#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float'" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="assert" content="Float is computed to 'none' when 'position: absolute' is specified." /> + + <style type="text/css"><![CDATA[ + div + { + height: 100px; + width: 100px; + } + + div#rel-pos-container + { + position: relative; + width: auto; + } + + div#abspos-green-overlapping + { + background-color: green; + float: right; + left: auto; + position: absolute; + top: auto; + } + + div#static-red-overlapped + { + background-color: red; + position: static; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="rel-pos-container"> + <div id="abspos-green-overlapping"></div> + <div id="static-red-overlapped"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visuren/position-absolute-percentage-inherit-001-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/position-absolute-percentage-inherit-001-ref.xht new file mode 100644 index 0000000000..9cf6e10bc5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/position-absolute-percentage-inherit-001-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + font: 1em/1.25 serif; + margin: 1em 0em; + } + + div + { + background-color: green; + height: 300px; + width: 400px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled<br /> + green rectangle and no red.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/position-absolute-percentage-inherit-001.xht b/testing/web-platform/tests/css/CSS2/visuren/position-absolute-percentage-inherit-001.xht new file mode 100644 index 0000000000..3b9feaf25e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/position-absolute-percentage-inherit-001.xht @@ -0,0 +1,116 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: position absolute - dimensions and position given by offset percentages and inherit</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="help" title="6.2.1 The 'inherit' value" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#inherit" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-4/#inherit" /> + <link rel="help" title="4.3.2 Length" href="http://www.w3.org/TR/CSS21/syndata.html#length-units" /> + <link rel="match" href="position-absolute-percentage-inherit-001-ref.xht" /> + + <meta content="Absolutely positioned boxes can be dimensioned and positioned solely by setting offset 'top', 'right', 'bottom' and 'left' property values with percentage unit and then with inherit keyword. 'inherit' on a offset property makes such offset property take the same computed value as the offset property of the nearest positioned ancestor; in the case of a percentage value - like in this testcase - , the computed value is the specified percentage value of such nearest positioned ancestor." name="assert" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + font: 1em/1.25 serif; + margin: 1em 0em; + } + + div#rel-pos-grand-parent + { + background-color: green; + height: 300px; + position: relative; + width: 400px; + } + + div#abs-pos-parent + { + background-color: green; + bottom: 10%; /* 10% of 300px == 30px */ + left: 15%; /* 15% of 400px == 60px */ + position: absolute; + right: 20%; /* 20% of 400px == 80px */ + top: 30%; /* 30% of 300px == 90px */ + /* + height will be 300px minus 90px minus 30px == 180px + width will be 400px minus 60px minus 80px == 260px + */ + } + + div#abs-pos-child-red + { + background-color: red; + bottom: inherit; /* 10% of div#abs-pos-parent's height == 18px */ + left: inherit; /* 15% of div#abs-pos-parent's width == 39px */ + position: inherit; + right: inherit; /* 20% of div#abs-pos-parent's width == 52px */ + top: inherit; /* 30% of div#abs-pos-parent's height == 54px */ + /* + height will be 180px minus 54px minus 18px == 108px + width will be 260px minus 39px minus 52px == 169px + */ + } + + div#abs-pos-overlapping-green + { + background-color: green; + height: 108px; + left: 107px; + /* + 8px (body's margin-left) + + + 60px (div#abs-pos-parent's left offset) + + + 39px (div#abs-pos-child-red's left offset) + ================== + 107px + */ + position: absolute; + width: 169px; + top: 216px; + } + + /* + max(8px, 16px) (margin collapsing between body's margin-top and p's margin-top) + + + 20px (first line) + + + 20px (second line) + + + 16px (p's margin-bottom) + + + 90px (div#abs-pos-parent's top offset) + + + 54px (div#abs-pos-child-red's top offset) + ================== + 216px + */ + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled <br /> + green rectangle and no red.</p> + + <div id="rel-pos-grand-parent"> + <div id="abs-pos-parent"> + <div id="abs-pos-child-red"></div> + </div> + </div> + + <div id="abs-pos-overlapping-green"></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-1-noib-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-1-noib-ref.html new file mode 100644 index 0000000000..7b8a141e78 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-1-noib-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<style> + body > span { border: 3px solid blue } + #start { border-right: none; } + #two { border-left: none; } +</style> +<body> + <span id="start"></span> + <div>One</div> + <span id="two"> + Two + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-1-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-1-ref.html new file mode 100644 index 0000000000..f197d6ac93 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-1-noib-ref.html"> +<style> + body > span { border: 3px solid blue } +</style> +<body> + <span + ><div>One</div> + Two + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-1.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-1.html new file mode 100644 index 0000000000..07053efa19 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-1.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-1-ref.html"> +<script> +function doit() { + var target = document.getElementById("target"); + target.remove(); +} +</script> +<style> + body > span { border: 3px solid blue } +</style> +<body onload='doit()'> + <span + ><span id="target">Four</span + ><div>One</div> + Two + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-2-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-2-ref.html new file mode 100644 index 0000000000..9fd41e1384 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-2-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<style> + body > span { border: 3px solid blue } +</style> +<body> + <span> + One + Two + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-2.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-2.html new file mode 100644 index 0000000000..d4cf51040e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-2.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-2-ref.html"> +<script> +function doit() { + var target = document.getElementById("target"); + target.remove(); +} +</script> +<style> + body > span { border: 3px solid blue } +</style> +<body onload='doit()'> + <span> + One + <div id="target">Three</div> + Two + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-3-noib-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-3-noib-ref.html new file mode 100644 index 0000000000..124b8fd890 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-3-noib-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<style> + body > span { border: 3px solid blue } + #one { border-right: none; } + #tail { border-left: none; } +</style> +<body> + <span id="one"> + One + </span> + <div>Two</div> + <span id="tail"></span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-3-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-3-ref.html new file mode 100644 index 0000000000..5822665ffe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-3-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-3-noib-ref.html"> +<style> + body > span { border: 3px solid blue } +</style> +<body> + <span> + One + <div>Two</div + ></span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-3.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-3.html new file mode 100644 index 0000000000..1d5e2a45be --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-3.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-3-ref.html"> +<script> +function doit() { + var target = document.getElementById("target"); + target.remove(); +} +</script> +<style> + body > span { border: 3px solid blue } +</style> +<body onload='doit()'> + <span> + One + <div>Two</div + ><span id="target">Three</span + ></span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-4-noib-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-4-noib-ref.html new file mode 100644 index 0000000000..10c563ce54 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-4-noib-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<style> + body > span { border: 3px solid blue } + #one { border-right: none; } + #four { border-left: none; } +</style> +<body> + <span id="one"> + One + Two + </span> + <div>Three</div> + <span id="four"> + Four + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-4-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-4-ref.html new file mode 100644 index 0000000000..8768b0d25b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-4-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-4-noib-ref.html"> +<style> + body > span { border: 3px solid blue } +</style> +<body> + <span> + One + Two + <div>Three</div> + Four + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-4.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-4.html new file mode 100644 index 0000000000..44c0ceed87 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-4.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-4-ref.html"> +<script> +function doit() { + var target = document.getElementById("target"); + target.remove(); +} +</script> +<style> + body > span { border: 3px solid blue } +</style> +<body onload='doit()'> + <span> + One + <div id="target">Five</div> + Two + <div>Three</div> + Four + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-5-noib-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-5-noib-ref.html new file mode 100644 index 0000000000..8bd8802f66 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-5-noib-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<style> + body > span { border: 3px solid blue } + #one { border-right: none; } + #three { border-left: none; } +</style> +<body> + <span id="one"> + One + </span> + <div>Two</div> + <span id="three"> + Three + Four + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-5-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-5-ref.html new file mode 100644 index 0000000000..68258ef8b1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-5-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-5-noib-ref.html"> +<style> + body > span { border: 3px solid blue } +</style> +<body> + <span> + One + <div>Two</div> + Three + Four + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-5.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-5.html new file mode 100644 index 0000000000..539115e030 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-5.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-5-ref.html"> +<script> +function doit() { + var target = document.getElementById("target"); + target.remove(); +} +</script> +<style> + body > span { border: 3px solid blue } +</style> +<body onload='doit()'> + <span> + One + <div>Two</div> + Three + <div id="target">Five</div> + Four + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-6-noib-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-6-noib-ref.html new file mode 100644 index 0000000000..7678e811c0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-6-noib-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<style> + body > span { border: 3px solid blue } + #one { border-right: none; } + #four { border-left: none; } +</style> +<body> + <span id="one"> + One + </span> + <div>Two</div> + <div>Three</div> + <span id="four"> + Four + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-6-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-6-ref.html new file mode 100644 index 0000000000..bd43b45db5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-6-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-from-split-inline-6-noib-ref.html"> +<style> + body > span { border: 3px solid blue } +</style> +<body> + <span> + One + <div>Two</div> + <div>Three</div> + Four + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-6.html b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-6.html new file mode 100644 index 0000000000..99bbcf7a0f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-from-split-inline-6.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"/> +<link rel="match" href="remove-from-split-inline-6-ref.html"> +<script> +function doit() { + var target = document.getElementById("target"); + target.remove(); +} +</script> +<style> + body > span { border: 3px solid blue } +</style> +<body onload='doit()'> + <span> + One + <div>Two</div> + <span id="target">Five</span> + <div>Three</div> + Four + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-split-inline-1-ref.html b/testing/web-platform/tests/css/CSS2/visuren/remove-split-inline-1-ref.html new file mode 100644 index 0000000000..cf4cfffd50 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-split-inline-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +One +Two diff --git a/testing/web-platform/tests/css/CSS2/visuren/remove-split-inline-1.html b/testing/web-platform/tests/css/CSS2/visuren/remove-split-inline-1.html new file mode 100644 index 0000000000..cfe6a5e8c0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/remove-split-inline-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="remove-split-inline-1-ref.html"> +<script> +function doit() { + var target = document.getElementById("target"); + target.remove(); +} +</script> +<body onload='doit()'> + One + <span id="target"> + Three + <div>Four</div> + Five + </span> + Two +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/right-offset-position-fixed-001-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/right-offset-position-fixed-001-ref.xht new file mode 100644 index 0000000000..0f91ecfb7f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/right-offset-position-fixed-001-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference File</title> + <link rel="author" title="Chris Rebert" href="http://chrisrebert.com" /> + <style type="text/css"> +html { + direction: rtl; +} +p { + direction: ltr; +} +#greensquare { + background-color: green; + position: absolute; + right: 50%; + width: 100px; + height: 100px; +} + </style> + </head> + <body> + <p>Test passes if there is a solid green square and <strong>no red</strong>.</p> + + <div id="greensquare"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/right-offset-position-fixed-001.xht b/testing/web-platform/tests/css/CSS2/visuren/right-offset-position-fixed-001.xht new file mode 100644 index 0000000000..e232db90a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/right-offset-position-fixed-001.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: right:auto offset of position:fixed box in an RTL position:relative containing block</title> + <link rel="author" title="Chris Rebert" href="http://chrisrebert.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" /> + <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#position-props" /> + <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="right-offset-position-fixed-001-ref.xht" /> + <meta name="assert" content="The 'right' box offset property, for fixed positioning, when set to 'auto' specifies the offset of the box from its 'static-position containing block'. Here, in this test, the 'static-position containing block' is #shifted-column and the containing block for #red is established by the viewport." /> + <style type="text/css"> +html { + direction: rtl; +} +p { + direction: ltr; +} +#shifted-column { + right: 50%; + width: 50%; + position: relative; +} +.square { + width: 100px; + height: 100px; +} +#red { + background-color: red; + position: fixed; + right: auto; +} +#green { + background-color: green; + position: absolute; + right: 50%; +} + </style> + </head> + <body> + <p>Test passes if there is a solid green square and <strong>no red</strong>.</p> + + <div id="shifted-column"> + <div id="red" class="square"></div> + </div> + <div id="green" class="square"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-1-ref.html b/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-1-ref.html new file mode 100644 index 0000000000..3f2a82f83c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<span>First line</span> +<div>Second line</div> +<span>Third line, yes</span> diff --git a/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-1.html b/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-1.html new file mode 100644 index 0000000000..3ae7392c23 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="split-inner-inline-1-ref.html"> +<span> + First + <span> + line + <span style="display: block"> + Second line + </span> + Third + </span> + line, yes +</span> diff --git a/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-2-ref.html b/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-2-ref.html new file mode 100644 index 0000000000..1ace2f8fb6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<span>First line + <span style="border: 5px solid blue; border-right: none"></span> +</span> +<div>Second line</div> +<span> + <span style="border: 5px solid blue; border-left: none"></span> + Third line, yes +</span> diff --git a/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-2.html b/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-2.html new file mode 100644 index 0000000000..318df5344f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/split-inner-inline-2.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="split-inner-inline-2-ref.html"> +<span> + First line + <span style="border: 5px solid blue"> + <span style="display: block"> + Second line + </span> + </span> + Third line, yes +</span> diff --git a/testing/web-platform/tests/css/CSS2/visuren/support/100x100-lime.png b/testing/web-platform/tests/css/CSS2/visuren/support/100x100-lime.png Binary files differnew file mode 100644 index 0000000000..1b94770080 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/support/100x100-lime.png diff --git a/testing/web-platform/tests/css/CSS2/visuren/support/100x100-red.png b/testing/web-platform/tests/css/CSS2/visuren/support/100x100-red.png Binary files differnew file mode 100644 index 0000000000..57bf3ddc52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/support/100x100-red.png diff --git a/testing/web-platform/tests/css/CSS2/visuren/support/1x1-green.png b/testing/web-platform/tests/css/CSS2/visuren/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/support/1x1-green.png diff --git a/testing/web-platform/tests/css/CSS2/visuren/support/green_box.png b/testing/web-platform/tests/css/CSS2/visuren/support/green_box.png Binary files differnew file mode 100644 index 0000000000..6ed4aa506e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/support/green_box.png diff --git a/testing/web-platform/tests/css/CSS2/visuren/support/pattern-gg-gr-100x100.png b/testing/web-platform/tests/css/CSS2/visuren/support/pattern-gg-gr-100x100.png Binary files differnew file mode 100644 index 0000000000..fd9b7e1ef2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/support/pattern-gg-gr-100x100.png diff --git a/testing/web-platform/tests/css/CSS2/visuren/table-pseudo-in-part3-1-ref.html b/testing/web-platform/tests/css/CSS2/visuren/table-pseudo-in-part3-1-ref.html new file mode 100644 index 0000000000..b21050370d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/table-pseudo-in-part3-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <div> + aaa + <div>bbb</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/table-pseudo-in-part3-1.html b/testing/web-platform/tests/css/CSS2/visuren/table-pseudo-in-part3-1.html new file mode 100644 index 0000000000..cb50af9ca8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/table-pseudo-in-part3-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="table-pseudo-in-part3-1-ref.html"> +<span style="display: table-row"> + <span> + aaa + <span style="display: block"></span> + <span style="display: table-cell">bbb</span> + </span> +</span> diff --git a/testing/web-platform/tests/css/CSS2/visuren/top-114-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/top-114-ref.xht new file mode 100644 index 0000000000..54ebabb80b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/top-114-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {height: 436px;} + + div + { + background-color: green; + height: 100px; + left: 300px; + position: relative; + top: 50px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/top-114.xht b/testing/web-platform/tests/css/CSS2/visuren/top-114.xht new file mode 100644 index 0000000000..bd2d893b50 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/top-114.xht @@ -0,0 +1,88 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: position relative - top offset percentage and inherit</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="help" title="6.2.1 The 'inherit' value" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#inherit" /> + <link rel="help" href="http://www.w3.org/TR/css-cascade-4/#inherit" /> + <link rel="match" href="top-114-ref.xht" /> + + <meta content="'top: inherit' makes the top property take the same computed value as the top property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'top: [percentage]' refers to height of containing block." name="assert" /> + + <style type="text/css"><![CDATA[ + div {position: relative;} + + div#grand-parent-rel-pos + { + height: 400px; + width: 600px; + } + + div#red-rel-pos-overlapped + { + background-color: red; + color: white; + height: 100px; + left: 300px; + top: 50px; + width: 100px; + } + + div#parent-rel-pos + { + height: 0px; + left: 50%; /* 50% x 600px == 300px */ + /* 'left: [percentage]' refers to width of containing block. */ + top: -12.5%; /* -12.5% x 400px == -50px */ + /* 'top: [percentage]' refers to height of containing block. */ + width: 100px; + } + + div#green-child-rel-pos-inherit-overlapping + { + background-color: green; + height: 100px; + left: 0px; + top: inherit; + /* + ===================================== + top: inherit should resolve as top: -12.5% because + "the property takes the same computed value as the + property for the element's parent" + CSS 2.1, section 6.2.1 The 'inherit' value + http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit + and + "Computed value: (...) if specified as a percentage, [then] + the specified [percentage] value" + http://www.w3.org/TR/CSS21/visuren.html#position-props + + So, the top offset of #green-child-rel-pos-inherit-overlapping + should be -12.5%, which is -12.5% of the height of its containing + block (#parent-rel-pos) which is 0px. + ===================================== + */ + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="grand-parent-rel-pos"> + <div id="red-rel-pos-overlapped">test FAILED</div> + <div id="parent-rel-pos"> + <div id="green-child-rel-pos-inherit-overlapping"></div> + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visuren/top-115-ref.xht b/testing/web-platform/tests/css/CSS2/visuren/top-115-ref.xht new file mode 100644 index 0000000000..2f6bc48cfd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/top-115-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {height: 524px;} + + div + { + background-color: green; + height: 100px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and if there is <strong>no red</strong> in this page, <strong>even at its bottom</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visuren/top-115.xht b/testing/web-platform/tests/css/CSS2/visuren/top-115.xht new file mode 100644 index 0000000000..471b909d26 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/top-115.xht @@ -0,0 +1,66 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: position relative - top offset percentage and auto-height containing block</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="help" title="10.5 Content height: the 'height' property" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="match" href="top-115-ref.xht" /> + + <meta content="'top: [percentage]' for a relatively positioned box refers to height of its containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, then the percentage height value computes to 'auto'." name="assert" /> + + <style type="text/css"><![CDATA[ + div + { + height: 100px; + left: auto; + position: relative; + width: 100px; + } + + #rel-pos-overlapped-red + { + background-color: red; + color: white; + top: 50%; + } + + #rel-pos-overlapping-green + { + background-color: green; + top: -100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and if there is <strong>no red</strong> in this page, <strong>even at its bottom</strong>.</p> + + <div id="rel-pos-overlapped-red">Test FAILED</div> + + <div id="rel-pos-overlapping-green"></div> + + <p> </p> + + <p> </p> + + <p> </p> + + <p> </p> + + <p> </p> + + <p> </p> + + <p> </p> + + <p> </p> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visuren/whitespace-present-1-ref.html b/testing/web-platform/tests/css/CSS2/visuren/whitespace-present-1-ref.html new file mode 100644 index 0000000000..46cac675c5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/whitespace-present-1-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<style> + body > span { border: 3px solid blue } + .notstart { border-left: none; } + .notend { border-right: none; } +</style> +<body> + <span class="notend"></span> + <div>One</div> + <span class="notstart notend"></span> + <div>Two</div> + <span class="notstart"></span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/whitespace-present-1a.html b/testing/web-platform/tests/css/CSS2/visuren/whitespace-present-1a.html new file mode 100644 index 0000000000..283884b084 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/whitespace-present-1a.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="whitespace-present-1-ref.html"> +<style> + body > span { border: 3px solid blue } +</style> +<body> + <span> + <div>One</div> + <div>Two</div> + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/visuren/whitespace-present-1b.html b/testing/web-platform/tests/css/CSS2/visuren/whitespace-present-1b.html new file mode 100644 index 0000000000..70239a8e08 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visuren/whitespace-present-1b.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS 2.1 Test Suite: handling of blocks inside inlines</title> +<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"> +<link rel="match" href="whitespace-present-1-ref.html"> +<style> + body > span { border: 3px solid blue } +</style> +<script> +function doIt() { + var t = document.createTextNode(" "); + var d = document.getElementById("d"); + d.parentNode.insertBefore(t, d); +} +</script> +<body onload="doIt()"> + <span> + <div>One</div><div id="d">Two</div> + </span> +</body> |
