diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
| commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
| tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/CSS2/positioning | |
| parent | Initial commit. (diff) | |
| download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip | |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/positioning')
759 files changed, 27602 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-001.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-001.xht new file mode 100644 index 0000000000..5d5216fd4a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-001.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned, non-replaced elements, static position of fixed element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <meta name="assert" content="The calculation of static position for a fixed positioned element when top, right, bottom, and left are all 'auto' is based off the containing block not the initial containing block." /> + <style type="text/css"> + html, body, p + { + margin: 0; + padding: 0; + } + #div1 + { + border: solid black; + height: 2in; + position: absolute; + top: 1in; + width: 3in; + } + div div + { + background: blue; + height: 1in; + position: fixed; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes the a filled blue square touches the upper-left corner of the black box.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-002-ref.xht new file mode 100644 index 0000000000..944c0999de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-002-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 200px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + + <div><img src="support/blue15x15.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/positioning/absolute-non-replaced-height-002.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-002.xht new file mode 100644 index 0000000000..d9976fa841 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-002.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned, non-replaced elements with height based on the content</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="If 'top', 'height', 'bottom', 'margin-top' and 'margin-bottom' are all auto, then set 'top' to the static position, then the height is based on the content, then 'margin-top' and 'margin-bottom' are set to 0 and then solve for 'bottom'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + bottom: auto; + color: blue; + font: 100px/1em Ahem; + height: auto; + margin-bottom: auto; + margin-top: auto; + position: absolute; + top: auto; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-003-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-003-ref.xht new file mode 100644 index 0000000000..e85fef7f02 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-003-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img + { + height: 96px; + vertical-align: top; + width: 100%; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + + <div><img src="support/1x1-white.png" alt="Image download support must be enabled" /><img src="support/blue15x15.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-003.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-003.xht new file mode 100644 index 0000000000..523409cd5f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-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: Absolutely positioned, non-replaced elements, vertical centering</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="An absolutely positioned non-replaced element's padding box (which is the area painted by background-color of the element) will be vertically centered within its containing block only if both 'margin-top' and 'margin-bottom' have equal values and if 'top' and 'bottom' have equal values. An absolutely positioned non-replaced element's margin box will be vertically centered within its containing block only if 'top' and 'bottom' have equal values." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 0.5in; + height: 1in; + margin-bottom: auto; + margin-top: auto; + position: absolute; + top: 0.5in; + width: 100%; + } + + /* + + 0.5in : top + + + auto (solve): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 1in : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + auto (solve) : margin-bottom + + + 0.5in : bottom + ============= + 3.0in : height of containing block + + So, margin-bottom and margin-top must use 0.5in so that the equation gets balanced. + + */ + + + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-004.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-004.xht new file mode 100644 index 0000000000..8529925213 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-004.xht @@ -0,0 +1,65 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned, non-replaced elements, 'margin-top' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="When 'top', 'bottom', 'height' and 'margin-bottom' of an absolutely positioned, non-replaced element are all not 'auto' while its 'margin-top' is 'auto', then 'margin-top' becomes the remainder of the height of its containing block." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 0.5in; + height: 1in; + margin-top: auto; + margin-bottom: 0.5in; + position: absolute; + top: 0.5in; + width: 100%; + } + + /* + + 0.5in : top + + + auto (solve): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 1in: height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + 0.5in : margin-bottom + + + 0.5in : bottom + ============= + 3.0in : height of containing block + + So, margin-top must use 0.5in so that the equation gets balanced. + + */ + + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-005.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-005.xht new file mode 100644 index 0000000000..3aa09b8592 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-005.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: Absolutely positioned, non-replaced elements, 'margin-bottom' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="When 'top', 'bottom' and 'height' are all are not 'auto', 'margin-top' is not 'auto' and 'margin-bottom' is 'auto'. Then 'margin-bottom' becomes the remainder of the height of the containing box." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 0.5in; + height: 1in; + margin-bottom: auto; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: 100%; + } + + /* + + 0.5in : top + + + 0.5in : margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 1in: height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + auto (solve) : margin-bottom + + + 0.5in : bottom + ============= + 3.0in : height of containing block + + So, margin-bottom must use 0.5in so that the equation gets balanced. + + */ + + + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-006-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-006-ref.xht new file mode 100644 index 0000000000..0253cc9345 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-006-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[ + div + { + border: black solid 10px; + height: 300px; + width: 300px; + } + + img + { + height: 100px; + vertical-align: top; + width: 100%; + } + + img + img {height: 150px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is one and only one blue rectangle inside an hollow black square and if such black square does not have a vertical scrollbar.</p> + + <div><img src="support/1x1-white.png" alt="Image download support must be enabled" /><img src="support/blue15x15.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-006.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-006.xht new file mode 100644 index 0000000000..9992d47115 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-006.xht @@ -0,0 +1,82 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned, non-replaced elements, over-constrained</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-27 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-006-ref.xht" /> + + <meta name="assert" content="The 'bottom' value is ignored and the equation solves for the bottom value, when the values for 'top', 'bottom', 'height', 'margin-top', 'margin-bottom' add up to more than the containing blocks height." /> + <style type="text/css"> + #div1 + { + border: 10px solid black; + height: 300px; + position: relative; + width: 300px; + overflow: auto; + } + div div + { + background: blue; + height: 150px; + margin-bottom: 50px; + margin-top: 50px; + position: absolute; + top: 50px; + width: 50%; + } + #div2 + { + bottom: 50px; + } + + /* + + 50px : top + + + 50px : margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 150px : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + 50px : margin-bottom + + + 50px : bottom + ============= + 350px while the height of containing block is only 300px. + + So, here we definitely have an overconstrained situation. In which + case the spec clearly states + "If the values are over-constrained, ignore the value for 'bottom' + and solve for that value." + http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height + + So, here, the used value for bottom will be 0px so that the equation + gets balanced. + + */ + + #div3 + { + bottom: 0; + left: 50%; + } + </style> + </head> + <body> + <p>Test passes if there is one and only one blue rectangle inside an hollow black square and if such black square does not have a vertical scrollbar.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-007-ref.xht new file mode 100644 index 0000000000..2ad96acaba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-007-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img + { + height: 100px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p> + + <div><img src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/blue15x15.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-007.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-007.xht new file mode 100644 index 0000000000..7403f50e50 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-007.xht @@ -0,0 +1,98 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Absolutely positioned, non-replaced elements, shrink-to-fit solve for top</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Verify that height is based on the overall height of the content, 'margin-top' and 'margin-bottom' when set to 'auto' are solved to '0' and solve for 'top', when 'top' and 'height' are both 'auto' and 'bottom' is not 'auto'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + color: orange; + font: 100px/1 Ahem; + height: 300px; + position: relative; + width: 200px; + } + div div + { + background: blue; + bottom: 200px; + height: auto; + margin-bottom: auto; + margin-top: auto; + position: absolute; + top: auto; + width: 100%; + } + + /* + + auto (to solve) : top + + + auto (to solve): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + auto (to solve) : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + auto (to solve): margin-bottom + + + 200px : bottom + ============= + 300px : height of containing block + + " + 'top' and 'height' are 'auto' and 'bottom' is not 'auto', + then the height is based on the content per 10.6.7, + set 'auto' values for 'margin-top' and 'margin-bottom' to 0, + and solve for 'top' + " + + so this brings: + + + auto (to solve) : top + + + 0 (solved): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 100px (solved: based on content) : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + 0 (solved) : margin-bottom + + + 200px : bottom + ============= + 300px : height of containing block + + so top will use 0px + + */ + + </style> + </head> + <body> + <p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-008-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-008-ref.xht new file mode 100644 index 0000000000..131604bada --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-008-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[ + img + { + height: 96px; + vertical-align: top; + width: 96px; + } + + img#blue + { + height: 192px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a blue rectangle is below an orange square.</p> + + <div><img src="support/swatch-orange.png" alt="Image download support must be enabled" /><br /><img id="blue" src="support/blue15x15.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-008.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-008.xht new file mode 100644 index 0000000000..22f8598a49 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-008.xht @@ -0,0 +1,96 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Absolutely positioned, non-replaced elements, 'top' set to static position</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-27 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-008-ref.xht" /> + + <meta name="assert" content="When 'top' is set to the static position and any 'auto' values for top and bottom margin are set to '0', when 'top' and 'bottom' are 'auto' and 'height' is not 'auto'." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 3in; + position: relative; + width: 1in; + } + div div + { + background: orange; + bottom: auto; + height: 1in; + margin-bottom: auto; + margin-top: auto; + position: absolute; + top: auto; + width: 100%; + } + + + /* + + auto (to solve) : top + + + auto (to solve): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 1in : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + auto (to solve): margin-bottom + + + auto (to solve) : bottom + ============= + 3in : height of containing block + + + " + 'top' and 'bottom' are 'auto' and 'height' is not 'auto', + then set 'top' to the static position, + set 'auto' values for 'margin-top' and 'margin-bottom' to 0, + and solve for 'bottom' + " + + so this brings: + + 0 (solved static position) : top + + + 0 (solved): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 1in : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + 0 (solved): margin-bottom + + + auto (to solve) : bottom + ============= + 3in : height of containing block + + So, bottom must use 2in in order to balance the equation + + + */ + </style> + </head> + <body> + <p>Test passes if a blue rectangle is below an orange square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-009-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-009-ref.xht new file mode 100644 index 0000000000..51ec44e9cf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-009-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 {margin-top: 41px;} + + img + { + height: 100px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p> + + <div><img src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/blue15x15.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-009.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-009.xht new file mode 100644 index 0000000000..0fd5ac83e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-009.xht @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned, non-replaced elements, height is based on the content</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-009-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'height' is based on the content height, 'auto' values for 'margin-top' and 'margin-bottom' are set to '0' when 'height' and 'bottom' are 'auto' and 'top' is not 'auto'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + position: relative; + } + div div + { + background: blue; + bottom: auto; + color: orange; + font: 100px/1 Ahem; + height: auto; + margin-bottom: auto; + margin-top: auto; + position: absolute; + top: 25px; + width: 200px; + } + + <!-- + " + height' and 'bottom' are 'auto' and 'top' is not 'auto', + then the height is based on the content per 10.6.7, + set 'auto' values for 'margin-top' and 'margin-bottom' to 0, + and solve for 'bottom' + " + http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height + + In this test, + top used value will be 25px + height used value will be 100px + vertical margins will be 0px + bottom used value will be -125px + because the computed height of containing block is 0px. + --> + + </style> + </head> + <body> + <p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-010.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-010.xht new file mode 100644 index 0000000000..1a6b797704 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-010.xht @@ -0,0 +1,95 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Absolutely positioned, non-replaced elements, 'margin-top' and 'margin-bottom' set to '0'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="The 'auto' values for 'margin-top' and 'margin-bottom' are set to '0', when 'top' is 'auto' and 'height' and 'bottom' are not 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 1in; + height: 1in; + margin-bottom: auto; + margin-top: auto; + position: absolute; + top: auto; + width: 100%; + } + + /* + + auto (to solve) : top + + + auto (to solve): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 1in : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + auto (to solve): margin-bottom + + + 1in : bottom + ============= + 3in : height of containing block + + + " + 'top' is 'auto', 'height' and 'bottom' are not 'auto', + then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, + and solve for 'top' + " + + so this brings: + + auto (to solve) : top + + + 0 (set): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 1in : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + 0 (set): margin-bottom + + + 1in : bottom + ============= + 3in : height of containing block + + So, top must use 1in in order to balance the equation + + + */ + + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-011.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-011.xht new file mode 100644 index 0000000000..fa9a0db666 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-011.xht @@ -0,0 +1,93 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Absolutely positioned, non-replaced elements, 'height' based on 'top' and 'bottom' positions</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="The 'auto' values on 'margin-top', 'margin-bottom' are set to '0' and the 'height' is the remaining space between the 'top' and 'bottom' positions, when 'height' is 'auto' and 'top' and 'bottom' are both not 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 1in; + height: auto; + margin-bottom: auto; + margin-top: auto; + position: absolute; + top: 1in; + width: 100%; + } + + /* + + 1in : top + + + auto (to solve): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + auto (to solve) : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + auto (to solve): margin-bottom + + + 1in : bottom + ============= + 3in : height of containing block + + + " + 'height' is 'auto', 'top' and 'bottom' are not 'auto', + then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 + and solve for 'height' + " + + so this brings: + + 1in : top + + + 0 (set): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + auto (to solve) : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + 0 (set): margin-bottom + + + 1in : bottom + ============= + 3in : height of containing block + + So, height must use 1in in order to balance the equation + + */ + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-012.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-012.xht new file mode 100644 index 0000000000..95d5566b9f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-012.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned, non-replaced elements, solve for 'bottom'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="When 'margin-top' and 'margin-bottom' are set to '0' the 'bottom' value resolves to the remaining space within the containing block." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + position: absolute; + top: 1in; + bottom: auto; + height: 1in; + margin-top: auto; + margin-bottom: auto; + background: blue; + width: 100%; + } + + /* + " + 'bottom' is 'auto', 'top' and 'height' are not 'auto', + then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 + and solve for 'bottom' + " + + Therefore, bottom used value must be 1in + */ + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-013.html b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-013.html new file mode 100644 index 0000000000..46929f360a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-height-013.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>Auto margin-top and margin-bottom, non-auto everything else</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position:relative; width:100px; height:100px; background:red;"> + <div style="position:absolute; top:50%; bottom:50%; width:100px; height:100px; margin:auto; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-001-ref.html b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-001-ref.html new file mode 100644 index 0000000000..742b3063ab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-001-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> +<p>Test passes if there is a green square containing a smaller black square below. +<div style="width: 2em; height: 2em; background: green;"> + <div style="width: 1em; height: 1em; background: black;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-001.html b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-001.html new file mode 100644 index 0000000000..4b208c5831 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-001.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: ‘max-width’ and ‘max-height’ affect percentage sizes in descendants</title> +<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css2/#min-max-widths"> +<link rel="help" href="https://drafts.csswg.org/css2/#min-max-heights"> +<link rel="match" href="absolute-non-replaced-max-001-ref.html"> +<meta name="assert" value="This test verifies that when the used ‘width’ and ‘height’ are affected by ‘max-width’ and ‘max-height’, the descendants are laid out with a containing block of the new size, so any percentage sizes are resolved against that new size."> +<p>Test passes if there is a green square containing a smaller black square below. +<div style="position: absolute; width: 4em; height: 4em; max-width: 2em; max-height: 2em; background: green;"> + <div style="width: 50%; height: 50%; background: black;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-001.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-001.xht new file mode 100644 index 0000000000..6e947780af --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-001.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, static position of fixed element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <meta name="assert" content="The calculation of static position is based on initial containing block when there is a fixed positioned element." /> + <style type="text/css"> + html, body, p + { + margin: 0; + padding: 0; + } + #div1 + { + border: solid black; + height: 2in; + position: absolute; + width: 2in; + } + div div + { + background: blue; + height: 1in; + max-height: 0.5in; + position: fixed; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes a blue rectangle is in the upper-left corner of a hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-002-ref.xht new file mode 100644 index 0000000000..75b0e54b44 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-002-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[ + div + { + border: black solid medium; + height: 200px; + width: 200px; + } + + img {padding-left: 100px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a blue rectangle in the <strong>upper-right corner</strong> of an hollow black square.</p> + + <div><img src="support/blue15x15.png" width="100" height="50" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-002.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-002.xht new file mode 100644 index 0000000000..7637068a9c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-002.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-29 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-max-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When 'top', 'height', and 'bottom' of an absolutely positioned element are 'auto', then set 'top' to the static position and make 'height' based on the content; such height may be constrained by a given 'max-height' value." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: blue; + bottom: auto; + font: 100px/1 Ahem; + height: auto; + margin-bottom: auto; + margin-top: auto; + max-height: 50px; + position: absolute; + right: 0; + top: auto; + } + </style> + </head> + <body> + <p>Test passes if there is a blue rectangle in the <strong>upper-right corner</strong> of an hollow black square.</p> + <div id="div1"> + <div> </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-003-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-003-ref.xht new file mode 100644 index 0000000000..9dba17bd96 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-003-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[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img {padding-top: 120px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + + <div><img src="support/blue15x15.png" width="288" height="48" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-003.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-003.xht new file mode 100644 index 0000000000..edbb0127bf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-003.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, vertical centering</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-max-height-003-ref.xht" /> + + <meta name="assert" content="An absolutely positioned non-replaced element's padding box (which is the area painted by background-color of the element) will be vertically centered within its containing block only if both 'margin-top' and 'margin-bottom' have equal values and if 'top' and 'bottom' have equal values. An absolutely positioned non-replaced element's margin box will be vertically centered within its containing block only if 'top' and 'bottom' have equal values." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 0.5in; + height: 1in; + margin-bottom: auto; + margin-top: auto; + max-height: 0.5in; + position: absolute; + top: 0.5in; + width: 100%; + } + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-004.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-004.xht new file mode 100644 index 0000000000..09f0f44c60 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-004.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'margin-top' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="When 'top', 'bottom' and 'height' are all are not 'auto', 'margin-top' is 'auto' and 'margin-bottom' is not 'auto'. Then 'margin-top' becomes the remainder of the height of the containing box." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 0.5in; + height: 2in; + margin-bottom: 0.5in; + margin-top: auto; + max-height: 1in; + position: absolute; + top: 0.5in; + width: 100%; + } + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-005.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-005.xht new file mode 100644 index 0000000000..6c1590a86a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-005.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'margin-bottom' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="When 'top', 'bottom' and 'height' are all are not 'auto', 'margin-top' is not 'auto' and 'margin-bottom' is 'auto'. Then 'margin-bottom' becomes the remainder of the height of the containing box." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 0.5in; + height: 2in; + margin-bottom: auto; + margin-top: 0.5in; + max-height: 1in; + position: absolute; + top: 0.5in; + width: 100%; + } + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-006.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-006.xht new file mode 100644 index 0000000000..4c6767afaa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-006.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, over-constrained</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="The 'bottom' value is ignored and the equation solves for the bottom value, when the values for 'top', 'bottom', 'height', 'margin-top', 'margin-bottom' add up to more than the containing blocks height." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 0.5in; + height: 2in; + margin-bottom: 0.5in; + margin-top: 0.5in; + max-height: 1in; + position: absolute; + top: 0.5in; + width: 100%; + } + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-007-ref.xht new file mode 100644 index 0000000000..6b2f646508 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-007-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {margin-top: 66px;} + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the <strong>same height</strong>.</p> + + <div><img src="support/blue15x15.png" width="50" height="50" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="50" height="50" 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/positioning/absolute-non-replaced-max-height-007.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-007.xht new file mode 100644 index 0000000000..71f3861086 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-007.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, shrink-to-fit solve for top</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-29 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-max-height-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The height is based on the overall height of the content, 'margin-top', 'auto' is set to '0' and solve for 'top', when 'top' and 'height' are both 'auto' and 'bottom' is not 'auto'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + font: 100px/1 Ahem; + height: 400px; + position: relative; + width: 100px; + } + #div2 + { + background: orange; + height: 50px; + position: relative; + top: 50px; + width: 100px; + } + #div3 + { + background: blue; + bottom: 300px; + height: auto; + margin-bottom: auto; + margin-top: auto; + max-height: 50px; + position: absolute; + top: auto; + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"> </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-008-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-008-ref.xht new file mode 100644 index 0000000000..4967af66ea --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-008-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a small orange rectangle and a bigger blue rectangle.</p> + + <div><img src="support/swatch-orange.png" width="96" height="48" alt="Image download support must be enabled" /><br /><img src="support/blue15x15.png" width="96" height="240" 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/positioning/absolute-non-replaced-max-height-008.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-008.xht new file mode 100644 index 0000000000..78b1c7f6f7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-008.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'top' set to static position</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-29 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-max-height-008-ref.xht" /> + + <meta name="assert" content="When 'top' is set to the static position and any 'auto' values for top and bottom margin are set to '0', when 'top' and 'bottom' are 'auto' and 'height' is not 'auto'." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 3in; + position: relative; + width: 1in; + } + div div + { + background: orange; + bottom: auto; + height: 1in; + margin-bottom: auto; + margin-top: auto; + max-height: 0.5in; + position: absolute; + top: auto; + width: 100%; + } + </style> + </head> + <body> + <p>Test passes if there is a small orange rectangle and a bigger blue rectangle.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-009-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-009-ref.xht new file mode 100644 index 0000000000..aea00aaa43 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-009-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {margin-top: 41px;} + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange and blue rectangles have the <strong>same height</strong>.</p> + + <div><img src="support/swatch-orange.png" width="100" height="50" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="100" height="50" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-009.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-009.xht new file mode 100644 index 0000000000..47e6011427 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-009.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, height is shrink-to-fit</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-max-height-009-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'height' is based on the content height, 'auto' values for 'margin-top' and 'margin-bottom' are set to '0' when 'height' and 'bottom' are 'auto' and 'top' is not 'auto'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: blue; + height: 50px; + left: 100px; + position: absolute; + top: 25px; + width: 100px; + } + #div3 + { + background: orange; + bottom: auto; + font: 100px/1 Ahem; + height: auto; + margin-bottom: auto; + margin-top: auto; + max-height: 50px; + position: absolute; + top: 25px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if the orange and blue rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"> </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-010.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-010.xht new file mode 100644 index 0000000000..4585b7f0de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-010.xht @@ -0,0 +1,94 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'margin-top' and 'margin-bottom' set to '0'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="When 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content (and such height can be constrained by a max-height declaration) and then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top' " /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 1in; + height: 2in; + margin-bottom: auto; + margin-top: auto; + max-height: 1in; + position: absolute; + top: auto; + width: 100%; + } + + /* + + auto (to solve) : top + + + auto (to solve): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 2in : height (will be constrained to use 1in by max-height) + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + auto (to solve): margin-bottom + + + 1in : bottom + ============= + 3in : height of containing block + + + " + 'top' is 'auto', 'height' and 'bottom' are not 'auto', + then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, + and solve for 'top' + " + + so this brings: + + auto (to solve) : top + + + 0 (set): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 1in (constrained) : height + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + 0 (set): margin-bottom + + + 1in : bottom + ============= + 3in : height of containing block + + So, top must use 1in in order to balance the equation + + */ + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-011.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-011.xht new file mode 100644 index 0000000000..6fd93c8c11 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-011.xht @@ -0,0 +1,129 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, 'height' based on 'top' and 'bottom' positions</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-max-height-003-ref.xht" /> + + <meta name="assert" content="The 'auto' values on 'margin-top', 'margin-bottom' are set to '0' and the 'height' is the remaining space between the 'top' and 'bottom' positions, when 'height' is 'auto' and 'top' and 'bottom' are both not 'auto'. If such height is constrained by max-height, then we must re-process the values as following. If none of 'top', height, bottom are 'auto' and if both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: 1in; + height: auto; + margin-bottom: auto; + margin-top: auto; + max-height: 0.5in; + position: absolute; + top: 1in; + width: 100%; + } + + + /* + + 1in : top + + + auto (to solve): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + auto (to solve) : height (may be constrained to use 0.5in by max-height) + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + auto (to solve): margin-bottom + + + 1in : bottom + ============= + 3in : height of containing block + + + " + 'top' is 'auto', 'height' and 'bottom' are not 'auto', + then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, + and solve for 'top' + " + + so this brings: + + 1in : top + + + 0 (set): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 1in (not constrained) : height (must be constrained to use 0.5in by max-height) + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + 0 (set): margin-bottom + + + 1in : bottom + ============= + 3in : height of containing block + + So, here, we must reenter the algorithm since height is + constrained and is no longer 'auto'. + + " + If none of the three [top, height, bottom] are 'auto': + If both 'margin-top' and 'margin-bottom' are 'auto', + solve the equation under the extra constraint that + the two margins get equal values. + " + + so this brings: + + 1in : top + + + auto (to solve): margin-top + + + 0 : border-top-width + + + 0 : padding-top + + + 0.5in (constrained) : height (constrained by max-height) + + + 0 : padding-bottom + + + 0 : border-bottom-width + + + auto (to solve): margin-bottom + + + 1in : bottom + ============= + 3in : height of containing block + + + So, here, margin-top must use 0.25in and margin-bottom must use 0.25in + so that the equation remains balanced. + + */ + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-012.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-012.xht new file mode 100644 index 0000000000..710a366d82 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-max-height-012.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Max-height on absolutely positioned, non-replaced elements, solve for 'bottom'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-003-ref.xht" /> + + <meta name="assert" content="When 'margin-top' and 'margin-bottom' are set to '0' the 'bottom' value resolves to the remaining space within the containing block." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 3in; + } + div div + { + background: blue; + bottom: auto; + height: 2in; + margin-top: auto; + margin-bottom: auto; + max-height: 1in; + position: absolute; + top: 1in; + width: 100%; + } + </style> + </head> + <body> + <p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-min-001.html b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-min-001.html new file mode 100644 index 0000000000..0e6d17661e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-min-001.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: ‘min-width’ and ‘min-height’ affect percentage sizes in descendants</title> +<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css2/#min-max-widths"> +<link rel="help" href="https://drafts.csswg.org/css2/#min-max-heights"> +<link rel="match" href="absolute-non-replaced-min-max-001-ref.html"> +<meta name="assert" value="This test verifies that when the used ‘width’ and ‘height’ are affected by ‘min-width’ and ‘min-height’, the descendants are laid out with a containing block of the new size, so any percentage sizes are resolved against that new size."> +<p>Test passes if there is a green square below. +<div style="position: absolute; width: 0; height: 0; min-width: 1em; min-height: 1em; background: black;"> + <div style="width: 100%; height: 100%; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-min-max-001-ref.html b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-min-max-001-ref.html new file mode 100644 index 0000000000..3bbba2be90 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-min-max-001-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> +<p>Test passes if there is a green square below. +<div style="width: 1em; height: 1em; background: green;"></div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-min-max-001.html b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-min-max-001.html new file mode 100644 index 0000000000..2e240b7509 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-min-max-001.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: ‘min-width’ and ‘min-height’ take precedence over ‘max-width’ and ‘max-height’ when contradictory</title> +<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css2/#min-max-widths"> +<link rel="help" href="https://drafts.csswg.org/css2/#min-max-heights"> +<link rel="match" href="absolute-non-replaced-min-max-001-ref.html"> +<meta name="assert" value="This test verifies that when ‘min-width’ is greater than ‘max-width’, or ‘min-height’ is greater than ‘max-height’, the minimums take precedence, because the steps that recalculate sizes and margins for the minimums (step 3) come after the steps for the maximums (step 2)."> +<p>Test passes if there is a green square below. +<div style="position: absolute; width: 0; height: 0; min-width: 1em; min-height: 1em; max-width: 0; max-height: 0; background: green;"></div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-001.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-001.xht new file mode 100644 index 0000000000..6d2b8a33a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-001.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 Test: Solving for 'right' on absolutely positioned non-replaced elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When direction is left-to-right and 'left', 'width' and 'right' are 'auto', the width becomes shrink-to-fit and then solve for 'right'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1 Ahem; + left: auto; + position: absolute; + right: auto; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-002-ref.xht new file mode 100644 index 0000000000..e88ac80983 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-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 + { + border: black solid medium; + height: 200px; + padding-left: 100px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + + <div><img src="support/blue15x15.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/positioning/absolute-non-replaced-width-002.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-002.xht new file mode 100644 index 0000000000..621d4a1b67 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-002.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 Test: Solving for 'left' on absolutely positioned non-replaced elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-width-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When direction is right-to-left and 'left', 'width' and 'right' are 'auto', then set 'right' to the static position, then width becomes shrink-to-fit and then solve for 'left'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1em Ahem; + left: auto; + position: absolute; + right: auto; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-003-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-003-ref.xht new file mode 100644 index 0000000000..1424700b13 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-003-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 + { + border: black solid medium; + height: 200px; + padding-left: 300px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black rectangle and if there is <strong>no red</strong>.</p> + + <div><img src="support/blue15x15.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/positioning/absolute-non-replaced-width-003.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-003.xht new file mode 100644 index 0000000000..587eaa4601 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-003.xht @@ -0,0 +1,64 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned non-replaced elements with 'margin-left' and 'margin-right' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-width-003-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When 'left', 'width' and 'right' are not 'auto', set 'margin-left' and 'margin-right' to equal values." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #containingblock + { + border: solid black; + height: 200px; + position: relative; + width: 400px; + } + div div + { + /* + left : 100px + + + margin-left : solve + + + border-left-width : 0px + + + padding-left : 0px + + + width : 100px + + + padding-right : 0px + + + border-right-width: 0px + + + margin-right : solve + + + right : -200px + ============================= + width of containing block : 400px + + */ + + background: red; + color: blue; + font: 100px/1em Ahem; + left: 100px; + margin-left: auto; /* value is solved to 200px */ + margin-right: auto; /* value is solved to 200px */ + position: absolute; + right: -200px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black rectangle and if there is <strong>no red</strong>.</p> + <div id="containingblock"> + <div>X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-004.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-004.xht new file mode 100644 index 0000000000..2f2b90708e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-004.xht @@ -0,0 +1,65 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned non-replaced elements when both 'margin-left' and 'margin-right' are set to 'auto' and direction is left-to-right</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-width-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When direction is 'ltr' and 'left', 'width' and 'right' are not 'auto', solve for 'margin-right' and 'margin-left' to equal values. If this would make 'margin-left' and 'margin-right' negative, then set 'margin-left' to zero and solve for 'margin-right'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1em Ahem; + left: 100px; + margin-left: auto; + margin-right: auto; + position: absolute; + right: 100px; + width: 100px; + } + /* + left : 100px + + margin-left : solve (auto) + + border-left-width : 0 + + padding-left : 0 + + width : 100px + + padding-right : 0 + + border-right-width : 0 + + margin-right : solve (auto) + + right : 100px + ==================================== + width of containing block : 200px + + So, margin-left and margin-right would be each -50px at this point. + + "...unless this would make them (the two margins) negative + in which case when direction of the containing block is + 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and + solve for 'margin-right' ('margin-left')." + + So, under such extra constraint, 'margin-left' must become 0 + and 'margin-right' must become -100px. + */ + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-005.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-005.xht new file mode 100644 index 0000000000..d2d3ca9d06 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-005.xht @@ -0,0 +1,65 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned non-replaced elements when both 'margin-left' and 'margin-right' are set to 'auto' and direction is right-to-left</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When direction is 'rtl' and 'left', 'width' and 'right' are not 'auto', solve for 'margin-right' and 'margin-left' to equal values. If this would make 'margin-left' and 'margin-right' negative, then set 'margin-right' to zero and solve for 'margin-left'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1em Ahem; + left: 100px; + margin-left: auto; + margin-right: auto; + position: absolute; + right: 100px; + width: 100px; + } + /* + left : 100px + + margin-left : solve (auto) + + border-left-width : 0 + + padding-left : 0 + + width : 100px + + padding-right : 0 + + border-right-width : 0 + + margin-right : solve (auto) + + right : 100px + ==================================== + width of containing block : 200px + + So, margin-left and margin-right would be each -50px at this point. + + "...unless this would make them (the two margins) negative + in which case when direction of the containing block is + 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and + solve for 'margin-right' ('margin-left')." + + So, under such extra constraint, 'margin-right' must become 0 + and 'margin-left' must become -100px. + */ + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-006.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-006.xht new file mode 100644 index 0000000000..e1033fff68 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-006.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned non-replaced element when only 'margin-right' is 'auto' and direction is left-to-right</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-width-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When direction is left-to-right and 'left', 'width', 'margin-left' and 'right' are not 'auto', solve for 'margin-right'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1 Ahem; + left: 50px; + margin-left: 50px; + margin-right: auto; + position: absolute; + right: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-007.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-007.xht new file mode 100644 index 0000000000..db1678b147 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-007.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned non-replaced element when only 'margin-left' is 'auto' and direction is right-to-left</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When direction is right-to-left and 'left', 'width', 'margin-right' and 'right' are not 'auto', solve for 'margin-left'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1 Ahem; + left: 100px; + margin-left: auto; + margin-right: 50px; + position: absolute; + right: 50px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-008-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-008-ref.xht new file mode 100644 index 0000000000..28706ddbdc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-008-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 200px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black rectangle and if there is <strong>no red</strong>.</p> + + <div><img src="support/blue15x15.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/positioning/absolute-non-replaced-width-008.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-008.xht new file mode 100644 index 0000000000..e5baff3022 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-008.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: Absolutely positioned non-replaced elements with left, width, right and margin-right not auto</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-width-008-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="If 'left', 'width', 'right' and 'margin-right' are all not 'auto' and 'margin-left' is 'auto', then solve the equation for 'margin-left'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #containingblock + { + border: solid black; + direction: ltr; + height: 200px; + position: relative; + width: 300px; + } + div div + { + /* left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block */ + /* 100px + solve + 0 + 0 + 100px + 0 + 0 + 100px + 100px = 300px */ + background: red; + color: blue; + font: 100px/1 Ahem; + left: 100px; + margin-left: auto; /* value is solved to -100px */ + margin-right: 100px; + position: absolute; + right: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black rectangle and if there is <strong>no red</strong>.</p> + <div id="containingblock"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-009.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-009.xht new file mode 100644 index 0000000000..5299d35e65 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-009.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned non-replaced elements with left, width, right and margin-left not auto</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="If 'left', 'width', 'right' and 'margin-left' are all not 'auto' and 'margin-right' is 'auto', then solve the equation for 'margin-right'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #containingblock + { + border: solid black; + direction: rtl; + height: 200px; + position: relative; + width: 300px; + } + div div + { + /* left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block */ + /* 100px + 100px + 0 + 0 + 100px + 0 + 0 + solve + 100px = 300px */ + background: red; + color: blue; + font: 100px/1 Ahem; + left: 100px; + margin-left: 100px; + margin-right: auto; /* value is solved to -100px */ + position: absolute; + right: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of the black rectangle and there is <strong>no red</strong>.</p> + <div id="containingblock"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-010.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-010.xht new file mode 100644 index 0000000000..29d9ad60cf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-010.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Solved for 'left' when absolutely positioned non-replaced elements has 'left' and 'width' as 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit and then solve for 'left'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1 Ahem; + left: auto; + margin-left: auto; + margin-right: auto; + position: absolute; + right: 100px; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-011.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-011.xht new file mode 100644 index 0000000000..3370fb6d80 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-011.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned non-replaced elements when 'left' and 'right' are 'auto', 'width' is not 'auto' and 'direction' is left-to-right</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When 'direction' is left-to-right and 'left' and 'right' are 'auto' and 'width' is not 'auto', solve for 'right'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1 Ahem; + left: auto; + margin-left: auto; + margin-right: auto; + position: absolute; + right: auto; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-012.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-012.xht new file mode 100644 index 0000000000..fd125e73f0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-012.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned non-replaced elements when 'left' and 'right' are 'auto', 'width' is not 'auto' and 'direction' is right-to-left</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-width-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When 'direction' is right-to-left and 'left' and 'right' are 'auto' and 'width' is not 'auto', solve for 'left'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1 Ahem; + left: auto; + margin-left: auto; + margin-right: auto; + position: absolute; + right: auto; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-013.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-013.xht new file mode 100644 index 0000000000..288c36569f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-013.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Solved for 'right' when absolutely positioned non-replaced elements has 'right' and 'width' as 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-width-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When 'right' and 'width' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit and then solve for 'right'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1 Ahem; + left: 100px; + margin-left: auto; + margin-right: auto; + position: absolute; + right: auto; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-014.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-014.xht new file mode 100644 index 0000000000..da223eb8d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-014.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Solved for 'left' when absolutely positioned non-replaced elements has 'right' and 'width' not set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When 'left' is 'auto' and 'width' and 'right' are not 'auto', then solve for 'left'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1em Ahem; + left: auto; + margin-left: auto; + margin-right: auto; + position: absolute; + right: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-left corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-015-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-015-ref.xht new file mode 100644 index 0000000000..955623dca3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-015-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 + { + border: black solid medium; + height: 200px; + text-align: center; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a filled blue square is <strong>horizontally centered</strong> inside an hollow black rectangle and if there is <strong>no red</strong>.</p> + + <div><img src="support/blue15x15.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/positioning/absolute-non-replaced-width-015.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-015.xht new file mode 100644 index 0000000000..2d99f95235 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-015.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 Test: Solved for 'width' when absolutely positioned non-replaced elements has 'left' and 'right' not set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-width-015-ref.xht" /> + + <meta name="assert" content="When 'width' is 'auto' and 'left' and 'right' are not 'auto' element solves for 'width'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 300px; + } + div div + { + background: blue; + left: 100px; + height: 100px; + margin-left: auto; + margin-right: auto; + position: absolute; + right: 100px; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is <strong>horizontally centered</strong> inside an hollow black rectangle and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-016.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-016.xht new file mode 100644 index 0000000000..5fccaf248d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-016.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Solved for 'right' when absolutely positioned non-replaced elements has 'left' and 'width' not set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="absolute-non-replaced-width-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="When 'right' is 'auto' and 'width' and 'left' are not 'auto', then solve for 'right'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 200px; + } + div div + { + background: red; + color: blue; + font: 100px/1em Ahem; + left: 100px; + margin-left: auto; + margin-right: auto; + position: absolute; + right: auto; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-017-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-017-ref.xht new file mode 100644 index 0000000000..6acb98dbac --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-017-ref.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + + <style type="text/css"><![CDATA[ + div.green-45x120 + { + background-color: green; + height: 45px; + width: 120px; + } + + div#black-stripe + { + background-color: black; + height: 30px; + width: 240px; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div class="green-45x120"></div> + + <div id="black-stripe"></div> + + <div class="green-45x120"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-017.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-017.xht new file mode 100644 index 0000000000..3b12169cb0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-017.xht @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (left-to-right), inline-block and max-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + <link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-017-ref.xht" /> + <meta content="When direction is left-to-right and 'left' is set to static position and 'width' and 'right' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + direction: ltr; + margin: 8px; + } + + div + { + background-color: red; + font: 30px/4 Ahem; + left: auto; + /* + left is set to static position: it should be 8px from + the left-hand side of document box (at body's margin-left) + */ + position: absolute; + right: auto; + width: auto; + } + + span + { + background-color: green; + display: inline-block; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div><span>12345678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-018.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-018.xht new file mode 100644 index 0000000000..ed9fa5673a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-018.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (left-to-right), inline-block and max-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + <link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-017-ref.xht" /> + <meta content="When direction is left-to-right and 'left' is set to static position and 'width' and 'right' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to shrink-to-fit width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + direction: ltr; + margin: 8px; + } + + div#outer-abs-pos + { + background-color: red; + font: 30px/4 Ahem; + left: auto; + /* + left is set to static position: it should be 8px from + the left-hand side of document box (at body's margin-left) + */ + position: absolute; + right: auto; + width: auto; + } + + div#inner-inline-block + { + background-color: green; + display: inline-block; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div id="outer-abs-pos"> + <div id="inner-inline-block">12345678</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-019.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-019.xht new file mode 100644 index 0000000000..c4511786e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-019.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (left-to-right), float and max-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + <link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-017-ref.xht" /> + <meta content="When direction is left-to-right and 'left' is set to static position and 'width' and 'right' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an floating, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + direction: ltr; + margin: 8px; + } + + div#outer-abs-pos + { + background-color: red; + font: 30px/4 Ahem; + left: auto; + /* + left is set to static position: it should be 8px from + the left-hand side of document box (at body's margin-left) + */ + position: absolute; + right: auto; + width: auto; + } + + div#inner-floated + { + background-color: green; + float: left; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div id="outer-abs-pos"> + <div id="inner-floated">12345678</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-020.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-020.xht new file mode 100644 index 0000000000..7c983e528d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-020.xht @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (left-to-right), float and max-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + <link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-017-ref.xht" /> + <meta content="When direction is left-to-right and 'left' is set to static position and 'width' and 'right' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an floating, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + direction: ltr; + margin: 8px; + } + + div + { + background-color: red; + font: 30px/4 Ahem; + left: auto; + /* + left is set to static position: it should be 8px from + the left-hand side of document box (at body's margin-left) + */ + position: absolute; + right: auto; + width: auto; + } + + span + { + background-color: green; + float: left; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div><span>12345678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-021-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-021-ref.xht new file mode 100644 index 0000000000..f178a16bdf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-021-ref.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + + <style type="text/css"><![CDATA[ + div.green-45x120 + { + background-color: green; + height: 45px; + margin-left: auto; + width: 120px; + } + + div#black-stripe + { + background-color: black; + height: 30px; + margin-left: auto; + width: 240px; + } + ]]></style> + + </head> + + <body> + + <p>Below, on the right edge of the page, there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the left. There should be no red in this page.</p> + + <div class="green-45x120"></div> + + <div id="black-stripe"></div> + + <div class="green-45x120"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-021.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-021.xht new file mode 100644 index 0000000000..47f587f72d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-021.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (right-to-left), inline-block and max-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + <link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-021-ref.xht" /> + <meta content="When direction is right-to-left and 'right' is set to static position and 'width' and 'left' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + direction: rtl; + margin: 8px; + } + + p {direction: ltr;} + + div + { + background-color: red; + font: 30px/4 Ahem; + left: auto; + position: absolute; + right: auto; + /* + right is set to static position: it should be 8px from + the right-hand side of document box (at body's margin-right) + */ + width: auto; + } + + span + { + background-color: green; + display: inline-block; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below, on the right edge of the page, there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the left. There should be no red in this page.</p> + + <div><span>12345678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-022.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-022.xht new file mode 100644 index 0000000000..7994d698ac --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-022.xht @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (right-to-left), inline-block and max-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + <link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-021-ref.xht" /> + <meta content="When direction is right-to-left and 'right' is set to static position and 'width' and 'left' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + direction: rtl; + margin: 8px; + } + + p {direction: ltr;} + + div#outer-abs-pos + { + background-color: red; + font: 30px/4 Ahem; + left: auto; + position: absolute; + right: auto; + /* + right is set to static position: it should be 8px from + the right-hand side of document box (at body's margin-right) + */ + width: auto; + } + + div#inner-inline-block + { + background-color: green; + display: inline-block; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below, on the right edge of the page, there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the left. There should be no red in this page.</p> + + <div id="outer-abs-pos"> + <div id="inner-inline-block">12345678</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-023.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-023.xht new file mode 100644 index 0000000000..bfd462a9b7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-023.xht @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (right-to-left), float and max-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + <link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-021-ref.xht" /> + <meta content="When direction is right-to-left and 'right' is set to static position and 'width' and 'left' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an floating, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + direction: rtl; + margin: 8px; + } + + p {direction: ltr;} + + div#outer-abs-pos + { + background-color: red; + font: 30px/4 Ahem; + left: auto; + position: absolute; + right: auto; + /* + right is set to static position: it should be 8px from + the right-hand side of document box (at body's margin-right) + */ + width: auto; + } + + div#inner-floated + { + background-color: green; + float: left; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below, on the right edge of the page, there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the left. There should be no red in this page.</p> + + <div id="outer-abs-pos"> + <div id="inner-floated">12345678</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-024.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-024.xht new file mode 100644 index 0000000000..756041f5ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-024.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: 'shrink-to-fit' width of absolutely positioned, non-replaced elements - direction (right-to-left), float and max-width</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + <link rel="help" title="Section 10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-021-ref.xht" /> + <meta content="When direction is right-to-left and 'right' is set to static position and 'width' and 'left' are 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an floating, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is also given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If width of an absolutely positioned, non-replaced element resorts to 'shrink-to-fit' width calculation but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + direction: rtl; + margin: 8px; + } + + p {direction: ltr;} + + div + { + background-color: red; + font: 30px/4 Ahem; + left: auto; + position: absolute; + right: auto; + /* + right is set to static position: it should be 8px from + the right-hand side of document box (at body's margin-right) + */ + width: auto; + } + + span + { + background-color: green; + float: left; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below, on the right edge of the page, there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the left. There should be no red in this page.</p> + + <div><span>12345678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-025-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-025-ref.xht new file mode 100644 index 0000000000..8bd763d670 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-025-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: 0px auto; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a green square <strong>horizontally centered</strong> in the page and if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-025.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-025.xht new file mode 100644 index 0000000000..8896767794 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-025.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: CSS Test: absolutely positioned non-replaced element with 'left' and 'right' not set to 'auto' and 'width' set to 'auto' - max-width, horizontal margins</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="10.4 Minimum and maximum widths: 'min-width' and 'max-width'" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-025-ref.xht" /> + + <meta content="When 'width' is computed according to the equation and rules of section 10.3.7 and when such computed 'width' is greater than 'max-width', then the equation and rules of section 10.3.7 are applied again but this time assuming the computed 'max-width' value. Then all three properties ('width', 'left' and 'right') are not 'auto' and both 'margin-left' and 'margin-right' are 'auto': in which case, the horizontal margins get equal values of available, remaining horizontal space." name="assert" /> + + <!-- + Credit must go to Boris Zbarsky for explaining this in + http://lists.w3.org/Archives/Public/www-style/2010Oct/0147.html + --> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + div#overlapped-red + { + background-color: red; + color: yellow; + font-size: 2em; + height: 100px; + margin-left: auto; + margin-right: auto; + width: 100px; + } + + div#abs-pos-overlapping-green + { + background-color: green; + height: 100px; + left: 8px; + margin-left: auto; + margin-right: auto; + max-width: 100px; + position: absolute; + right: 8px; + width: auto; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a green square <strong>horizontally centered</strong> in the page and if there is <strong>no red</strong>.</p> + + <div id="abs-pos-overlapping-green"></div> + + <div id="overlapped-red">FAIL</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-026-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-026-ref.xht new file mode 100644 index 0000000000..e77fe62ef6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-026-ref.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 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: auto; + margin-right: 0px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a green square on the <strong>right side</strong> of this page and if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-026.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-026.xht new file mode 100644 index 0000000000..e439a0210d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-026.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: absolutely positioned non-replaced element with 'left' and 'right' not set to 'auto' and 'width' set to 'auto' - max-width, horizontal margins</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="10.3.7 Absolutely positioned, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="help" title="10.4 Minimum and maximum widths: 'min-width' and 'max-width'" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="absolute-non-replaced-width-026-ref.xht" /> + + <meta content="When 'width' is computed according to the equation and rules of section 10.3.7 and when such computed 'width' is greater than 'max-width', then the equation and rules of section 10.3.7 are applied again but this time assuming the computed 'max-width' value. Then all three properties ('width', 'left' and 'right') are not 'auto' and 'margin-left' is 'auto': in which case, the 'margin-left' get all of available, remaining horizontal space." name="assert" /> + + <!-- + Credit must go to Boris Zbarsky for explaining this in + http://lists.w3.org/Archives/Public/www-style/2010Oct/0147.html + --> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + div#overlapped-red + { + background-color: red; + color: yellow; + font-size: 2em; + height: 100px; + margin-left: auto; + margin-right: 0px; + width: 100px; + } + + div#abs-pos-overlapping-green + { + background-color: green; + height: 100px; + left: 8px; + margin-left: auto; + margin-right: 0px; + max-width: 100px; + position: absolute; + right: 8px; + width: auto; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a green square on the <strong>right side</strong> of this page and if there is <strong>no red</strong>.</p> + + <div id="abs-pos-overlapping-green"></div> + + <div id="overlapped-red">FAIL</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-027.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-027.xht new file mode 100644 index 0000000000..969da955af --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-027.xht @@ -0,0 +1,215 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: absolutely positioned non-replaced element - 'auto' margins, max-width and max-height</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta content="If 'width' is auto and 'left' and 'right' are not 'auto', then set 'auto' values for 'margin-left' and 'margin-right' to 0 and then solve for 'width'; the tentative width may be later constrained by max-width in which case, the algorithm must be re-entered. If 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'; the tentative height may be later constrained by max-height in which case, the algorithm must be re-entered." name="assert" /> + + <style type="text/css"><![CDATA[ + div#rel-pos-container + { + background-color: green; + height: 100px; + position: relative; + width: 100px; + } + + div#rel-pos-container > div {position: absolute;} + + div#reference-red-overlapped + { + background-color: red; + height: 33px; + left: 33px; + top: 33px; + width: 33px; + } + + div#test-green-overlapping + { + background-color: green; + bottom: 0; + height: auto; + left: 0; + margin: auto; + max-height: 34px; + max-width: 34px; + right: 0; + top: 0; + width: auto; + } + + /* + + First we set both margin-left and margin-right to 0 since + + " + set 'auto' values for 'margin-left' and 'margin-right' to 0 + (...) + 5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width' + " + 10.3.7 Absolutely positioned, non-replaced elements + http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width + + + 0px : left + + + 0px (set) : margin-left + + + 0px : border-left + + + 0px : padding-left + + + (solve) : width (not constrained yet by max-width) + + + 0px : padding-right + + + 0px : border-right + + + 0px (set) : margin-right + + + 0px : right + ============= + 100px : width of containing block + + So, (tentative) width is 100px but now we must + constrain it by computed max-width value and so we + must now re-enter the algorithm but this time, + 'width' is not 'auto': therefore horizontal margins + must not be set to 0: + + " + If none of the three (left, width, right) is 'auto': + If both 'margin-left' and 'margin-right' are 'auto', + solve the equation under the extra constraint that + the two margins get equal values + " + 10.3.7 Absolutely positioned, non-replaced elements + http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width + + So: + + 0px : left + + + (solve) : margin-left + + + 0px : border-left + + + 0px : padding-left + + + 34px : width (constrained by max-width) + + + 0px : padding-right + + + 0px : border-right + + + (solve) : margin-right + + + 0px : right + ============= + 100px : width of containing block + + Therefore, margin-left and margin-right used values are + each respectively equal to ((100px minus 34px) divided by 2) == 33px. + + ----------------------------------------------- + + First we set both margin-top and margin-bottom to 0 since + + " + 5. 'height' is 'auto', 'top' and 'bottom' are not 'auto', + then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 + and solve for 'height' + " + 10.6.4 Absolutely positioned, non-replaced elements + http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height + + 0px : top + + + 0px (set) : margin-top + + + 0px : border-top + + + 0px : padding-top + + + (solve) : height (not constrained yet by max-height) + + + 0px : padding-bottom + + + 0px : border-bottom + + + 0px (set) : margin-bottom + + + 0px : bottom + ============= + 100px : height of containing block + + So, (tentative) height is 100px but now we must + constrain it by computed max-height value and so we + must now re-enter the algorithm but this time, + 'height' is not 'auto': therefore vertical margins + must not be set to 0: + + " + If none of the three (top, height, bottom) are 'auto': + If both 'margin-top' and 'margin-bottom' are 'auto', + solve the equation under the extra constraint that + the two margins get equal values. + " + 10.6.4 Absolutely positioned, non-replaced elements + http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height + + So: + + 0px : top + + + (solve) : margin-top + + + 0px : border-top + + + 0px : padding-top + + + 34px : height (constrained by max-height) + + + 0px : padding-bottom + + + 0px : border-bottom + + + (solve) : margin-bottom + + + 0px : bottom + ============= + 100px : height of containing block + + Therefore, margin-top and margin-bottom used values are + each respectively equal to ((100px minus 34px) divided by 2) == 33px. + + */ + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="rel-pos-container"> + + <div id="reference-red-overlapped"></div> + + <div id="test-green-overlapping"></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-028.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-028.xht new file mode 100644 index 0000000000..33fb446265 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-non-replaced-width-028.xht @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: width - absolutely positioned non-replaced element with scrollbar and percentage height of inline replaced child</title> + + <!-- + Credits should go to Erik Brown for originally reporting a related test + --> + + <link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1281713" title="Bug 1281713: intrinsic width of parent with overflow-x:scroll not computing correctly with child image with height:100%" /> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="11.1.1 Overflow: the 'overflow' property" href="https://www.w3.org/TR/CSS21/visufx.html#overflow" /> + <link rel="help" title="10.3.2 Inline, replaced elements" href="https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width" /> + <link rel="help" title="10.3.5 Floating, non-replaced elements" href="https://www.w3.org/TR/CSS21/visudet.html#float-width" /> + + <meta name="DC.date.created" content="2016-06-23T09:54:03+11:00" scheme="W3CDTF" /> + <meta name="DC.date.modified" content="2016-07-06T09:54:03+11:00" scheme="W3CDTF" /> + + <!-- + Siblings of this test are: + inline-block-non-replaced-width-005 + float-non-replaced-width-013 + --> + + <meta content="image scroll" name="flags" /> + <meta content="This test checks interaction of percentage height of an inline replaced element with its parent having scrollbars and with the parent's width determined by 'shrink-to-fit' width algorithm. In this test, the image height should be 100px minus scrollbar height since space taken up by generated scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars. Then the width of parent should be (used image height == 100px minus scrollbar) * (intrinsic ratio == 5width:1height)." name="assert" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: red; + position: absolute; /* or display: inline-block; */ /* or float: left; */ + height: 100px; + overflow: scroll; + } + + img + { + height: 100%; + vertical-align: bottom; + /* + This 'vertical-align: bottom' declaration is not part of the test. + We 'baseline-align' the image at the bottom of the line box so + that the vertical scrollbar remains inactive. + */ + } + ]]></style> + + </head> + + <body> + + <p>PREREQUISITE: User agent needs to support scrollbars as the scrolling mechanism. If it does not, then this test does not apply to such user agent.</p> + + <p>Test passes if there is a filled green rectangle with inactive scrollbars and <strong>no red</strong>.</p> + + <div><img src="support/green-rectangle-50wideBy10tall.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-001-ref.xht new file mode 100644 index 0000000000..fc38eba089 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-001-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 + { + border-bottom: orange solid medium; + border-top: orange solid medium; + height: 15px; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no space between</strong> the blue square and the orange lines.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-001.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-001.xht new file mode 100644 index 0000000000..e3e10640c4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-001.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute replaced elements with 'margin-top' and 'margin-bottom' as 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-001-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="If the height, top, bottom and vertical margins of an absolute positioned inline replaced element are all 'auto', then its use value is determined for inline replaced element, its 'top' is given by its static position and both 'margin-top' and 'margin-bottom' used values are '0'. In this test, the 'height' and 'width' of the inline replaced element are 'auto' and the element also has an intrinsic height, so the intrinsic height and the intrinsic width become the used values." /> + <style type="text/css"> + div + { + border-bottom: solid orange; + border-top: solid orange; + height: 15px; + width: 1in; + } + img + { + margin-bottom: auto; + margin-top: auto; + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue square and the orange lines.</p> + <div> + <img alt="blue 15x15" src="support/blue15x15.png" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-002-ref.xht new file mode 100644 index 0000000000..effbf97dc3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-002-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the <strong>same height</strong>.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" 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/positioning/absolute-replaced-height-002.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-002.xht new file mode 100644 index 0000000000..79d99d2995 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-002.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced elements relying on intrinsic height dimensions</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-002-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned inline replaced element with an intrinsic height has a 'height' and 'width' computed as 'auto'." /> + <style type="text/css"> + div + { + position: relative; + } + div div + { + background: orange; + height: 15px; + left: 15px; + position: absolute; + top: 0; + width: 15px; + } + img + { + height: auto; + position: absolute; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the <strong>same height</strong>.</p> + <div> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-003.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-003.xht new file mode 100644 index 0000000000..93e8c2c5c6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-003.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with intrinsic ratio and 'height' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-non-replaced-height-007-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' is set to 'auto' and 'width' is specified." /> + <style type="text/css"> + div + { + position: relative; + } + div div + { + background: blue; + height: 100px; + left: 100px; + position: absolute; + top: 0; + } + img + { + height: auto; + position: absolute; + } + div div, img + { + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p> + <div> + <img alt="Image download support must be enabled" src="support/swatch-orange.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-004-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-004-ref.xht new file mode 100644 index 0000000000..534e82edc4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-004-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: green solid medium; + height: 150px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-004.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-004.xht new file mode 100644 index 0000000000..6dddc31c9e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-004.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute replaced inline-block elements without intrinsic ratio and 'height' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-004-ref.xht" /> + + <meta name="assert" content="For an absolutely positioned inline-block replaced element, if its 'height' and 'width' have a computed value of 'auto' and the element has no intrinsic ratio, the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width." /> + <style type="text/css"> + div + { + position: relative; + } + div div + { + border: solid green; + height: 150px; + position: absolute; + top: 0; + width: 300px; + } + iframe + { + border: solid red; + height: auto; + position: absolute; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div> + <iframe></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-005-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-005-ref.xht new file mode 100644 index 0000000000..8687f283bc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-005-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: green solid medium; + height: 96px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-005.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-005.xht new file mode 100644 index 0000000000..4a6b2cf422 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-005.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced element with its height set to a percentage</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-005-ref.xht" /> + + <meta name="assert" content="An absolutely positioned inline-block replaced element with its height set to a percentage is resolvable if and when its containing block height is explicitly specified and computable." /> + <style type="text/css"> + #div1 + { + position: relative; + height: 2in; + } + div div + { + border: solid green; + height: 1in; + position: absolute; + top: 0; + width: 300px; + } + iframe + { + border: solid red; + position: absolute; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-006-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-006-ref.xht new file mode 100644 index 0000000000..6912d5159e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-006-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img + { + height: 96px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" 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/positioning/absolute-replaced-height-006.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-006.xht new file mode 100644 index 0000000000..dbf186c474 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-006.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-006-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned." /> + <style type="text/css"> + #div1 + { + position: relative; + height: 2in; + } + div div + { + background: orange; + height: 1in; + left: 200px; + position: absolute; + top: 0; + width: 200px; + } + svg + { + position: absolute; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50%" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-007-ref.xht new file mode 100644 index 0000000000..6cf502d177 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-007-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: green solid medium; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-007.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-007.xht new file mode 100644 index 0000000000..cae9efd646 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-007.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced elements with percentage based intrinsic height that cannot be resolved</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-007-ref.xht" /> + + <meta name="assert" content="An absolutely positioned inline-block replaced element with a percentage height that cannot be resolved has no intrinsic height." /> + <style type="text/css"> + #div1 + { + position: relative; + } + div div + { + border: solid green; + position: absolute; + width: 300px; + } + iframe + { + border: solid red; + position: absolute; + width: auto; + } + + /* + " + (...) + the height of the containing block of an absolutely positioned + element is independent of the size of the element itself, and thus + a percentage height on such an element *_can always be resolved_*. + However, it may be that the height is not known until elements + that come later in the document have been processed. " + http://www.w3.org/TR/CSS21/visudet.html#the-height-property + " + */ + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-008-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-008-ref.xht new file mode 100644 index 0000000000..18b466378d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-008-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[ + div + { + border-top: black solid medium; + margin-bottom: 96px; + } + + div + div + { + background-color: blue; + border-top: none 0px; + height: 15px; + width: 30px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a short blue bar and it does not touch the black line.</p> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-008.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-008.xht new file mode 100644 index 0000000000..886ecec638 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-008.xht @@ -0,0 +1,68 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'margin-top', 'margin-bottom' and 'bottom' as 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-008-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="An absolutely positioned inline replaced element's used value of 'bottom', 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + img + { + bottom: auto; + height: auto; + margin-bottom: auto; + margin-top: auto; + position: absolute; + top: 1in; + width: auto; + } + + /* + " + The used value of 'height' is determined as for inline replaced elements. + If 'margin-top' or 'margin-bottom' is specified as 'auto' + its used value is determined by the rules below. + (...) + If 'height' and 'width' both have computed values + of 'auto' and the element also has an intrinsic height, + then that intrinsic height is the used value of 'height'. + (...) + If 'bottom' is 'auto', replace any 'auto' on 'margin-top' + or 'margin-bottom' with '0'. + If at this point there is only one 'auto' left, + solve the equation for that value. + " + http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height + + In this test, bottom will be -96px because the height of the + containing block is 0px. + */ + + div div + { + background: blue; + height: 15px; + left: 15px; + position: relative; + top: 1in; + width: 15px; + } + </style> + </head> + <body> + <p>Test passes if there is a short blue bar and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-009.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-009.xht new file mode 100644 index 0000000000..72f2df7e11 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-009.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: Absolute positioned inline replaced elements relying on intrinsic height dimensions and 'bottom' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-008-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned replaced element with an intrinsic height has 'height', 'width' and 'bottom' computed as 'auto'." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + div div + { + background: blue; + height: 15px; + left: 15px; + position: absolute; + top: 1in; + width: 15px; + } + img + { + bottom: auto; + height: auto; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is a short blue bar and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-010-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-010-ref.xht new file mode 100644 index 0000000000..229f992bc7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-010-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[ + div + { + border-top: black solid medium; + margin-bottom: 96px; + } + + div + div + { + background-color: blue; + border-top: none 0px; + height: 96px; + width: 192px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-010.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-010.xht new file mode 100644 index 0000000000..34901665f4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-010.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with intrinsic ratio, 'height' and 'bottom' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-010-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' and 'bottom' are set to 'auto' and 'width' is specified." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + div div + { + background: blue; + height: 1in; + left: 1in; + position: absolute; + top: 1in; + } + img + { + bottom: auto; + height: auto; + position: absolute; + top: 1in; + } + div div, img + { + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-011-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-011-ref.xht new file mode 100644 index 0000000000..574ab6a989 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-011-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 + { + border: green solid medium; + height: 150px; + margin-top: 112px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-011.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-011.xht new file mode 100644 index 0000000000..302ca83514 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-011.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced element without intrinsic ratio, 'height' and 'bottom' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-011-ref.xht" /> + + <meta name="assert" content="For an absolutely positioned inline-block replaced element, the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width." /> + <style type="text/css"> + div + { + position: relative; + } + div div + { + border: solid green; + height: 150px; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: auto; + height: auto; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div> + <iframe></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-012-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-012-ref.xht new file mode 100644 index 0000000000..722f569989 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-012-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 + { + border: green solid medium; + height: 96px; + margin-top: 112px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-012.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-012.xht new file mode 100644 index 0000000000..82bea6f0ed --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-012.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced element with its height set to a percentage and 'bottom' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-012-ref.xht" /> + + <meta name="assert" content="An absolutely positioned inline-block replaced element with its height set to a percentage is resolvable if and when its containing block height is explicitly specified and computable." /> + <style type="text/css"> + #div1 + { + position: relative; + height: 2in; + } + div div + { + border: solid green; + height: 1in; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: auto; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-013-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-013-ref.xht new file mode 100644 index 0000000000..d75cdef879 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-013-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[ + div + { + border-top: black solid medium; + margin-bottom: 96px; + } + + div + div {border: none 0px;} + + img + { + height: 96px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles are next to each other, have the same height and are not touching the black line.</p> + + <div></div> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-013.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-013.xht new file mode 100644 index 0000000000..3d186de860 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-013.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height and 'bottom' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-013-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + height: 2in; + } + div div + { + background: orange; + height: 1in; + left: 200px; + position: absolute; + top: 1in; + width: 200px; + } + svg + { + bottom: auto; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles are next to each other, have the same height and are not touching the black line.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50%" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-014-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-014-ref.xht new file mode 100644 index 0000000000..67e9b90d43 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-014-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: green solid medium; + margin-top: 112px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-014.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-014.xht new file mode 100644 index 0000000000..752e7de66b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-014.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced elements with percentage based intrinsic height that cannot be resolved and 'top' specified</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-014-ref.xht" /> + + <meta name="assert" content="An absolutely positioned inline-block replaced element with a percentage height that cannot be resolved has no intrinsic height." /> + <!-- + " + (...) the height of the containing block of an absolutely + positioned element is independent of the size of the element itself, + and thus a percentage height on such an element *_can always be + resolved_*. However, it may be that the height is not known until + elements that come later in the document have been processed. + " + http://www.w3.org/TR/CSS21/visudet.html#the-height-property + --> + + <style type="text/css"> + div#containing-block + { + position: relative; + } + div div + { + border: solid green; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: auto; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="containing-block"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-016.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-016.xht new file mode 100644 index 0000000000..d97a7cabf8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-016.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element relying on intrinsic height dimensions and 'top', 'bottom' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-008-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned inline replaced element has an intrinsic height and its height is specified as 'auto', 'width' is specified 'auto' and 'top', 'bottom' are not 'auto'." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + div div + { + background: blue; + height: 15px; + left: 15px; + position: absolute; + top: 1in; + width: 15px; + } + img + { + bottom: 1in; + /* + The equation gets overconstrained; and so, the used value for + bottom in that test will be ignored and will be solved + as minus (1in + 15px) (-111px) because the height of + containing block is 0. + */ + height: auto; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is a short blue bar and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-017.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-017.xht new file mode 100644 index 0000000000..80b4e14299 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-017.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with intrinsic ratio, 'height' set to 'auto' and 'top', 'bottom' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-010-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' is set to 'auto', 'width' is specified and 'top', 'bottom' are not 'auto'." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + div div + { + background: blue; + height: 1in; + left: 1in; + position: absolute; + top: 1in; + } + img + { + bottom: 1in; + /* + The equation gets overconstrained; and so, the used value for + bottom in that test will be ignored and will be solved + as minus (1in + 1in) (-192px) because the height of + containing block is 0. + */ + height: auto; + position: absolute; + top: 1in; + } + div div, img + { + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-018.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-018.xht new file mode 100644 index 0000000000..f0e763fd82 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-018.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced element without intrinsic ratio, 'height' set to 'auto' and 'top', 'bottom' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-011-ref.xht" /> + + <meta name="assert" content="For an absolutely positioned inline-block replaced element, the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width." /> + <style type="text/css"> + div + { + position: relative; + } + div div + { + border: solid green; + height: 150px; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: 1in; + height: auto; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div> + <iframe></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-019.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-019.xht new file mode 100644 index 0000000000..2aeb5f0fc3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-019.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced element with its height set to a percentage and 'top', 'bottom' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-012-ref.xht" /> + + <meta name="assert" content="An absolutely positioned inline-block replaced element with its height set to a percentage is resolvable if and when its containing block height is explicitly specified and computable." /> + <style type="text/css"> + #div1 + { + position: relative; + height: 2in; + } + div div + { + border: solid green; + height: 1in; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: 1in; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-020.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-020.xht new file mode 100644 index 0000000000..c5d348db35 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-020.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height set to 'auto' and 'top', 'bottom' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-013-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + height: 2in; + } + div div + { + background: orange; + height: 1in; + left: 200px; + position: absolute; + top: 1in; + width: 200px; + } + svg + { + bottom: 1in; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles are next to each other, have the same height and are not touching the black line.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50%" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-021.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-021.xht new file mode 100644 index 0000000000..111f9593a1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-021.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced element with percentage based intrinsic height that cannot be resolved where 'top' and 'bottom' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-014-ref.xht" /> + + <meta name="assert" content="An absolutely positioned inline-block replaced element with a percentage height that cannot be resolved has no intrinsic height." /> + + <!-- + " + (...) the height of the containing block of an absolutely + positioned element is independent of the size of the element itself, + and thus a percentage height on such an element *_can always be + resolved_*. However, it may be that the height is not known until + elements that come later in the document have been processed. + " + http://www.w3.org/TR/CSS21/visudet.html#the-height-property + --> + + <style type="text/css"> + div#containing-block + { + position: relative; + } + div div + { + border: solid green; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: 1in; + position: absolute; + top: 1in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="containing-block"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-022.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-022.xht new file mode 100644 index 0000000000..3acc433fa7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-022.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: Absolutely positioned inline replaced element with 'margin-bottom' as 'auto' and 'top', 'bottom', 'margin-top' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-008-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="An absolutely positioned inline replaced element with only one value as 'auto' solves for that value (margin-bottom)." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + img + { + bottom: 1in; + margin-bottom: auto; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + } + div div + { + background: blue; + height: 15px; + left: 15px; + position: relative; + top: 1in; + width: 15px; + } + </style> + </head> + <body> + <p>Test passes if there is a short blue bar and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-023.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-023.xht new file mode 100644 index 0000000000..fd0b7c425a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-023.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element relying on intrinsic height dimensions and 'top', 'bottom', 'margin-top' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-008-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned inline replaced element with an intrinsic height has a 'height', 'width' computed as 'auto' and 'top', 'bottom' are not 'auto'." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + div div + { + background: blue; + height: 15px; + left: 15px; + position: absolute; + top: 1in; + width: 15px; + } + img + { + bottom: 1in; + height: auto; + margin-bottom: auto; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is a short blue bar and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-024.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-024.xht new file mode 100644 index 0000000000..a2a5ca3e36 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-024.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with intrinsic ratio, 'height' set to 'auto' and 'top', 'bottom', 'margin-top' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-010-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' is set to 'auto', 'width' is specified and 'top', 'bottom' are not 'auto'." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + div div + { + background: blue; + height: 1in; + left: 1in; + position: absolute; + top: 1in; + } + img + { + bottom: 1in; + height: auto; + margin-bottom: auto; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + } + div div, img + { + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-025.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-025.xht new file mode 100644 index 0000000000..d99a08109b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-025.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced elements without intrinsic ratio, 'height' set to 'auto' and 'top', 'bottom', 'margin-top' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-011-ref.xht" /> + + <meta name="assert" content="For an absolutely positioned replaced element the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width." /> + <style type="text/css"> + div + { + position: relative; + } + div div + { + border: solid green; + height: 150px; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: 1in; + height: auto; + margin-bottom: auto; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div> + <iframe></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-026.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-026.xht new file mode 100644 index 0000000000..acb65b7dcd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-026.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced element with its height set to a percentage of its containing block's height and 'top', 'bottom', 'margin-top' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-01 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-012-ref.xht" /> + + <meta name="assert" content="An absolutely positioned inline-block replaced element with its height set to a percentage is resolvable if and when its containing block height is explicitly specified and computable." /> + <style type="text/css"> + #div1 + { + position: relative; + height: 2in; + } + div div + { + border: solid green; + height: 1in; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: 1in; + margin-bottom: auto; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-027.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-027.xht new file mode 100644 index 0000000000..7442f85b0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-027.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height set to 'auto' and 'top', 'bottom', 'margin-top' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-013-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + height: 2in; + } + div div + { + background: orange; + height: 1in; + left: 200px; + position: absolute; + top: 1in; + width: 200px; + } + svg + { + bottom: 1in; + margin-bottom: auto; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles are next to each other, have the same height and are not touching the black line.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50%" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-028.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-028.xht new file mode 100644 index 0000000000..3c558b8a10 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-028.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block replaced element with percentage based intrinsic height that cannot be resolved where 'top', 'bottom', 'margin-top' are not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-014-ref.xht" /> + + <meta name="assert" content="An absolutely positioned inline-block replaced element with a percentage height that cannot be resolved has no intrinsic height." /> + <style type="text/css"> + #div1 + { + position: relative; + } + div div + { + border: solid green; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: 1in; + margin-bottom: auto; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-029.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-029.xht new file mode 100644 index 0000000000..0c0a550c1b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-029.xht @@ -0,0 +1,92 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with over-constrained values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-008-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="An absolutely positioned inline replaced element with over-constrained values solves for 'bottom'." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + img + { + bottom: 0.5in; + margin-bottom: 0.5in; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + } + div div + { + background: blue; + height: 15px; + left: 15px; + position: relative; + top: 1in; + width: 15px; + } + + /* + + 0.5in : 'top' + + + 0.5in : 'margin-top' + + + 0 : 'border-top-width' + + + 0 : 'padding-top' + + + 15px : 'height' (intrinsic height of inline replaced element) + + + 0 : 'padding-bottom' + + + 0 : 'border-bottom-width' + + + 0.5in : 'margin-bottom' + + + 0.5in : 'bottom' + =========== + 207px : height of containing block (15px) + + So, bottom has to be ignored and forced to have the value that + will balance the equation. So, this brings up + + 0.5in : 'top' + + + 0.5in : 'margin-top' + + + 0 : 'border-top-width' + + + 0 : 'padding-top' + + + 15px : 'height' (intrinsic height) + + + 0 : 'padding-bottom' + + + 0 : 'border-bottom-width' + + + 0.5in : 'margin-bottom' + + + (solve): 'bottom' + =================== + 15px : height of containing block + + So, the solved bottom value must be -1.5in (or -144px). + */ + </style> + </head> + <body> + <p>Test passes if there is a short blue bar and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-030.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-030.xht new file mode 100644 index 0000000000..4ca7977421 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-030.xht @@ -0,0 +1,78 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Absolutely positioned inline replaced element with intrinsic height dimension and over-constrained values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-008-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned inline replaced element has an intrinsic height; if values are overconstrained, then solve for 'bottom'." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + div div + { + background: blue; + height: 15px; + left: 15px; + position: absolute; + top: 1in; + width: 15px; + } + img + { + bottom: 1in; + height: auto; + margin-bottom: 0.5in; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + + /* + + 0.5in : top + + + 0.5in : margin-top + + + 15px : intrinsic height + + + 0.5in : margin-bottom + + + 1in : bottom + ==================== + 255px != 0px (height of containing block) + Therefore, set bottom value must be ignored and + the equation must be solved for bottom. + + + 0.5in : top + + + 0.5in : margin-top + + + 15px : intrinsic height + + + 0.5in : margin-bottom + + + (solve) : bottom + ==================== + 159px != 0px (height of containing block) + Therefore, solved bottom value must be -159px + */ + + </style> + </head> + <body> + <p>Test passes if there is a short blue bar and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-031.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-031.xht new file mode 100644 index 0000000000..7931b8da21 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-031.xht @@ -0,0 +1,96 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Absolutely positioned inline replaced element with intrinsic ratio, 'height' set to 'auto' and over-constrained values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-010-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned replaced element has an intrinsic ratio, 'height' is set to 'auto', with over-constrained values solves for 'bottom'." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + } + div div + { + background: blue; + height: 1in; + left: 1in; + position: absolute; + top: 1in; + } + img + { + bottom: 1in; + height: auto; + margin-bottom: 0.5in; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + } + div div, img + { + width: 1in; + } + + /* + + 0.5in : 'top' + + + 0.5in : 'margin-top' + + + 0 : 'border-top-width' + + + 0 : 'padding-top' + + + 1in : 'height' (used width) / (intrinsic ratio) + + + 0 : 'padding-bottom' + + + 0 : 'border-bottom-width' + + + 0.5in : 'margin-bottom' + + + 1in : 'bottom' + =========== + 436px : height of containing block (0px) + + So, bottom has to be ignored and forced to have the value that + will balance the equation. So, this brings up + + 0.5in : 'top' + + + 0.5in : 'margin-top' + + + 0 : 'border-top-width' + + + 0 : 'padding-top' + + + 1in : 'height' (used width) / (intrinsic ratio) + + + 0 : 'padding-bottom' + + + 0 : 'border-bottom-width' + + + 0.5in : 'margin-bottom' + + + (solve): 'bottom' + =================== + 240px : height of containing block (0px) + + So the solved bottom value should be -240px + */ + </style> + </head> + <body> + <p>Test passes if there is a filled blue rectangle and it does not touch the black line.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-032.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-032.xht new file mode 100644 index 0000000000..eea4172057 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-032.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute positioned inline-block replaced element without intrinsic ratio, 'height' set to 'auto' and over-constrained values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-011-ref.xht" /> + + <meta name="assert" content="For an absolutely positioned inline-block replaced element, the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. And with over-constrained values element solves for 'bottom'." /> + <style type="text/css"> + div + { + position: relative; + } + div div + { + border: solid green; + height: 150px; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: 1in; + height: auto; + margin-bottom: 0.5in; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div> + <iframe></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-033.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-033.xht new file mode 100644 index 0000000000..836f75dd4d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-033.xht @@ -0,0 +1,94 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline-block element with percentage based height set to 'auto' and over-constrained values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-05 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-012-ref.xht" /> + + <meta name="assert" content="An absolutely positioned inline-block replaced element with percentage height resolves based on the containing block height when such height can be resolved." /> + <style type="text/css"> + #div1 + { + position: relative; + height: 2in; + } + div div + { + border: solid green; + height: 1in; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: 1in; + margin-bottom: 0.5in; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + + /* + + 0.5in : 'top' + + + 0.5in : 'margin-top' + + + 3px : 'border-top-width' medium which is often resolved as 3px + + + 0 : 'padding-top' + + + 1in : 'height' 50% of height of containing block + + + 0 : 'padding-bottom' + + + 3px : 'border-bottom-width' medium which is often resolved as 3px + + + 0.5in : 'margin-bottom' + + + 1in : 'bottom' + ================ + 342px : height of containing block (192px) + + So, bottom has to be ignored and forced to have the value that + will balance the equation. So, this brings up + + + 0.5in : 'top' + + + 0.5in : 'margin-top' + + + 3px : 'border-top-width' medium which is often resolved as 3px + + + 0 : 'padding-top' + + + 1in : 'height' 50% of height of containing block + + + 0 : 'padding-bottom' + + + 3px : 'border-bottom-width' medium which is often resolved as 3px + + + 0.5in : 'margin-bottom' + + + (solve) : 'bottom' + ================ + -246px : height of containing block (192px) + + So, the solved bottom value should be -54px . + */ + + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-034.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-034.xht new file mode 100644 index 0000000000..47dec54f65 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-034.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with percentage based intrinsic height set to 'auto' and over-constrained values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-013-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned." /> + <style type="text/css"> + #div1 + { + border-top: solid black; + position: relative; + height: 2in; + } + div div + { + background: orange; + height: 1in; + left: 200px; + position: absolute; + top: 1in; + width: 200px; + } + svg + { + bottom: 1in; + margin-bottom: 0.5in; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles are next to each other, have the same height and are not touching the black line.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50%" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-035.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-035.xht new file mode 100644 index 0000000000..447606f432 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-035.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute replaced elements with percentage based intrinsic height that cannot be resolved and there are over-constrained values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" /> + <link rel="match" href="absolute-replaced-height-014-ref.xht" /> + + <meta name="assert" content="An absolutely positioned replaced element with a percentage height that cannot be resolved has no intrinsic height." /> + <style type="text/css"> + #div1 + { + position: relative; + } + div div + { + border: solid green; + position: absolute; + top: 1in; + width: 300px; + } + iframe + { + border: solid red; + bottom: 1in; + margin-bottom: 0.5in; + margin-top: 0.5in; + position: absolute; + top: 0.5in; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-036.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-036.xht new file mode 100644 index 0000000000..96b53e6d64 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-height-036.xht @@ -0,0 +1,65 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute Replaced Elements: specified 'top' and 'bottom' with auto margins</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping"/> + <link rel="match" href="../reference/ref-if-there-is-no-red.xht" /> + + <meta name="flags" content="image"/> + <meta name="assert" content="If 'top' and 'bottom' are specified on an + absolutely-positioned replaced element, then any remaining space is + split amongst the 'auto' vertical margins."/> + <style type="text/css"> + .container { + position: relative; + width: 45px; + height: 45px; + /* Uncomment for debugging: + border: solid silver; + background: aqua; */ + } + .abspos { + position: absolute; + top: 0; bottom: 0; + background: red; + } + .one { + margin: auto; + left: 0; + } + .two { + margin-top: auto; + left: 15px; + } + .three { + margin-bottom: auto; + right: 0; + } + .control1 { + height: 15px; + border-right: 15px solid red; + } + .control2 { + height: 15px; + border-left: 15px solid red; + } + .control3 { + height: 15px; + margin: 0 15px; + background: red; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div class="container"> + <img class="abspos one" src="support/swatch-white.png" alt="FAIL: image support required"/> + <img class="abspos two" src="support/swatch-white.png" alt="FAIL: image support required"/> + <img class="abspos three" src="support/swatch-white.png" alt="FAIL: image support required"/> + <div class="control1"></div> + <div class="control2"></div> + <div class="control3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-001-ref.xht new file mode 100644 index 0000000000..a973f102f6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-001-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[ + div + { + border: black solid medium; + height: 192px; + width: 192px; + } + + img {display: block;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-left corner of an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-001.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-001.xht new file mode 100644 index 0000000000..0b49129c37 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-001.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'auto' specified for 'margin-left', 'margin-right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-06 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-001-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. If both 'left' and 'right' have the value 'auto' and if the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + position: absolute; + } + div div + { + background: orange; + height: 15px; + margin-top: 15px; + width: 15px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-left corner of an hollow black square.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-002-ref.xht new file mode 100644 index 0000000000..515f5c3df6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-002-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img + { + display: block; + height: 50px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-002.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-002.xht new file mode 100644 index 0000000000..23068fbce1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-002.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element and 'auto' specified for 'margin-left', 'margin-right' and intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-002-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + width: 3in; + } + svg + { + margin-left: auto; + margin-right: auto; + position: absolute; + } + div div + { + background: orange; + height: 50px; + margin-top: 50px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003-ref.xht new file mode 100644 index 0000000000..b6ef3a1985 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img + { + display: block; + height: 100px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003.xht new file mode 100644 index 0000000000..5e1d5a7dcc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'auto' specified for 'margin-left', 'margin-right', with no intrinsic width and no intrinsic ratio</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-003-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + width: 3in; + } + svg + { + height: 100px; + margin-left: auto; + margin-right: auto; + position: absolute; + } + + /* + + In this test, the svg's containing block is the initial containing block. + + The contraining equation should be balanced in the following manner: + + left: will take the static position within its ltr containing block + margin-left: will become 0 + width: will become 300px + margin-right: will become 0 + right: will be the width of viewport minus 300px minus computed left value (body's margin-left plus border-left width == 11px) + + */ + + div div + { + background: orange; + height: 100px; + margin-top: 100px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003a-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003a-ref.xht new file mode 100644 index 0000000000..0f49130581 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003a-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: 150px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle 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/positioning/absolute-replaced-width-003a.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003a.xht new file mode 100644 index 0000000000..4bc367b4a8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003a.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: Absolutely positioned inline replaced element, 'auto' specified for 'margin-left', 'margin-right', no intrinsic height and no intrinsic width</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/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-003a-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic height, then the used value of 'width' becomes 300px and the used value of 'height' becomes 150px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value." /> + + <style type="text/css"><![CDATA[ + div + { + height: 225px; + width: 450px; + } + + svg#overlapped-red {position: absolute;} + + div#overlapping-green + { + background-color: green; + height: 150px; + left: auto; + position: absolute; + top: auto; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full" id="overlapped-red"> + <svg:rect x="0" y="0" width="600" height="300" fill="red" /> + </svg:svg> + + <div id="overlapping-green"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003b-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003b-ref.xht new file mode 100644 index 0000000000..a5f347382f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003b-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: 150px; + width: 150px; + } + ]]></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/positioning/absolute-replaced-width-003b.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003b.xht new file mode 100644 index 0000000000..7209ff2eb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003b.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: Absolutely positioned inline replaced element, 'auto' specified for 'margin-left', 'margin-right', no intrinsic height and no intrinsic ratio</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/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-003b-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic height and no intrinsic ratio, then the used value of 'height' becomes 150px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value." /> + + <style type="text/css"><![CDATA[ + div + { + height: 300px; + width: 300px; + } + + svg#overlapped-red {position: absolute;} + + div#overlapping-green + { + background-color: green; + height: 150px; + left: auto; + position: absolute; + top: auto; + width: 150px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full" id="overlapped-red" width="150"> + <svg:rect x="0" y="0" width="600" height="300" fill="red" /> + </svg:svg> + + <div id="overlapping-green"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003c-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003c-ref.xht new file mode 100644 index 0000000000..7ac9d9697e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003c-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: 300px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a big 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/positioning/absolute-replaced-width-003c.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003c.xht new file mode 100644 index 0000000000..c84cb16299 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-003c.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: Absolutely positioned inline replaced element, 'auto' specified for 'margin-left', 'margin-right', no intrinsic width and no intrinsic ratio</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/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-003c-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value." /> + + <style type="text/css"><![CDATA[ + div + { + height: 300px; + width: 600px; + } + + svg#overlapped-red {position: absolute;} + + div#overlapping-green + { + background-color: green; + height: 300px; + left: auto; + position: absolute; + top: auto; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a big filled green square and <strong>no red</strong>.</p> + + <div> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full" id="overlapped-red" height="300"> + <svg:rect x="0" y="0" width="600" height="300" fill="red" /> + </svg:svg> + + <div id="overlapping-green"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-004-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-004-ref.xht new file mode 100644 index 0000000000..e2b109ab3f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-004-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img + { + display: block; + height: 100px; + margin-bottom: 10px; + width: 200px; + } + + img + img {height: 96px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-004.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-004.xht new file mode 100644 index 0000000000..aaf1aa2d15 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-004.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element and 'auto' specified for 'margin-left', 'margin-right' and no intrinsic height or width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-004-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic height, then the used value of 'width' becomes 300px and the used value of 'height' becomes 150px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + width: 3in; + } + #div2 + { + height: 110px; + width: 3in; + } + #div3 + { + background: orange; + height: 1in; + width: 200px; + } + svg + { + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p> + <div id="div1"> + <div id="div2"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + </div> + <div id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-006-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-006-ref.xht new file mode 100644 index 0000000000..33f77e9c98 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-006-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 192px; + } + + img + { + display: block; + height: 96px; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-left corner of an hollow black rectangle.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-006.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-006.xht new file mode 100644 index 0000000000..f503db8837 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-006.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element and 'auto' specified for 'margin-left', 'margin-right' and width set to a percentage</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-006-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The width of an absolutely positioned inline replaced element set to a percentage is evaluated against its containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + position: absolute; + } + div div + { + background: orange; + height: 1in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-left corner of an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-008.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-008.xht new file mode 100644 index 0000000000..8aff9d5998 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-008.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-001-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 2in; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: auto; + position: absolute; + right: auto; + } + div div + { + background: orange; + height: 15px; + margin-top: 15px; + width: 15px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-left corner of an hollow black square.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-009.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-009.xht new file mode 100644 index 0000000000..c7749f8769 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-009.xht @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-002-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: relative; + width: 3in; + } + svg + { + margin-left: auto; + margin-right: auto; + left: auto; + position: absolute; + right: auto; + } + + /* + + In this test, the svg's containing block is div#div1. + + The contraining equation should be balanced in the following manner: + + left: will take the static position within its ltr containing block + margin-left: will become 0 + width: will become 300px + margin-right: will become 0 + right: will be the width of div#div1 minus 300px (288px minus 300px == -12px) + + */ + + div div + { + background: orange; + height: 50px; + margin-top: 50px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-010.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-010.xht new file mode 100644 index 0000000000..97263411f3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-010.xht @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and 'height'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-003-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic ratio, then the used value of 'width' becomes 300px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: relative; + width: 3in; + } + svg + { + height: 100px; + margin-left: auto; + margin-right: auto; + left: auto; + position: absolute; + right: auto; + } + + /* + + In this test, the svg's containing block is div#div1. + + The contraining equation should be balanced in the following manner: + + left: will take the static position within its ltr containing block + margin-left: will become 0 + width: will become 300px + margin-right: will become 0 + right: will be the width of div#div1 minus 300px (288px minus 300px == -12px) + + */ + div div + { + background: orange; + height: 100px; + margin-top: 100px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-011.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-011.xht new file mode 100644 index 0000000000..346791ebd3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-011.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and no intrinsic height or width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-004-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="If an absolutely positioned inline replaced element (like the svg element in this test) has no intrinsic width and no intrinsic height, then the used value of 'width' becomes 300px and the used value of 'height' becomes 150px. Then, if both left and right values are 'auto' and the 'direction' property of the element establishing the static-position containing block is 'ltr', then set 'left' to the static position. If 'left' or 'right' are 'auto' (like in this test), then replace any 'auto' on 'margin-left' or 'margin-right' with '0'. If at this point there is an 'auto' left (like in this test: right is 'auto'), solve the equation for that value." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + width: 3in; + } + #div2 + { + height: 110px; + position: relative; + width: 3in; + } + #div3 + { + background: orange; + height: 1in; + width: 200px; + } + svg + { + left: auto; + position: absolute; + right: auto; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-left corner of an hollow black square.</p> + <div id="div1"> + <div id="div2"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-013.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-013.xht new file mode 100644 index 0000000000..1646f1b82c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-013.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: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and percentage intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-006-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage intrinsic widths are evaluated against the containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: auto; + position: absolute; + right: auto; + } + div div + { + background: orange; + height: 1in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-left corner of an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-015-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-015-ref.xht new file mode 100644 index 0000000000..20fd1c2442 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-015-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 192px; + width: 192px; + } + + img + { + display: block; + position: relative; + left: 177px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-015.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-015.xht new file mode 100644 index 0000000000..67b33eae9d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-015.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-015-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. If both 'left' and 'right' have the value 'auto' and if the 'direction' property of the element establishing the static-position containing block is 'rtl', then set 'right' to the static position. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 2in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: auto; + position: absolute; + right: auto; + } + div div + { + background: orange; + height: 15px; + margin-top: 15px; + width: 15px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black square.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-020-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-020-ref.xht new file mode 100644 index 0000000000..d9a42fd3b6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-020-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[ + div + { + border: black solid medium; + height: 288px; + width: 192px; + } + + img + { + display: block; + height: 96px; + left: 96px; + position: relative; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black rectangle.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-020.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-020.xht new file mode 100644 index 0000000000..864df2614a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-020.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and width set to a percentage</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-020-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The width of an absolutely positioned inline replaced element set to a percentage is evaluated against the containing block's width. If both 'left' and 'right' have the value 'auto' and if the 'direction' property of the element establishing the static-position containing block is 'rtl', then set 'right' to the static position." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 3in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: auto; + position: absolute; + right: auto; + } + div div + { + background: orange; + height: 1in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-022-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-022-ref.xht new file mode 100644 index 0000000000..64dfdb910a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-022-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[ + div + { + border: black solid medium; + height: 192px; + width: 192px; + } + + img + { + display: block; + height: 96px; + left: 96px; + position: relative; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-022.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-022.xht new file mode 100644 index 0000000000..4af5887859 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-022.xht @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-022-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The intrinsic width is used if 'height' and 'width' are 'auto'. Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. If at this point there is an 'auto' left (like right as in this test), solve the equation for that value." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 2in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: 1in; + position: absolute; + right: auto; + } + + /* + + 1in : left + 0px (set) : margin-left + 1in : width (intrinsic width) + 0px (set) : margin-right + (solve) : right + ========================= + 2in : width of containing block (2in) + + Therefore , the used right offset must be 0px + so that the contraining equation gets balanced. + + */ + + div div + { + background: orange; + height: 96px; + margin-left: 1in; + margin-top: 96px; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black square.</p> + <div id="div1"> + <img alt="blue 96x96" src="support/blue96x96.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-023-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-023-ref.xht new file mode 100644 index 0000000000..6d2990db72 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-023-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 296px; + width: 296px; + } + + img + { + display: block; + height: 50px; + padding-left: 96px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-right corner of an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-023.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-023.xht new file mode 100644 index 0000000000..93ac8a1ca1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-023.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'right' and intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-023-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 296px; + position: absolute; + width: auto; + } + + /* + The svg's containing block has width: auto + in which case shrink-to-fit width + applies which is given by its non-positioned + content, which is its inner div. + */ + + svg + { + margin-left: auto; + margin-right: auto; + left: 1in; + position: absolute; + right: auto; + } + div div + { + background: orange; + height: 50px; + margin-top: 50px; + margin-left: 1in; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-right corner of an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-024-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-024-ref.xht new file mode 100644 index 0000000000..a53cc29ff8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-024-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img + { + display: block; + height: 100px; + padding-left: 88px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-right corner of an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-024.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-024.xht new file mode 100644 index 0000000000..73abd19c31 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-024.xht @@ -0,0 +1,81 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'right' and 'height'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-024-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 288px; + position: absolute; + width: auto; + } + + /* + The svg's containing block is div#div1 which + has width: auto. Therefore, shrink-to-fit width + will apply to div#div1. + Its non-positioned content is its + inner div which requires a + minimum of 288px. Therefore, + div#div1 shrink-to-fit width + will compute to 288px. + */ + + svg + { + height: 100px; + margin-left: auto; + margin-right: auto; + left: 88px; + position: absolute; + right: auto; + } + + /* + + 88px : left + + + 0px (set) : margin-left + + + 300px : width (pre-defined fallback when intrinsic values are not defined) + + + 0px (set) : margin-right + + + (solve) : right + ========================= + 388px : width of containing block (div#div1 width is 288px) + + Therefore, used right offset must be -100px so that the + constraining equation gets balanced. + + */ + + div div + { + background: orange; + height: 100px; + margin-left: 88px; + margin-top: 100px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-right corner of an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-025-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-025-ref.xht new file mode 100644 index 0000000000..afbb24e32d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-025-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[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img + { + display: block; + height: 100px; + margin-bottom: 10px; + padding-left: 88px; + width: 200px; + } + + img + img {height: 96px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-right corner of an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-025.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-025.xht new file mode 100644 index 0000000000..8b5a78b36c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-025.xht @@ -0,0 +1,72 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'right' and no intrinsic height or width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-025-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 288px; + position: absolute; + } + + #div2 + { + height: 110px; + position: relative; + width: 3in; + } + #div3 + { + background: orange; + height: 1in; + margin-left: 88px; + width: 200px; + } + svg + { + left: 88px; + position: absolute; + right: auto; + } + + /* + + 88px : left + + + 0px (set) : margin-left + + + 300px : width (pre-defined fallback when intrinsic values are not defined) + + + 0px (set) : margin-right + + + (solve) : right + ========================= + 388px : width of containing block (div#div2 width is 288px) + + Therefore, used right offset must be -100px so that the + constraining equation gets balanced. + + */ + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-right corner of an hollow black square.</p> + <div id="div1"> + <div id="div2"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + </div> + <div id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-027-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-027-ref.xht new file mode 100644 index 0000000000..c51d6d9e8f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-027-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 192px; + } + + img + { + display: block; + height: 96px; + padding-left: 96px; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black rectangle.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-027.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-027.xht new file mode 100644 index 0000000000..e868877d28 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-027.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'right' and percentage width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-027-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The width of an absolutely positioned inline replaced element set to a percentage is evaluated against its containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: 1in; + position: absolute; + right: auto; + } + div div + { + background: orange; + height: 1in; + margin-left: 1in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-029.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-029.xht new file mode 100644 index 0000000000..4bd5131014 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-029.xht @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD 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: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-022-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The intrinsic width is used if 'height' and 'width' are 'auto'. Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. If at this point there is an 'auto' left (like right as in this test), solve the equation for that value." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 2in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: 1in; + position: absolute; + right: auto; + } + + /* + + 1in : left + 0px (set) : margin-left + 1in : width (intrinsic width) + 0px (set) : margin-right + (solve) : right + ========================= + 2in : width of containing block (2in) + + Therefore , the used right offset must be 0px + so that the contraining equation gets balanced. + + */ + + div div + { + background: orange; + height: 96px; + margin-left: 1in; + margin-top: 96px; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black square.</p> + <div id="div1"> + <img alt="blue 96x96" src="support/blue96x96.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-030.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-030.xht new file mode 100644 index 0000000000..524064f711 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-030.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'right' and intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-023-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 296px; + position: absolute; + width: auto; + } + + /* + The svg's containing block (which is div#div1) + has width: auto in which case shrink-to-fit width + applies which is given by its non-positioned + content, which is its inner div. + */ + + svg + { + margin-left: auto; + margin-right: auto; + left: 1in; + position: absolute; + right: auto; + } + div div + { + background: orange; + height: 50px; + margin-left: 1in; + margin-top: 50px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-right corner of an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-031.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-031.xht new file mode 100644 index 0000000000..494cb1739f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-031.xht @@ -0,0 +1,82 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'right' and 'height'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-024-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 3in; + position: absolute; + width: auto; + } + + /* + The svg's containing block is div#div1 which + has width: auto. Therefore, shrink-to-fit width + will apply to div#div1. + Its non-positioned content is its + inner div which requires a + minimum of 288px. Therefore, + div#div1 shrink-to-fit width + will compute to 288px. + */ + + svg + { + height: 100px; + margin-left: auto; + margin-right: auto; + left: 88px; + position: absolute; + right: auto; + } + + /* + + 88px : left + + + 0px (set) : margin-left + + + 300px : width (pre-defined fallback when intrinsic values are not defined) + + + 0px (set) : margin-right + + + (solve) : right + ========================= + 388px : width of containing block (div#div1 width is 288px) + + Therefore, used right offset must be -100px so that the + constraining equation gets balanced. + + */ + + + div div + { + background: orange; + height: 100px; + margin-left: 88px; + margin-top: 100px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-right corner of an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-032.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-032.xht new file mode 100644 index 0000000000..e9ef650e6f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-032.xht @@ -0,0 +1,71 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'right' and no intrinsic height or width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-025-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced elements becomes a used value of '0'. The height and width are adjusted by the constraints for block-level, non-replaced elements." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 3in; + position: absolute; + } + #div2 + { + height: 110px; + position: relative; + } + #div3 + { + background: orange; + height: 1in; + margin-left: 88px; + width: 200px; + } + svg + { + left: 88px; + position: absolute; + right: auto; + } + + /* + + 88px : left + + + 0px (set) : margin-left + + + 300px : width (pre-defined fallback when intrinsic values are not defined) + + + 0px (set) : margin-right + + + (solve) : right + ========================= + 388px : width of containing block (div#div2 width is 288px) + + Therefore, used right offset must be -100px so that the + constraining equation gets balanced. + + */ + + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and the blue rectangle is in the upper-right corner of an hollow black square.</p> + <div id="div1"> + <div id="div2"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + </div> + <div id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-034.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-034.xht new file mode 100644 index 0000000000..4d95609055 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-034.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'right' and percentage intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-020-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage widths are evaluated against the containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 3in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: 1in; + position: absolute; + right: auto; + } + div div + { + background: orange; + height: 1in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and the blue square is in the upper-right corner of an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-036-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-036-ref.xht new file mode 100644 index 0000000000..0c8262aff2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-036-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 192px; + width: 192px; + } + + img + { + display: block; + height: 96px; + margin-left: 0.5in; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-036.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-036.xht new file mode 100644 index 0000000000..2a2647f3ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-036.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-036-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 2in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: 0.5in; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 96px; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 96px; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <img alt="blue 96x96" src="support/blue96x96.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-037-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-037-ref.xht new file mode 100644 index 0000000000..beea721320 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-037-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img + { + display: block; + height: 50px; + margin-left: 44px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-037.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-037.xht new file mode 100644 index 0000000000..5eee892895 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-037.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right' and intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-037-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: absolute; + } + svg + { + margin-left: auto; + margin-right: auto; + left: 44px; + position: absolute; + right: 44px; + } + div div + { + background: orange; + height: 50px; + margin-left: 44px; + margin-right: 44px; + margin-top: 50px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-038-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-038-ref.xht new file mode 100644 index 0000000000..70b7177a9e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-038-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img + { + display: block; + padding-left: 44px; + height: 100px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-038.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-038.xht new file mode 100644 index 0000000000..0aae33bbe5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-038.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right' and 'height'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-038-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: absolute; + } + svg + { + height: 100px; + margin-left: auto; + margin-right: auto; + left: 44px; + position: absolute; + right: 44px; + } + div div + { + background: orange; + height: 100px; + margin-left: 44px; + margin-right: 44px; + margin-top: 100px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-039-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-039-ref.xht new file mode 100644 index 0000000000..f51f7e87be --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-039-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[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img + { + display: block; + height: 100px; + margin-bottom: 10px; + padding-left: 44px; + width: 200px; + } + + img + img {height: 96px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-039.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-039.xht new file mode 100644 index 0000000000..efade389d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-039.xht @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right' and no intrinsic height or width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-039-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. The height and width are adjusted by the constraints for block-level, non-replaced elements." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: absolute; + } + #div2 + { + height: 110px; + position: relative; + width: 3in; + } + #div3 + { + background: orange; + height: 1in; + margin-left: 44px; + margin-right: 44px; + width: 200px; + } + svg + { + left: 44px; + position: absolute; + right: 44px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <div id="div2"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-041-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-041-ref.xht new file mode 100644 index 0000000000..893f3596e5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-041-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 288px; + width: 192px; + } + + img + { + display: block; + padding-left: 48px; + height: 96px; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black rectangle.</p> + + <div><img src="support/blue15x15.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-041.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-041.xht new file mode 100644 index 0000000000..19e5350aa7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-041.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-041-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage widths are evaluated against the containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: 0.5in; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 1in; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-043.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-043.xht new file mode 100644 index 0000000000..91e7ffe481 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-043.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-036-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 2in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: 0.5in; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 96px; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 96px; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <img alt="blue 96x96" src="support/blue96x96.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-048.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-048.xht new file mode 100644 index 0000000000..b22043eae6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-048.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-041-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage widths are evaluated against the containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 3in; + position: relative; + width: 2in; + } + img + { + margin-left: auto; + margin-right: auto; + left: 0.5in; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 1in; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-050.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-050.xht new file mode 100644 index 0000000000..4fb8a46d54 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-050.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-036-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 2in; + position: relative; + width: 2in; + } + img + { + margin-left: 0.25in; + margin-right: auto; + left: 0.25in; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 96px; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 96px; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <img alt="blue 96x96" src="support/blue96x96.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-051.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-051.xht new file mode 100644 index 0000000000..40a32c3a73 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-051.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-right' and intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-037-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: absolute; + } + svg + { + left: 22px; + margin-left: 22px; + margin-right: auto; + position: absolute; + right: 44px; + } + div div + { + background: orange; + height: 50px; + margin-left: 44px; + margin-right: 44px; + margin-top: 50px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-052.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-052.xht new file mode 100644 index 0000000000..05416bba97 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-052.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-right' and 'height'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-038-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: absolute; + } + svg + { + height: 100px; + left: 22px; + margin-left: 22px; + margin-right: auto; + position: absolute; + right: 44px; + } + div div + { + background: orange; + height: 100px; + margin-left: 44px; + margin-right: 44px; + margin-top: 100px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-053.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-053.xht new file mode 100644 index 0000000000..28c77ae556 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-053.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-right' and no intrinsic height or width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-039-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. The height and width are adjusted by the constraints for block-level, non-replaced elements." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: absolute; + } + #div2 + { + height: 110px; + position: relative; + width: 3in; + } + #div3 + { + background: orange; + height: 1in; + margin-left: 44px; + margin-right: 44px; + width: 200px; + } + svg + { + left: 22px; + margin-left: 22px; + margin-right: auto; + position: absolute; + right: 44px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <div id="div2"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-055.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-055.xht new file mode 100644 index 0000000000..7a5bdea427 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-055.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-right' and percentage intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-041-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage widths are evaluated against the containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: relative; + width: 2in; + } + img + { + margin-left: 0.25in; + margin-right: auto; + left: 0.25in; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 1in; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-057.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-057.xht new file mode 100644 index 0000000000..a3198d5f18 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-057.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-036-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 2in; + position: relative; + width: 2in; + } + img + { + left: 0.25in; + margin-left: 0.25in; + margin-right: auto; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 96px; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 96px; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <img alt="blue 96x96" src="support/blue96x96.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-062.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-062.xht new file mode 100644 index 0000000000..ad2cdef7b4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-062.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-right' and percentage width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-041-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage widths are evaluated against the containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 3in; + position: relative; + width: 2in; + } + img + { + left: 0.25in; + margin-left: 0.25in; + margin-right: auto; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 1in; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-064.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-064.xht new file mode 100644 index 0000000000..b29c91318b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-064.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, intrinsic width and over-constrained situation</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-036-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 2in; + position: relative; + width: 2in; + } + img + { + left: 0.25in; + margin-left: 0.25in; + margin-right: 0.5in; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 96px; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 96px; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <img alt="blue 96x96" src="support/blue96x96.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-065.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-065.xht new file mode 100644 index 0000000000..27b845a237 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-065.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, intrinsic height and over-constrained situation</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-037-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: absolute; + } + svg + { + left: 22px; + margin-left: 22px; + margin-right: 44px; + position: absolute; + right: 44px; + } + div div + { + background: orange; + height: 50px; + margin-left: 44px; + margin-right: 44px; + margin-top: 50px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-066.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-066.xht new file mode 100644 index 0000000000..907bf00895 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-066.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'height' and over-constrained situation</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-038-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: absolute; + } + svg + { + height: 100px; + left: 22px; + margin-left: 22px; + margin-right: 44px; + position: absolute; + right: 44px; + } + div div + { + background: orange; + height: 100px; + margin-left: 44px; + margin-right: 44px; + margin-top: 100px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-067.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-067.xht new file mode 100644 index 0000000000..5d7f6237a4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-067.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, no intrinsic height or width and over-constrained situation</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-039-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. The height and width are adjusted by the constraints for block-level, non-replaced elements." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: absolute; + } + #div2 + { + height: 110px; + position: relative; + width: 3in; + } + #div3 + { + background: orange; + height: 1in; + margin-left: 44px; + margin-right: 44px; + width: 200px; + } + svg + { + left: 22px; + margin-left: 22px; + margin-right: 44px; + position: absolute; + right: 44px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <div id="div2"> + <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-069.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-069.xht new file mode 100644 index 0000000000..be33590a6d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-069.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, percentage intrinsic width and over-constrained situation</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-041-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage widths are evaluated against the containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: ltr; + height: 3in; + position: relative; + width: 2in; + } + img + { + left: 0.25in; + margin-left: 0.25in; + margin-right: 0.5in; + position: absolute; + right: 0.5in; + } + div div + { + background: orange; + height: 1in; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-071.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-071.xht new file mode 100644 index 0000000000..711ac8aa40 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-071.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, intrinsic width and over-constrained situation</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-036-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on absolutely positioned inline replaced element becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 2in; + position: relative; + width: 2in; + } + img + { + left: 0.5in; + margin-left: 0.5in; + margin-right: 0.25in; + position: absolute; + right: 0.25in; + } + div div + { + background: orange; + height: 96px; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 96px; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black square.</p> + <div id="div1"> + <img alt="blue 96x96" src="support/blue96x96.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-076.xht b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-076.xht new file mode 100644 index 0000000000..129e3a1894 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/absolute-replaced-width-076.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, percentage intrinsic width and over-constrained situation</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width" /> + <link rel="match" href="absolute-replaced-width-041-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage widths are evaluated against the containing block's width." /> + <style type="text/css"> + #div1 + { + border: solid black; + direction: rtl; + height: 3in; + position: relative; + width: 2in; + } + img + { + left: 0.5in; + margin-left: 0.5in; + margin-right: 0.25in; + position: absolute; + right: 0.25in; + } + div div + { + background: orange; + height: 1in; + margin-left: 0.5in; + margin-right: 0.5in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and are <strong>horizontally centered</strong> in an hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-001-ref.xht new file mode 100644 index 0000000000..0772592669 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-001-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 1em;} + + p {padding-bottom: 1em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a green stripe and no red.</p> + + <div><img src="support/swatch-green.png" width="160" height="16" 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/positioning/abspos-001.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-001.xht new file mode 100644 index 0000000000..b8cd1afeb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-001.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Absolute Positioning: static position after previous margin</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/001.xml" type="application/xhtml+xml"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + <link rel="match" href="abspos-001-ref.xht" /> + + <style type="text/css"> + /* Set Up Conditions */ + * { margin: 0; padding: 0; border: 0; + position: static; float: none; display: block; + top: auto; left: auto; right: auto; bottom: auto; } + head { display: none; } + body { padding: 1em; } + /* Test */ + .margin { margin-bottom: 2em; } + .abs { position: absolute; background: green; z-index: 1; height: 1em; width: 10em; } + .flow { background: red; height: 1em; width: 10em; } + </style> + </head> + <body> + + <div class="margin">Test passes if there is a green stripe and no red.</div> + <div class="abs"/> <div class="flow"/> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-002-ref.xht new file mode 100644 index 0000000000..9fe437c277 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-002-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: blue solid 16px; + height: 32px; + width: 64px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a hollow blue rectangle.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-002.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-002.xht new file mode 100644 index 0000000000..5d4ca5f2fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-002.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: Positioning with a relpos ancestor containing block</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/023.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + <link rel="match" href="abspos-002-ref.xht" /> + + <style type="text/css"> + .container { position: relative; background: red; width: 6em; + border-top: 1em solid blue; } + .test { position: absolute; height: 2em; width: 4em; + background: white; color: green; + border: solid 1em blue; + border-top: none;} + </style> + </head> + <body> + <p>Test passes if there is a hollow blue rectangle.</p> + <div class="container"> + <div> + <div> + <div class="test"> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-003.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-003.xht new file mode 100644 index 0000000000..e78aa51cbd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-003.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Positioning relative to the ICB: short root element</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/005-demo.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <style type="text/css"> + p { margin: 0; padding: 0.5em; } + .absolute { position: absolute; bottom: 0; left: 0; right: 0; + height: 5em; border: solid blue; } + .control { border: solid yellow; } + * { margin: 0; padding: 0; } + </style> + </head> + <body> + <p class="absolute">This blue box should be at the bottom of the viewport + / first page.</p> + <p class="control">This yellow box should be at the top of the + viewport or first page. There should also be a blue box visible at the + bottom of the viewport / page. </p> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-004.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-004.xht new file mode 100644 index 0000000000..19d729cdb5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-004.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Positioning relative to the ICB: long root element</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/006-demo.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <style type="text/css"> + .absolute { position: absolute; bottom: 0; left: 0; right: 0; + height: 5em; border: solid blue; } + html { height: 300em; min-height: 150%; border: orange; border-style: none solid; } + .control { border: solid yellow; } + * { margin: 0; padding: 0; } + </style> + </head> + <body> + <p class="absolute">This blue box should be at the bottom of the viewport + / first page.</p> + <p class="control">This yellow box should be at the top of the + viewport or first page. There should also be a blue box visible at the + bottom of the viewport / page.</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-006.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-006.xht new file mode 100644 index 0000000000..cc53cf58a1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-006.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Absolute Positioning: Tables with two offsets</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/008.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <style type="text/css"> + body { font: 900 10em "Lucida Console", "Courier New", Courier, monospace; } + .description { font: medium serif; margin: 1em 1em 15em; } + .test { position: absolute; bottom: 0; left: auto; right: 0; top: auto; + background: white; color: green; margin: 0; } + .control { position: absolute; bottom: 0; left: auto; right: 0; top: auto; + background: red; color: yellow; margin: 0; } + </style> + </head> + <body> + <p class="description">The word PASS should appear at the bottom right of this document.</p> + <p class="control">FAIL</p> + <table class="test"><tbody><tr><td>PASS</td></tr></tbody></table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-007-ref.xht new file mode 100644 index 0000000000..33ae560e13 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-007-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[ + p {margin: 0;} + + div + { + background-color: green; + height: 1em; + width: 10em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-007.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-007.xht new file mode 100644 index 0000000000..82c77eb1c7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-007.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Positioning blocks inside inline contexts with top:auto</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/009.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-007-ref.xht" /> + + <style type="text/css"> + .container div { height: 1em; width: 10em; } + .test { position: absolute; background: green; z-index: 1; } + .control { background: red; } + .inline { display: inline; } + </style> + </head> + <body> + <div class="container"> + <div class="inline"> + Test passes if there is <strong>no red</strong>. + <div class="test"></div> + <div class="control"></div> + </div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-008-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-008-ref.xht new file mode 100644 index 0000000000..7fb8eed3d6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-008-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[ + div + { + background-color: green; + border-top: white solid 10px; + color: white; + float: left; + font-size: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div>X X0</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-008.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-008.xht new file mode 100644 index 0000000000..46a302f133 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-008.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Shrink wrapping of absolute positioned blocks</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/011.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"/> + <link rel="match" href="abspos-008-ref.xht" /> + + <style type="text/css"> + .container { font-size: 100px; position: relative; border-top: 10px solid white; } + .outer { position: absolute; top: 0; left: 0; z-index: 1; } + .inner { background: green; color: white; float: left; } + .control { float: left; color: yellow; background: red; } + </style> + </head> +<body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div class="container"> + <div class="outer"> + <div class="inner"> + X X0 + </div> + </div> + <div class="control">X X1</div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-009-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-009-ref.xht new file mode 100644 index 0000000000..6ee4b0d7bf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-009-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; + float: right; + height: 1em; + width: 10em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a green stripe on the right 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/positioning/abspos-009.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-009.xht new file mode 100644 index 0000000000..2c5902f5f9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-009.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Right alignment with position:right</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-08 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/012.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-009-ref.xht" /> + + <style type="text/css"> + body { position: relative; } + .control { border-right: 10em solid red; height: 1em; } + .test { position: absolute; width: 10em; height: 1em; + right: 0; margin: auto; + background: green; color: white; } + </style> + </head> +<body> + <p>Test passes if there is a green stripe on the right and <strong>no red</strong>.</p> + <div class="test"></div> + <div class="control"></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-010.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-010.xht new file mode 100644 index 0000000000..c3929a052a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-010.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Absolutely positioned tables must shrink wrap</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/013.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"/> + <style type="text/css"> + table { position: absolute; background: red; border-spacing: 0; padding: 0;} + td { padding: 0; } + div { width: 3em; height: 2em; background: green; } + .fixed { table-layout: fixed; margin-top: 2em; } + </style> + </head> + <body> + <p>There should be a green block and no red below.</p> + <table> + <tr> + <td> + <div></div> + </td> + </tr> + </table> + <table class="fixed"> + <tr> + <td> + <div></div> + </td> + </tr> + </table> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-011-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-011-ref.xht new file mode 100644 index 0000000000..e14b766fe7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-011-ref.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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 {font: bold 32px/1 monospace;} + + div#first {margin-top: 40px;} + + div#second + { + bottom: 1em; + position: relative; + } + + div#third + { + bottom: 2em; + position: relative; + } + ]]></style> + + </head> + + <body> + + <div id="first"> </div> + + <div id="second">FAIL PASS</div> + + <div id="third">####</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-011.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-011.xht new file mode 100644 index 0000000000..1900af4518 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-011.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: absolute; top: auto; test (assumed initial values)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/014.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-011-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + body {margin: 8px;} + p { position: absolute; font: bold 32px/1 monospace; } + /* was font: bold 2em monospace; */ + </style> + </head> + <body> + <p>FAIL </p> + <p># P </p> + <p> ## A </p> + <p> # SS</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-012.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-012.xht new file mode 100644 index 0000000000..03b47f9222 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-012.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: absolute; top: auto; test (assumed initial values)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/015.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-011-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + body {margin: 8px;} + div { position: relative; } + p { position: absolute; font: bold 32px/1 monospace; } + /* was font: bold 2em monospace; */ + </style> + </head> + <body> + <div> + <p>FAIL </p> + <p># P </p> + <p> ## A </p> + <p> # SS</p> + </div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-013-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-013-ref.xht new file mode 100644 index 0000000000..b065f712bc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-013-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[ + body {margin: 10px;} + + div + { + background-color: green; + color: white; + height: 64px; + width: 320px; + } + ]]></style> + + </head> + + <body> + + <div>This block should be green.</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-013.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-013.xht new file mode 100644 index 0000000000..8a05d12065 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-013.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: fixed; top: auto; test - body padding</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/016.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-013-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + html { margin: 0; padding: 0; } + body { margin: 0; padding: 10px; } + .a { position: fixed; top: 10px; left: 10px; width: 20em; height: 4em; + background: red; color: yellow; } + .b { position: fixed; top: auto; left: auto; width: 20em; height: 4em; + background: green; color: white; } + </style> + </head> + <body> + <div class="a">FAIL</div> + <div class="b">This block should be green.</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-014.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-014.xht new file mode 100644 index 0000000000..553b93d046 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-014.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: fixed; top: auto; test - body padding</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/016-alt.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-013-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + html { margin: 0; padding: 0; } + body { margin: 0; padding: 10px; } + .a { position: static; top: 10px; left: 10px; width: 20em; height: 4em; + background: red; color: yellow; } + .b { position: fixed; top: auto; left: auto; width: 20em; height: 4em; + background: green; color: white; } + </style> + </head> + <body> + <div class="b">This block should be green.</div> + <div class="a">FAIL</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-015.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-015.xht new file mode 100644 index 0000000000..32b2652811 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-015.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: fixed; top: auto; test - html padding</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/017.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-013-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + html { margin: 0; padding: 10px; } + body { margin: 0; padding: 0; } + .a { position: fixed; top: 10px; left: 10px; width: 20em; height: 4em; + background: red; color: yellow; } + .b { position: fixed; top: auto; left: auto; width: 20em; height: 4em; + background: green; color: white; } + </style> + </head> + <body> + <div class="a">FAIL</div> + <div class="b">This block should be green.</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-016.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-016.xht new file mode 100644 index 0000000000..6310eb01dd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-016.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: fixed; top: auto; test - html padding</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/017-alt.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-013-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + html { margin: 0; padding: 10px; } + body { margin: 0; padding: 0; } + .a { position: static; top: 10px; left: 10px; width: 20em; height: 4em; + background: red; color: yellow; } + .b { position: fixed; top: auto; left: auto; width: 20em; height: 4em; + background: green; color: white; } + </style> + </head> + <body> + <div class="b">This block should be green.</div> + <div class="a">FAIL</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-017.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-017.xht new file mode 100644 index 0000000000..9c1a977657 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-017.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: fixed; top: auto; test - body margin</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/018.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-013-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + html { margin: 0; padding: 0; } + body { margin: 10px; padding: 0; } + .a { position: fixed; top: 10px; left: 10px; width: 20em; height: 4em; + background: red; color: yellow; } + .b { position: fixed; top: auto; left: auto; width: 20em; height: 4em; + background: green; color: white; } + </style> + </head> + <body> + <div class="a">FAIL</div> + <div class="b">This block should be green.</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-018.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-018.xht new file mode 100644 index 0000000000..7cf610e32e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-018.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: fixed; top: auto; test - body margin</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/018-alt.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-013-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + html { margin: 0; padding: 0; } + body { margin: 10px; padding: 0; } + .a { position: static; top: 10px; left: 10px; width: 20em; height: 4em; + background: red; color: yellow; } + .b { position: fixed; top: auto; left: auto; width: 20em; height: 4em; + background: green; color: white; } + </style> + </head> + <body> + <div class="b">This block should be green.</div> + <div class="a">FAIL</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-019.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-019.xht new file mode 100644 index 0000000000..f2e83dab44 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-019.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: fixed; top: auto; test - html margin</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/019.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-013-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + html { margin: 10px; padding: 0; } + body { margin: 0; padding: 0; } + .a { position: fixed; top: 10px; left: 10px; width: 20em; height: 4em; + background: red; color: yellow; } + .b { position: fixed; top: auto; left: auto; width: 20em; height: 4em; + background: green; color: white; } + </style> + </head> + <body> + <div class="a">FAIL</div> + <div class="b">This block should be green.</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-020.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-020.xht new file mode 100644 index 0000000000..e1a0335103 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-020.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: fixed; top: auto; test - html margin</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/019-alt.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"/> + <link rel="match" href="abspos-013-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + html { margin: 10px; padding: 0; } + body { margin: 0; padding: 0; } + .a { position: static; top: 10px; left: 10px; width: 20em; height: 4em; + background: red; color: yellow; } + .b { position: fixed; top: auto; left: auto; width: 20em; height: 4em; + background: green; color: white; } + </style> + </head> + <body> + <div class="b">This block should be green.</div> + <div class="a">FAIL</div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-022.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-022.xht new file mode 100644 index 0000000000..9949351f1f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-022.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: position: fixed; top: auto; test - margin collapsing</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-03 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/020-alt.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="abspos-013-ref.xht" /> + + <meta name="flags" content="may"/> + <style type="text/css"> + html { margin: 0; padding: 0; } + body { margin: 0 10px; padding: 0; } + .a { position: static; top: 10px; left: 10px; width: 20em; height: 4em; + background: red; color: yellow; } + .b { position: fixed; top: auto; left: auto; width: 20em; height: 4em; + background: green; color: white; } + .c1 { margin: 2px; } + .c2 { margin: -4px 20px; } + .c3 { margin: 0 0 14px; } + .c4 { margin: 50px; } + </style> + </head> + <body> + <div class="c1"> + <div class="c2"> + <div class="c3"></div> + </div> + </div> + <div class="b">This block should be green.</div> + <div class="a">FAIL</div> + <div class="c4"></div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-023.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-023.xht new file mode 100644 index 0000000000..e5cd4c424c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-023.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: left:auto for fixed-pos blocks inside abs-pos blocks</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/021.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"/> + <meta name="flags" content="may"/> + <style type="text/css"> + body { color: navy; } + .control { margin-left: 50%; border-top: 1em solid red; width: 1em; } + .container { position: absolute; left: 50%; } + .test { position: fixed; left: auto; width: 1em; height: 1em; + background: green; color: white; } + </style> + </head> + <body> + <p>There should be a green square roughly centered below and no red.</p> + <div class="container"> + <div class="test"> </div> + </div> + <div class="control"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-024-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-024-ref.xht new file mode 100644 index 0000000000..791769ab93 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-024-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + p, div {text-align: right;} + ]]></style> + + </head> + + <body> + + <p>.Test passes if there is a green stripe on the right and <strong>no red</strong></p> + + <div><img src="support/1x1-green.png" width="64" height="16" 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/positioning/abspos-024.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-024.xht new file mode 100644 index 0000000000..2e4a77d08b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-024.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Static position in rtl context</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-11 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/022.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"/> + <link rel="match" href="abspos-024-ref.xht" /> + + <style type="text/css"> + body { position: relative; } + .test { position: absolute; background: green; color: green; + width: 4em; height: 1em; } + .control { border-right: 4em solid red; height: 1em; } + </style> + </head> + <body dir="rtl"> + <p>Test passes if there is a green stripe on the right and <strong>no red</strong>.</p> + <div class="test"></div> + <div class="control"></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-025-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-025-ref.xht new file mode 100644 index 0000000000..2785da521c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-025-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 {margin: 8px; font: 1em/1.25 serif;} + + strong {line-height: 1;} + + img + { + left: 56px; + position: relative; + top: 12px; + vertical-align: top; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a green square and <strong>no red</strong>.</p> + + <div><img src="support/swatch-green.png" 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/positioning/abspos-025.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-025.xht new file mode 100644 index 0000000000..b9b1fd6fbe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-025.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Positioning replaced elements with four offsets</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/024.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"/> + <link rel="match" href="abspos-025-ref.xht" /> + + <meta name="flags" content="image"/> + <style type="text/css"> + html { background: url(support/swatch-red.png) no-repeat 4em 4em; } + body {margin: 8px; font: 1em/1.25 serif;} + strong {line-height: 1;} + img { position: absolute; left: 4em; right: 0; top: 4em; bottom: 0; } + </style> + </head> + <body> + <p>Test passes if there is a green square and <strong>no red</strong>. <img src="support/swatch-green.png" alt="FAIL" /></p> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-026.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-026.xht new file mode 100644 index 0000000000..6fa4d773d8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-026.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Positioning replaced elements with four offsets</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/025.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"/> + <link rel="match" href="abspos-025-ref.xht" /> + + <style type="text/css"> + body {margin: 8px; font: 1em/1.25 serif;} + strong {line-height: 1;} + img { position: absolute; left: 4em; right: 4em; top: 4em; bottom: 4em; } + div { position: absolute; left: 4em; top: 4em; height: 15px; width: 15px; background: green; } +} + </style> + </head> + <body> + <p>Test passes if there is a green square and <strong>no red</strong>. <img src="support/swatch-red.png" alt="FAIL" /></p> + <div></div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-027.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-027.xht new file mode 100644 index 0000000000..f9fecbe6cb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-027.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned elements must shrink wrap tables</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-11 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/positioning/003.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="match" href="../reference/ref-if-there-is-no-red.xht" /> + + <style type="text/css"> + body {margin-top: 1em; } + + .test { position: absolute; background: red; } + table { background: white; color: black; margin: auto; border-spacing: 0px; } + td { padding: 0px; } + </style> + </head> + <body> + <div class="test"> + <table> + <tr> + <td>Test passes if there is <strong>no red</strong>.</td> + </tr> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-028-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-028-ref.xht new file mode 100644 index 0000000000..e610ce37ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-028-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: 1em; + width: 6em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a green stripe 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/positioning/abspos-028.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-028.xht new file mode 100644 index 0000000000..38b726410c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-028.xht @@ -0,0 +1,40 @@ +<!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: Abspos static position and clear</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-11 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height"/> + <link rel="match" href="abspos-028-ref.xht" /> + + <meta name="assert" content="The static position is calculated as if clear + had been none."/> + <style type="text/css"> + .container { + width: 6em; + height: 1em; + background: red; + } + .float { + float: left; + width: 1em; + height: 4em; + background: white; + } + .abspos { + position: absolute; + clear: both; + width: 6em; + height: 1em; + background: green; + } + </style> + </head> + <body> + <p>Test passes if there is a green stripe and <strong>no red</strong>.</p> + <div class="container"> + <div class="float"></div> + <div class="abspos"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-block-level-001-ref.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-block-level-001-ref.html new file mode 100644 index 0000000000..58f605dc74 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-block-level-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<style> +.rtl { + direction: rtl +} +.absolute { + position: absolute; +} +.green { + background-color: lime; + padding: 0 1ch; +} +</style> +<body> + <div> + <span class="absolute green">Block-level abspos before inline content</span> + <br> + </div> + <div> + <div>Inline content</div> + <div>Block-level abspos after inline content</div> + </div> + <div class=rtl> + <span class="absolute green">Block-level abspos before inline content</span> + <br> + </div> + <div class=rtl> + <div>Inline content</div> + <div>Block-level abspos after inline content</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-block-level-001.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-block-level-001.html new file mode 100644 index 0000000000..c55fb3d394 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-block-level-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>CSS Test: Static positions of block-level absolutely positioned objects</title> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#static-position"> +<link rel="match" href="abspos-block-level-001-ref.html"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +.rtl { + direction: rtl +} +.absolute { + position: absolute; +} +.red { + color: red; + padding: 0 1ch; +} +.green { + background-color: lime; + padding: 0 1ch; +} +</style> +<body> + <div> + <div class="absolute green">Block-level abspos before inline content</div> + <span class="red">Inline content</span> + </div> + <div> + <span>Inline content</span> + <div class=absolute>Block-level abspos after inline content</div> + </div> + <br> + <div class=rtl> + <div class="absolute green">Block-level abspos before inline content</div> + <span class="red">Inline content</span> + </div> + <div class=rtl> + <span>Inline content</span> + <div class=absolute>Block-level abspos after inline content</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-change-in-inline-block.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-change-in-inline-block.html new file mode 100644 index 0000000000..88422950ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-change-in-inline-block.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>Chaning positioned objects in inline-block should not crash</title> +<link rel="author" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://crbug.com/1102128"> +<style> +#container { + width: 5ch; +} +#inline-block { + display: inline-block; + position: relative; + width: 3ch; +} +#abs { + position: absolute; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + <div id="container"> + <span> + <span id="inline-block"> + <span id="abs"></span> + </span> + </span> + 1234 + </div> +<script> +test(() => { + document.body.offsetTop; + abs.style.top = '10px'; + document.body.offsetTop; +}, 'No crash'); +</script> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-001-ref.xht new file mode 100644 index 0000000000..238d2860c3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-001-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 0;} + + div {color: green;} + ]]></style> + + </head> + + <body> + + <div>Test passes if there is <strong>no red</strong>.</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-001.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-001.xht new file mode 100644 index 0000000000..a097a7cc90 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-001.xht @@ -0,0 +1,20 @@ +<!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: Containing block for fixed positioning</title> + <link rel="author" title="Bert Bos" href="http://www.w3.org/People/Bos/"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="abspos-containing-block-001-ref.xht" /> + + <style type="text/css"> + body { background: red; margin: 100px 100px; } + div { background: white; color: green; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } + </style> + </head> + <body> + <div> + Test passes if there is <strong>no red</strong>. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-002.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-002.xht new file mode 100644 index 0000000000..9d778bced3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-002.xht @@ -0,0 +1,20 @@ +<!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: Containing block for absolute positioning</title> + <link rel="author" title="Bert Bos" href="http://www.w3.org/People/Bos/"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="abspos-containing-block-001-ref.xht" /> + + <style type="text/css"> + body { background: red; margin: 100px 100px; } + div { background: white; color: green; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } + </style> + </head> + <body> + <div> + Test passes if there is <strong>no red</strong>. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-003.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-003.xht new file mode 100644 index 0000000000..c86c9ffe33 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-003.xht @@ -0,0 +1,20 @@ +<!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: Containing block for absolute positioning</title> + <link rel="author" title="Bert Bos" href="http://www.w3.org/People/Bos/"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="abspos-containing-block-001-ref.xht" /> + + <style type="text/css"> + body { background: red; margin: 100px 100px; } + div { background: white; color: green; position: fixed; top: 0; right: 0; height: 100%; width: 100%; } + </style> + </head> + <body> + <div> + Test passes if there is <strong>no red</strong>. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-004.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-004.xht new file mode 100644 index 0000000000..1cbae982dc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-004.xht @@ -0,0 +1,20 @@ +<!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: Containing block for absolute positioning</title> + <link rel="author" title="Bert Bos" href="http://www.w3.org/People/Bos/"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="abspos-containing-block-001-ref.xht" /> + + <style type="text/css"> + body { background: red; margin: 100px 100px; } + div { background: white; color: green; position: absolute; top: 0; right: 0; height: 100%; width: 100%; } + </style> + </head> + <body> + <div> + Test passes if there is <strong>no red</strong>. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-005.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-005.xht new file mode 100644 index 0000000000..b86a3a0691 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-005.xht @@ -0,0 +1,21 @@ +<!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: Containing block for absolute positioning</title> + <link rel="author" title="Bert Bos" href="http://www.w3.org/People/Bos/"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="abspos-containing-block-001-ref.xht" /> + + <style type="text/css"> + html { margin: 0; padding: 0; width: 100%; height: 100%; position: relative; } + body { background: red; margin: 100px 20%; } + div { background: white; color: green; position: absolute; top: 0; right: 0; width: 100%; height: 100%; } + </style> + </head> + <body> + <div> + Test passes if there is <strong>no red</strong>. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-006.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-006.xht new file mode 100644 index 0000000000..70a6f46e6c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-006.xht @@ -0,0 +1,21 @@ +<!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: Containing block for absolute positioning</title> + <link rel="author" title="Bert Bos" href="http://www.w3.org/People/Bos/"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="abspos-containing-block-001-ref.xht" /> + + <style type="text/css"> + html { margin: 0; padding: 0; width: 100%; height: 100%; position: relative; } + body { background: red; margin: 100px 20%; } /* background propagates up to html and then canvas */ + div { background: white; color: green; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } + </style> + </head> + <body> + <div> + Test passes if there is <strong>no red</strong>. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-007.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-007.xht new file mode 100644 index 0000000000..ad3e40fa09 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-007.xht @@ -0,0 +1,20 @@ +<!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: Containing block for absolute positioning</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="abspos-containing-block-001-ref.xht" /> + + <style type="text/css"> + html { border: 100px solid red; background: red; } + div { background: white; color: green; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } + </style> + </head> + <body> + <div> + Test passes if there is <strong>no red</strong>. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-008.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-008.xht new file mode 100644 index 0000000000..f01ce44a5e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-008.xht @@ -0,0 +1,21 @@ +<!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: Containing block for absolute positioning</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="abspos-containing-block-001-ref.xht" /> + + <style type="text/css"> + html { border: 100px solid red; background: red; } + div { background: white; color: green; position: absolute; + top: 0; right: 0; width: 100%; height: 100%; } + </style> + </head> + <body> + <div> + Test passes if there is <strong>no red</strong>. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-009.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-009.xht new file mode 100644 index 0000000000..77e17dfec9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-009.xht @@ -0,0 +1,21 @@ +<!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: Containing block for absolute positioning</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="abspos-containing-block-001-ref.xht" /> + + <style type="text/css"> + html { border: 100px solid red; background: red; } + div { background: white; color: green; position: absolute; + bottom: 0; left: 0; width: 100%; height: 100%; } + </style> + </head> + <body> + <div> + Test passes if there is <strong>no red</strong>. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-010-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-010-ref.xht new file mode 100644 index 0000000000..805f7a8bdc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-010-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + html + { + background-color: green; + color: white; + height: 100%; + } + + body {margin: 0;} + ]]></style> + + </head> + + <body> + + <div>Test passes if there is <strong>no red</strong>.</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-010.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-010.xht new file mode 100644 index 0000000000..f219976216 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-containing-block-010.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: Absolute Positioning: Containing Block of Top Level Absolutely Positioned Block</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" /> + <link rel="match" href="abspos-containing-block-010-ref.xht" /> + + <style type="text/css"> + html { margin: 0; border: 0; padding: 0; background: white; color: yellow; } + body { margin: 1em; border: 1em solid red; padding: 1em; background: red; color: yellow; } + p { margin: 1em; padding: 1em; } + div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: green; color: white; } + </style> + </head> + <body> + <p>FAIL</p> + <p>This page should be completely green.</p> + <div>Test passes if there is <strong>no red</strong>.</div> + <!-- the <div> element should exactly overlap the <html> element, + since they have the same dimensions and the same containing block + and the same origin. --> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-float-with-inline-container-ref.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-float-with-inline-container-ref.html new file mode 100644 index 0000000000..3bf67ed4a9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-float-with-inline-container-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 100px; + background: green; +} +</style> +<p>Test passes if there is green square.</p> +<div></div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-float-with-inline-container.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-float-with-inline-container.html new file mode 100644 index 0000000000..9918bcc68d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-float-with-inline-container.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html" /> +<link rel="match" href="abspos-float-with-inline-container-ref.html" /> +<meta name="assert" content="A inline-level element can contain a absolute-positioned child within a float." /> +<style> +#abs { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100px; + background: green; +} +#float { float: left; } +span { + position: relative; + padding-left: 100px; +} +</style> +<p>Test passes if there is green square.</p> +<div> + <span> + <div id="float"> + <div id="abs"></div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-001.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-001.xht new file mode 100644 index 0000000000..84f937dc67 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-001.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned boxes in inlines: 'auto'</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/inline/001.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + + <meta name="flags" content="interact" /> + + <style type="text/css"> + p { font: 1em monospace; } + .filler { color: silver; } + .absolute { color: white; background: green; position: absolute; } + .fail { color: yellow; background: red; } + </style> + </head> + <body> + <p> + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + <span class="test"> The test has <span class="absolute">PASSED</span><span class="fail">FAILED</span>.</span> + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + </p> + <p>(Exception: when the word FAILED is at the beginning of a + line, the word PASSED may still be at the end of the previous + line.)</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-002.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-002.xht new file mode 100644 index 0000000000..598cf39cc2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-002.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned boxes in inlines: 'auto' with 'relative'</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/inline/002.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + + <meta name="flags" content="interact" /> + + <style type="text/css"> + p { font: 1em monospace; } + .filler { color: silver; } + .absolute { color: white; background: green; position: absolute; } + .fail { color: yellow; background: red; } + .test { position: relative; } + </style> + </head> + <body> + <p> + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + <span class="test"> The test has <span class="absolute">PASSED</span><span class="fail">FAILED</span>.</span> + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + </p> + <p>(Exception: when the word FAILED is at the beginning of a + line, the word PASSED may still be at the end of the previous + line.)</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-003.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-003.xht new file mode 100644 index 0000000000..f5b26b11c2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-003.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned boxes in inlines: positioning at top left</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/inline/003.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + + <meta name="flags" content="interact" /> + + <style type="text/css"> + p { font: 1em monospace; } + .filler { color: silver; } + .absolute { color: white; background: green; position: absolute; top: 0; left: 0; } + .fail { color: yellow; background: red; } + .test { position: relative; } + </style> + </head> + <body> + <p> + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + The test has <span class="test"><span class="absolute">PASSED</span><span class="fail">FAILED</span></span>. + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + </p> + + <p>There should be no red after resizing viewport.</p> + + <!-- the exception mentioned in tests 001 and 002 DOES NOT APPLY to this test. --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-004.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-004.xht new file mode 100644 index 0000000000..89d48f7e5b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned boxes in inlines: positioning at top right</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/inline/004.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + + <meta name="flags" content="interact" /> + + <style type="text/css"> + p { font: 1em monospace; } + .filler { color: silver; } + .absolute { color: white; background: green; position: absolute; top: 0; right: 0; } + .fail { color: yellow; background: red; } + .test { position: relative; } + </style> + </head> + <body> + <p> + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + The test has <span class="test"><span class="absolute">PASSED</span><span class="fail">FAILED</span></span>. + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + </p> + + <p>There should be no red after resizing viewport.</p> + + <!-- the exception mentioned in tests 001 and 002 DOES NOT APPLY to this test. --> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-005.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-005.xht new file mode 100644 index 0000000000..053527c983 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-005.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned boxes in inlines: positioning at bottom left</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/inline/005.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + + <meta name="flags" content="interact" /> + + <style type="text/css"> + p { font: 1em monospace; } + .filler { color: silver; } + .absolute { color: white; background: green; position: absolute; bottom: 0; left: 0; } + .fail { color: yellow; background: red; } + .test { position: relative; } + </style> + </head> + <body> + <p> + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + The test has <span class="test"><span class="absolute">PASSED</span><span class="fail">FAILED</span></span>. + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + </p> + + <p>There should be no red after resizing viewport.</p> + + <!-- the exception mentioned in tests 001 and 002 DOES NOT APPLY to this test. --> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-006.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-006.xht new file mode 100644 index 0000000000..e5a544f351 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-006.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned boxes in inlines: positioning at bottom right</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/inline/006.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + + <meta name="flags" content="interact" /> + + <style type="text/css"> + p { font: 1em monospace; } + .filler { color: silver; } + .absolute { color: white; background: green; position: absolute; bottom: 0; right: 0; } + .fail { color: yellow; background: red; } + .test { position: relative; } + </style> + </head> + <body> + <p> + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + The test has <span class="test"><span class="absolute">PASSED</span><span class="fail">FAILED</span></span>. + <span class="filler"> This is filler text. This is filler text. This is filler text. </span> + </p> + + <p>There should be no red after resizing viewport.</p> + + <!-- the exception mentioned in tests 001 and 002 DOES NOT APPLY to this test. --> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-007-ref.xht new file mode 100644 index 0000000000..742ef0cbe1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-007-ref.xht @@ -0,0 +1,71 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>reference for abspos-inline-007</title> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .block-container { + font: 20px Ahem; + height: 20px; + position: relative; + top: -1px; + } + .inline-container { + position: relative; + border: 1px solid black; + display: inline-block; + } + .parent-block { + display: inline-block; + width: 30px; + height: 10px; + } + .abspos { + position: absolute; + width: 10px; + height: 10px; + background-color: green; + display: inline-block; + vertical-align: baseline; + } + .br { + right: 0; + bottom: 0; + } + .tl { + top: 0; + left: 0; + } + .filler { + display: inline-block; + width: 30px; + height: 10px; + } + + </style> + </head> + <body> + <div class="block-container"> + x + <div class="inline-container"> + tl + <div class="abspos tl"></div> + <div class="parent-block"></div> + <div class="filler"></div> + </div>x + <div class="inline-container"> + br + <div class="abspos br"></div> + <div class="parent-block"></div> + <div class="filler"></div> + </div>x + <div class="inline-container"> + static + <div class="abspos" style="position:static"></div><div class="parent-block"></div> + <div class="filler" style="width: 20px;"></div> + </div> + </div> +<p>Tests abspos positioning of an Element that 1) has an inline containing +block, and 2) is not a child of the inline containing block, but a descendant.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-007.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-007.xht new file mode 100644 index 0000000000..35fd245dd1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-007.xht @@ -0,0 +1,75 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned descendants in inlines</title> + <link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos" /> + <link rel="match" href="abspos-inline-007-ref.xht" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .block-container { + position: relative; + font: 20px Ahem; + } + .inline-container { + position: relative; + border: 1px solid black; + } + .parent-block { + display: inline-block; + width: 30px; + height: 10px; + } + .abspos { + position: absolute; + width: 10px; + height: 10px; + background-color: green; + } + .br { + right: 0; + bottom: 0; + } + .tl { + top: 0; + left: 0; + } + .filler { + display: inline-block; + width: 30px; + height: 10px; + } + + </style> + </head> + <body> + <div class="block-container"> + x + <span class="inline-container"> + tl + <div class="parent-block"> + <div class="abspos tl"></div> + </div> + <div class="filler"></div> + </span> + x + <span class="inline-container"> + br + <div class="parent-block"> + <div class="abspos br"></div> + </div> + <div class="filler"></div> + </span> + x + <span class="inline-container"> + static + <div class="parent-block"> + <div class="abspos"></div> + </div> + <div class="filler"></div> + </span> + </div> +<p>Tests abspos positioning of an Element that 1) has an inline containing +block, and 2) is not a child of the inline containing block, but a descendant.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-008.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-008.xht new file mode 100644 index 0000000000..9233b4373e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-008.xht @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned descendant under relative positioned inline with negative offset</title> + <link rel="author" title="Tien-Ren Chen" href="mailto:trchen@chromium.org"/> + <link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width"/> + <link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"/> + </head> + <body> + <p>Test passes if there is a filled green square.</p> + <div style="position:relative; left:100px; width:100px;"> + <span style="position:relative; left:-100px;"> + <div style="position:absolute; display:inline-block; width:100px; height:100px; background:green;"></div> + </span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-container-in-inline-block.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-container-in-inline-block.html new file mode 100644 index 0000000000..04eb1416f7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-inline-container-in-inline-block.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#propdef-position"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div> + <span style="border: 1px solid blue"> + <span style="position: relative"> + <span style="display: inline-block"> + <span style="position: absolute; background: orange; width: 100px; height: 100px"></span> + </span> + </span> + </span> +</div> +<script> +// Test pass if it does not crash. +test(() => {}); +</script> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-negative-margin-001-ref.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-negative-margin-001-ref.html new file mode 100644 index 0000000000..e6f9bd6f9a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-negative-margin-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +div { + font-size: 10px; + line-height: 1; +} +.blue { + display: inline-block; + vertical-align: bottom; + width: 10px; + height: 10px; + background: blue; +} +</style> +<body> + <div>x<span class="blue"></span></div> + <div>x<br><span class="blue"></span></div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-negative-margin-001.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-negative-margin-001.html new file mode 100644 index 0000000000..6b6246eb19 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-negative-margin-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>CSS Test: Absolutely positioned object in a negative margin box</title> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"> +<link rel="match" href="abspos-negative-margin-001-ref.html"> +<style> +html { + font-size: 10px; + line-height: 1; +} +.abspos { + position:absolute; + width: 10px; + height: 10px; + background: blue; +} +</style> +<body> + <div> + <span> + <span style="margin-right: -10px;"> + x<span class="abspos"></span> + </span> + </span> + </div> + <div> + <span> + <span style="margin-right: -10px;"> + x<div class="abspos"></div> + </span> + </span> + </div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-001-ref.xht new file mode 100644 index 0000000000..ba7e87c6a7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-001-ref.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <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 + { + line-height: 1.25; + margin-left: 0; + } + + div#positioned + { + background: green; + color: white; + left: 0; + position: absolute; + top: 0; + width: 10em; + } + + p {margin-top: 36px;} + + div#overflow + { + height: 8em; + overflow: scroll; + width: 8em; + } + ]]></style> + + </head> + + <body> + + <div id="positioned">PASS</div> + + <p>Ignore the scrollbars below.</p> + + <div id="overflow"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-001.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-001.xht new file mode 100644 index 0000000000..0f7ed6b70d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned children of overflow: scroll</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/001.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-001-ref.xht" /> + + <style type="text/css"> + html, body { margin: 0; border: 0; padding: 0; line-height: 1.25;} + .control { color: yellow; background: red; width: 10em; } + .overflow { width: 8em; height: 8em; overflow: scroll; } + .positioned { color: white; background: green; position: absolute; top: 0; left: 0; width: 10em; } + </style> + </head> + <body> + <div class="control">FAIL</div> + <p>Ignore the scrollbars below.</p> + <div class="overflow"> + <div class="positioned">PASS</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-002-ref.xht new file mode 100644 index 0000000000..e5b0fad316 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-002-ref.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <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 + { + line-height: 1.25; + margin-left: 0; + } + + div#positioned + { + background: green; + color: white; + right: 0; + position: absolute; + top: 0; + width: 10em; + } + + p {margin-top: 36px;} + + div#overflow + { + height: 8em; + overflow: scroll; + width: 8em; + } + ]]></style> + + </head> + + <body> + + <div id="positioned">PASS</div> + + <p>Ignore the scrollbars below.</p> + + <div id="overflow"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-002.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-002.xht new file mode 100644 index 0000000000..793aaa6e27 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-002.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned children of overflow: scroll</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/002.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-002-ref.xht" /> + + <style type="text/css"> + html, body { margin: 0; border: 0; padding: 0; line-height: 1.25; } + .control { color: yellow; background: red; width: 10em; margin: 0 0 0 auto; } + .overflow { width: 8em; height: 8em; overflow: scroll; } + .positioned { color: white; background: green; position: absolute; top: 0; right: 0; width: 10em; } + </style> + </head> + <body> + <div class="control">FAIL</div> + <p>Ignore the scrollbars below.</p> + <div class="overflow"> + <div class="positioned">PASS</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-003-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-003-ref.xht new file mode 100644 index 0000000000..89fdbfc1d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-003-ref.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin-left: 0;} + + div#positioned + { + background: green; + color: white; + height: 5em; + left: 5em; + position: absolute; + top: 5em; + width: 5em; + } + + p {margin-top: 11em;} + + div#overflow + { + height: 8em; + overflow: scroll; + width: 8em; + } + ]]></style> + + </head> + + <body> + + <div id="positioned">PASS</div> + + <p>Ignore the scrollbars below.</p> + + <div id="overflow"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-003.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-003.xht new file mode 100644 index 0000000000..65f568e3dc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-003.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned children of overflow: scroll</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/003.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-003-ref.xht" /> + + <style type="text/css"> + html, body { margin: 0; border: 0; padding: 0; } + .control { margin: 5em 0 0 5em; background: red; color: yellow; width: 5em; height: 5em; } + .overflow { overflow: scroll; width: 8em; height: 8em; } + .positioned { position: absolute; top: 5em; left: 5em; background: green; color: white; width: 5em; height: 5em; } + </style> + </head> + <body> + <div class="control">FAIL</div> + <p>Ignore the scrollbars below.</p> + <div class="overflow"> + <div class="positioned">PASS</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-004-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-004-ref.xht new file mode 100644 index 0000000000..2a0195537c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-004-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-left: 0;} + + div#positioned + { + background: green; + color: white; + left: 0; + position: absolute; + top: 0; + width: 10em; + } + ]]></style> + + </head> + + <body> + + <div id="positioned">PASS</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-004.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-004.xht new file mode 100644 index 0000000000..eafa15ed0e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-004.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned children of overflow: hidden</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/004.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-004-ref.xht" /> + + <style type="text/css"> + html, body { margin: 0; border: 0; padding: 0; } + .control { color: yellow; background: red; width: 10em; } + .overflow { width: 8em; height: 8em; overflow: hidden; } + .positioned { color: white; background: green; position: absolute; top: 0; left: 0; width: 10em; } + </style> + </head> + <body> + <div class="control">FAIL</div> + <div class="overflow"> + <div class="positioned">PASS</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-005-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-005-ref.xht new file mode 100644 index 0000000000..5a538e0cae --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-005-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-left: 0;} + + div#positioned + { + background: green; + color: white; + position: absolute; + right: 0; + top: 0; + width: 10em; + } + ]]></style> + + </head> + + <body> + + <div id="positioned">PASS</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-005.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-005.xht new file mode 100644 index 0000000000..109e7abba9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-005.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned children of overflow: hidden</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/005.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-005-ref.xht" /> + + <style type="text/css"> + html, body { margin: 0; border: 0; padding: 0; } + .control { color: yellow; background: red; width: 10em; margin: 0 0 0 auto; } + .overflow { width: 8em; height: 8em; overflow: hidden; } + .positioned { color: white; background: green; position: absolute; top: 0; right: 0; width: 10em; } + </style> + </head> + <body> + <div class="control">FAIL</div> + <div class="overflow"> + <div class="positioned">PASS</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-006-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-006-ref.xht new file mode 100644 index 0000000000..ff2631902a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-006-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin-left: 0;} + + div#positioned + { + background: green; + color: white; + height: 5em; + left: 5em; + position: absolute; + top: 5em; + width: 5em; + } + ]]></style> + + </head> + + <body> + + <div id="positioned">PASS</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-006.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-006.xht new file mode 100644 index 0000000000..6e88c2bfea --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-006.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned children of overflow: hidden</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/006.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-006-ref.xht" /> + + <style type="text/css"> + html, body { margin: 0; border: 0; padding: 0; } + .control { margin: 5em 0 0 5em; background: red; color: yellow; width: 5em; height: 5em; } + .overflow { overflow: hidden; width: 8em; height: 8em; } + .positioned { position: absolute; top: 5em; left: 5em; background: green; color: white; width: 5em; height: 5em; } + </style> + </head> + <body> + <div class="control">FAIL</div> + <div class="overflow"> + <div class="positioned">PASS</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-007.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-007.xht new file mode 100644 index 0000000000..3c9ad7b3a6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-007.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned children of overflow: auto</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/007.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-004-ref.xht" /> + + <style type="text/css"> + html, body { margin: 0; border: 0; padding: 0; } + .control { color: yellow; background: red; width: 10em; } + .overflow { width: 8em; height: 8em; overflow: auto; } + .positioned { color: white; background: green; position: absolute; top: 0; left: 0; width: 10em; } + </style> + </head> + <body> + <div class="control">FAIL</div> + <!-- There should be no scrollbars below. --> + <div class="overflow"> + <div class="positioned">PASS</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-008.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-008.xht new file mode 100644 index 0000000000..af84b93cce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-008.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned children of overflow: auto</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/008.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-005-ref.xht" /> + + <style type="text/css"> + html, body { margin: 0; border: 0; padding: 0; } + .control { color: yellow; background: red; width: 10em; margin: 0 0 0 auto; } + .overflow { width: 8em; height: 8em; overflow: auto; } + .positioned { color: white; background: green; position: absolute; top: 0; right: 0; width: 10em; } + </style> + </head> + <body> + <div class="control">FAIL</div> + <!-- There should be no scrollbars below. --> + <div class="overflow"> + <div class="positioned">PASS</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-009.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-009.xht new file mode 100644 index 0000000000..17eddd8a67 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-009.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned children of overflow: auto</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/009.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-006-ref.xht" /> + + <style type="text/css"> + html, body { margin: 0; border: 0; padding: 0; } + .control { margin: 5em 0 0 5em; background: red; color: yellow; width: 5em; height: 5em; } + .overflow { overflow: auto; width: 8em; height: 8em; } + .positioned { position: absolute; top: 5em; left: 5em; background: green; color: white; width: 5em; height: 5em; } + </style> + </head> + <body> + <div class="control">FAIL</div> + <!-- There should be no scrollbars below. --> + <div class="overflow"> + <div class="positioned">PASS</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-010-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-010-ref.xht new file mode 100644 index 0000000000..09b8ce5eb0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-010-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {color: green;} + ]]></style> + + </head> + + <body> + + <p>There should be green text below.</p> + + <div>This text should be green.</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-010.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-010.xht new file mode 100644 index 0000000000..7d2c9c355d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-010.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: Positioning, Overflow, and Stacking: Empty positioned children of 'overflow:auto' boxes</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/010.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-010-ref.xht" /> + + <style type="text/css"> + #outer { + overflow: auto; /* this should have no visible effect as the element sizes vertically to fit its contents */ + color: green; + } + #inner { + position: absolute; /* relative to the viewport, not that it matters */ + z-index: -1; /* this should have no effect, as the element is fully transparent anyway */ + } + </style> + </head> + <body> + <p>There should be green text below.</p> + <div id="outer"> + This text should be green. + <div id="inner"> </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-011-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-011-ref.xht new file mode 100644 index 0000000000..fb2c49a28b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-011-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {color: green;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div>This text should be green.</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-011.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-011.xht new file mode 100644 index 0000000000..9cac516d33 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-011.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: Positioning, Overflow, and Stacking: 'overflow:auto' as an in-flow sibling of a positioned element</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/011.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-011-ref.xht" /> + + <style type="text/css"> + #outer { + position: relative; + } + #inner { + position: absolute; /* positioned relative to the containing block of the div that follows it */ + top: 0; + background: white; + color: green; + width: 20em; + } + #content { + overflow: auto; /* this should have no effect on the stacking context calculations or painting order */ + background: red; + color: yellow; + width: 20em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="outer"> + <div id="inner"> This text should be green. </div> + <div id="content"> FAIL </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-012.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-012.xht new file mode 100644 index 0000000000..376d52519d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-overflow-012.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Positioning, Overflow, and Clipping: Does 'overflow:auto' affect positioned elements that are relative to elements outside the overflow</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/overflow/012.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping" /> + <link rel="match" href="abspos-overflow-011-ref.xht" /> + + <style type="text/css"> + #outer { + position: relative; + height: 1em; + width: 20em; + background: red; + } + #inner { + overflow: auto; /* this rule should be irrelevant since the element is empty and thus has zero height */ + } + #positioned { + position: absolute; /* relative to the outer div */ + top: 0; + width: 20em; + background: white; + color: green; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="outer"> + <div id="inner"> + <div id="positioned"> This text should be green. </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-paged-001.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-paged-001.xht new file mode 100644 index 0000000000..df3a3c09bd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-paged-001.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Positioning in paged media: Initial containing block</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/paged/001.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-intro" /> + <meta name="flags" content="paged"/> + <style type="text/css"> + div { page-break-after: always; } + h1 { position: absolute; top: 2em; left: 1em; font: 6em monospace; } + </style> + </head> + <body> + <p>Display this in a paged media. The word PASS should display below + (followed by three mostly-blank pages).</p> + <div><h1>P</h1></div> + <div><h1> A</h1>Blank Page 1</div> + <div><h1> S</h1>Blank Page 2</div> + <div><h1> S</h1>Blank Page 3</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-paged-002.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-paged-002.xht new file mode 100644 index 0000000000..7f422675ec --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-paged-002.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Positioning in paged media: Positioning multiple pages</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/paged/002.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-intro" /> + <meta name="flags" content="paged"/> + <style type="text/css"> + html, body { height: 100%; margin: 0; padding: 0; } + p { margin: 0; padding: 1em; } + div { height: 100%; position: relative; } + h1 { position: absolute; top: 50%; margin-top: -0.5em; + left: 0; right: 0; text-align: center; + font: 2em monospace; } + </style> + </head> + <body> + <div> + <p>Test passes if each of its five pages has the page number printed + in the middle of the page, with no overlap.</p> + <h1>Page one</h1></div> + <div><h1>Page two</h1></div> + <div><h1>Page three</h1></div> + <div><h1>Page four</h1></div> + <div><h1>Page five</h1></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-width-001.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-001.xht new file mode 100644 index 0000000000..766c512b3c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute Positioning: width:auto with table width:100%</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/width/001.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="../reference/ref-if-there-is-no-red.xht" /> + + <style type="text/css"> + div { position: absolute; } + td { background: red; height: 2em; padding: 0; } + .a { top: 4em; } + .b { top: 8em; } + .b table { width: 100%; } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <!-- both should shrink wrap to 0, and 100% of 0 is 0. --> + <div class="a"> <table> <tr> <td> </td> </tr> </table> </div> + <div class="b"> <table> <tr> <td> </td> </tr> </table> </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-width-002.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-002.xht new file mode 100644 index 0000000000..0465f6571b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-002.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute Positioning: width:auto with block width:100%</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/width/002.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="../reference/ref-if-there-is-no-red.xht" /> + + <style type="text/css"> + .a, .b { position: absolute; } + .inner { background: red; height: 2em; } + .a { top: 4em; } + .a .inner { width: auto; } + .b { top: 8em; } + .b .inner { width: 100%; } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <!-- both should shrink wrap to 0, and 100% of 0 is 0. --> + <div class="a"> <div class="inner"> </div> </div> + <div class="b"> <div class="inner"> </div> </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-width-003.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-003.xht new file mode 100644 index 0000000000..79208b8da9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-003.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute Positioning: width:auto with block width:50%</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/width/003.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="../reference/ref-if-there-is-no-red.xht" /> + + <style type="text/css"> + .a, .b { position: absolute; } + .inner { background: red; height: 2em; } + .a { top: 4em; } + .a .inner { width: auto; } + .b { top: 8em; } + .b .inner { width: 50%; } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <!-- both should shrink wrap to 0, and 100% of 0 is 0. --> + <div class="a"> <div class="inner"> </div> </div> + <div class="b"> <div class="inner"> </div> </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-width-004.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-004.xht new file mode 100644 index 0000000000..ee6f8967be --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-004.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute Positioning: width: 2em with block width:100%</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/width/004.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <style type="text/css"> + .test { width: 2em; height: 2em; padding: 2em; border: green solid 2px; background: red; position: relative; } + .test div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: green; } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="test"> + <div> </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-width-005-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-005-ref.xht new file mode 100644 index 0000000000..e330007f56 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-005-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div#parent + { + border: fuchsia solid thin; + height: 5em; + padding: 1em; + width: 10em; + } + + div#child + { + border: aqua solid thin; + padding: 1em; + width: 3em; + } + ]]></style> + + </head> + + <body> + + <p>The blue rectangle should be well within the pink rectangle, but its text should overflow out of both rectangles.</p> + + <div id="parent"> + <div id="child">overflowyflowyflowyflowyflowyflowyflowyflowy</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-width-005.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-005.xht new file mode 100644 index 0000000000..1913db0d29 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-005.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute Positioning: max-width</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/absolute/width/005-demo.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> + <link rel="match" href="abspos-width-005-ref.xht" /> + + <style type="text/css"> + .relative { position: relative; border: fuchsia thin solid; padding: 1em; width: 10em; height: 5em; } + .absolute { position: absolute; border: aqua thin solid; padding: 1em; max-width: 3em; } + </style> + </head> + <body> + <p>The blue rectangle should be well within the pink rectangle, but its text should overflow out of both rectangles.</p> + <div class="relative"> + <div class="absolute"> overflowyflowyflowyflowyflowyflowyflowyflowy </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-width-change-inline-container-001-ref.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-change-inline-container-001-ref.html new file mode 100644 index 0000000000..3426056af2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-change-inline-container-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +#container { + text-align: center; + width: 100px; +} +#relpos { + position: relative; + background: red; +} +#abspos { + position: absolute; + left: 0; + top: 0; + width: 50px; + height: 50px; + background: green; +} +</style> +<body> + <div id="container"> + <span id="relpos">x + <span id="abspos"></span> + </span> + </div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-width-change-inline-container-001.html b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-change-inline-container-001.html new file mode 100644 index 0000000000..27b5aed83a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-width-change-inline-container-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Test: Absolutely positioned object in an inline container repsonding to the block width change</title> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos"> +<link rel="match" href="abspos-width-change-inline-container-001-ref.html"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +#container { + text-align: center; + width: 200px; +} +#relpos { + position: relative; + background: red; +} +#abspos { + position: absolute; + left: 0; + top: 0; + width: 50px; + height: 50px; + background: green; +} +</style> +<body> + <div id="container"> + <span id="relpos">x + <span id="abspos"></span> + </span> + </div> +<script> +run(); +function run() { + document.body.offsetTop; + container.style.width = '100px'; +} +</script> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/abspos-zero-width-001.xht b/testing/web-platform/tests/css/CSS2/positioning/abspos-zero-width-001.xht new file mode 100644 index 0000000000..4f8b5d14c1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/abspos-zero-width-001.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute positioned elements still affect scrolling mechanism</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="flags" content="image" /> + <meta name="assert" content="Zero width absolute positioned elements still affects scrolling mechanism even though they are out of flow of the content." /> + <style type="text/css"> + body + { + background: url("../support/abspos-zero-width-001.png") no-repeat; + } + div + { + height: 2000px; + position: absolute; + top: 0; + width: 0; + } + </style> + </head> + <body> + <p>Test passes if there is a blue line above this text and a green box visible when the page is scrolled to its full extent vertically.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/auto-position-rtl-child-viewport-scrollbar-ref.html b/testing/web-platform/tests/css/CSS2/positioning/auto-position-rtl-child-viewport-scrollbar-ref.html new file mode 100644 index 0000000000..99d7c743a4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/auto-position-rtl-child-viewport-scrollbar-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<style>body { overflow:scroll; }</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:green;"></div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/auto-position-rtl-child-viewport-scrollbar.html b/testing/web-platform/tests/css/CSS2/positioning/auto-position-rtl-child-viewport-scrollbar.html new file mode 100644 index 0000000000..80daf1bb37 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/auto-position-rtl-child-viewport-scrollbar.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Auto-positioned absolutely positioned in static RTL parent, scrollbars on viewport</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements"> +<link rel="match" href="auto-position-rtl-child-viewport-scrollbar-ref.html"> +<style>body { overflow:scroll; }</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="direction:rtl; width:80px; height:80px; border:10px solid green; background:red;"> + <div style="position:absolute; width:80px; height:80px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-004.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-004.xht new file mode 100644 index 0000000000..ac2cdbb49e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-004.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using pixels with a value of negative zero, -0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a negative zero length value in pixels." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-005.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-005.xht new file mode 100644 index 0000000000..fdfe5dd77a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-005.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using pixels with a value of zero, 0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a zero length value in pixels." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-006.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-006.xht new file mode 100644 index 0000000000..f554da80e5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-006.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using pixels with a value of positive zero, +0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive zero length value in pixels." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-007-ref.xht new file mode 100644 index 0000000000..943292063f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-007-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 3px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-007.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-007.xht new file mode 100644 index 0000000000..41ad1a017a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-007.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: Bottom using pixels with a nominal value, 96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-007-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a nominal length value in pixels." /> + <style type="text/css"> + #div1 + { + border-top: 3px solid red; + position: relative; + } + #div2 + { + border-top: 3px solid black; + margin-top: 93px; + bottom: 96px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-008.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-008.xht new file mode 100644 index 0000000000..287642fb87 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-008.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: Bottom using pixels with a positive nominal value, +96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-007-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive nominal length value in pixels." /> + <style type="text/css"> + #div1 + { + border-top: 3px solid red; + position: relative; + } + #div2 + { + border-top: 3px solid black; + margin-top: 93px; + bottom: +96px; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-016.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-016.xht new file mode 100644 index 0000000000..7220533e9d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-016.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using points with a value of negative zero, -0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a negative zero length value in points." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0pt; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-017.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-017.xht new file mode 100644 index 0000000000..1f4f681776 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-017.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using points with a value of zero, 0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a zero length value in points." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0pt; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-018.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-018.xht new file mode 100644 index 0000000000..42321d1951 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-018.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using points with a value of positive zero, +0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive zero length value in points." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0pt; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-019-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-019-ref.xht new file mode 100644 index 0000000000..5dbb930ac5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-019-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-019.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-019.xht new file mode 100644 index 0000000000..8ef3491b4f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-019.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using points with a nominal value, 72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a nominal length value in points." /> + <style type="text/css"> + #div1 + { + border-top: 72pt solid red; + position: relative; + } + #div2 + { + border-top: 72pt solid black; + bottom: 72pt; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-020.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-020.xht new file mode 100644 index 0000000000..30ac2a84a3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-020.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using points with a positive nominal value, +72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive nominal length value in points." /> + <style type="text/css"> + #div1 + { + border-top: 72pt solid red; + position: relative; + } + #div2 + { + border-top: 72pt solid black; + bottom: +72pt; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-028.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-028.xht new file mode 100644 index 0000000000..6cbc57b83b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-028.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using picas with a value of negative zero, -0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a negative zero length value in picas." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0pc; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-029.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-029.xht new file mode 100644 index 0000000000..4b6248cae4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-029.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using picas with a value of zero, 0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a zero length value in picas." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0pc; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-030.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-030.xht new file mode 100644 index 0000000000..7230b6e668 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-030.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using picas with a value of positive zero, +0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive zero length value in picas." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0pc; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-031.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-031.xht new file mode 100644 index 0000000000..b6094a5ce9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-031.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using picas with a nominal value, 6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a nominal length value in picas." /> + <style type="text/css"> + #div1 + { + border-top: 6pc solid red; + position: relative; + } + #div2 + { + border-top: 6pc solid black; + bottom: 6pc; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-032.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-032.xht new file mode 100644 index 0000000000..25a6fb36d4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-032.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using picas with a positive nominal value, +6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive nominal length value in picas." /> + <style type="text/css"> + #div1 + { + border-top: 6pc solid red; + position: relative; + } + #div2 + { + border-top: 6pc solid black; + bottom: +6pc; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-040.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-040.xht new file mode 100644 index 0000000000..d60c160acb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-040.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using centimeters with a value of negative zero, -0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a negative zero length value in centimeters." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0cm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-041.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-041.xht new file mode 100644 index 0000000000..38b531f4fd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-041.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using centimeters with a value of zero, 0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a zero length value in centimeters." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0cm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-042.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-042.xht new file mode 100644 index 0000000000..e5afb0efa6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-042.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using centimeters with a value of positive zero, +0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive zero length value in centimeters." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0cm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-043.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-043.xht new file mode 100644 index 0000000000..c91a46ca7c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-043.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using centimeters with a nominal value, 2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a nominal length value in centimeters." /> + <style type="text/css"> + #div1 + { + border-top: 2.54cm solid red; + position: relative; + } + #div2 + { + border-top: 2.54cm solid black; + bottom: 2.54cm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-044.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-044.xht new file mode 100644 index 0000000000..dbaa899731 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-044.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using centimeters with a positive nominal value, +2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive nominal length value in centimeters." /> + <style type="text/css"> + #div1 + { + border-top: 2.54cm solid red; + position: relative; + } + #div2 + { + border-top: 2.54cm solid black; + bottom: +2.54cm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-052.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-052.xht new file mode 100644 index 0000000000..31508bcb32 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-052.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using millimeters with a value of negative zero, -0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a negative zero length value in millimeters." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0mm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-053.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-053.xht new file mode 100644 index 0000000000..4aea6b7676 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-053.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using millimeters with a value of zero, 0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a zero length value in millimeters." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0mm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-054.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-054.xht new file mode 100644 index 0000000000..fc1dee6ea2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-054.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using millimeters with a value of positive zero, +0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive zero length value in millimeters." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0mm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-055.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-055.xht new file mode 100644 index 0000000000..d7cc1fbd5f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-055.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using millimeters with a nominal value, 25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a nominal length value in millimeters." /> + <style type="text/css"> + #div1 + { + border-top: 25.4mm solid red; + position: relative; + } + #div2 + { + border-top: 25.4mm solid black; + bottom: 25.4mm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-056.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-056.xht new file mode 100644 index 0000000000..53f7db456f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-056.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using millimeters with a positive nominal value, +25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive nominal length value in millimeters." /> + <style type="text/css"> + #div1 + { + border-top: 25.4mm solid red; + position: relative; + } + #div2 + { + border-top: 25.4mm solid black; + bottom: +25.4mm; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-064.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-064.xht new file mode 100644 index 0000000000..6eb6768195 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-064.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using inches with a value of negative zero, -0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a negative zero length value in inches." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0in; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-065.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-065.xht new file mode 100644 index 0000000000..6d853c3ae8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-065.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using inches with a value of zero, 0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a zero length value in inches." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0in; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-066.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-066.xht new file mode 100644 index 0000000000..9db7b820e0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-066.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using inches with a value of positive zero, +0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive zero length value in inches." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0in; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-067.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-067.xht new file mode 100644 index 0000000000..2ba9a96469 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-067.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using inches with a nominal value, 1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a nominal length value in inches." /> + <style type="text/css"> + #div1 + { + border-top: 1in solid red; + position: relative; + } + #div2 + { + border-top: 1in solid black; + bottom: 1in; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-068.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-068.xht new file mode 100644 index 0000000000..c62e73eb9e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-068.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using inches with a positive nominal value, +1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive nominal length value in inches." /> + <style type="text/css"> + #div1 + { + border-top: 1in solid red; + position: relative; + } + #div2 + { + border-top: 1in solid black; + bottom: +1in; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-076.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-076.xht new file mode 100644 index 0000000000..902c734fd0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-076.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using 'em' units with a value of negative zero, -0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a negative zero length value in 'em' units." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-077.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-077.xht new file mode 100644 index 0000000000..ac8c772c52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-077.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using 'em' units with a value of zero, 0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a zero length value in 'em' units." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-078.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-078.xht new file mode 100644 index 0000000000..c2fa01c5f0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-078.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using 'em' units with a value of positive zero, +0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a positive zero length value in 'em' units." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-079-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-079-ref.xht new file mode 100644 index 0000000000..a60fc812c8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-079-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 20px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-079.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-079.xht new file mode 100644 index 0000000000..3ded789f71 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-079.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 Test: Bottom using 'em' units with a nominal value, 6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a nominal length value in 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: 1em solid red; + } + #div2 + { + border-top: 1em solid black; + margin-top: 5em; + bottom: 6em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-080.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-080.xht new file mode 100644 index 0000000000..7edb44d140 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-080.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 Test: Bottom using 'em' units with a positive nominal value, +6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a positive nominal length value in 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: 1em solid red; + } + #div2 + { + border-top: 1em solid black; + margin-top: 5em; + bottom: +6em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-088.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-088.xht new file mode 100644 index 0000000000..86380f75e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-088.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using 'ex' units with a value of negative zero, -0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a negative zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-089.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-089.xht new file mode 100644 index 0000000000..7bb2c3c580 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-089.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using 'ex' units with a value of zero, 0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-090.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-090.xht new file mode 100644 index 0000000000..4fa738ea7b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-090.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using 'ex' units with a value of positive zero, +0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a positive zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-091.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-091.xht new file mode 100644 index 0000000000..61d08dcbc2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-091.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using 'ex' units with a nominal value, 6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a nominal length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: 6ex solid red; + } + #div2 + { + border-top: 6ex solid black; + bottom: 6ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-092.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-092.xht new file mode 100644 index 0000000000..e2ad2d83ef --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-092.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using 'ex' units with a positive nominal value, +6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'bottom' property sets a positive nominal length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: 6ex solid red; + } + #div2 + { + border-top: 6ex solid black; + bottom: +6ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-100.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-100.xht new file mode 100644 index 0000000000..407ee7c7e3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-100.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using percentages with a value of negative zero, -0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a negative zero length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + height: 1in; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-101.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-101.xht new file mode 100644 index 0000000000..d108fc071e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-101.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using percentages with a value of zero, 0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a zero length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + height: 1in; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-102.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-102.xht new file mode 100644 index 0000000000..d01813c02a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-102.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using percentages with a value of positive zero, +0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive zero length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + height: 1in; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-103.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-103.xht new file mode 100644 index 0000000000..3d392a4cba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-103.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using percentages with a nominal value, 100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a nominal length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: 1in solid red; + height: 1in; + } + #div2 + { + border-top: 1in solid black; + bottom: 100%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-104.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-104.xht new file mode 100644 index 0000000000..54b8e49cfe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-104.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom using percentages with a positive nominal value, +100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-019-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive nominal length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: 1in solid red; + height: 1in; + } + #div2 + { + border-top: 1in solid black; + bottom: +100%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-109.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-109.xht new file mode 100644 index 0000000000..7a5948f6fa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-109.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom with a value of negative zero and no units, -0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a negative zero length value with no units." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: -0; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-110.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-110.xht new file mode 100644 index 0000000000..dcedf16beb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-110.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom with a value of zero and no units, 0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a zero length value with no units." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: 0; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-111.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-111.xht new file mode 100644 index 0000000000..4d74234b56 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-111.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom with a value of positive zero and no units, +0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a positive zero length value with no units." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: +0; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-112.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-112.xht new file mode 100644 index 0000000000..dd0304961c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-112.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom with a value of 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'bottom' property sets a value of 'auto'." /> + <style type="text/css"> + #div1 + { + border-top: blue solid 5px; + position: relative; + } + #div2 + { + border-top: orange solid 5px; + bottom: auto; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-113-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-113-ref.xht new file mode 100644 index 0000000000..206b4231cc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-113-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 96px; + margin-top: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-113.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-113.xht new file mode 100644 index 0000000000..75234950a9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-113.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom with a value of 'inherit'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-113-ref.xht" /> + + <meta name="assert" content="The 'bottom' property sets a value of 'inherit', inheriting the computed value from the parent element." /> + <style type="text/css"> + div + { + position: relative; + } + #parent + { + height: 1in; + margin-top: 2in; + } + #div1 + { + border-top: 1in solid red; + height: 1in; + bottom: 100%; + } + #div2 + { + border-top: 1in solid black; + bottom: inherit; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="parent"> + <div id="div1"> + <div id="div2"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-001-ref.xht new file mode 100644 index 0000000000..5b104d42ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-001-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + html, body, div {height: 100%;} + + body, p {margin: 0px;} + + div {background: url("support/green_box.png") no-repeat 8px bottom;} + + p {padding: 16px 8px 0px 8px;} + ]]></style> + + </head> + + <body> + + <div><p>Test passes if there is a filled green square at the bottom of the page.</p></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-001.xht new file mode 100644 index 0000000000..383e81a789 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-001.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to 'table-row-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'table-row-group'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + bottom: 0; + display: table-row-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + display: table-cell; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-002.xht new file mode 100644 index 0000000000..8481ac439d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-002.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to 'table-header-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'table-header-group'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + bottom: 0; + display: table-header-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-003.xht new file mode 100644 index 0000000000..156694cfb6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-003.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to 'table-footer-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'table-footer-group'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + bottom: 0; + display: table-footer-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-004.xht new file mode 100644 index 0000000000..9993f88c1f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-004.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: Bottom applied to element with 'display' set to 'table-row'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'table-row'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + bottom: 0; + display: table-row; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #cell + { + display: table-cell; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-005.xht new file mode 100644 index 0000000000..5b33e32edc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-005.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to 'table-column-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'table-column-group'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + bottom: 0; + display: table-column-group; + height: 100px; + position: absolute; + width: 100px; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-006.xht new file mode 100644 index 0000000000..831324ddff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-006.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to 'table-column'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'table-column'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + bottom: 0; + display: table-column; + height: 100px; + position: absolute; + width: 100px; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-007.xht new file mode 100644 index 0000000000..2dcccbcfca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-007.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: Bottom applied to element with 'display' set to 'table-cell'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'table-cell'." /> + <style type="text/css"> + body {margin: 8px;} + + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + bottom: 0; + display: table-cell; + height: 100px; + position: absolute; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-008.xht new file mode 100644 index 0000000000..1ec8fd04e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-008.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to inline</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'bottom' property applies to elements with a display of inline." /> + <style type="text/css"> + div + { + background: green; + bottom: 0; + display: inline; + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there is a green stripe at the bottom of the page.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-009.xht new file mode 100644 index 0000000000..dfc784cf38 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-009.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: Bottom applied to element with 'display' set to block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of block." /> + <style type="text/css"> + body {margin: 8px;} + + span + { + background: green; + bottom: 0; + display: block; + height: 100px; + position: absolute; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div> + <span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-010.xht new file mode 100644 index 0000000000..dbeedbbff2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-010.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to list-item</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'bottom' property applies to elements with a display of list-item." /> + <style type="text/css"> + body + { + margin-left: 1em; + } + div + { + background: green; + bottom: 0; + display: list-item; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page and a marker bullet on its left-hand side.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-012.xht new file mode 100644 index 0000000000..1f480bf125 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-012.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to inline-block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of inline-block." /> + <style type="text/css"> + body {margin: 8px;} + + span#inline-block + { + background: green; + bottom: 0; + display: inline-block; + position: absolute; + } + + span.block-descendant + { + display: block; + height: 50px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div> + <span id="inline-block"> + <span class="block-descendant"></span> + <span class="block-descendant"></span> + </span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-013.xht new file mode 100644 index 0000000000..9469f91ddf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-013.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: Bottom applied to element with 'display' set to 'table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'table'." /> + <style type="text/css"> + body {margin: 8px;} + + #table + { + background: green; + bottom: 0; + display: table; + table-layout: fixed; + height: 100px; + position: absolute; + width: 100px; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-014.xht new file mode 100644 index 0000000000..7157c66713 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-014.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to 'inline-table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'inline-table'." /> + <style type="text/css"> + body {margin: 8px;} + + #table + { + background: green; + bottom: 0; + display: inline-table; + table-layout: fixed; + height: 100px; + position: absolute; + width: 100px; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-015.xht new file mode 100644 index 0000000000..19c724f805 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-applies-to-015.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom applied to element with 'display' set to 'table-caption'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property applies to elements with a display of 'table-caption'." /> + <style type="text/css"> + body {margin: 8px;} + + #caption + { + background: green; + bottom: 0; + display: table-caption; + height: 100px; + position: absolute; + width: 100px; + } + #table + { + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="caption"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-001-ref.xht new file mode 100644 index 0000000000..c67c2bc4d8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a blue square with its bottom-left corner missing.</p> + + <div> + <div><img src="support/blue15x15.png" width="48" height="48" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="48" height="48" alt="Image download support must be enabled" /></div> + <div><img src="support/1x1-white.png" width="48" height="48" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="48" height="48" alt="Image download support must be enabled" /></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-001.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-001.xht new file mode 100644 index 0000000000..32be0fd8b8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-001.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 Test: 'bottom' offset - offset from the bottom edge of the containing block (abs. pos.)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-offset-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property, for absolute positioning, specifies the offset of the element in relation to the containing block's bottom edge. The containing block of an absolutely positioned element is formed by the padding box of its nearest (closest) positioned non-inline ancestor element." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + background: blue; + } + #div2 + { + background: white; + height: 0.5in; + position: absolute; + bottom: 0; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its bottom-left corner missing.</p> + <div> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-002.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-002.xht new file mode 100644 index 0000000000..757c4e6e6e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-002.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: 'bottom' offset - absolute length value and relative positioning</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-offset-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property, when using an absolute length value (not percentage) for relative positioning, specifies the offset of the box itself." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 1in; + position: relative; + width: 1in; + } + div div + { + background: white; + height: 0.5in; + position: relative; + bottom: -0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its bottom-left corner missing.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-003.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-003.xht new file mode 100644 index 0000000000..c8d29df0cc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-003.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: 'bottom' offset - offset from the bottom edge of the containing block (abs. pos.)</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-offset-001-ref.xht" /> + + <meta name="assert" content="The 'bottom' property, for absolute positioning, specifies the offset of the element in relation to the containing block's bottom edge. The containing block of an absolutely positioned element is formed by the padding box of its nearest (closest) positioned non-inline ancestor element." /> + <style type="text/css"> + #div1 + { + padding-bottom: 0.5in; + position: relative; + } + #div2 + { + background: white; + height: 0.5in; + position: absolute; + bottom: 0.5in; + width: 0.5in; + } + #div3 + { + background: blue; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its bottom-left corner missing.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-percentage-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-percentage-001-ref.xht new file mode 100644 index 0000000000..20818a2c70 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-percentage-001-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 + { + border: black solid medium; + height: 150px; + padding-top: 50px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green box that is not in any of the corners of an hollow black rectangle and if there is <strong>no red</strong>.</p> + + <div><img src="support/1x1-green.png" width="50" height="50" 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/positioning/bottom-offset-percentage-001.xht b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-percentage-001.xht new file mode 100644 index 0000000000..828bface3d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/bottom-offset-percentage-001.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Bottom offset using percentage</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-15 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-offset-percentage-001-ref.xht" /> + + <meta name="assert" content="Percentage offset values for the 'bottom' property are based off the height of the containing block." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 100px; + } + div div + { + height: 50px; + position: absolute; + width: 50px; + } + #test + { + background: green; + bottom: 50%; + } + #reference + { + background: red; + top: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green box that is not in any of the corners of an hollow black rectangle and if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="reference"></div> + <div id="test"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/detach-abspos-before-layout.html b/testing/web-platform/tests/css/CSS2/positioning/detach-abspos-before-layout.html new file mode 100644 index 0000000000..27ee59ccc5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/detach-abspos-before-layout.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Detaching positioned object before it is laid out should not crash</title> +<link rel="author" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://crbug.com/1101986"> +<meta name="assert" content="Detaching positioned object before it is laid out should not crash"> +<style> +.float { + float: left; +} +.abs { + position: absolute; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + <div id="container">text<span id="target" class="float"></span></div> +</body> +<script> +test(() => { + document.body.offsetTop; + let target = document.getElementById('target'); + + // Change `#target` from floating object to positioned object. + target.classList.add('abs'); + + // Style recalc without layout, and detach. + getComputedStyle(target).display; + container.style.display = "none"; +}, 'No crash or DCHECK failure'); +</script> diff --git a/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-001-ref.xht new file mode 100644 index 0000000000..7739e1b03e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-001-ref.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + p + { + line-height: 1.25; + margin: 1em 0; + } + + strong {line-height: 1;} + + div + { + background-color: green; + height: 100px; + margin-top: 112px; + /* + The red square appears 96px below the p margin box: + 2em : grandparent's top (dynamically set) + + + 2em : parent's top (inherited) + + + 2em : #red's top (inherited) + ======= + 96px + max(margin-bottom of p, margin-top of div) + max(16px, margin-top of div) == 16px + 96px; + therefore, margin-top of div == 16px + 96px + */ + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-001.xht b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-001.xht new file mode 100644 index 0000000000..10dfc482c1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-001.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Inheriting 'top' changes from relpos grandparent</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" 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" href="http://www.w3.org/TR/CSS21/visuren.html#position-props"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position"/> + <link rel="match" href="dynamic-top-change-001-ref.xht" /> + + <meta name="flags" content="dom" /> + <meta name="assert" content="The position of a positioned element which inherits its 'top' value from its relatively positioned grandparent changes when the grandparent's 'top' value is changed."/> + <style type="text/css"><![CDATA[ + p + { + line-height: 1.25; + margin: 1em 0; + } + + strong {line-height: 1;} + + .testDiv { position: absolute; width: 100px; height: 100px; } + #green { top: 4em; background: green; } + #red { top: inherit; background: red; } + #parent { top: inherit; position: relative; } + #grandparent { position: relative; } + ]]></style> + <script type="text/javascript"><![CDATA[ + window.onload = function() { + document.body.offsetWidth; + document.getElementById("grandparent").style.top = "2em"; + } + ]]></script> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="grandparent"> + <div id="parent"> + <div id="red" class="testDiv"></div> + </div> + <div id="green" class="testDiv"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-002-ref.xht new file mode 100644 index 0000000000..78eabeb2ab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-002-ref.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + p + { + line-height: 1.25; + margin: 1em 0; + } + + strong {line-height: 1;} + + div + { + background-color: green; + height: 100px; + margin-top: 28px; + /* + The green square appears 12px below the p margin box: + 2em + 2em - (16px + 20px + 16px) + 16px + max(margin-bottom of p, margin-top of div) + max(16px, margin-top of div) == 16px + 12px; + therefore, margin-top of div == 16px + 12px + */ + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-002.xht b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-002.xht new file mode 100644 index 0000000000..f6b80fe204 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-002.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Inheriting 'top' changes from parent table-row through anonymous table boxes</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" 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" href="http://www.w3.org/TR/CSS21/visuren.html#position-props"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position"/> + <link rel="match" href="dynamic-top-change-002-ref.xht" /> + + <meta name="flags" content="dom" /> + <meta name="assert" content="The position of a positioned element which inherits its 'top' value from its parent changes when the parent's 'top' value is changed even if the parent is display:table-row."/> + <style type="text/css"><![CDATA[ + p + { + line-height: 1.25; + margin: 1em 0; + } + + strong {line-height: 1;} + + .testDiv { width: 100px; height: 100px; } + #green { top: 4em; background: green; position: absolute; } + #red { top: inherit; background: red; position: relative; } + #parent { position: absolute; top: 2em; } + #intermediate { display: table-row; } + ]]></style> + <script type="text/javascript"><![CDATA[ + window.onload = function() { + document.body.offsetWidth; + document.getElementById("intermediate").style.top = "2em"; + } + ]]></script> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="parent"> + <div id="intermediate"> + <div id="red" class="testDiv"></div> + </div> + </div> + <div id="green" class="testDiv"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-003.xht b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-003.xht new file mode 100644 index 0000000000..1359a047fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-003.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Inheriting 'top' changes from parent table through anonymous table boxes</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" 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" href="http://www.w3.org/TR/CSS21/visuren.html#position-props"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position"/> + <link rel="match" href="dynamic-top-change-002-ref.xht" /> + + <meta name="flags" content="dom" /> + <meta name="assert" content="The position of a positioned element which inherits its 'top' value from its parent changes when the parent's 'top' value is changed even if the parent is display:table."/> + <style type="text/css"><![CDATA[ + p + { + line-height: 1.25; + margin: 1em 0; + } + + strong {line-height: 1;} + + .testDiv { width: 100px; height: 100px; } + #green { top: 4em; background: green; position: absolute; } + #red { top: inherit; background: red; position: relative; } + #parent { position: absolute; top: 2em; } + #intermediate { display: table; } + ]]></style> + <script type="text/javascript"><![CDATA[ + window.onload = function() { + document.body.offsetWidth; + document.getElementById("intermediate").style.top = "2em"; + } + ]]></script> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="parent"> + <div id="intermediate"> + <div id="red" class="testDiv"></div> + </div> + </div> + <div id="green" class="testDiv"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-004.xht b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-004.xht new file mode 100644 index 0000000000..0f557bd437 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-004.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: Inheriting 'top' changes from abspos parent</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" 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" href="http://www.w3.org/TR/CSS21/visuren.html#position-props"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position"/> + <link rel="match" href="dynamic-top-change-002-ref.xht" /> + + <meta name="flags" content="dom" /> + <meta name="assert" content="The position of a positioned element which inherits its 'top' value from its parent changes when the parent's 'top' value is changed."/> + <style type="text/css"><![CDATA[ + p + { + line-height: 1.25; + margin: 1em 0; + } + + strong {line-height: 1;} + + .testDiv { width: 100px; height: 100px; } + #green { top: 4em; background: green; position: absolute; } + #red { top: inherit; background: red; position: relative; } + #parent { position: absolute; } + ]]></style> + <script type="text/javascript"><![CDATA[ + window.onload = function() { + document.body.offsetWidth; + document.getElementById("parent").style.top = "2em"; + } + ]]></script> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="parent"> + <div id="red" class="testDiv"></div> + </div> + <div id="green" class="testDiv"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-005.xht b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-005.xht new file mode 100644 index 0000000000..7c015d32c7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-005.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Inheriting 'top' changes from abspos grandparent</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" 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" href="http://www.w3.org/TR/CSS21/visuren.html#position-props"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position"/> + <meta name="flags" content="combo dom" /> + <meta name="assert" content="The position of a positioned element which inherits its 'top' value from its relatively positioned parent changes when the parent's 'top' value is changed."/> + <style type="text/css"><![CDATA[ + .testDiv { position: relative; width: 100px; height: 100px; } + #green { top: 100px; background: green; } + #red { top: inherit; background: red; display: block; } + #parent { position: relative; } + body > p { position: absolute; font-size: medium; } + #grandparent { position: absolute; top: 0; } + body { font-size: 0; line-height: 0; position: relative; } + ]]></style> + <script type="text/javascript"><![CDATA[ + window.onload = function() { + document.body.offsetWidth; + document.getElementById("parent").style.top = "50px"; + } + ]]></script> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="grandparent"> + <span id="parent"> + <span id="red" class="testDiv"></span> + </span> + </div> + <div id="green" class="testDiv"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-005a.xht b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-005a.xht new file mode 100644 index 0000000000..c84ac49054 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-005a.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 Test: Inheriting 'top' changes from abspos grandparent (variant: block parent)</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" 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" href="http://www.w3.org/TR/CSS21/visuren.html#position-props"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position"/> + <meta name="flags" content="dom" /> + <meta name="assert" content="The position of a positioned element which inherits its 'top' value from its relatively positioned parent changes when the parent's 'top' value is changed."/> + <style type="text/css"><![CDATA[ + .testDiv { position: relative; width: 100px; height: 100px; } + #green { top: 100px; background: green; } + #red { top: inherit; background: red; display: block; } + #parent { position: relative; } + body > p { position: absolute; font-size: medium; } + #grandparent { position: absolute; top: 0; } + body { font-size: 0; line-height: 0; position: relative; } + ]]></style> + <script type="text/javascript"><![CDATA[ + window.onload = function() { + document.body.offsetWidth; + document.getElementById("parent").style.top = "50px"; + } + ]]></script> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="grandparent"> + <div id="parent"> + <span id="red" class="testDiv"></span> + </div> + </div> + <div id="green" class="testDiv"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-005b.xht b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-005b.xht new file mode 100644 index 0000000000..c74a27be78 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/dynamic-top-change-005b.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Inheriting 'top' changes from abspos grandparent (non-dynamic variant)</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" 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" href="http://www.w3.org/TR/CSS21/visuren.html#position-props"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position"/> + <meta name="flags" content="dom" /> + <meta name="assert" content="The position of a positioned element which inherits its 'top' value from its relatively positioned parent changes when the parent's 'top' value is changed."/> + <style type="text/css"><![CDATA[ + .testDiv { position: relative; width: 100px; height: 100px; } + #green { top: 100px; background: green; } + #red { top: inherit; background: red; display: block; } + #parent { position: relative; top: 50px; } + body > p { position: absolute; font-size: medium; } + #grandparent { position: absolute; top: 0; } + body { font-size: 0; line-height: 0; position: relative; } + ]]></style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="grandparent"> + <span id="parent"> + <span id="red" class="testDiv"></span> + </span> + </div> + <div id="green" class="testDiv"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/inline-static-position-001.html b/testing/web-platform/tests/css/CSS2/positioning/inline-static-position-001.html new file mode 100644 index 0000000000..b627fbcab5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/inline-static-position-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>CSS Test: Static positions and line wrapping</title> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#static-position"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.tests, .no-tests { + margin-bottom: 1em; + font-family: Ahem; + font-size: 10px; + line-height: 1; +} +.tests > div, .no-tests > div { + position: relative; + width: 10ch; + border: 1px solid blue; +} +.abs { + position: absolute; + color: orange; +} +</style> +<body> + <section class="tests"> + <div>12345<span class="abs" data-offset-x="50" data-offset-y="0">span</span>54321</div> + <div>123456<span class="abs" data-offset-x="60" data-offset-y="0">span</span>654321</div> + <div>12345<span class="abs" data-offset-x="50" data-offset-y="0">span</span> 54321</div> + <div>12345 <span class="abs" data-offset-x="60" data-offset-y="0">span</span> 54321</div> + <div>12345 <span class="abs" data-offset-x="60" data-offset-y="0">span</span> 54321</div> + </section> + <section class="tests"> + <!-- offsetTop is interoperable but offsetLeft is not due to white space collapsing. --> + <div>12345 <span class="abs" data-offset-y="0">span</span> 54321</div> + </section> + <section class="no-tests"> + <!-- These tests are not interoperable. --> + <div>12345 <span class="abs">span</span>54321</div> + <div>12345 <span class="abs">span</span> 54321</div> + <div>123456789012 <span class="abs">span</span> 54321</div> + <div>123456789012 <span class="abs">span</span> 543210987654321</div> + </section> +<script> +document.fonts.ready.then(()=> { + checkLayout('.tests .abs'); +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-004-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-004-ref.xht new file mode 100644 index 0000000000..2371860907 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-004-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + + <div><img src="support/swatch-orange.png" width="5" height="96" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="5" height="96" 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/positioning/left-004.xht b/testing/web-platform/tests/css/CSS2/positioning/left-004.xht new file mode 100644 index 0000000000..0e6d795bd7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-004.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using pixels with a value of negative zero, -0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a negative zero length value in pixels." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: -0px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-005.xht b/testing/web-platform/tests/css/CSS2/positioning/left-005.xht new file mode 100644 index 0000000000..d24ab9e921 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-005.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using pixels with a value of zero, 0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a zero length value in pixels." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: 0px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-006.xht b/testing/web-platform/tests/css/CSS2/positioning/left-006.xht new file mode 100644 index 0000000000..1059837d86 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-006.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using pixels with a value of positive zero, +0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive zero length value in pixels." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: +0px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-007-ref.xht new file mode 100644 index 0000000000..bb896a1086 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-007-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 96px; + width: 3px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-007.xht b/testing/web-platform/tests/css/CSS2/positioning/left-007.xht new file mode 100644 index 0000000000..1cd12f4e87 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-007.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using pixels with a nominal value, 96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-007-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a nominal length value in pixels." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 3px solid red; + width: 3in; + } + div div + { + border-left: 3px solid black; + margin-left: -99px; + left: 96px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-008.xht b/testing/web-platform/tests/css/CSS2/positioning/left-008.xht new file mode 100644 index 0000000000..75f3f43f33 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-008.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using pixels with a positive nominal value, +96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-007-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive nominal length value in pixels." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 3px solid red; + width: 3in; + } + div div + { + border-left: 3px solid black; + margin-left: -99px; + left: +96px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-016.xht b/testing/web-platform/tests/css/CSS2/positioning/left-016.xht new file mode 100644 index 0000000000..b3f2590d88 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-016.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using points with a value of negative zero, -0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a negative zero length value in points." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: -0pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-017.xht b/testing/web-platform/tests/css/CSS2/positioning/left-017.xht new file mode 100644 index 0000000000..3d98c0bde6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-017.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using points with a value of zero, 0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a zero length value in points." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: 0pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-018.xht b/testing/web-platform/tests/css/CSS2/positioning/left-018.xht new file mode 100644 index 0000000000..4e629237db --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-018.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using points with a value of positive zero, +0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive zero length value in points." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: +0pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-019.xht b/testing/web-platform/tests/css/CSS2/positioning/left-019.xht new file mode 100644 index 0000000000..a384baf935 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-019.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using points with a nominal value, 72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a nominal length value in points." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 72pt solid red; + } + div div + { + border-left: 72pt solid black; + margin-left: -144pt; + left: 72pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-020.xht b/testing/web-platform/tests/css/CSS2/positioning/left-020.xht new file mode 100644 index 0000000000..9a904fa1fb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-020.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using points with a positive nominal value, +72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a positive nominal length value in points." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 72pt solid red; + } + div div + { + border-left: 72pt solid black; + margin-left: -144pt; + left: +72pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-028.xht b/testing/web-platform/tests/css/CSS2/positioning/left-028.xht new file mode 100644 index 0000000000..4542340da8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-028.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using picas with a value of negative zero, -0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a negative zero length value in picas." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: -0pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-029.xht b/testing/web-platform/tests/css/CSS2/positioning/left-029.xht new file mode 100644 index 0000000000..cd51d37300 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-029.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using picas with a value of zero, 0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a zero length value in picas." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: 0pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-030.xht b/testing/web-platform/tests/css/CSS2/positioning/left-030.xht new file mode 100644 index 0000000000..9881130195 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-030.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using picas with a value of positive zero, +0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive zero length value in picas." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: +0pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-031-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-031-ref.xht new file mode 100644 index 0000000000..1bd9a0482d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-031-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 96px; + width: 16px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-031.xht b/testing/web-platform/tests/css/CSS2/positioning/left-031.xht new file mode 100644 index 0000000000..0184a9cce0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-031.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using picas with a nominal value, 6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-031-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a nominal length value in picas." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 1pc solid red; + } + div div + { + border-left: 1pc solid black; + margin-left: -7pc; + left: 6pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-032.xht b/testing/web-platform/tests/css/CSS2/positioning/left-032.xht new file mode 100644 index 0000000000..05c9cc8818 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-032.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using picas with a positive nominal value, +6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-031-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive nominal length value in picas." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 1pc solid red; + } + div div + { + border-left: 1pc solid black; + margin-left: -7pc; + left: +6pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-040.xht b/testing/web-platform/tests/css/CSS2/positioning/left-040.xht new file mode 100644 index 0000000000..41807d7865 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-040.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using centimeters with a value of negative zero, -0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a negative zero length value in centimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: -0cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-041.xht b/testing/web-platform/tests/css/CSS2/positioning/left-041.xht new file mode 100644 index 0000000000..7bab240424 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-041.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using centimeters with a value of zero, 0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a zero length value in centimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: 0cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-042.xht b/testing/web-platform/tests/css/CSS2/positioning/left-042.xht new file mode 100644 index 0000000000..3d473f85ed --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-042.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using centimeters with a value of positive zero, +0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive zero length value in centimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: +0cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-043.xht b/testing/web-platform/tests/css/CSS2/positioning/left-043.xht new file mode 100644 index 0000000000..2e2f669a2f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-043.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using centimeters with a nominal value, 2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a nominal length value in centimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 2.54cm solid red; + } + div div + { + border-left: 2.54cm solid black; + margin-left: -5.08cm; + left: 2.54cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-044.xht b/testing/web-platform/tests/css/CSS2/positioning/left-044.xht new file mode 100644 index 0000000000..be9b986a3f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-044.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using centimeters with a positive nominal value, +2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a positive nominal length value in centimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 2.54cm solid red; + } + div div + { + border-left: 2.54cm solid black; + margin-left: -5.08cm; + left: +2.54cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-052.xht b/testing/web-platform/tests/css/CSS2/positioning/left-052.xht new file mode 100644 index 0000000000..d883664dca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-052.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using millimeters with a value of negative zero, -0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a negative zero length value in millimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: -0mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-053.xht b/testing/web-platform/tests/css/CSS2/positioning/left-053.xht new file mode 100644 index 0000000000..459d859da0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-053.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using millimeters with a value of zero, 0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a zero length value in millimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: 0mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-054.xht b/testing/web-platform/tests/css/CSS2/positioning/left-054.xht new file mode 100644 index 0000000000..de6209cccf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-054.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using millimeters with a value of positive zero, +0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive zero length value in millimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: +0mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-055.xht b/testing/web-platform/tests/css/CSS2/positioning/left-055.xht new file mode 100644 index 0000000000..ba18af79a9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-055.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using millimeters with a nominal value, 25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a nominal length value in millimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 25.4mm solid red; + } + div div + { + border-left: 25.4mm solid black; + margin-left: -50.8mm; + left: 25.4mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-056.xht b/testing/web-platform/tests/css/CSS2/positioning/left-056.xht new file mode 100644 index 0000000000..fffb510b04 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-056.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using millimeters with a positive nominal value, +25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a positive nominal length value in millimeters." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 25.4mm solid red; + } + div div + { + border-left: 25.4mm solid black; + margin-left: -50.8mm; + left: +25.4mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-064.xht b/testing/web-platform/tests/css/CSS2/positioning/left-064.xht new file mode 100644 index 0000000000..dc4f6e623d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-064.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using inches with a value of negative zero, -0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a negative zero length value in inches." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: -0in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-065.xht b/testing/web-platform/tests/css/CSS2/positioning/left-065.xht new file mode 100644 index 0000000000..5c9fd644c2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-065.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using inches with a value of zero, 0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a zero length value in inches." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: 0in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-066.xht b/testing/web-platform/tests/css/CSS2/positioning/left-066.xht new file mode 100644 index 0000000000..f87772fb95 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-066.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using inches with a value of positive zero, +0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive zero length value in inches." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: +0in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-067.xht b/testing/web-platform/tests/css/CSS2/positioning/left-067.xht new file mode 100644 index 0000000000..e73763eb52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-067.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using inches with a nominal value, 1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a nominal length value in inches." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 1in solid red; + } + div div + { + border-left: 1in solid black; + margin-left: -2in; + left: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-068.xht b/testing/web-platform/tests/css/CSS2/positioning/left-068.xht new file mode 100644 index 0000000000..977f800352 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-068.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using inches with a positive nominal value, +1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a positive nominal length value in inches." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 1in solid red; + } + div div + { + border-left: 1in solid black; + margin-left: -2in; + left: +1in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-076.xht b/testing/web-platform/tests/css/CSS2/positioning/left-076.xht new file mode 100644 index 0000000000..4608fd06bc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-076.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using 'em' units with a value of negative zero, -0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a negative zero length value in 'em' units." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: -0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-077.xht b/testing/web-platform/tests/css/CSS2/positioning/left-077.xht new file mode 100644 index 0000000000..0874c82b13 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-077.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using 'em' units with a value of zero, 0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a zero length value in 'em' units." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: 0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-078.xht b/testing/web-platform/tests/css/CSS2/positioning/left-078.xht new file mode 100644 index 0000000000..cf325459fd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-078.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using 'em' units with a value of positive zero, +0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a positive zero length value in 'em' units." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: +0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-079-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-079-ref.xht new file mode 100644 index 0000000000..6063e398d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-079-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 96px; + width: 20px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-079.xht b/testing/web-platform/tests/css/CSS2/positioning/left-079.xht new file mode 100644 index 0000000000..f37cc32290 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-079.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 Test: Left using 'em' units with a nominal value, 6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a nominal length value in 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 1em solid red; + } + div div + { + border-left: 1em solid black; + margin-left: -7em; + left: 6em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-080.xht b/testing/web-platform/tests/css/CSS2/positioning/left-080.xht new file mode 100644 index 0000000000..b88389e7ff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-080.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 Test: Left using 'em' units with a positive nominal value, +6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a positive nominal length value in 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 1em solid red; + } + div div + { + border-left: 1em solid black; + margin-left: -7em; + left: +6em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-088.xht b/testing/web-platform/tests/css/CSS2/positioning/left-088.xht new file mode 100644 index 0000000000..7364c57fdf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-088.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 Test: Left using 'ex' units with a value of negative zero, -0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a negative zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: -0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-089.xht b/testing/web-platform/tests/css/CSS2/positioning/left-089.xht new file mode 100644 index 0000000000..30d440ea6e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-089.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 Test: Left using 'ex' units with a value of zero, 0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: 0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-090.xht b/testing/web-platform/tests/css/CSS2/positioning/left-090.xht new file mode 100644 index 0000000000..a0377e6930 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-090.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 Test: Left using 'ex' units with a value of positive zero, +0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a positive zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: +0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-091.xht b/testing/web-platform/tests/css/CSS2/positioning/left-091.xht new file mode 100644 index 0000000000..076cfb2544 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-091.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 Test: Left using 'ex' units with a nominal value, 6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a nominal length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 1in solid red; + } + div div + { + border-left: 6ex solid black; + margin-left: -12ex; + left: 6ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-092.xht b/testing/web-platform/tests/css/CSS2/positioning/left-092.xht new file mode 100644 index 0000000000..012ef26eb0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-092.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 Test: Left using 'ex' units with a positive nominal value, +6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property sets a positive nominal length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + border-left: 1in solid red; + } + div div + { + border-left: 6ex solid black; + margin-left: -12ex; + left: +6ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-100.xht b/testing/web-platform/tests/css/CSS2/positioning/left-100.xht new file mode 100644 index 0000000000..be48597d24 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-100.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using percentages with a value of negative zero, -0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a negative zero length value in percentages." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + width: 1in; + } + div div + { + border-left: 5px solid blue; + left: -0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-101.xht b/testing/web-platform/tests/css/CSS2/positioning/left-101.xht new file mode 100644 index 0000000000..2e1734dc2f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-101.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using percentages with a value of zero, 0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a zero length value in percentages." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + width: 1in; + } + div div + { + border-left: 5px solid blue; + left: 0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-102.xht b/testing/web-platform/tests/css/CSS2/positioning/left-102.xht new file mode 100644 index 0000000000..c3d71d622b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-102.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using percentages with a value of positive zero, +0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive zero length value in percentages." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + width: 1in; + } + div div + { + border-left: 5px solid blue; + left: +0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-103.xht b/testing/web-platform/tests/css/CSS2/positioning/left-103.xht new file mode 100644 index 0000000000..0cfe26108b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-103.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using percentages with a nominal value, 100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a nominal length value in percentages." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 1in solid red; + width: 1in; + } + div div + { + border-left: 1in solid black; + margin-left: -2in; + left: 100%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-104.xht b/testing/web-platform/tests/css/CSS2/positioning/left-104.xht new file mode 100644 index 0000000000..ece18045af --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-104.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left using percentages with a positive nominal value, +100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-black-96px-square-no-red.xht" /> + + <meta name="assert" content="The 'left' property sets a positive nominal length value in percentages." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 1in solid red; + width: 1in; + } + div div + { + border-left: 1in solid black; + margin-left: -2in; + left: +100%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-109.xht b/testing/web-platform/tests/css/CSS2/positioning/left-109.xht new file mode 100644 index 0000000000..a2b3738614 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-109.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left with a value of negative zero and no units, -0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a negative zero length value with no units." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: -0; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-110.xht b/testing/web-platform/tests/css/CSS2/positioning/left-110.xht new file mode 100644 index 0000000000..60cfd186e6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-110.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left with a value of zero and no units, 0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a zero length value with no units." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: 0; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-111.xht b/testing/web-platform/tests/css/CSS2/positioning/left-111.xht new file mode 100644 index 0000000000..7bfffa2ac1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-111.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left with a value of positive zero and no units, +0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a positive zero length value with no units." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: +0; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-112.xht b/testing/web-platform/tests/css/CSS2/positioning/left-112.xht new file mode 100644 index 0000000000..758738c6dc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-112.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left with a value of 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-004-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a value of 'auto'." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #div1 + { + border-left: 5px solid orange; + } + div div + { + border-left: 5px solid blue; + left: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the orange and blue lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-113-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-113-ref.xht new file mode 100644 index 0000000000..279160a080 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-113-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: black; + height: 96px; + margin-left: 288px; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-113.xht b/testing/web-platform/tests/css/CSS2/positioning/left-113.xht new file mode 100644 index 0000000000..a27eee6f8d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-113.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: Left with a value of 'inherit'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-18 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-113-ref.xht" /> + + <meta name="assert" content="The 'left' property sets a value of 'inherit'." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + } + #wrapper + { + width: 5in; + } + #div1 + { + border-left: 1in solid red; + left: 100%; + width: 1in; + } + div div + { + border-left: 1in solid black; + margin-left: -2in; + left: inherit; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="wrapper"> + <div id="div1"> + <div></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-001-ref.xht new file mode 100644 index 0000000000..b8b923c6bf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-001-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 0px;} + + p {margin: 1em 8px;} + + div + { + background-color: green; + height: 96px; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square on the left side of the page.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-001.xht new file mode 100644 index 0000000000..160cebc5d3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-001.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to 'table-row-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'table-row-group'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + left: 0; + display: table-row-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-002.xht new file mode 100644 index 0000000000..a04d37a206 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-002.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to 'table-header-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'table-header-group'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + left: 0; + display: table-header-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-003.xht new file mode 100644 index 0000000000..63c9b19b99 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-003.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to 'table-footer-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'table-footer-group'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + left: 0; + display: table-footer-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-004.xht new file mode 100644 index 0000000000..ca9733a292 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-004.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: Left applied to element with 'display' set to 'table-row'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'table-row'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + left: 0; + display: table-row; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="test"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-005.xht new file mode 100644 index 0000000000..7f987dbe4c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-005.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to 'table-column-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'table-column-group'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + left: 0; + display: table-column-group; + height: 1in; + position: absolute; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-006.xht new file mode 100644 index 0000000000..5d36bcd8a5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-006.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to 'table-column'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'table-column'." /> + <style type="text/css"> + body {margin: 8px;} + + #test + { + background: green; + left: 0; + display: table-column; + height: 1in; + position: absolute; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-007.xht new file mode 100644 index 0000000000..56bec1ffec --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-007.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: Left applied to element with 'display' set to 'table-cell'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'table-cell'." /> + <style type="text/css"> + body {margin: 8px;} + + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + left: 0; + display: table-cell; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-008.xht new file mode 100644 index 0000000000..c6721520e1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-008.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to inline</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'left' property applies to elements with a display of inline." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: green; + font: 1in/1 Ahem; + left: 0; + display: inline; + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the left side of the page.</p> + <div>X</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-009.xht new file mode 100644 index 0000000000..ba403211ac --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-009.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: Left applied to element with 'display' set to block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of block." /> + <style type="text/css"> + body {margin: 8px;} + + span + { + background: green; + left: 0; + display: block; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div> + <span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-010.xht new file mode 100644 index 0000000000..960c2b01f2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-010.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to list-item</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'left' property applies to elements with a display of list-item." /> + <style type="text/css"> + div + { + background: green; + left: 0; + display: list-item; + height: 1in; + list-style-position: inside; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the left side of the page and a marker bullet inside it.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-012.xht new file mode 100644 index 0000000000..1ee98e090c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-012.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to inline-block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of inline-block." /> + <style type="text/css"> + body {margin: 8px;} + + span#inline-block + { + left: 0; + display: inline-block; + position: absolute; + } + + span.block-descendant + { + background: green; + display: block; + height: 0.5in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + + <div> + <span id="inline-block"> + <span class="block-descendant"></span> + <span class="block-descendant"></span> + </span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-013.xht new file mode 100644 index 0000000000..bfc4c383bb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-013.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: Left applied to element with 'display' set to 'table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'table'." /> + <style type="text/css"> + body {margin: 8px;} + + #table + { + background: green; + left: 0; + display: table; + table-layout: fixed; + height: 1in; + position: absolute; + width: 1in; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-014.xht new file mode 100644 index 0000000000..8eba0cdd1c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-014.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to 'inline-table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'inline-table'." /> + <style type="text/css"> + body {margin: 8px;} + + #table + { + background: green; + left: 0; + display: inline-table; + table-layout: fixed; + height: 1in; + position: absolute; + width: 1in; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-015.xht new file mode 100644 index 0000000000..ac799f6b97 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-applies-to-015.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left applied to element with 'display' set to 'table-caption'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'left' property applies to elements with a display of 'table-caption'." /> + <style type="text/css"> + body {margin: 8px;} + + #caption + { + background: green; + left: 0; + display: table-caption; + height: 1in; + position: absolute; + width: 1in; + } + #table + { + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square on the left side of the page.</p> + <div id="table"> + <div id="caption"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-offset-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-offset-001-ref.xht new file mode 100644 index 0000000000..47a60127eb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-offset-001-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div#inline-block {display: inline-block;} + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a blue square with its top-right corner missing.</p> + + <div id="inline-block"> + <div><img src="support/blue15x15.png" width="50" height="50" alt="Image download support must be enabled" /><img src="support/1x1-white.png" width="50" height="50" alt="Image download support must be enabled" /></div> + <div><img src="support/blue15x15.png" width="50" height="50" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="50" height="50" alt="Image download support must be enabled" /></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-offset-001.xht b/testing/web-platform/tests/css/CSS2/positioning/left-offset-001.xht new file mode 100644 index 0000000000..add464c90e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-offset-001.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute positioned elements with a left offset</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-offset-001-ref.xht" /> + + <meta name="assert" content="Absolute positioned elements with a left offset, offsets the elements left margin edge from the left edge of the elements containing block." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 100px; + position: relative; + width: 100px; + } + div div + { + background: white; + height: 50px; + position: absolute; + left: 50px; + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its top-right corner missing.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-offset-002.xht b/testing/web-platform/tests/css/CSS2/positioning/left-offset-002.xht new file mode 100644 index 0000000000..afa4d7951b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-offset-002.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position 'left' offset property - absolute length value and relative positioning</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-offset-001-ref.xht" /> + + <meta name="assert" content="Relative positioned elements with a left offset, offsets with respect to the left edge of the box itself." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 100px; + position: relative; + width: 100px; + } + div div + { + background: white; + height: 50px; + position: relative; + left: 50px; + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its top-right corner missing.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-offset-003-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-offset-003-ref.xht new file mode 100644 index 0000000000..d8775877d6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-offset-003-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 + { + border: blue solid medium; + direction: rtl; + height: 1in; + width: 1.25in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a filled black square is in the upper-right corner of an hollow blue rectangle.</p> + + <div><img src="support/black15x15.png" width="48" height="48" 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/positioning/left-offset-003.xht b/testing/web-platform/tests/css/CSS2/positioning/left-offset-003.xht new file mode 100644 index 0000000000..8b7f36b75d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-offset-003.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: 'left' property defines the offset from the left edge of the containing block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-offset-003-ref.xht" /> + + <meta name="assert" content="The 'left' property, for absolute positioning, specifies the offset of the element in relation to the containing block's left edge. In this test, the containing block of the absolutely positioned element is formed by the padding box of its nearest (closest) non-inline positioned ancestor element." /> + <style type="text/css"> + #container + { + border: solid blue; + height: 1in; + padding-left: 0.25in; + position: relative; + width: 1in; + } + #div1 + { + background: black; + height: 0.5in; + position: absolute; + left: 0.75in; + width: 0.5in; + } + #div2 + { + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if a filled black square is in the upper-right corner of an hollow blue rectangle.</p> + <div id="container"> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-001-ref.xht new file mode 100644 index 0000000000..b0a963e1bf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-001-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 + { + border: black solid medium; + direction: rtl; + height: 200px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a blue square is in the top-right corner of an hollow black rectangle.</p> + + <div><img src="support/blue15x15.png" width="50" height="50" 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/positioning/left-offset-percentage-001.xht b/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-001.xht new file mode 100644 index 0000000000..9d3087b695 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-001.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Left offset using percentage</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-offset-percentage-001-ref.xht" /> + + <meta name="assert" content="Percentage offset values for the 'left' property are based off the width of the containing block." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 150px; + padding: 25px; + position: relative; + width: 50px; + } + div div + { + background: blue; + height: 50px; + left: 50%; + position: absolute; + top: 0; + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if a blue square is in the top-right corner of an hollow black rectangle.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-002-ref.xht new file mode 100644 index 0000000000..c48b87b853 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-002-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[ + div + { + background-color: green; + left: 300px; + height: 100px; + position: relative; + top: 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/positioning/left-offset-percentage-002.xht b/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-002.xht new file mode 100644 index 0000000000..425d31c30f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/left-offset-percentage-002.xht @@ -0,0 +1,87 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: position absolute - left offset percentage and inherit</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <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="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-offset-percentage-002-ref.xht" /> + <meta content="'left: inherit' makes the left property take the same computed value as the left property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'left: [percentage]' refers to width of containing block." name="assert" /> + + <style type="text/css"><![CDATA[ + div {position: absolute;} + + #grand-parent-abs-pos + { + height: 400px; + width: 600px; + } + + #red-abs-pos-overlapped + { + background-color: red; + color: white; + height: 100px; + left: 300px; + top: 100px; + width: 100px; + } + + #parent-abs-pos + { + height: 0px; + left: 50%; /* 50% x 600px == 300px */ + /* 'left: [percentage]' refers to width of containing block. */ + top: 25%; /* 25% x 400px == 100px */ + /* 'top: [percentage]' refers to height of containing block. */ + width: 0px; + } + + #green-child-abs-pos-inherit-overlapping + { + background-color: green; + left: inherit; + /* + ===================================== + left: inherit should resolve as left: 50% 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 left offset of #green-child-abs-pos-inherit-overlapping + should be 50%, which is 50% of the width of its containing + block (#parent-abs-pos) which is 0px. + ===================================== + */ + top: 0px; + height: 100px; + 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-abs-pos"> + <div id="red-abs-pos-overlapped">test FAILED</div> + <div id="parent-abs-pos"> + <div id="green-child-abs-pos-inherit-overlapping"></div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/line-break-after-leading-float.html b/testing/web-platform/tests/css/CSS2/positioning/line-break-after-leading-float.html new file mode 100644 index 0000000000..a452dbd663 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/line-break-after-leading-float.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Test: Line wrapping after leading floating objects</title> +<link rel="help" href="https://crbug.com/1014247"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<div id="parent" style="width: 100px; text-indent: 40px;"> + <div style="float: left; width: 60px; height: 10px; background: hotpink;"></div> + <div id="lime" style="display: inline-block; width: 60px; height: 20px; background: lime;"></div> +</div> +</body> +<script> + test(function(){ + parent_rect = document.getElementById("parent").getBoundingClientRect(); + rect = document.getElementById("lime").getBoundingClientRect(); + assert_equals(rect.left - parent_rect.left, 40); + }, "Checks line wrapping after leading floating objects."); +</script> diff --git a/testing/web-platform/tests/css/CSS2/positioning/line-break-after-leading-oof-001-ref.html b/testing/web-platform/tests/css/CSS2/positioning/line-break-after-leading-oof-001-ref.html new file mode 100644 index 0000000000..50c682eddc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/line-break-after-leading-oof-001-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<style> +div { + text-indent: 3ch; +} +</style> +<body> + <div>123456</div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/line-break-after-leading-oof-001.html b/testing/web-platform/tests/css/CSS2/positioning/line-break-after-leading-oof-001.html new file mode 100644 index 0000000000..b00c48156e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/line-break-after-leading-oof-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Test: Line wrapping after leading out-of-flow objects</title> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#propdef-position"> +<style> +div { + width: 5ch; + /* When the line was broken after the leading OOF, it is hardly visible + because it is an empty line box. + Applying `text-indent` can make it visible; if the line is indented, + it is the first line, proving the line did not wrap. */ + text-indent: 3ch; +} +</style> +<body> + <div><span style="position: absolute"></span>123456</div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-001.xht b/testing/web-platform/tests/css/CSS2/positioning/position-001.xht new file mode 100644 index 0000000000..11611a3515 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-001.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position set to 'static'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="assert" content="The 'position' property applies the value 'static' and places the element in normal document flow." /> + <style type="text/css"> + #wrapper + { + border: 3px solid orange; + } + #div1 + { + background: blue; + color: white; + left: 1in; + position: static; + top: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue bar fills the entire area of the wide hollow orange rectangle.</p> + <div id="wrapper"> + <div id="div1">Text sample</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-002.xht b/testing/web-platform/tests/css/CSS2/positioning/position-002.xht new file mode 100644 index 0000000000..f039cfcbb5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-002.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position set to 'relative'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="assert" content="The 'position' property applies the value 'relative' and places the element in normal document flow." /> + <style type="text/css"> + #wrapper + { + border: 3px solid orange; + } + #div1 + { + background: blue; + color: white; + left: 1in; + position: relative; + top: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue bar is completely shifted below the wide hollow orange rectangle.</p> + <div id="wrapper"> + <div id="div1">Text sample</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-003.xht b/testing/web-platform/tests/css/CSS2/positioning/position-003.xht new file mode 100644 index 0000000000..cae69ec823 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-003.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position set to 'absolute'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="assert" content="The 'position' property applies the value 'absolute' and places the element out of flow of the document." /> + <style type="text/css"> + #wrapper + { + background: red; + border: 3px solid orange; + } + #div1 + { + background: blue; + color: white; + left: 1in; + position: absolute; + top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is no red, if the blue stripe is just as wide and just as tall as its text and if the blue stripe is completely shifted below the orange line.</p> + <div id="wrapper"> + <div id="div1">Text sample</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-004.xht b/testing/web-platform/tests/css/CSS2/positioning/position-004.xht new file mode 100644 index 0000000000..eb231ddfb0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-004.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position set to 'fixed'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="flags" content="interact" /> + <meta name="assert" content="The 'position' property applies the value 'fixed' and places the element out of flow of the document and locks it to a specific point on the viewport." /> + <style type="text/css"> + #wrapper + { + height: 3000px; + } + #div1 + { + background: red; + border: 3px solid orange; + } + #div2 + { + background: blue; + color: white; + left: 1in; + position: fixed; + top: 1.75in; + } + </style> + </head> + <body> + <p>Test passes if there is no red, if the blue stripe is just as wide and just as tall as its text and if the blue stripe is completely shifted below the orange line. Also when scrolling, the blue stripe must stay at its same position on the screen, all other content can scroll.</p> + <div id="wrapper"> + <div id="div1"> + <div id="div2">Text sample</div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-005.xht b/testing/web-platform/tests/css/CSS2/positioning/position-005.xht new file mode 100644 index 0000000000..f0f64c69f2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-005.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: Position set to 'inherit'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="assert" content="The 'position' property applies the value 'inherit' and inherits the 'position' value from its parent element." /> + <style type="text/css"> + #wrapper + { + background: red; + border: 3px solid orange; + position: absolute; + } + #div1 + { + background: blue; + color: white; + left: 1in; + position: inherit; + top: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is no red, if the blue rectangle is just as wide as its longest word and just as tall as its text and if the blue rectangle is completely shifted below the tiny orange square.</p> + <div id="wrapper"> + <div id="div1">Text sample</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-006-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-006-ref.xht new file mode 100644 index 0000000000..c32c2aa74d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-006-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>There should be 2 sentences on this page.</p> + + <p>The test has passed if you see this as the 2nd sentence.</p> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-006.xht b/testing/web-platform/tests/css/CSS2/positioning/position-006.xht new file mode 100644 index 0000000000..05b2c98cff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-006.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> + <head> + <title>CSS Test: Parsing 'position'</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/parsing/core-syntax/004.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors" /> + <link rel="match" href="position-006-ref.xht" /> + + + <meta name="flags" content="invalid" /> + + <style type="text/css"> + p { position: fixed, top; } + </style> + </head> + <body> + <p>There should be 2 sentences on this page.</p> + <p>The test has passed if you see this as the 2nd sentence.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-001.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-001.xht new file mode 100644 index 0000000000..f9e4b67371 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-001.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute positions impact on later siblings</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="assert" content="Absolute positioned elements do not impact later siblings." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2, #div3 + { + height: 100px; + width: 100px; + } + #div2 + { + background: green; + position: absolute; + } + #div3 + { + background: red; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-002-ref.xht new file mode 100644 index 0000000000..58b67c9c77 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-002-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[ + div + { + background-color: blue; + height: 2in; + width: 2in; + } + + img {padding: 1in 0 0 1in;} + ]]></style> + + </head> + + <body> + + <p>Test passes if an orange square fills the <strong>bottom-right corner</strong> of a bigger blue square.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-002.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-002.xht new file mode 100644 index 0000000000..74e78888e1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-002.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position absolute size and positioning</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="position-absolute-002-ref.xht" /> + + <meta name="assert" content="Absolutely positioned elements can be sized and positioned using 'top', 'right', 'bottom' and 'left' properties." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 2in; + position: relative; + width: 2in; + } + div div + { + background: orange; + bottom: 0; + left: 1in; + position: absolute; + right: 0; + top: 1in; + } + </style> + </head> + <body> + <p>Test passes if an orange square fills the <strong>bottom-right corner</strong> of a bigger blue square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-003.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-003.xht new file mode 100644 index 0000000000..26404d3e79 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-003.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolute position element taken out of flow</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="assert" content="Absolute positioned elements are taken out of the normal flow when they have explicit offsets." /> + <style type="text/css"> + #div1 + { + height: 100px; + position: relative; + width: 200px; + } + #div2, #div3 + { + height: 100px; + width: 100px; + } + #div2 + { + background: red; + } + #div3 + { + background: green; + position: absolute; + left: 0; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-004-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-004-ref.xht new file mode 100644 index 0000000000..6e27394921 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-004-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: blue; + height: 2in; + margin-left: 1in; + width: 1in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is directly below the orange square.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" 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/positioning/position-absolute-004.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-004.xht new file mode 100644 index 0000000000..a8c73904c0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-004.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned elements establishes a new containing block for normal flow children</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning" /> + <link rel="match" href="position-absolute-004-ref.xht" /> + + <meta name="assert" content="An absolutely positioned box establishes a new containing block for normal flow children." /> + <style type="text/css"> + #div1 + { + position: relative; + } + div div + { + height: 1in; + width: 1in; + } + #div2 + { + background: blue; + left: 1in; + height: 2in; + position: absolute; + } + #div3 + { + background: orange; + } + </style> + </head> + <body> + <p>Test passes if the blue square is directly below the orange square.</p> + <div id="div1"> + <div id="div2"> + <div id="div3"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-005.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-005.xht new file mode 100644 index 0000000000..6b16d3da46 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-005.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned elements do not establish a new containing block for fixed position descendants</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning" /> + <meta name="assert" content="An absolutely positioned box does not establish a new containing block for fixed positioned descendants." /> + <style type="text/css"> + p + { + margin-top: 1in; + } + #div1 + { + position: relative; + } + #div2 + { + position: absolute; + height: 1in; + left: 3in; + top: 3in; + width: 1in; + } + #div3 + { + background: black; + height: 1in; + left: 0; + position: fixed; + top: 0; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a box in the upper-left corner of the page.</p> + <div id="div1"> + <div id="div2"> + <div id="div3"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-006.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-006.xht new file mode 100644 index 0000000000..85b7ae976f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-006.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: Absolutely positioned elements establishes a new containing block for absolutely positioned children</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning" /> + <link rel="match" href="position-absolute-004-ref.xht" /> + + <meta name="assert" content="An absolutely positioned box establishes a new containing block for absolutely positioned children." /> + <style type="text/css"> + #div1 + { + height: 2in; + position: relative; + width: 2in; + } + div div + { + height: 1in; + width: 1in; + } + #div2 + { + background: orange; + left: 1in; + position: absolute; + } + #div3 + { + background: blue; + position: relative; + top: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is directly below the orange square.</p> + <div id="div1"> + <div id="div2"> + <div id="div3"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-007-ref.xht new file mode 100644 index 0000000000..115db79945 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-007-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[ + div.blue + { + background-color: blue; + height: 0.5in; + width: 0.5in + } + + div#orange + { + background-color: orange; + height: 1in; + width: 1in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the "Filler Text" overflow below the orange square and overlaps the bottom blue square.</p> + + <div class="blue"></div> + + <div id="orange">Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</div> + + <div class="blue"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-007.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-007.xht new file mode 100644 index 0000000000..e9ec2a5f16 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-007.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Absolutely positioned elements child behavior</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning" /> + <link rel="match" href="position-absolute-007-ref.xht" /> + + <meta name="assert" content="The contents of an absolutely positioned element do not flow around any other boxes and can obscure the contents of another box." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + position: absolute; + height: 1in; + top: 0.5in; + width: 1in; + } + #div3 + { + background: blue; + float: left; + height: 2in; + width: 0.5in + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" overflow below the orange square and overlaps the bottom blue square.</p> + <div id="div1"> + <div id="div2"> + Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text + </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-absolute-008.xht b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-008.xht new file mode 100644 index 0000000000..73db2f85f3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-absolute-008.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Float is computed to 'none' when element is absolutely positioned</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 --> + <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"> + #div1 + { + position: relative; + } + #div2, #div3 + { + height: 100px; + width: 100px; + } + #div2 + { + background: red; + } + #div3 + { + background: green; + float: right; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-001.xht new file mode 100644 index 0000000000..f50512b558 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-001.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'table-row-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'table-row-group'." /> + <style type="text/css"> + body {margin: 8px;} + #test + { + bottom: 0; + display: table-row-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + display: table-cell; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-002.xht new file mode 100644 index 0000000000..62c7f8036d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-002.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'table-header-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'table-header-group'." /> + <style type="text/css"> + body {margin: 8px;} + #test + { + background: green; + bottom: 0; + display: table-header-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-003.xht new file mode 100644 index 0000000000..0f77db74ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-003.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'table-footer-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'table-footer-group'." /> + <style type="text/css"> + body {margin: 8px;} + #test + { + background: green; + bottom: 0; + display: table-footer-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-004.xht new file mode 100644 index 0000000000..e71d67df3f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-004.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'table-row'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'table-row'." /> + <style type="text/css"> + body {margin: 8px;} + #test + { + background: green; + bottom: 0; + display: table-row; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #cell + { + display: table-cell; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-005.xht new file mode 100644 index 0000000000..b2106b722d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-005.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'table-column-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'table-column-group'." /> + <style type="text/css"> + body {margin: 8px;} + #test + { + background: green; + bottom: 0; + display: table-column-group; + height: 100px; + position: absolute; + width: 100px; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-006.xht new file mode 100644 index 0000000000..2e1cb1562f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-006.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'table-column'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'table-column'." /> + <style type="text/css"> + body {margin: 8px;} + #test + { + background: green; + bottom: 0; + display: table-column; + height: 100px; + position: absolute; + width: 100px; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-007.xht new file mode 100644 index 0000000000..944e2a82a6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-007.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'table-cell'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'table-cell'." /> + <style type="text/css"> + body {margin: 8px;} + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + bottom: 0; + display: table-cell; + height: 100px; + position: absolute; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-008.xht new file mode 100644 index 0000000000..0f68c0d4dc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-008.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to inline</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="assert" content="The 'position' property applies to elements with a display of inline." /> + <style type="text/css"> + div + { + background: green; + bottom: 0; + display: inline; + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there is a green stripe at the bottom of the page.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-009.xht new file mode 100644 index 0000000000..06139270f0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-009.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of block." /> + <style type="text/css"> + body {margin: 8px;} + span + { + background: green; + bottom: 0; + display: block; + height: 100px; + position: absolute; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div> + <span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-010.xht new file mode 100644 index 0000000000..7d7e555bb9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-010.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to list-item</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="assert" content="The 'position' property applies to elements with a display of list-item." /> + <style type="text/css"> + body + { + margin-left: 1em; + } + div + { + background: green; + bottom: 0; + display: list-item; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page and a marker bullet on its left-hand side.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-012.xht new file mode 100644 index 0000000000..34206d65bd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-012.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to inline-block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of inline-block." /> + <style type="text/css"> + body {margin: 8px;} + + span#inline-block + { + background: green; + bottom: 0; + display: inline-block; + position: absolute; + } + + span.block-descendant + { + display: block; + height: 50px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div> + <span id="inline-block"> + <span class="block-descendant"></span> + <span class="block-descendant"></span> + </span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-013.xht new file mode 100644 index 0000000000..0b70b92ba1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-013.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'table'." /> + <style type="text/css"> + body {margin: 8px;} + #table + { + background: green; + bottom: 0; + display: table; + table-layout: fixed; + height: 100px; + position: absolute; + width: 100px; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-014.xht new file mode 100644 index 0000000000..c02ce086f9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-014.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'inline-table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'inline-table'." /> + <style type="text/css"> + body {margin: 8px;} + #table + { + background: green; + bottom: 0; + display: inline-table; + table-layout: fixed; + height: 100px; + position: absolute; + width: 100px; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-015.xht new file mode 100644 index 0000000000..1a5e69d005 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-applies-to-015.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position applied to element with 'display' set to 'table-caption'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="bottom-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'position' property applies to elements with a display of 'table-caption'." /> + <style type="text/css"> + body {margin: 8px;} + #caption + { + background: green; + bottom: 0; + display: table-caption; + height: 100px; + position: absolute; + width: 100px; + } + #table + { + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the bottom of the page.</p> + <div id="table"> + <div id="caption"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-fixed-001.xht b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-001.xht new file mode 100644 index 0000000000..8cb1e847de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-001.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 Test: Fixed position elements impact on later siblings</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="assert" content="Fixed positioned elements do not impact later siblings." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2, #div3 + { + height: 100px; + width: 100px; + } + #div2 + { + background: green; + position: fixed; + } + #div3 + { + background: red; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-fixed-002.xht b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-002.xht new file mode 100644 index 0000000000..70830d51ea --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-002.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position fixed size and positioning</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="assert" content="Fixed positioned elements can be sized and positioned using 'top', 'right', 'bottom' and 'left' properties." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 2in; + position: relative; + width: 2in; + } + div div + { + background: orange; + bottom: 0; + left: 1in; + position: fixed; + right: 0; + top: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a large orange rectangle that covers the bottom-right corner of a blue square and continues to the right side and the bottom of the page.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-fixed-003.xht b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-003.xht new file mode 100644 index 0000000000..a98577533d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-003.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position fixed on different media types</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="flags" content="interact" /> + <meta name="assert" content="Elements that are set to 'position: fixed' are fixed with respect to the viewport." /> + <style type="text/css"> + #filler + { + height: 6000px; + margin: 10px; + } + @media handheld, projection, screen, tty, tv + { + #div1 + { + background: blue; + height: 1.5em; + position: fixed; + top: 3em; + } + } + </style> + </head> + <body> + <p>Test passes if the blue stripe does not move when the page is scrolled.</p> + <div id="div1">Filler Text</div> + <div id="filler"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-fixed-004.xht b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-004.xht new file mode 100644 index 0000000000..43fb1bcb49 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-004.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position fixed and print media</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="Fixed position elements are positioned with respect to the page box when printed." /> + <style type="text/css"> + html, body + { + height: 100%; + } + #filler + { + height: 400%; + margin: 10px; + } + @media print + { + #div1 + { + position: fixed; + top: 50px; + } + #prerequisite + { + display: none; + } + } + </style> + </head> + <body> + <p id="prerequisite">PREREQUISITE: Switch to print preview or a paged view.</p> + <p>Test passes if the "Filler Text" is on all five pages when paginated or printed.</p> + <div id="div1">Filler Text</div> + <div id="filler"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-fixed-005.xht b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-005.xht new file mode 100644 index 0000000000..de52aeebc4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-005.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: Pagination of fixed positioned elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="Fixed position elements cannot be paginated." /> + <style type="text/css"> + @media print + { + #prerequisite + { + display: none; + } + } + html, body + { + height: 100%; + margin: 0; + padding: 0; + } + p + { + margin: 0; + padding: 1em 0 0 1em; + } + #fixed + { + height: 100%; + position: fixed; + top: 5em; + } + #spacer + { + height: 100%; + } + span + { + color: red; + text-decoration: underline; + } + </style> + </head> + <body> + <p id="prerequisite">PREREQUISITE: Switch to print preview or a paged view.</p> + <p>Test passes if there is only one page and there is no red underlined text visible when paginated or printed.</p> + <div id="fixed"> + <div id="spacer"></div> + <span>Test fails if this line of text is visible when the page is paginated or printed.</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-fixed-006.xht b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-006.xht new file mode 100644 index 0000000000..e9c73c38f2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-006.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html id="test" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Non-static position on the root element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <meta name="flags" content="dom may" /> + <meta name="assert" content="Root elements may treat non-static positions as 'static'." /> + <style type="text/css"> + html + { + position: fixed; + } + </style> + </head> + <body> + <p>Test passes if the word "fixed" or "static" is below this text.</p> + <script type="text/javascript"> + var el = document.getElementById('test'); + document.body.appendChild(document.createTextNode(window.getComputedStyle(el, null).position)); + </script> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-fixed-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-007-ref.xht new file mode 100644 index 0000000000..fa6eb254f9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-007-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body + { + margin-left: 0px; + margin-top: 0px; + } + + p + { + margin-left: 8px; + margin-top: 0px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <div><img src="support/black15x15.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <p>Test passes if there is a black square in the upper-left corner of the page.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-fixed-007.xht b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-007.xht new file mode 100644 index 0000000000..78c34ccf84 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-fixed-007.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: Float is computed to 'none' when element is fixed positioned</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-20 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning" /> + <link rel="match" href="position-fixed-007-ref.xht" /> + + <meta name="assert" content="Float is computed to 'none' when 'position: fixed' is applied." /> + <style type="text/css"> + p + { + margin-top: 1in; + } + + div + { + background: black; + float: right; + height: 1in; + position: fixed; + top: 0; + left: 0; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a black square in the upper-left corner of the page.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-001-ref.xht new file mode 100644 index 0000000000..3f1762af42 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-001-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if the letters below are all on the same line and they are in alphabetical order.</p> + + <div>a b c d</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-001.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-001.xht new file mode 100644 index 0000000000..82cb630197 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-001.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning and normal flow</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="position-relative-001-ref.xht" /> + + <meta name="assert" content="Relatively positioned elements lay out in normal flow." /> + <style type="text/css"> + #span1, #span2 + { + position: relative; + } + </style> + </head> + <body> + <p>Test passes if the letters below are all on the same line and they are in alphabetical order.</p> + <div> + <span id="span1">a</span> + <span>b</span> + <span id="span2">c</span> + <span>d</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-002.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-002.xht new file mode 100644 index 0000000000..e9a69243b3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-002.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Elements following relatively positioned elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <meta name="assert" content="Element following relatively positioned element show up in normal flow as if the relatively positioned element were not offset." /> + <style type="text/css"> + body {line-height: 1.25;} + + #div1 + { + background: blue; + height: 2px; + left: 0; + position: relative; + top: 24px; + width: 200px; + } + #span1 + { + position: relative; + top: 25px; + } + </style> + </head> + <body> + <p>Test passes if the letter "a" is below the blue line and the letter "b" is above the blue line.</p> + <div> + <div id="div1"></div> + <span id="span1">a</span> + <span>b</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-003-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-003-ref.xht new file mode 100644 index 0000000000..0bc719310f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-003-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid 3px; + width: 5in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if "Filler Text" is aligned to the left side of the box.</p> + + <div>Filler Text</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-003.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-003.xht new file mode 100644 index 0000000000..19fdc182f3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-003.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning with auto</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-003-ref.xht" /> + + <meta name="assert" content="The position of a relatively positioned element with left and right set to auto the values compute to zero." /> + <style type="text/css"> + div + { + border: solid 3px; + width: 5in; + } + span + { + position: relative; + left: auto; + right: auto; + } + </style> + </head> + <body> + <p>Test passes if "Filler Text" is aligned to the left side of the box.</p> + <div> + <span>Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-004-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-004-ref.xht new file mode 100644 index 0000000000..eae8deba76 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-004-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if 3 filled squares have the same size and if the yellow square is on the right-hand side of the orange square.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-white.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="96" height="96" 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/positioning/position-relative-004.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-004.xht new file mode 100644 index 0000000000..5e7dfad426 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-004.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning dimensions</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-004-ref.xht" /> + + <meta name="assert" content="Relative positioning with left or right does not change size of a box." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + position: absolute; + } + #div2 + { + background: yellow; + left: 1in; + position: relative; + } + #div3 + { + background: blue; + position: relative; + right: -1in; + } + </style> + </head> + <body> + <p>Test passes if 3 filled squares have the same size and if the yellow square is on the right-hand side of the orange square.</p> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-005-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-005-ref.xht new file mode 100644 index 0000000000..c6a17433ea --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-005-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if a blue square is on the right-hand side of an orange square.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="96" height="96" 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/positioning/position-relative-005.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-005.xht new file mode 100644 index 0000000000..6c3097305f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-005.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning with left</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-005-ref.xht" /> + + <meta name="assert" content="Relatively positioned element with the left specified offsets the element from the left of the containing block." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + position: absolute; + } + #div2 + { + background: blue; + left: 1in; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if a blue square is on the right-hand side of an orange square.</p> + <div id="div1"></div> + <div id="div2"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-006.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-006.xht new file mode 100644 index 0000000000..e239aac182 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-006.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 Test: Relative positioning with right</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-005-ref.xht" /> + + <meta name="assert" content="Relatively positioned element with the right specified offsets the element from the right of the containing block." /> + <style type="text/css"> + div + { + width: 2in; + } + span + { + display: block; + height: 1in; + width: 1in; + } + #span1 + { + background: orange; + } + #span2 + { + background: blue; + position: relative; + right: -1in; + top: -1in; + } + </style> + </head> + <body> + <p>Test passes if a blue square is on the right-hand side of an orange square.</p> + <div> + <span id="span1"></span><span id="span2"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-007.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-007.xht new file mode 100644 index 0000000000..c0fef82a93 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-007.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning with 'left' set and 'right' 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-005-ref.xht" /> + + <meta name="assert" content="Relatively positioned element with 'left' set to 'auto' and 'right' set to a value appears at expected offset." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + margin-left: 1in; + } + #div2 + { + background: blue; + } + #div3 + { + background: orange; + position: relative; + left: auto; + right: 1in; + top: -1in; + } + </style> + </head> + <body> + <p>Test passes if a blue square is on the right-hand side of an orange square.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-008.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-008.xht new file mode 100644 index 0000000000..7ee2c04e61 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-008.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 Test: Relative positioning with 'right' set and 'left' 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + + <meta name="assert" content="If 'right' offset of a relatively positioned box is specified as 'auto', then its computed value is minus the value of 'left' offset. A relatively positioned box with 'left' set to a value moves the box to the left by the value of 'right'." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + margin-left: 1in; + } + #div2 + { + background: orange; + } + #div3 + { + background: blue; + position: relative; + left: 1in; + right: auto; + top: -1in; + } + </style> + </head> + <body> + <p>Test passes if a blue square is on the right-hand side of an orange square.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-009.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-009.xht new file mode 100644 index 0000000000..413693cbba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-009.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Over-constrained situation with position 'left' property</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-005-ref.xht" /> + + <meta name="assert" content="If the 'direction' property of the containing block is 'ltr', the value of 'left' wins and 'right' becomes negative 'left'." /> + <style type="text/css"> + body {direction: ltr;} + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + } + #div2 + { + background: blue; + left: 1in; + position: relative; + right: 1in; + top: -1in; + } + </style> + </head> + <body> + <p>Test passes if a blue square is on the right-hand side of an orange square.</p> + <div id="div1"></div> + <div id="div2"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-010.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-010.xht new file mode 100644 index 0000000000..9966bb0093 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-010.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Over-constrained situation with position 'right' property</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-005-ref.xht" /> + + <meta name="assert" content="If the 'direction' property of the containing block is 'rtl', the value of 'right' wins and 'left' becomes negative 'right'." /> + <style type="text/css"> + #div1 + { + background: blue; + direction: rtl; + width: 2in; + } + div div + { + background: orange; + height: 1in; + left: 1in; + position: relative; + right: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if a blue square is on the right-hand side of an orange square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-013.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-013.xht new file mode 100644 index 0000000000..f9bd74aeec --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-013.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning with top and bottom do not change element dimensions</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" title="9.4.3 Relative positioning" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="assert" content="Relatively positioned element dimensions are not changed with top/bottom applied. If 'top' is 'auto' and if 'bottom' is '100px', then top's used value becomes the negative of bottom. If both 'top' and 'bottom' are specified (like for #div3 in this test), then 'bottom' is ignored and the used value of 'bottom' becomes minus the value of 'top')." /> + <style type="text/css"> + div + { + height: 100px; + position: relative; + width: 100px; + } + #div1 + { + background-color: red; + } + #div2 + { + background-color: red; + bottom: 100px; + top: auto; + } + #div3 + { + background-color: green; + bottom: 0px; + top: -200px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-014-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-014-ref.xht new file mode 100644 index 0000000000..556121dcd9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-014-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if a blue square is directly below an orange square.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-blue.png" width="96" height="96" 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/positioning/position-relative-014.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-014.xht new file mode 100644 index 0000000000..4a563ca84f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-014.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning with top</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-014-ref.xht" /> + + <meta name="assert" content="Relatively positioned element dimensions are not changed with top applied." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + position: absolute; + } + #div2 + { + background: blue; + position: relative; + top: 1in; + } + </style> + </head> + <body> + <p>Test passes if a blue square is directly below an orange square.</p> + <div id="div1"></div> + <div id="div2"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-015.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-015.xht new file mode 100644 index 0000000000..9e86a29cbd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-015.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning with bottom</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-014-ref.xht" /> + + <meta name="assert" content="Relatively positioned element dimensions are not changed with bottom applied." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: blue; + position: relative; + top: 1in; + } + #div2 + { + background: orange; + bottom: 1in; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if a blue square is directly below an orange square.</p> + <div id="div1"></div> + <div id="div2"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-016-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-016-ref.xht new file mode 100644 index 0000000000..7597515356 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-016-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {padding-top: 98px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div><img src="support/swatch-green.png" width="96" height="96" 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/positioning/position-relative-016.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-016.xht new file mode 100644 index 0000000000..31dd72625b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-016.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning and computed top/bottom values</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-016-ref.xht" /> + + <meta name="assert" content="Used value of top equals negative bottom when top is auto and bottom is given. (Computed value of top remains auto.)" /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div0 + { + border: 1px solid transparent; + height: 0; + } + #div1 + { + position: absolute; + background: red; + margin-top: 1in; + } + #div2 + { + bottom: -1in; + position: relative; + top: auto; + } + #div3 + { + background: green; + position: relative; + top: inherit; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div0"></div> + <div id="div1"></div> + <div id="div2"> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-017.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-017.xht new file mode 100644 index 0000000000..8d9396b032 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-017.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning and computed 'top'/'bottom' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-014-ref.xht" /> + + <meta name="assert" content="Computed values are zero when both 'top' and 'bottom' are set to 'auto'." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: blue; + height: 2in; + } + div div + { + background: orange; + position: relative; + top: auto; + bottom: auto; + } + </style> + </head> + <body> + <p>Test passes if a blue square is directly below an orange square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-018-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-018-ref.xht new file mode 100644 index 0000000000..b181e5ad9c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-018-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: black; + height: 96px; + margin-top: 112px; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is only one filled black square.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-018.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-018.xht new file mode 100644 index 0000000000..b28f667890 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-018.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: Relative positioning and computed values when 'bottom' is set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-018-ref.xht" /> + + <meta name="assert" content="Computed value of 'bottom' set to 'auto' is equal to negative 'top'." /> + <style type="text/css"> + .parent + { + width: 0.5in; + float: left; + } + div div + { + background: black; + height: 1in; + position: relative; + width: 0.5in; + } + #div1 + { + bottom: auto; + top: 1in; + } + #div2 + { + bottom: -1in; + top: auto; + } + </style> + </head> + <body> + <p>Test passes if there is only one filled black square.</p> + <div class="parent"> + <div id="div1"></div> + </div> + <div class="parent"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-019.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-019.xht new file mode 100644 index 0000000000..dbd76359c6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-019.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning 'bottom' ignored if 'top' and 'bottom' are both not 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-014-ref.xht" /> + + <meta name="assert" content="The 'bottom' value is ignored if neither 'top' or 'bottom' is 'auto'." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + position: absolute; + } + #div2 + { + background: blue; + bottom: 3in; + position: relative; + top: 1in; + } + </style> + </head> + <body> + <p>Test passes if a blue square is directly below an orange square.</p> + <div id="div1"></div> + <div id="div2"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-020.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-020.xht new file mode 100644 index 0000000000..4f32571086 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-020.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: Relative positioning and overflow: auto</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <meta name="flags" content="interact" /> + <meta name="assert" content="If relative positioning causes overflow the user agent needs to provide a scrolling mechanism to all of the content at its offset position." /> + <style type="text/css"> + #div1 + { + height: 1.5in; + position: relative; + overflow: auto; + width: 1.5in; + } + div div + { + border: solid blue 5px; + height: 1in; + position: relative; + top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if, after scrolling down, all four edges of a blue square are visible.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-021.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-021.xht new file mode 100644 index 0000000000..a0887557ac --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-021.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: Relative positioning and overflow: scroll</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <meta name="flags" content="interact" /> + <meta name="assert" content="If relative positioning causes overflow the user agent needs to provide a scrolling mechanism to all of the content at its offset position." /> + <style type="text/css"> + #div1 + { + height: 1.5in; + position: relative; + overflow: scroll; + width: 1.5in; + } + div div + { + border: solid blue 5px; + height: 1in; + position: relative; + top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if, after scrolling down, all four edges of a blue square are visible.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-022.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-022.xht new file mode 100644 index 0000000000..a69ed39da7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-022.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: Relative positioning and overflow: auto</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#relative-positioning" /> + + <meta name="flags" content="interact" /> + <meta name="assert" content="If relative positioning causes overflow to an containing ancestor, then the user agent needs to provide a scrolling mechanism to all of the content at its offset position. In this test, div#taller-and-wider-rel-pos generates a 1.75in wide by 1.75in tall box." /> + + <style type="text/css"><![CDATA[ + div#containing-ancestor + { + height: 1.5in; + overflow: auto; + width: 1.5in; + } + + div#taller-and-wider-rel-pos + { + border: blue solid 5px; + height: 1in; + left: 0.75in; + position: relative; + top: 0.75in; + width: 1in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if, after scrolling down and to the right, all four edges of a blue square are visible.</p> + + <div id="containing-ancestor"> + <div id="taller-and-wider-rel-pos"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-027-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-027-ref.xht new file mode 100644 index 0000000000..0e7c1d6840 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-027-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if the 3 "Filler Text" are on the same line.</p> + + <div>Filler Text Filler Text Filler Text</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-027.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-027.xht new file mode 100644 index 0000000000..3b20254fa1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-027.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: Relatively positioned elements with auto positioning with anonymous boxes before and after</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-027-ref.xht" /> + + <meta name="assert" content="Relatively positioned element with auto positioning appear as though they were positioned in flow." /> + <!-- + " + If both 'left' and 'right' are 'auto' (their initial values), + [then] the[ir] used values are '0' (i.e., the boxes stay + in their original position). + (...) + If both [top and bottom] are 'auto', [then] their used values are both '0'. + " + http://www.w3.org/TR/CSS21/visuren.html#relative-positioning + --> + + <style type="text/css"> + div + { + width: 5in; + } + span + { + bottom: auto; + left: auto; + position: relative; + right: auto; + top: auto; + + } + </style> + </head> + <body> + <p>Test passes if the 3 "Filler Text" are on the same line.</p> + <div> + Filler Text <span>Filler Text</span> Filler Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-028-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-028-ref.xht new file mode 100644 index 0000000000..389f2f7856 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-028-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if the 2 "Filler Text" are on the same line.</p> + + <div>Filler Text Filler Text</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-028.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-028.xht new file mode 100644 index 0000000000..6f2ab355c0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-028.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relatively positioned elements with auto positioning with anonymous boxes after</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-relpos" /> + <link rel="match" href="position-relative-028-ref.xht" /> + + <meta name="assert" content="Relatively positioned element with auto positioning appear as though they were positioned in flow." /> + <style type="text/css"> + div + { + width: 5in; + } + span + { + position: relative; + } + </style> + </head> + <body> + <p>Test passes if the 2 "Filler Text" are on the same line.</p> + <div> + <span>Filler Text</span> Filler Text + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-029.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-029.xht new file mode 100644 index 0000000000..65254ee063 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-029.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relatively positioned elements with auto positioning with inline box after</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-relpos" /> + <link rel="match" href="position-relative-028-ref.xht" /> + + <meta name="assert" content="Relatively positioned element with auto positioning appear as though they were positioned in flow." /> + <style type="text/css"> + div + { + width: 5in + } + #span1 + { + position: relative; + } + </style> + </head> + <body> + <p>Test passes if the 2 "Filler Text" are on the same line.</p> + <div> + <span id="span1">Filler Text</span><span> Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-030-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-030-ref.xht new file mode 100644 index 0000000000..22fceb8cce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-030-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if the 4 "Filler Text" are on the same line.</p> + + <div>Filler Text Filler Text Filler Text Filler Text</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-030.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-030.xht new file mode 100644 index 0000000000..556b81c214 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-030.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relatively positioned elements with auto positioning with anonymous boxes before and after with trailing inline</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-relpos" /> + <link rel="match" href="position-relative-030-ref.xht" /> + + <meta name="assert" content="Relatively positioned element with auto positioning appear as though they were positioned in flow." /> + <style type="text/css"> + div + { + width: 5in; + } + #span1 + { + position: relative; + } + </style> + </head> + <body> + <p>Test passes if the 4 "Filler Text" are on the same line.</p> + <div> + Filler Text <span id="span1">Filler Text</span> Filler Text<span> Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-031-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-031-ref.xht new file mode 100644 index 0000000000..841ed97413 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-031-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + </style> + </head> + + <body> + + <p>Test passes if the 5 "Filler Text" are on the same line.</p> + + <div>Filler Text Filler Text Filler Text Filler Text Filler Text</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-031.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-031.xht new file mode 100644 index 0000000000..1e63f42bfd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-031.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relatively positioned elements with auto positioning with an inline element before, anonymous boxes, and inline boxes after</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-relpos" /> + <link rel="match" href="position-relative-031-ref.xht" /> + + <meta name="assert" content="Relatively positioned element with auto positioning render as though they were positioned in flow." /> + <style type="text/css"> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + div + { + width: 5in; + } + #span1 + { + position: relative; + } + </style> + </head> + <body> + <p>Test passes if the 5 "Filler Text" are on the same line.</p> + <div> + <span>Filler Text </span><span id="span1">Filler Text</span> Filler Text<span> Filler Text </span>Filler Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-032-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-032-ref.xht new file mode 100644 index 0000000000..b18b740d07 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-032-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 {line-height: 1.25;} + + span {visibility: hidden;} + + div + div {margin-top: 5px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if "Filler Text1" and "Filler Text3" are on the first line and "Filler Text2" is on the second line and the space has been reserved where "Filler Text2" would have been if it were on the first line.</p> + + <div>Filler Text1<span>Filler Text2</span>Filler Text3</div> + + <div><span>Filler Text1</span>Filler Text2<span>Filler Text3</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-032.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-032.xht new file mode 100644 index 0000000000..88cd4557d4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-032.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relatively positioned box has no impact on boxes which follow</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-relpos" /> + <link rel="match" href="position-relative-032-ref.xht" /> + + <meta name="assert" content="Offsetting a box with relative positioning has no effect on the boxes which follow." /> + <style type="text/css"> + div {line-height: 1.25;} + + #span1 + { + position: relative; + top: 25px; + } + </style> + </head> + <body> + <p>Test passes if "Filler Text1" and "Filler Text3" are on the first line and "Filler Text2" is on the second line and the space has been reserved where "Filler Text2" would have been if it were on the first line.</p> + <div> + <span>Filler Text1<span id="span1">Filler Text2</span>Filler Text3</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-033-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-033-ref.xht new file mode 100644 index 0000000000..5915458523 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-033-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + span {font: 20px/1 Ahem;} + + div > span {border: blue solid 2px;} + + span#yellow-stripe {color: yellow;} + + span#orange-stripe {color: orange;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the yellow stripe is on the left-hand side of the hollow blue rectangle and the orange stripe is on the right-hand side of the hollow blue rectangle.</p> + + <div> + <span><span id="yellow-stripe">123456</span> <span id="orange-stripe">123456</span></span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-033.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-033.xht new file mode 100644 index 0000000000..23ac5fc3a1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-033.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relatively positioned box has no impact on boxes which follow and boxes may overlap</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-relpos" /> + <link rel="match" href="position-relative-033-ref.xht" /> + + <meta name="flags" content="ahem may" /> + <meta name="assert" content="Offsetting a box with relative positioning has no effect on the boxes which follow and boxes may overlap." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + color: orange; + font: 20px/1 Ahem; + } + #span1 + { + border: 2px solid blue; + } + #span2 + { + color: yellow; + position: relative; + left: -6em; + } + </style> + </head> + <body> + <p>Test passes if the yellow stripe is on the left-hand side of the hollow blue rectangle and the orange stripe is on the right-hand side of the hollow blue rectangle.</p> + <div> + <span id="span1"> <span id="span2">XXXXXX</span>XXXXXX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-034.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-034.xht new file mode 100644 index 0000000000..a6fcf40809 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-034.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relatively positioned content inside container with overflow auto</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-relpos" /> + <meta name="flags" content="interact" /> + <meta name="assert" content="A container with overflow set to auto provides a scrolling mechanism for relatively positioned content." /> + <style type="text/css"> + div + { + border: solid; + overflow: auto; + width: 200px; + } + span + { + position: relative; + left: 200px; + } + </style> + </head> + <body> + <p>Test passes if the box can be scrolled to the words "Filler Text".</p> + <div> + <span>Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-035-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-035-ref.xht new file mode 100644 index 0000000000..fba91bd525 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-035-ref.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + line-height: 1.25; + width: 5em; + } + + div#black + { + background-color: black; + margin-top: 2em; + } + + div#orange + { + background-color: orange; + padding-top: 0.25em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a black rectangle has one and only one orange line of text below it.</p> + + <div id="black">Filler Text Filler Text Filler Text</div> + + <div id="orange">Text</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-035.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-035.xht new file mode 100644 index 0000000000..b1551b8b00 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-035.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relatively positioned boxes preserve the space created for it in flow</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-relpos" /> + <link rel="match" href="position-relative-035-ref.xht" /> + + <meta name="assert" content="Relative positioned content keeps its normal flow size including line breaks and the space originally reserved for it." /> + <style type="text/css"> + #div1 + { + line-height: 1.25; + width: 5em; + } + #div2 + { + position: relative; + top: 16px; + background: black; + } + #div3 + { + background: orange; + } + </style> + </head> + <body> + <p>Test passes if a black rectangle has one and only one orange line of text below it.</p> + <div id="div1"> + <div id="div2">Filler Text Filler Text Filler Text</div> + <div id="div3"> FAIL Text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-036.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-036.xht new file mode 100644 index 0000000000..e7144d7958 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-036.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relatively positioned content inside container with overflow scroll</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-22 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-relpos" /> + <meta name="flags" content="interact" /> + <meta name="assert" content="A container with overflow set to scroll provides a scrolling mechanism for relatively positioned content." /> + <style type="text/css"> + div + { + border: solid; + overflow: scroll; + width: 200px; + } + span + { + position: relative; + left: 200px; + } + </style> + </head> + <body> + <p>Test passes if the box can be scrolled to the words "Filler Text".</p> + <div> + <span>Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-037-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-037-ref.xht new file mode 100644 index 0000000000..daae9c9d27 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-037-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[ + div + { + border: black solid 3px; + text-align: right; + width: 2in; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the right side of the hollow rectangle is blue.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-037.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-037.xht new file mode 100644 index 0000000000..42e62580f2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-037.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning with over-constained situation and direction left-to-right</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-037-ref.xht" /> + + <meta name="assert" content="Relative positioning with left and right values and over-constrained situations when direction is left-to-right." /> + <style type="text/css"> + #div1 + { + border: solid 3px; + direction: ltr; + width: 2in; + } + div div + { + background: blue; + height: 1in; + left: 1in; + position: relative; + right: 2in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the right side of the hollow rectangle is blue.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-038-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-038-ref.xht new file mode 100644 index 0000000000..d7eba8836b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-038-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 + { + border: black solid 3px; + width: 2in; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the left side of the hollow rectangle is blue.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-038.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-038.xht new file mode 100644 index 0000000000..5efd907794 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-038.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative positioning with over-constained situation and direction right-to-left</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="position-relative-038-ref.xht" /> + + <meta name="assert" content="Relative positioning with left and right values and over-constrained situations when direction is right-to-left." /> + <style type="text/css"> + #div1 + { + border: solid 3px; + direction: rtl; + width: 2in; + } + div div + { + background: blue; + height: 1in; + left: 2in; + position: relative; + right: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the left side of the hollow rectangle is blue.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-nested-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-nested-001-ref.xht new file mode 100644 index 0000000000..9fbe2ff932 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-nested-001-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: 300px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-relative-nested-001.xht b/testing/web-platform/tests/css/CSS2/positioning/position-relative-nested-001.xht new file mode 100644 index 0000000000..5167f3a6fa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-relative-nested-001.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Vertical centering with negative and positive top positioning</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme" /> + <link rel="match" href="position-relative-nested-001-ref.xht" /> + + <meta name="assert" content="Equal 50% positive and negative positioning can vertically center objects." /> + <style type="text/css"> + #outer + { + background: green repeat-x center url('support/red_box.png'); + /* red_box.png is a 100px by 100px red square */ + height: 300px; + width: 200px; + } + #inner + { + background-color: red; + height: 100px; + position: relative; + top: 50% + } + #inner-most + { + background-color: green; + height: 150px; + /* 150px == top-half of red_box.png's height + #inner's height */ + position: relative; + top: -50%; + /* 50% is 50% of the height of #inner-most's containing block + which is #inner */ + /* to move the top of the #inner-most box from pixel 150 + on the y-axis of #outer to pixel 100 on the y-axis of #outer */ + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="outer"> + <div id="inner"> + <div id="inner-most"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-static-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/position-static-001-ref.xht new file mode 100644 index 0000000000..656cca477c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-static-001-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: orange; + height: 192px; + line-height: 1.25; + width: 192px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if an orange stripe is above a blue rectangle and if both have the same width.</p> + + <div>Filler Text<br /><img src="support/swatch-blue.png" width="192" height="172" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/position-static-001.xht b/testing/web-platform/tests/css/CSS2/positioning/position-static-001.xht new file mode 100644 index 0000000000..7a8b3101c8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/position-static-001.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Content laid out in normal flow when 'position' is set to 'static'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-24 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position" /> + <link rel="match" href="position-static-001-ref.xht" /> + + <meta name="assert" content="Static positioned elements are not affected by top, right, bottom, left property settings." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 2in; + line-height: 1.25; + position: relative; + width: 2in; + } + div div + { + background: orange; + bottom: 0; + left: 100px; + position: static; + right: 0; + top: 100px; + } + </style> + </head> + <body> + <p>Test passes if an orange stripe is above a blue rectangle and if both have the same width.</p> + <div id="div1"> + <div>Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/positioning-float-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/positioning-float-001-ref.xht new file mode 100644 index 0000000000..aaa2ce8856 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/positioning-float-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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + + div {font-size: 3em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is the word "P A S S".</p> + + <div>P A S S</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/positioning-float-001.xht b/testing/web-platform/tests/css/CSS2/positioning/positioning-float-001.xht new file mode 100644 index 0000000000..9247d01451 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/positioning-float-001.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Positioning a left floated element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-24 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme" /> + <link rel="match" href="positioning-float-001-ref.xht" /> + <meta name="assert" content="Floating a box will first lay out the box then shift it to the left." /> + <style type="text/css"> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + + div + { + font-size: 3em; + } + + span + { + float: left; + } + </style> + </head> + <body> + <p>Test passes if there is the word "P A S S".</p> + <div>S <span>P A </span>S</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/positioning-float-002-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/positioning-float-002-ref.xht new file mode 100644 index 0000000000..a6a7216863 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/positioning-float-002-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[ + div {line-height: 1.25;} + + div + div + { + margin-top: -1.25em; + text-align: right; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if "Floated element" is on the same line as the "Filler Text".</p> + + <div>Filler Text Filler Text</div> + + <div>Floated element</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/positioning-float-002.xht b/testing/web-platform/tests/css/CSS2/positioning/positioning-float-002.xht new file mode 100644 index 0000000000..b5d68fab71 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/positioning-float-002.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Positioning a right floated element</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-24 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme" /> + <link rel="match" href="positioning-float-002-ref.xht" /> + + <meta name="assert" content="Floating a box will first lay out the box then shift it to the right." /> + <style type="text/css"> + div {line-height: 1.25;} + + div div + { + float: right; + } + </style> + </head> + <body> + <p>Test passes if "Floated element" is on the same line as the "Filler Text".</p> + <div> + Filler Text + <div>Floated element</div> + Filler Text + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-001-ref.xht new file mode 100644 index 0000000000..a147a5f97b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-001-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: 120px; + width: 120px; + } + ]]></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/positioning/relpos-calcs-001.xht b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-001.xht new file mode 100644 index 0000000000..d109596814 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-001.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative Positioning - auto top = -bottom</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="relpos-calcs-001-ref.xht" /> + + <meta name="assert" content="For a relatively positioned element, if 'top' + is 'auto', its used value is minus the value of 'bottom'." /> + <style type="text/css"> + div { + height: 120px; + width: 120px; + } + .container { + margin-top: -60px; + } + .outer { + background: red; + position: relative; + bottom: -50%; + /* + div.outer's used bottom value is -60px + div.outer's used top value is 60px + div.outer's computed bottom value is -50% + but + div.outer's computed top value is auto and not 50%! + */ + } + .inner { + background: green; + position: relative; + top: inherit; + /* using inheritance to test computed vs. used */ + /* What is inherited is the computed top value of + its containing block, which is auto! + */ + } + .control { + background: red; + margin-top: -60px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="container"> + <div class="outer"> + <div class="inner"></div> + </div> + </div> + <div class="control"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-002.xht b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-002.xht new file mode 100644 index 0000000000..70254b8a95 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-002.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: Relative Positioning - auto bottom = -top</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="relpos-calcs-001-ref.xht" /> + + <meta name="assert" content="For a relatively positioned element, if 'bottom' + is 'auto', its used value is minus the value of 'top'." /> + <style type="text/css"> + div { + height: 120px; + width: 120px; + } + .container { + margin-top: -60px; + } + .outer { + background: red; + position: relative; + top: 50%; + /* + div.outer's used top value is 60px + div.outer's used bottom value is -60px + div.outer's computed top value is 50% + div.outer's computed bottom value is auto and not -50%! + */ + + } + .inner { + background: green; + position: relative; + bottom: inherit; /* using inheritance to test computed vs. used */ + /* What is inherited is the computed bottom value of + its containing block, which is auto! + */ + } + .control { + background: red; + margin-top: -60px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="container"> + <div class="outer"> + <div class="inner"></div> + </div> + </div> + <div class="control"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-003.xht b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-003.xht new file mode 100644 index 0000000000..64d272ef57 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-003.xht @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative Positioning - Computing auto left = -right</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="relpos-calcs-001-ref.xht" /> + + <meta name="assert" content="For a relatively positioned element, if 'left' + is 'auto', its used value is minus the value of 'right'." /> + <style type="text/css"> + div { + height: 120px; + width: 120px; + } + .container { + margin-left: -60px; + } + .outer { + background: red; + position: relative; + right: -50%; + /* + div.outer's used right value is -60px + div.outer's used left value is 60px + div.outer's computed right value is -50% + but + div.outer's computed left value is auto and not 50%! + */ + + } + .inner { + background: green; + position: relative; + left: inherit; /* using inheritance to test computed vs. used */ + } + .control { + background: red; + margin-bottom: -120px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="control"></div> + <div class="container"> + <div class="outer"> + <div class="inner"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-004.xht b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-004.xht new file mode 100644 index 0000000000..ffa615710b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-004.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative Positioning - auto right = -left</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="relpos-calcs-001-ref.xht" /> + + <meta name="assert" content="For a relatively positioned element, if 'right' + is 'auto', its used value is minus the value of 'left'." /> + <style type="text/css"> + div { + height: 120px; + width: 120px; + margin-right: auto; + direction: ltr; + } + .container { + margin-left: -60px; + direction: rtl; /* only set RTL on the containing block in question */ + } + .outer { + background: red; + position: relative; + left: 50%; + /* + div.outer's used left value is 60px + div.outer's right top value is -60px + div.outer's computed left value is 50% + but + div.outer's computed right value is auto and not 50%! + */ + + } + .inner { + background: green; + position: relative; + right: inherit; /* using inheritance to test computed vs. used */ + } + .control { + background: red; + margin-bottom: -120px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="control"></div> + <div class="container" dir="rtl"> + <div class="outer" dir="ltr"> + <div class="inner"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-005.xht b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-005.xht new file mode 100644 index 0000000000..b025d22366 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-005.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Relative Positioning - overconstrained left = -right (LTR)</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="relpos-calcs-001-ref.xht" /> + + <meta name="assert" content="For a relatively positioned element in an LTR + containing block, if neither 'left' nor 'right' is 'auto', used value of + 'right' is minus the value of 'left'." /> + <style type="text/css"> + div { + height: 120px; + width: 80px; + direction: rtl; + margin-right: auto; + } + .container { + direction: ltr; /* only set LTR on the containing block in question */ + } + .outer { + background: green; + position: relative; + left: 50%; + right: 50%; + + /* + div.outer's used left value is 60px + div.outer's used right value is -60px + div.outer's computed left value is 50% + div.outer's computed right value is 50% + */ + + } + .inner { + background: green; + position: relative; + right: inherit; /* using inheritance to test computed vs. used */ + /* div.inner's right inherits div.outer's computed right value */ + } + .control { + background: red; + margin-bottom: -120px; + width: 120px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="control"></div> + <div class="container" dir="ltr"> + <div class="outer" dir="rtl"> + <div class="inner"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-006.xht b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-006.xht new file mode 100644 index 0000000000..5f56e5a497 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-006.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: Relative Positioning - overconstrained left = -right (RTL)</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="relpos-calcs-001-ref.xht" /> + + <meta name="assert" content="For a relatively positioned element in an RTL + containing block, if neither 'left' nor 'right' is 'auto', used value of + 'left' is minus the value of 'right'." /> + <style type="text/css"> + div { + height: 120px; + width: 80px; + direction: rtl; + } + .outer { + background: green; + position: relative; + left: -50%; + right: -50%; + + /* + div.outer's used left value is 60px + div.outer's used right value is -60px + div.outer's computed left value is -50% + div.outer's computed right value is -50% + */ + + } + .inner { + background: green; + position: relative; + left: inherit; /* using inheritance to test computed vs. used */ + /* div.inner's left inherits div.outer's computed left value */ + } + .control { + background: red; + margin-bottom: -120px; + width: 120px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="control"></div> + <div class="container" dir="rtl"> + <div class="outer"> + <div class="inner"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-007.xht b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-007.xht new file mode 100644 index 0000000000..075f7c647d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-calcs-007.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: Relative Positioning - overconstrained top = -bottom</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" /> + <link rel="match" href="relpos-calcs-001-ref.xht" /> + + <meta name="assert" content="For a relatively positioned element, if + neither 'top' nor 'bottom' is 'auto', used value of 'bottom' is minus the + value of 'top'." /> + <style type="text/css"> + div { + height: 80px; + width: 120px; + } + .outer { + background: green; + position: relative; + top: 50%; + bottom: 50%; + + /* + div.outer's used top value is 40px + div.outer's used bottom value is -40px + div.outer's computed top value is 50% + div.outer's computed bottom value is 50% + */ + + } + .inner { + background: green; + position: relative; + bottom: inherit; /* using inheritance to test computed vs. used */ + /* div.inner's bottom inherits div.outer's computed bottom value */ + } + .control { + background: red; + margin-top: -80px; + height: 120px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="container"> + <div class="outer"> + <div class="inner"></div> + </div> + </div> + <div class="control"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-percentage-left-in-scrollable-2.html b/testing/web-platform/tests/css/CSS2/positioning/relpos-percentage-left-in-scrollable-2.html new file mode 100644 index 0000000000..0c7584d040 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-percentage-left-in-scrollable-2.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-left"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1002485"> +<p>There should be no red, and no scrollbar.</p> +<div id="container" style="overflow:auto; width:500px; background:red;"> + <div style="padding-right:90%; background:yellow;"> + <div style="position:relative; left:900%; background:cyan;"> + <div></div> + + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + container.scrollLeft = 123456; + test(()=> { + assert_equals(container.scrollLeft, 0); + }, "Left percentage resolved correctly for overflow contribution"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-percentage-left-in-scrollable.html b/testing/web-platform/tests/css/CSS2/positioning/relpos-percentage-left-in-scrollable.html new file mode 100644 index 0000000000..54856e7290 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-percentage-left-in-scrollable.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-left"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=908083"> +<p>There should be no red, and no scrollbar.</p> +<div id="container" style="overflow:auto; width:500px; background:red;"> + <div style="padding-right:90%; background:yellow;"> + <div style="position:relative; left:900%; width:50px; height:50px; background:cyan;"> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + container.scrollLeft = 123456; + test(()=> { + assert_equals(container.scrollLeft, 0); + }, "Left percentage resolved correctly for overflow contribution"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/positioning/relpos-percentage-top-in-scrollable.html b/testing/web-platform/tests/css/CSS2/positioning/relpos-percentage-top-in-scrollable.html new file mode 100644 index 0000000000..f4e7e2a839 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/relpos-percentage-top-in-scrollable.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-top"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#relative-positioning"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=908083"> +<p>There should be a green square below.</p> +<div style="position:relative; width:200px; height:200px;"> + <div id="container" style="overflow:hidden; position:absolute; top:0; left:0; bottom:0; right:0;"> + <div style="position:relative; top:100%; width:100px; height:100px; background:green;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + container.scrollTop = 123456; + test(()=> { + assert_equals(container.scrollTop, 100); + }, "Top percentage resolved correctly for overflow contribution"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-004-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-004-ref.xht new file mode 100644 index 0000000000..14d8891062 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-004-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {text-align: right;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + + <div><img src="support/blue15x15.png" width="5" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="5" height="96" 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/positioning/right-004.xht b/testing/web-platform/tests/css/CSS2/positioning/right-004.xht new file mode 100644 index 0000000000..26c42ef8b9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-004.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using pixels with a value of negative zero, -0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a negative zero length value in pixels." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: -0px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-005.xht b/testing/web-platform/tests/css/CSS2/positioning/right-005.xht new file mode 100644 index 0000000000..58e066c011 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-005.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using pixels with a value of zero, 0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a zero length value in pixels." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: 0px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-006.xht b/testing/web-platform/tests/css/CSS2/positioning/right-006.xht new file mode 100644 index 0000000000..5ea8caab07 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-006.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using pixels with a value of positive zero, +0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive zero length value in pixels." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: +0px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-007-ref.xht new file mode 100644 index 0000000000..2f331df3c3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-007-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {text-align: right;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div><img src="support/black15x15.png" width="3" height="96" 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/positioning/right-007.xht b/testing/web-platform/tests/css/CSS2/positioning/right-007.xht new file mode 100644 index 0000000000..5f3160ed68 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-007.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using pixels with a nominal value, 96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-007-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a nominal length value in pixels." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 3px solid red; + } + div div + { + border-right: 3px solid black; + margin-right: -99px; + right: 96px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-008.xht b/testing/web-platform/tests/css/CSS2/positioning/right-008.xht new file mode 100644 index 0000000000..c1e176a419 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-008.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using pixels with a positive nominal value, +96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-007-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive nominal length value in pixels." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 3px solid red; + } + div div + { + border-right: 3px solid black; + margin-right: -99px; + right: +96px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-016.xht b/testing/web-platform/tests/css/CSS2/positioning/right-016.xht new file mode 100644 index 0000000000..b1eb09197d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-016.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using points with a value of negative zero, -0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a negative zero length value in points." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: -0pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-017.xht b/testing/web-platform/tests/css/CSS2/positioning/right-017.xht new file mode 100644 index 0000000000..47299db63d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-017.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using points with a value of zero, 0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a zero length value in points." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: 0pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-018.xht b/testing/web-platform/tests/css/CSS2/positioning/right-018.xht new file mode 100644 index 0000000000..556bfb68f5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-018.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using points with a value of positive zero, +0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive zero length value in points." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: +0pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-019-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-019-ref.xht new file mode 100644 index 0000000000..9d153859d6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-019-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {text-align: right;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div><img src="support/black15x15.png" width="96" height="96" 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/positioning/right-019.xht b/testing/web-platform/tests/css/CSS2/positioning/right-019.xht new file mode 100644 index 0000000000..a610a79b59 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-019.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using points with a nominal value, 72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a nominal length value in points." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 72pt solid red; + } + div div + { + border-right: 72pt solid black; + margin-right: -144pt; + right: 72pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-020.xht b/testing/web-platform/tests/css/CSS2/positioning/right-020.xht new file mode 100644 index 0000000000..ee15a14cc7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-020.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using points with a positive nominal value, +72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive nominal length value in points." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 72pt solid red; + } + div div + { + border-right: 72pt solid black; + margin-right: -144pt; + right: +72pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-028.xht b/testing/web-platform/tests/css/CSS2/positioning/right-028.xht new file mode 100644 index 0000000000..5b31bb315f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-028.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using picas with a value of negative zero, -0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a negative zero length value in picas." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: -0pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-029.xht b/testing/web-platform/tests/css/CSS2/positioning/right-029.xht new file mode 100644 index 0000000000..44977cd899 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-029.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using picas with a value of zero, 0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a zero length value in picas." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: 0pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-030.xht b/testing/web-platform/tests/css/CSS2/positioning/right-030.xht new file mode 100644 index 0000000000..1fcce3dbea --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-030.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using picas with a value of positive zero, +0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive zero length value in picas." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: +0pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-031-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-031-ref.xht new file mode 100644 index 0000000000..d142224bbe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-031-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {text-align: right;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div><img src="support/black15x15.png" width="16" height="96" 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/positioning/right-031.xht b/testing/web-platform/tests/css/CSS2/positioning/right-031.xht new file mode 100644 index 0000000000..88fc6e3746 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-031.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using picas with a nominal value, 6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-031-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a nominal length value in picas." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 1pc solid red; + } + div div + { + border-right: 1pc solid black; + margin-right: -7pc; + right: 6pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-032.xht b/testing/web-platform/tests/css/CSS2/positioning/right-032.xht new file mode 100644 index 0000000000..205c728033 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-032.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using picas with a positive nominal value, +6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-031-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive nominal length value in picas." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 1pc solid red; + } + div div + { + border-right: 1pc solid black; + margin-right: -7pc; + right: +6pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-040.xht b/testing/web-platform/tests/css/CSS2/positioning/right-040.xht new file mode 100644 index 0000000000..e203cd04f1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-040.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using centimeters with a value of negative zero, -0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a negative zero length value in centimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: -0cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-041.xht b/testing/web-platform/tests/css/CSS2/positioning/right-041.xht new file mode 100644 index 0000000000..8db581b5eb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-041.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using centimeters with a value of zero, 0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a zero length value in centimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: 0cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-042.xht b/testing/web-platform/tests/css/CSS2/positioning/right-042.xht new file mode 100644 index 0000000000..8195daa08a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-042.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using centimeters with a value of positive zero, +0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive zero length value in centimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: +0cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-043.xht b/testing/web-platform/tests/css/CSS2/positioning/right-043.xht new file mode 100644 index 0000000000..5b7ff27408 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-043.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using centimeters with a nominal value, 2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a nominal length value in centimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 2.54cm solid red; + } + div div + { + border-right: 2.54cm solid black; + margin-right: -5.08cm; + right: 2.54cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-044.xht b/testing/web-platform/tests/css/CSS2/positioning/right-044.xht new file mode 100644 index 0000000000..9d7a340585 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-044.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using centimeters with a positive nominal value, +2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive nominal length value in centimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 2.54cm solid red; + } + div div + { + border-right: 2.54cm solid black; + margin-right: -5.08cm; + right: +2.54cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-052.xht b/testing/web-platform/tests/css/CSS2/positioning/right-052.xht new file mode 100644 index 0000000000..c7879e4c34 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-052.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using millimeters with a value of negative zero, -0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a negative zero length value in millimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: -0mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-053.xht b/testing/web-platform/tests/css/CSS2/positioning/right-053.xht new file mode 100644 index 0000000000..02ccbc48f8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-053.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using millimeters with a value of zero, 0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a zero length value in millimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: 0mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-054.xht b/testing/web-platform/tests/css/CSS2/positioning/right-054.xht new file mode 100644 index 0000000000..68af477d7c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-054.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using millimeters with a value of positive zero, +0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive zero length value in millimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: +0mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-055.xht b/testing/web-platform/tests/css/CSS2/positioning/right-055.xht new file mode 100644 index 0000000000..57781a9b60 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-055.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using millimeters with a nominal value, 25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a nominal length value in millimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 25.4mm solid red; + } + div div + { + border-right: 25.4mm solid black; + margin-right: -50.8mm; + right: 25.4mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-056.xht b/testing/web-platform/tests/css/CSS2/positioning/right-056.xht new file mode 100644 index 0000000000..6fc1acb8ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-056.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using millimeters with a positive nominal value, +25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive nominal length value in millimeters." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 25.4mm solid red; + } + div div + { + border-right: 25.4mm solid black; + margin-right: -50.8mm; + right: +25.4mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-064.xht b/testing/web-platform/tests/css/CSS2/positioning/right-064.xht new file mode 100644 index 0000000000..3c5767254d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-064.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using inches with a value of negative zero, -0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a negative zero length value in inches." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: -0in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-065.xht b/testing/web-platform/tests/css/CSS2/positioning/right-065.xht new file mode 100644 index 0000000000..dfd632821c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-065.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using inches with a value of zero, 0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a zero length value in inches." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: 0in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-066.xht b/testing/web-platform/tests/css/CSS2/positioning/right-066.xht new file mode 100644 index 0000000000..115f619134 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-066.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using inches with a value of positive zero, +0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive zero length value in inches." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: +0in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-067.xht b/testing/web-platform/tests/css/CSS2/positioning/right-067.xht new file mode 100644 index 0000000000..f86054de9c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-067.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using inches with a nominal value, 1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a nominal length value in inches." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 1in solid red; + } + div div + { + border-right: 1in solid black; + margin-right: -2in; + right: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-068.xht b/testing/web-platform/tests/css/CSS2/positioning/right-068.xht new file mode 100644 index 0000000000..b2cb8f7b51 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-068.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using inches with a positive nominal value, +1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive nominal length value in inches." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 1in solid red; + } + div div + { + border-right: 1in solid black; + margin-right: -2in; + right: +1in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-076.xht b/testing/web-platform/tests/css/CSS2/positioning/right-076.xht new file mode 100644 index 0000000000..82b8e3207b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-076.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using 'em' units with a value of negative zero, -0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a negative zero length value in 'em' units." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: -0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-077.xht b/testing/web-platform/tests/css/CSS2/positioning/right-077.xht new file mode 100644 index 0000000000..9fd67b79e5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-077.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using 'em' units with a value of zero, 0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a zero length value in 'em' units." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: 0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-078.xht b/testing/web-platform/tests/css/CSS2/positioning/right-078.xht new file mode 100644 index 0000000000..fe3eeaf170 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-078.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using 'em' units with a value of positive zero, +0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a positive zero length value in 'em' units." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: +0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-079-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-079-ref.xht new file mode 100644 index 0000000000..4dab0ebb24 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-079-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {text-align: right;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="96" 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/positioning/right-079.xht b/testing/web-platform/tests/css/CSS2/positioning/right-079.xht new file mode 100644 index 0000000000..f8c889f3d6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-079.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 Test: Right using 'em' units with a nominal value, 6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a nominal length value in 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + direction: rtl; + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-right: 1em solid red; + } + div div + { + border-right: 1em solid black; + margin-right: -7em; + right: 6em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-080.xht b/testing/web-platform/tests/css/CSS2/positioning/right-080.xht new file mode 100644 index 0000000000..4ca6880362 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-080.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 Test: Right using 'em' units with a positive nominal value, +6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a positive nominal length value in 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + direction: rtl; + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-right: 1em solid red; + } + div div + { + border-right: 1em solid black; + margin-right: -7em; + right: +6em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-088.xht b/testing/web-platform/tests/css/CSS2/positioning/right-088.xht new file mode 100644 index 0000000000..91afec1ea9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-088.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using 'ex' units with a value of negative zero, -0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a negative zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + direction: rtl; + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: -0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-089.xht b/testing/web-platform/tests/css/CSS2/positioning/right-089.xht new file mode 100644 index 0000000000..bb353dcab8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-089.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using 'ex' units with a value of zero, 0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + direction: rtl; + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: 0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-090.xht b/testing/web-platform/tests/css/CSS2/positioning/right-090.xht new file mode 100644 index 0000000000..3c95492c7f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-090.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using 'ex' units with a value of positive zero, +0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a positive zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + direction: rtl; + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: +0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-091.xht b/testing/web-platform/tests/css/CSS2/positioning/right-091.xht new file mode 100644 index 0000000000..f5f69240f5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-091.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 Test: Right using 'ex' units with a nominal value, 7.5ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a nominal length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + direction: rtl; + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-right: 96px solid red; + } + div div + { + border-right: 96px solid black; + margin-right: -12ex; + right: 6ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-092.xht b/testing/web-platform/tests/css/CSS2/positioning/right-092.xht new file mode 100644 index 0000000000..f193c96112 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-092.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 Test: Right using 'ex' units with a positive nominal value, +7.5ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-019-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'right' property sets a positive nominal length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + direction: rtl; + font: 20px/1 Ahem; + height: 1in; + position: relative; + } + #div1 + { + border-right: 96px solid red; + } + div div + { + border-right: 96px solid black; + margin-right: -12ex; + right: +6ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-100-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-100-ref.xht new file mode 100644 index 0000000000..9f240b4338 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-100-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {padding-left: 91px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + + <div><img src="support/blue15x15.png" width="5" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="5" height="96" 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/positioning/right-100.xht b/testing/web-platform/tests/css/CSS2/positioning/right-100.xht new file mode 100644 index 0000000000..994780988b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-100.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using percentages with a value of negative zero, -0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-100-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a negative zero length value in percentages." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + width: 1in; + } + div div + { + border-right: 5px solid blue; + right: -0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-101.xht b/testing/web-platform/tests/css/CSS2/positioning/right-101.xht new file mode 100644 index 0000000000..3d929c9627 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-101.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using percentages with a value of zero, 0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-100-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a zero length value in percentages." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + width: 1in; + } + div div + { + border-right: 5px solid blue; + right: 0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-102.xht b/testing/web-platform/tests/css/CSS2/positioning/right-102.xht new file mode 100644 index 0000000000..f113148104 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-102.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right using percentages with a value of positive zero, +0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-100-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive zero length value in percentages." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + width: 1in; + } + div div + { + border-right: 5px solid blue; + right: +0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-103-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-103-ref.xht new file mode 100644 index 0000000000..142e0dc584 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-103-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {padding-left: 96px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div><img src="support/black15x15.png" width="96" height="96" 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/positioning/right-103.xht b/testing/web-platform/tests/css/CSS2/positioning/right-103.xht new file mode 100644 index 0000000000..691dd3f23c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-103.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 Test: Right using percentages with a nominal value, 100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-103-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a nominal length value in percentages." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 1in solid red; + width: 1in; + } + div div + { + border-right: 1in solid black; + margin-right: -2in; + right: 100%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-104.xht b/testing/web-platform/tests/css/CSS2/positioning/right-104.xht new file mode 100644 index 0000000000..369a68be28 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-104.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 Test: Right using percentages with a positive nominal value, +100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-103-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive nominal length value in percentages." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 1in solid red; + width: 1in; + } + div div + { + border-right: 1in solid black; + margin-right: -2in; + right: +100%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-109.xht b/testing/web-platform/tests/css/CSS2/positioning/right-109.xht new file mode 100644 index 0000000000..b3af32c7d0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-109.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right with a value of negative zero and no units, -0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a negative zero length value with no units." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: -0; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-110.xht b/testing/web-platform/tests/css/CSS2/positioning/right-110.xht new file mode 100644 index 0000000000..665fe13d3a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-110.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right with a value of zero and no units, 0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a zero length value with no units." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: 0; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-111.xht b/testing/web-platform/tests/css/CSS2/positioning/right-111.xht new file mode 100644 index 0000000000..9e7b3e5289 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-111.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right with a value of positive zero and no units, +0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a positive zero length value with no units." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: +0; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-112.xht b/testing/web-platform/tests/css/CSS2/positioning/right-112.xht new file mode 100644 index 0000000000..20d74d910b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-112.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right with a value of 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-004-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a value of 'auto'." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #div1 + { + border-right: 5px solid orange; + } + div div + { + border-right: 5px solid blue; + right: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-113.xht b/testing/web-platform/tests/css/CSS2/positioning/right-113.xht new file mode 100644 index 0000000000..338de0f59a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-113.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right with a value of 'inherit'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-103-ref.xht" /> + + <meta name="assert" content="The 'right' property sets a value of 'inherit'." /> + <style type="text/css"> + div + { + direction: rtl; + height: 1in; + position: relative; + } + #wrapper + { + width: 5in; + } + #div1 + { + border-right: 1in solid red; + right: 100%; + width: 1in; + } + div div + { + border-right: 1in solid black; + margin-right: -2in; + right: inherit; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="wrapper"> + <div id="div1"> + <div></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-001-ref.xht new file mode 100644 index 0000000000..c662be5895 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-001-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin-right: 0;} + + div {text-align: right;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a green square on the right side of the page.</p> + + <div><img src="support/1x1-green.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-001.xht new file mode 100644 index 0000000000..fb790ba7c9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-001.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'table-row-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'table-row-group'." /> + <style type="text/css"> + #test + { + right: 0; + display: table-row-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-002.xht new file mode 100644 index 0000000000..964cb2a6f0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-002.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'table-header-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'table-header-group'." /> + <style type="text/css"> + #test + { + background: green; + right: 0; + display: table-header-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-003.xht new file mode 100644 index 0000000000..405a3c80d9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-003.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'table-footer-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'table-footer-group'." /> + <style type="text/css"> + #test + { + background: green; + right: 0; + display: table-footer-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-004.xht new file mode 100644 index 0000000000..dd12aa6ab5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-004.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'table-row'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'table-row'." /> + <style type="text/css"> + #test + { + background: green; + right: 0; + display: table-row; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="test"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-005.xht new file mode 100644 index 0000000000..926f231fb2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-005.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'table-column-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'table-column-group'." /> + <style type="text/css"> + #test + { + background: green; + right: 0; + display: table-column-group; + height: 1in; + position: absolute; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-006.xht new file mode 100644 index 0000000000..4ba5f2f013 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-006.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'table-column'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'table-column'." /> + <style type="text/css"> + #test + { + background: green; + right: 0; + display: table-column; + height: 1in; + position: absolute; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-007.xht new file mode 100644 index 0000000000..ff53c752f5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-007.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'table-cell'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'table-cell'." /> + <style type="text/css"> + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + right: 0; + display: table-cell; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-008.xht new file mode 100644 index 0000000000..7d0e199dc6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-008.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to inline</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'right' property applies to elements with a display of inline." /> + <style type="text/css"> + div + { + background: green; + right: 0; + display: inline; + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there is a green stripe on the right side of the page.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-009.xht new file mode 100644 index 0000000000..37c6ae965e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-009.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of block." /> + <style type="text/css"> + span + { + background: green; + right: 0; + display: block; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div> + <span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-010.xht new file mode 100644 index 0000000000..1958f0b303 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-010.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to list-item</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'right' property applies to elements with a display of list-item." /> + <style type="text/css"> + div + { + background: green; + right: 0; + display: list-item; + height: 1in; + position: absolute; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green square at the right side of the page and a marker bullet on its left-hand side.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-012.xht new file mode 100644 index 0000000000..cd8c5043b2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-012.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to inline-block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of inline-block." /> + <style type="text/css"> + span#inline-block + { + right: 0; + display: inline-block; + position: absolute; + } + + span.block-descendant + { + background: green; + display: block; + height: 0.5in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div> + <span id="inline-block"> + <span class="block-descendant"></span> + <span class="block-descendant"></span> + </span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-013.xht new file mode 100644 index 0000000000..e2da8df857 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-013.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'table'." /> + <style type="text/css"> + #table + { + background: green; + right: 0; + display: table; + table-layout: fixed; + height: 1in; + position: absolute; + width: 1in; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-014.xht new file mode 100644 index 0000000000..2094bb046d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-014.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'inline-table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'inline-table'." /> + <style type="text/css"> + #table + { + background: green; + right: 0; + display: inline-table; + table-layout: fixed; + height: 1in; + position: absolute; + width: 1in; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-015.xht new file mode 100644 index 0000000000..a2f2deb783 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-applies-to-015.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right applied to element with 'display' set to 'table-caption'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'right' property applies to elements with a display of 'table-caption'." /> + <style type="text/css"> + #caption + { + background: green; + right: 0; + display: table-caption; + height: 1in; + position: absolute; + width: 1in; + } + #table + { + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a green square on the right side of the page.</p> + <div id="table"> + <div id="caption"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-offset-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-offset-001-ref.xht new file mode 100644 index 0000000000..d7715d83ba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-offset-001-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div#inline-block {display: inline-block;} + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a blue square with its top-left corner missing.</p> + + <div id="inline-block"> + <div><img src="support/1x1-white.png" width="50" height="50" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="50" height="50" alt="Image download support must be enabled" /></div> + <div><img src="support/blue15x15.png" width="50" height="50" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="50" height="50" alt="Image download support must be enabled" /></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-offset-001.xht b/testing/web-platform/tests/css/CSS2/positioning/right-offset-001.xht new file mode 100644 index 0000000000..fb04ce88bf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-offset-001.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: 'right' property defines the offset from the right edge of the containing block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-offset-001-ref.xht" /> + + <meta name="assert" content="The 'right' property, for absolute positioning, specifies the offset of the element in relation to the containing block's right edge. The containing block of an absolutely positioned element is formed by the padding box of its nearest (closest) positioned ancestor element." /> + <style type="text/css"> + div + { + height: 100px; + position: relative; + width: 100px; + } + #div1 + { + background: blue; + } + #div2 + { + background: white; + height: 50px; + position: absolute; + right: 50px; + top: 0; + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its top-left corner missing.</p> + <div> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-offset-002.xht b/testing/web-platform/tests/css/CSS2/positioning/right-offset-002.xht new file mode 100644 index 0000000000..7a52e9a5d3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-offset-002.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position 'right' property defines the offset from the right of the box itself for relative positioning</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-offset-001-ref.xht" /> + + <meta name="assert" content="The 'right' property, for relative positioning, specifies the offset of the box itself from the right toward the left. If 'left' is 'auto', then its used value is minus the value of 'right' in which case the box will move from the right toward the left by the value of 'right'." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 100px; + position: relative; + width: 100px; + } + div div + { + background: white; + height: 50px; + position: relative; + right: -50px; + /* In this testcase, right offset is -50px; + so, it will move toward the right from its + normal in-flow position by a value of 50px. */ + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its top-right corner missing.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-offset-003.xht b/testing/web-platform/tests/css/CSS2/positioning/right-offset-003.xht new file mode 100644 index 0000000000..afb12098f6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-offset-003.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: 'right' property defines the offset from the right edge of the containing block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-offset-001-ref.xht" /> + + <meta name="assert" content="The 'right' property, for absolute positioning, specifies the offset of the element in relation to the containing block's right edge. The containing block of an absolutely positioned element is formed by the padding box of its nearest (closest) positioned ancestor element." /> + + <style type="text/css"> + #container + { + height: 100px; + padding-right: 25px; + position: relative; + width: 100px; + } + #div1 + { + background: white; + height: 50px; + position: absolute; + right: 75px; + width: 50px; + } + #div2 + { + background: blue; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its top-left corner missing.</p> + <div id="container"> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/right-offset-004.xht b/testing/web-platform/tests/css/CSS2/positioning/right-offset-004.xht new file mode 100644 index 0000000000..f6d3273577 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-offset-004.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: right box offset - 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="../reference/ref-filled-green-100px-square.xht" /> + + <meta content="image" name="flags" /> + <meta content="The 'right' property, for relative positioning, specifies 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#rel-pos-overlapping-green + { + position: relative; + right: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div><img src="support/100x100-red.png" width="100" height="100" alt="Image download support must be enabled" /><img id="rel-pos-overlapping-green" src="support/swatch-green.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/positioning/right-offset-percentage-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/right-offset-percentage-001-ref.xht new file mode 100644 index 0000000000..32d5a22aa3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-offset-percentage-001-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: black solid medium; + height: 200px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a blue square is in the top-left corner of an hollow black rectangle.</p> + + <div><img src="support/blue15x15.png" width="50" height="50" 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/positioning/right-offset-percentage-001.xht b/testing/web-platform/tests/css/CSS2/positioning/right-offset-percentage-001.xht new file mode 100644 index 0000000000..99b1c94938 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/right-offset-percentage-001.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right offset using percentage</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-25 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="right-offset-percentage-001-ref.xht" /> + + <meta name="assert" content="Percentage offset values for the 'right' property are based off the width of the containing block." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 100px; + } + div div + { + background: blue; + height: 50px; + margin-left: 50px; + position: absolute; + right: 50%; + width: 50px; + } + </style> + </head> + <body> + <p>Test passes if a blue square is in the top-left corner of an hollow black rectangle.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/100x100-lime.png b/testing/web-platform/tests/css/CSS2/positioning/support/100x100-lime.png Binary files differnew file mode 100644 index 0000000000..1b94770080 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/100x100-lime.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/100x100-red.png b/testing/web-platform/tests/css/CSS2/positioning/support/100x100-red.png Binary files differnew file mode 100644 index 0000000000..57bf3ddc52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/100x100-red.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/1x1-green.png b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-green.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/1x1-lime.png b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/1x1-maroon.png b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/1x1-navy.png b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/1x1-red.png b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-red.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/1x1-white.png b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/1x1-white.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/60x60-gg-rr.png b/testing/web-platform/tests/css/CSS2/positioning/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/60x60-green.png b/testing/web-platform/tests/css/CSS2/positioning/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/60x60-green.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/a-green.css b/testing/web-platform/tests/css/CSS2/positioning/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/b-green.css b/testing/web-platform/tests/css/CSS2/positioning/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/black15x15.png b/testing/web-platform/tests/css/CSS2/positioning/support/black15x15.png Binary files differnew file mode 100644 index 0000000000..b1bbef2cd5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/black15x15.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/blue15x15.png b/testing/web-platform/tests/css/CSS2/positioning/support/blue15x15.png Binary files differnew file mode 100644 index 0000000000..89de32fdb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/blue15x15.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/blue96x96.png b/testing/web-platform/tests/css/CSS2/positioning/support/blue96x96.png Binary files differnew file mode 100644 index 0000000000..820f8cace2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/blue96x96.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/c-red.css b/testing/web-platform/tests/css/CSS2/positioning/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/cat.png b/testing/web-platform/tests/css/CSS2/positioning/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/cat.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/diamond.png b/testing/web-platform/tests/css/CSS2/positioning/support/diamond.png Binary files differnew file mode 100644 index 0000000000..51112efc7c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/diamond.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/green-rectangle-50wideBy10tall.png b/testing/web-platform/tests/css/CSS2/positioning/support/green-rectangle-50wideBy10tall.png Binary files differnew file mode 100644 index 0000000000..9f43666ee5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/green-rectangle-50wideBy10tall.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/green15x15.png b/testing/web-platform/tests/css/CSS2/positioning/support/green15x15.png Binary files differnew file mode 100644 index 0000000000..51741584a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/green15x15.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/green_box.png b/testing/web-platform/tests/css/CSS2/positioning/support/green_box.png Binary files differnew file mode 100644 index 0000000000..6ed4aa506e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/green_box.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/CSS2/positioning/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/pattern-tr.png b/testing/web-platform/tests/css/CSS2/positioning/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/red_box.png b/testing/web-platform/tests/css/CSS2/positioning/support/red_box.png Binary files differnew file mode 100644 index 0000000000..57bf3ddc52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/red_box.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/ring.png b/testing/web-platform/tests/css/CSS2/positioning/support/ring.png Binary files differnew file mode 100644 index 0000000000..061bb94eba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/ring.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/square-purple.png b/testing/web-platform/tests/css/CSS2/positioning/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/square-purple.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/square-teal.png b/testing/web-platform/tests/css/CSS2/positioning/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/square-teal.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/square-white.png b/testing/web-platform/tests/css/CSS2/positioning/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/square-white.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/swatch-blue.png b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/swatch-green.png b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-green.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/swatch-lime.png b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/swatch-orange.png b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/swatch-red.png b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-red.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/swatch-white.png b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-white.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/swatch-yellow.png b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/test-bl.png b/testing/web-platform/tests/css/CSS2/positioning/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/test-bl.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/test-br.png b/testing/web-platform/tests/css/CSS2/positioning/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/test-br.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/test-outer.png b/testing/web-platform/tests/css/CSS2/positioning/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/test-outer.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/test-tl.png b/testing/web-platform/tests/css/CSS2/positioning/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/test-tl.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/support/test-tr.png b/testing/web-platform/tests/css/CSS2/positioning/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/support/test-tr.png diff --git a/testing/web-platform/tests/css/CSS2/positioning/toogle-abspos-on-relpos-inline-child.html b/testing/web-platform/tests/css/CSS2/positioning/toogle-abspos-on-relpos-inline-child.html new file mode 100644 index 0000000000..7ea2a25bf5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/toogle-abspos-on-relpos-inline-child.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=732397"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#containing-block-details"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:50px; height:50px; padding-left:50px; padding-top:50px; background:red;"> + <span style="position:relative;"> + <div id="victim" style="position:absolute; top:-50px; left:-50px; width:100px; height:100px; background:green;"></div> + </span> +</div> +<script> + document.body.offsetTop; + victim.style.position = "static"; + document.body.offsetTop; + victim.style.position = "absolute"; +</script> diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-004.xht b/testing/web-platform/tests/css/CSS2/positioning/top-004.xht new file mode 100644 index 0000000000..119489dd61 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-004.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using pixels with a value of negative zero, -0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a negative zero length value in pixels." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: -0px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-005.xht b/testing/web-platform/tests/css/CSS2/positioning/top-005.xht new file mode 100644 index 0000000000..68a860ae15 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-005.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using pixels with a value of zero, 0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a zero length value in pixels." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: 0px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-006.xht b/testing/web-platform/tests/css/CSS2/positioning/top-006.xht new file mode 100644 index 0000000000..151a05646a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-006.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using pixels with a value of positive zero, +0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a positive zero length value in pixels." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: +0px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-007-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/top-007-ref.xht new file mode 100644 index 0000000000..943292063f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-007-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 3px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-007.xht b/testing/web-platform/tests/css/CSS2/positioning/top-007.xht new file mode 100644 index 0000000000..8ced33f292 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-007.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using pixels with a nominal value, 96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-007-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a nominal length value in pixels." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: 3px solid red; + } + #div2 + { + border-top: 3px solid black; + margin-top: -99px; + top: 96px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-008.xht b/testing/web-platform/tests/css/CSS2/positioning/top-008.xht new file mode 100644 index 0000000000..86b56e7b3a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-008.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using pixels with a positive nominal value, +96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-007-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a positive nominal length value in pixels." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: 3px solid red; + } + #div2 + { + border-top: 3px solid black; + margin-top: -99px; + top: +96px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-016.xht b/testing/web-platform/tests/css/CSS2/positioning/top-016.xht new file mode 100644 index 0000000000..ac139d7e55 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-016.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using points with a value of negative zero, -0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a negative zero length value in points." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: -0pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-017.xht b/testing/web-platform/tests/css/CSS2/positioning/top-017.xht new file mode 100644 index 0000000000..7a1a32584a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-017.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using points with a value of zero, 0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a zero length value in points." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: 0pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-018.xht b/testing/web-platform/tests/css/CSS2/positioning/top-018.xht new file mode 100644 index 0000000000..7ce2bc39c2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-018.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using points with a value of positive zero, +0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a positive zero length value in points." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: +0pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-019-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/top-019-ref.xht new file mode 100644 index 0000000000..5dbb930ac5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-019-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-019.xht b/testing/web-platform/tests/css/CSS2/positioning/top-019.xht new file mode 100644 index 0000000000..15506da7f0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-019.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using points with a nominal value, 72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a nominal length value in points." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -72pt; + } + #div2 + { + background: red; + height: 72pt; + margin-top: 72pt; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 72pt solid black; + top: 72pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-020.xht b/testing/web-platform/tests/css/CSS2/positioning/top-020.xht new file mode 100644 index 0000000000..256fbc54b5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-020.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using points with a positive nominal value, +72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a positive nominal length value in points." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -72pt; + } + #div2 + { + background: red; + height: 72pt; + margin-top: 72pt; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 72pt solid black; + top: +72pt; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-028.xht b/testing/web-platform/tests/css/CSS2/positioning/top-028.xht new file mode 100644 index 0000000000..2b0536611a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-028.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using picas with a value of negative zero, -0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a negative zero length value in picas." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: -0pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-029.xht b/testing/web-platform/tests/css/CSS2/positioning/top-029.xht new file mode 100644 index 0000000000..b60a869252 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-029.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using picas with a value of zero, 0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a zero length value in picas." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: 0pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-030.xht b/testing/web-platform/tests/css/CSS2/positioning/top-030.xht new file mode 100644 index 0000000000..15631f3553 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-030.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using picas with a value of positive zero, +0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a positive zero length value in picas." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: +0pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-031.xht b/testing/web-platform/tests/css/CSS2/positioning/top-031.xht new file mode 100644 index 0000000000..12d99cbd29 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-031.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using picas with a nominal value, 6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-007-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a nominal length value in picas." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -6pc; + } + #div2 + { + background: red; + height: 3px; + margin-top: 6pc; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 3px solid black; + top: 6pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-032.xht b/testing/web-platform/tests/css/CSS2/positioning/top-032.xht new file mode 100644 index 0000000000..b83dacb01b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-032.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using picas with a positive nominal value, +6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-007-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a positive nominal length value in picas." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -6pc; + } + #div2 + { + background: red; + height: 3px; + margin-top: 6pc; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 3px solid black; + top: +6pc; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-040.xht b/testing/web-platform/tests/css/CSS2/positioning/top-040.xht new file mode 100644 index 0000000000..55037242ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-040.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using centimeters with a value of negative zero, -0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a negative zero length value in centimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: -0cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-041.xht b/testing/web-platform/tests/css/CSS2/positioning/top-041.xht new file mode 100644 index 0000000000..8979cd19a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-041.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using centimeters with a value of zero, 0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a zero length value in centimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: 0cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-042.xht b/testing/web-platform/tests/css/CSS2/positioning/top-042.xht new file mode 100644 index 0000000000..9f8c5f615f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-042.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using centimeters with a value of positive zero, +0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a positive zero length value in centimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: +0cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-043.xht b/testing/web-platform/tests/css/CSS2/positioning/top-043.xht new file mode 100644 index 0000000000..3321f6c8fb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-043.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using centimeters with a nominal value, 2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a nominal length value in centimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -2.54cm; + } + #div2 + { + background: red; + height: 2.54cm; + margin-top: 2.54cm; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 2.54cm solid black; + top: 2.54cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-044.xht b/testing/web-platform/tests/css/CSS2/positioning/top-044.xht new file mode 100644 index 0000000000..8f2768606c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-044.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using centimeters with a positive nominal value, +2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a positive nominal length value in centimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -2.54cm; + } + #div2 + { + background: red; + height: 2.54cm; + margin-top: 2.54cm; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 2.54cm solid black; + top: +2.54cm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-052.xht b/testing/web-platform/tests/css/CSS2/positioning/top-052.xht new file mode 100644 index 0000000000..756c0fad7d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-052.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using millimeters with a value of negative zero, -0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a negative zero length value in millimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: -0mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-053.xht b/testing/web-platform/tests/css/CSS2/positioning/top-053.xht new file mode 100644 index 0000000000..d62821b134 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-053.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using millimeters with a value of zero, 0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a zero length value in millimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: 0mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-054.xht b/testing/web-platform/tests/css/CSS2/positioning/top-054.xht new file mode 100644 index 0000000000..4203a76826 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-054.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using millimeters with a value of positive zero, +0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a positive zero length value in millimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: +0mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-055.xht b/testing/web-platform/tests/css/CSS2/positioning/top-055.xht new file mode 100644 index 0000000000..86a369c606 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-055.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using millimeters with a nominal value, 25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a nominal length value in millimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -25.4mm; + } + #div2 + { + background: red; + height: 25.4mm; + margin-top: 25.4mm; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 25.4mm solid black; + top: 25.4mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-056.xht b/testing/web-platform/tests/css/CSS2/positioning/top-056.xht new file mode 100644 index 0000000000..b90afa3fe0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-056.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using millimeters with a positive nominal value, +25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a positive nominal length value in millimeters." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -25.4mm; + } + #div2 + { + background: red; + height: 25.4mm; + margin-top: 25.4mm; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 25.4mm solid black; + top: +25.4mm; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-064.xht b/testing/web-platform/tests/css/CSS2/positioning/top-064.xht new file mode 100644 index 0000000000..7e8ace167c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-064.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using inches with a value of negative zero, -0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a negative zero length value in inches." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: -0in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-065.xht b/testing/web-platform/tests/css/CSS2/positioning/top-065.xht new file mode 100644 index 0000000000..ece703a1d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-065.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using inches with a value of zero, 0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a zero length value in inches." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: 0in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-066.xht b/testing/web-platform/tests/css/CSS2/positioning/top-066.xht new file mode 100644 index 0000000000..b3d69c2fae --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-066.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using inches with a value of positive zero, +0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a positive zero length value in inches." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: +0in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-067.xht b/testing/web-platform/tests/css/CSS2/positioning/top-067.xht new file mode 100644 index 0000000000..f23d4bcc80 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-067.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using inches with a nominal value, 1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a nominal length value in inches." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -1in; + } + #div2 + { + background: red; + height: 1in; + margin-top: 1in; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 1in solid black; + top: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-068.xht b/testing/web-platform/tests/css/CSS2/positioning/top-068.xht new file mode 100644 index 0000000000..e8d151a404 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-068.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using inches with a positive nominal value, +1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a positive nominal length value in inches." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + margin-top: -1in; + } + #div2 + { + background: red; + height: 1in; + margin-top: 1in; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 1in solid black; + top: +1in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-076.xht b/testing/web-platform/tests/css/CSS2/positioning/top-076.xht new file mode 100644 index 0000000000..ef09202a79 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-076.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'em' units with a value of negative zero, -0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a negative zero length value in 'em' units." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: -0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-077.xht b/testing/web-platform/tests/css/CSS2/positioning/top-077.xht new file mode 100644 index 0000000000..deaa882ab8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-077.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'em' units with a value of zero, 0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a zero length value in 'em' units." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: 0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-078.xht b/testing/web-platform/tests/css/CSS2/positioning/top-078.xht new file mode 100644 index 0000000000..6429ff4013 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-078.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'em' units with a value of positive zero, +0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a positive zero length value in 'em' units." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: +0em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-079-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/top-079-ref.xht new file mode 100644 index 0000000000..52726044f4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-079-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 120px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-079.xht b/testing/web-platform/tests/css/CSS2/positioning/top-079.xht new file mode 100644 index 0000000000..71208d2664 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-079.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'em' units with a nominal value, 6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a nominal length value in 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + margin-top: -6em; + } + #div2 + { + background: red; + height: 6em; + margin-top: 6em; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 6em solid black; + top: 6em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-080.xht b/testing/web-platform/tests/css/CSS2/positioning/top-080.xht new file mode 100644 index 0000000000..439945b006 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-080.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'em' units with a positive nominal value, +6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a positive nominal length value in 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + margin-top: -6em; + } + #div2 + { + background: red; + height: 6em; + margin-top: 6em; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 6em solid black; + top: +6em; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-088.xht b/testing/web-platform/tests/css/CSS2/positioning/top-088.xht new file mode 100644 index 0000000000..fb323b2e24 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-088.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'ex' units with a value of negative zero, -0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a negative zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: -0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-089.xht b/testing/web-platform/tests/css/CSS2/positioning/top-089.xht new file mode 100644 index 0000000000..ed4e58501e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-089.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'ex' units with a value of zero, 0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: 0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-090.xht b/testing/web-platform/tests/css/CSS2/positioning/top-090.xht new file mode 100644 index 0000000000..482a46b4f9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-090.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'ex' units with a value of positive zero, +0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a positive zero length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + border-top: blue solid 5px; + } + #div2 + { + border-top: orange solid 5px; + top: +0ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-091.xht b/testing/web-platform/tests/css/CSS2/positioning/top-091.xht new file mode 100644 index 0000000000..6b46c3f19a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-091.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'ex' units with a nominal value, 6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a nominal length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + margin-top: -6ex; + } + #div2 + { + background: red; + height: 6ex; + margin-top: 6ex; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 6ex solid black; + top: 6ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-092.xht b/testing/web-platform/tests/css/CSS2/positioning/top-092.xht new file mode 100644 index 0000000000..939f93eff6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-092.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using 'ex' units with a positive nominal value, +6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'top' property sets a positive nominal length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div1 + { + margin-top: -6ex; + } + #div2 + { + background: red; + height: 6ex; + margin-top: 6ex; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 6ex solid black; + top: +6ex; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-100.xht b/testing/web-platform/tests/css/CSS2/positioning/top-100.xht new file mode 100644 index 0000000000..50747c88f2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-100.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using percentages with a value of negative zero, -0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a negative zero length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + height: 1in; + } + #div2 + { + border-bottom: orange solid 5px; + top: -0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-101.xht b/testing/web-platform/tests/css/CSS2/positioning/top-101.xht new file mode 100644 index 0000000000..9cd038dff1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-101.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using percentages with a value of zero, 0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a zero length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + height: 1in; + } + #div2 + { + border-bottom: orange solid 5px; + top: 0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-102.xht b/testing/web-platform/tests/css/CSS2/positioning/top-102.xht new file mode 100644 index 0000000000..d504de9152 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-102.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top using percentages with a value of positive zero, +0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a positive zero length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-top: blue solid 5px; + height: 1in; + } + #div2 + { + border-bottom: orange solid 5px; + top: +0%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-103.xht b/testing/web-platform/tests/css/CSS2/positioning/top-103.xht new file mode 100644 index 0000000000..39c9672b5b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-103.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: Top using percentages with a nominal value, 100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a nominal length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + height: 1in; + margin-top: -1in; + } + #div2 + { + background: red; + height: 1in; + margin-top: 1in; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 1in solid black; + top: 100%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-104.xht b/testing/web-platform/tests/css/CSS2/positioning/top-104.xht new file mode 100644 index 0000000000..458f26bdb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-104.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: Top using percentages with a positive nominal value, +100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-019-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a positive nominal length value in percentages." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + height: 1in; + margin-top: -1in; + } + #div2 + { + background: red; + height: 1in; + margin-top: 1in; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 1in solid black; + top: +100%; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-109.xht b/testing/web-platform/tests/css/CSS2/positioning/top-109.xht new file mode 100644 index 0000000000..58fd8efdd9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-109.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top with a value of negative zero and no units, -0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a negative zero length value with no units." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-bottom: orange solid 5px; + } + #div2 + { + border-bottom: blue solid 5px; + top: -0; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-110.xht b/testing/web-platform/tests/css/CSS2/positioning/top-110.xht new file mode 100644 index 0000000000..a834a79650 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-110.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top with a value of zero and no units, 0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a zero length value with no units." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-bottom: orange solid 5px; + } + #div2 + { + border-bottom: blue solid 5px; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-111.xht b/testing/web-platform/tests/css/CSS2/positioning/top-111.xht new file mode 100644 index 0000000000..9f43620d4d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-111.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top with a value of positive zero and no units, +0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a positive zero length value with no units." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-bottom: orange solid 5px; + } + #div2 + { + border-bottom: blue solid 5px; + top: +0; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-112.xht b/testing/web-platform/tests/css/CSS2/positioning/top-112.xht new file mode 100644 index 0000000000..bf39bddb46 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-112.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top with a value of 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="../reference/ref-no-vert-space-between.xht" /> + + <meta name="assert" content="The 'top' property sets a value of 'auto'." /> + <style type="text/css"> + div + { + position: relative; + } + #div1 + { + border-bottom: orange solid 5px; + } + #div2 + { + border-bottom: blue solid 5px; + top: auto; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p> + <div id="div1"> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-113-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/top-113-ref.xht new file mode 100644 index 0000000000..7f7f118b2c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-113-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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: black; + height: 96px; + margin-top: 112px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-113.xht b/testing/web-platform/tests/css/CSS2/positioning/top-113.xht new file mode 100644 index 0000000000..caaf758f66 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-113.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top with a value of 'inherit'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-113-ref.xht" /> + + <meta name="assert" content="The 'top' property sets a value of 'inherit', inheriting the value from the parent element." /> + <style type="text/css"> + body + { + height: 1in; + } + div + { + position: relative; + } + #div1 + { + height: 1in; + margin-top: -1in; + top: 100%; + } + #div2 + { + background: red; + height: 1in; + margin-top: 1in; + position: absolute; + width: 100%; + } + #div3 + { + border-bottom: 1in solid black; + top: inherit; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-001-ref.xht new file mode 100644 index 0000000000..6c513cfd20 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-001-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin-top: 0px;} + + div + { + background-color: green; + height: 96px; + width: 96px; + } + + p {margin-top: 48px;} + ]]></style> + + </head> + + <body> + + <div></div> + + <p>Test passes if there is a filled green square at the top of the page.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-001.xht new file mode 100644 index 0000000000..d806602531 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-001.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'table-row-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'table-row-group'." /> + <style type="text/css"> + #test + { + top: 0; + display: table-row-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + display: table-cell; + height: 1in; + width: 1in; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-002.xht new file mode 100644 index 0000000000..56e079851f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-002.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'table-header-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'table-header-group'." /> + <style type="text/css"> + #test + { + background: green; + top: 0; + display: table-header-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-003.xht new file mode 100644 index 0000000000..20f6eceaa9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-003.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'table-footer-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'table-footer-group'." /> + <style type="text/css"> + #test + { + background: green; + top: 0; + display: table-footer-group; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-004.xht new file mode 100644 index 0000000000..161ce0c150 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-004.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'table-row'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'table-row'." /> + <style type="text/css"> + #test + { + background: green; + top: 0; + display: table-row; + position: absolute; + } + #table + { + display: table; + table-layout: fixed; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="test"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-005.xht new file mode 100644 index 0000000000..b84a67e8f3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-005.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'table-column-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'table-column-group'." /> + <style type="text/css"> + #test + { + background: green; + top: 0; + display: table-column-group; + height: 1in; + position: absolute; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-006.xht new file mode 100644 index 0000000000..dc09f7e9db --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-006.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'table-column'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'table-column'." /> + <style type="text/css"> + #test + { + background: green; + top: 0; + display: table-column; + height: 1in; + position: absolute; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-007.xht new file mode 100644 index 0000000000..9768bc2ae7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-007.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'table-cell'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'table-cell'." /> + <style type="text/css"> + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: green; + top: 0; + display: table-cell; + height: 1in; + position: absolute; + width: 1in; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-008.xht new file mode 100644 index 0000000000..52aa0c4cb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-008.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to inline</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'top' property applies to elements with a display of inline." /> + <style type="text/css"> + div + { + background: green; + top: 0; + display: inline; + position: absolute; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a green stripe at the top of the page.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-009.xht new file mode 100644 index 0000000000..0d0413baf7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-009.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of block." /> + <style type="text/css"> + span + { + background: green; + top: 0; + display: block; + height: 1in; + position: absolute; + width: 1in; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div> + <span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-010.xht new file mode 100644 index 0000000000..63c54b6990 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-010.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to list-item</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <meta name="assert" content="The 'top' property applies to elements with a display of list-item." /> + <style type="text/css"> + body + { + margin-left: 1em; + } + div + { + background: green; + top: 0; + display: list-item; + height: 1in; + position: absolute; + width: 1in; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page and a marker bullet on its left-hand side.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-012.xht new file mode 100644 index 0000000000..53820c9f8b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-012.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to inline-block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of inline-block." /> + <style type="text/css"> + span#inline-block + { + top: 0; + display: inline-block; + position: absolute; + } + + span.block-descendant + { + background: green; + display: block; + height: 0.5in; + width: 1in; + } + + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + + <div> + <span id="inline-block"> + <span class="block-descendant"></span> + <span class="block-descendant"></span> + </span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-013.xht new file mode 100644 index 0000000000..794c6c4633 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-013.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'table'." /> + <style type="text/css"> + #table + { + background: green; + top: 0; + display: table; + table-layout: fixed; + height: 1in; + position: absolute; + width: 1in; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-014.xht new file mode 100644 index 0000000000..e434f8db2f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-014.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'inline-table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'inline-table'." /> + <style type="text/css"> + #table + { + background: green; + display: inline-table; + height: 1in; + position: absolute; + table-layout: fixed; + top: 0; + width: 1in; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-015.xht new file mode 100644 index 0000000000..7b0ed4b920 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-applies-to-015.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top applied to element with 'display' set to 'table-caption'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'top' property applies to elements with a display of 'table-caption'." /> + <style type="text/css"> + #caption + { + background: green; + top: 0; + display: table-caption; + height: 1in; + position: absolute; + width: 1in; + } + #table + { + display: table; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + p + { + margin-top: 1.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square at the top of the page.</p> + <div id="table"> + <div id="caption"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-offset-001.xht b/testing/web-platform/tests/css/CSS2/positioning/top-offset-001.xht new file mode 100644 index 0000000000..9f6eb162be --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-offset-001.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 Test: Position 'top' property defines the offset from the top edge of the containing block for absolute positioning</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-offset-001-ref.xht" /> + + <meta name="assert" content="The 'top' property, for absolute positioning, specifies the offset of the element in relation to the containing block's top edge. The containing block of an absolutely positioned element is formed by the padding box of its nearest (closest) positioned ancestor element." /> + <style type="text/css"> + div + { + height: 1in; + position: relative; + width: 1in; + } + #div1 + { + background: blue; + } + #div2 + { + background: white; + height: 0.5in; + position: absolute; + top: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its bottom-left corner missing.</p> + <div> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-offset-002.xht b/testing/web-platform/tests/css/CSS2/positioning/top-offset-002.xht new file mode 100644 index 0000000000..dda1158778 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-offset-002.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position 'top' offset property - absolute length value and relative positioning</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="bottom-offset-001-ref.xht" /> + + <meta name="assert" content="The 'top' property, when using an absolute length value (not percentage) for relative positioning, specifies the offset of the box itself." /> + <style type="text/css"> + #div1 + { + background: blue; + height: 1in; + width: 1in; + } + div div + { + background: white; + height: 0.5in; + position: relative; + top: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its bottom-left corner missing.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-offset-003-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/top-offset-003-ref.xht new file mode 100644 index 0000000000..3aa80ba407 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-offset-003-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div#inline-block + { + display: inline-block; + padding-top: 24px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a blue square with its bottom-left corner missing.</p> + + <div id="inline-block"> + <div><img src="support/blue15x15.png" width="48" height="48" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="48" height="48" alt="Image download support must be enabled" /></div> + <div><img src="support/1x1-white.png" width="48" height="48" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="48" height="48" alt="Image download support must be enabled" /></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-offset-003.xht b/testing/web-platform/tests/css/CSS2/positioning/top-offset-003.xht new file mode 100644 index 0000000000..670c8f383c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-offset-003.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Position 'top' property defines the offset from the top edge of the containing block</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-offset-003-ref.xht" /> + + <meta name="assert" content="The 'top' property, for absolute positioning, specifies the offset of the element in relation to the containing block's top edge. The containing block of an absolutely positioned element is formed by the padding box of its nearest (closest) positioned ancestor element." /> + <style type="text/css"> + #container + { + height: 1in; + padding-top: 0.25in; + position: relative; + width: 1in; + } + #div1 + { + background: white; + height: 0.5in; + position: absolute; + top: 0.75in; + width: 0.5in; + } + #div2 + { + background: blue; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square with its bottom-left corner missing.</p> + <div id="container"> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-offset-percentage-001-ref.xht b/testing/web-platform/tests/css/CSS2/positioning/top-offset-percentage-001-ref.xht new file mode 100644 index 0000000000..af7a1502ef --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-offset-percentage-001-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[ + div + { + border: black solid medium; + height: 200px; + width: 100px; + } + + img {padding-top: 100px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if a filled green square is not in any of the corners of the hollow black rectangle and there is <strong>no red</strong>.</p> + + <div><img src="support/1x1-green.png" width="50" height="50" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-offset-percentage-001.xht b/testing/web-platform/tests/css/CSS2/positioning/top-offset-percentage-001.xht new file mode 100644 index 0000000000..3dbc83f9a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-offset-percentage-001.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Top offset using percentage</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="top-offset-percentage-001-ref.xht" /> + + <meta name="assert" content="Percentage offset values for the 'top' property are based off the height of the containing block." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 200px; + position: relative; + width: 100px; + } + div div + { + height: 50px; + position: absolute; + width: 50px; + } + #test + { + background: green; + top: 50%; + } + #reference + { + background: red; + bottom: 50px; + } + </style> + </head> + <body> + <p>Test passes if a filled green square is not in any of the corners of the hollow black rectangle and there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="reference"></div> + <div id="test"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/positioning/top-offset-percentage-002.xht b/testing/web-platform/tests/css/CSS2/positioning/top-offset-percentage-002.xht new file mode 100644 index 0000000000..a2f8d53437 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/positioning/top-offset-percentage-002.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 absolute - top offset percentage and inherit</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <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="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props" /> + <link rel="match" href="left-offset-percentage-002-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: absolute;} + + #grand-parent-abs-pos + { + height: 400px; + width: 600px; + } + + #red-abs-pos-overlapped + { + background-color: red; + color: white; + height: 100px; + left: 300px; + top: 100px; + width: 100px; + } + + #parent-abs-pos + { + height: 0px; + left: 50%; /* 50% x 600px == 300px */ + /* 'left: [percentage]' refers to width of containing block. */ + top: 25%; /* 25% x 400px == 100px */ + /* 'top: [percentage]' refers to height of containing block. */ + width: 0px; + } + + #green-child-abs-pos-inherit-overlapping + { + background-color: green; + left: 0px; + top: inherit; + /* + ===================================== + top: inherit should resolve as top: 25% 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-abs-pos-inherit-overlapping + should be 25%, which is 25% of the height of its containing + block (#parent-abs-pos) which is 0px. + ===================================== + */ + height: 100px; + 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-abs-pos"> + <div id="red-abs-pos-overlapped">test FAILED</div> + <div id="parent-abs-pos"> + <div id="green-child-abs-pos-inherit-overlapping"></div> + </div> + </div> + + </body> +</html> |
