diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/CSS2/linebox | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/linebox')
321 files changed, 12482 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/linebox/animations/line-height-interpolation.html b/testing/web-platform/tests/css/CSS2/linebox/animations/line-height-interpolation.html new file mode 100644 index 0000000000..a0570f82a9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/animations/line-height-interpolation.html @@ -0,0 +1,186 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>line-height interpolation</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height"> +<meta name="assert" content="line-height supports animation by computation"> +<meta name="timeout" content="long"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + line-height: 30px; +} + +.target { + display: inline-block; + font: 20px sans-serif; + line-height: 10px; +} + +.expected { + color: green; + margin-right: 30px; +} +</style> +<body> +<template id="target-template"> + <p> + v<br />v + </p> +</template> +</body> +<script> +test_interpolation({ + property: 'line-height', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -1, expect: '0px'}, + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_no_interpolation({ + property: 'line-height', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'line-height', + from: 'inherit', + to: '20px', +}, [ + {at: -1, expect: '40px'}, + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_interpolation({ + property: 'line-height', + from: 'unset', + to: '20px', +}, [ + {at: -1, expect: '40px'}, + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_interpolation({ + property: 'line-height', + from: '4', + to: '14', +}, [ + {at: -1, expect: '0'}, + {at: -0.3, expect: '1'}, + {at: 0, expect: '4'}, + {at: 0.3, expect: '7'}, + {at: 0.6, expect: '10'}, + {at: 1, expect: '14'}, + {at: 1.5, expect: '19'}, +]); + +test_interpolation({ + property: 'line-height', + from: '4px', + to: '14px', +}, [ + {at: -1, expect: '0px'}, + {at: -0.3, expect: '1px'}, + {at: 0, expect: '4px'}, + {at: 0.3, expect: '7px'}, + {at: 0.6, expect: '10px'}, + {at: 1, expect: '14px'}, + {at: 1.5, expect: '19px'}, +]); + +test_interpolation({ + property: 'line-height', + from: 'normal', + to: 'normal', +}, [ + {at: -0.3, expect: 'normal'}, + {at: 0, expect: 'normal'}, + {at: 0.3, expect: 'normal'}, + {at: 0.6, expect: 'normal'}, + {at: 1, expect: 'normal'}, + {at: 1.5, expect: 'normal'}, +]); + +test_no_interpolation({ + property: 'line-height', + from: '4', + to: '14px', +}); + +test_no_interpolation({ + property: 'line-height', + from: '14px', + to: 'normal', +}); + +test_no_interpolation({ + property: 'line-height', + from: 'normal', + to: '4', +}); + +test_no_interpolation({ + property: 'line-height', + from: '4', + to: 'normal', +}); + +test_no_interpolation({ + property: 'line-height', + from: 'normal', + to: '14px', +}); + +test_no_interpolation({ + property: 'line-height', + from: '14px', + to: '4', +}); + +test_no_interpolation({ + property: 'line-height', + from: '4', + to: '14q', +}); + +test_interpolation({ + property: 'line-height', + from: '4q', + to: '14q', +}, [ + {at: -1, expect: '0q'}, + {at: -0.3, expect: '1q'}, + {at: 0, expect: '4q'}, + {at: 0.3, expect: '7q'}, + {at: 0.6, expect: '10q'}, + {at: 1, expect: '14q'}, + {at: 1.5, expect: '19q'}, +]); + +test_no_interpolation({ + property: 'line-height', + from: '14q', + to: 'normal', +}); +</script> diff --git a/testing/web-platform/tests/css/CSS2/linebox/anonymous-inline-inherit-001-ref.html b/testing/web-platform/tests/css/CSS2/linebox/anonymous-inline-inherit-001-ref.html new file mode 100644 index 0000000000..e97da2169d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/anonymous-inline-inherit-001-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<body> + <span> + <span style="font-size: 500%">A</span> + x + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/anonymous-inline-inherit-001.html b/testing/web-platform/tests/css/CSS2/linebox/anonymous-inline-inherit-001.html new file mode 100644 index 0000000000..77904d80e4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/anonymous-inline-inherit-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="match" href="anonymous-inline-inherit-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#anonymous"> +<link rel="author" href="kojii@chromium.org"> +<!-- + The text node for "x" should be wrapped in an anonymous inline box, + which should have the initial value for non-inherited properties. + https://drafts.csswg.org/css2/visuren.html#anonymous +--> +<body> + <span style="vertical-align: top"> + <span style="font-size: 500%">A</span> + x + </span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/baseline-block-with-overflow-001-ref.html b/testing/web-platform/tests/css/CSS2/linebox/baseline-block-with-overflow-001-ref.html new file mode 100644 index 0000000000..2897c95810 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/baseline-block-with-overflow-001-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<style> +section { + margin-bottom: 1px; +} +.outer { + display: inline-block; + background: orange; + padding-bottom: 20px; +} +.inner { + width: 30px; + height: 30px; + overflow: hidden; + background: blue; +} +.inline-block { + display: inline-block; +} +.margin-bottom { + margin-bottom: 30px; +} +</style> +<body> + <section> + <div class="outer"> + <div class="inner inline-block"> + </div> + </div> + XX + </section> + <section> + <div class="outer" style="height: 30px"> + <div class="inner inline-block"> + </div> + </div> + XX + </section> + <section> + <div class="outer" style="height: 30px"> + <div class="inner inline-block"> + XX + </div> + </div> + XX + </section> + <section> + <div class="outer"> + <div class="inner margin-bottom inline-block"> + XX + </div> + </div> + XX + </section> + <section class="margin-bottom"> + <div class="outer" style="height: 60px"> + <div class="inner margin-bottom inline-block"> + XX + </div> + </div> + XX + </section> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/baseline-block-with-overflow-001.html b/testing/web-platform/tests/css/CSS2/linebox/baseline-block-with-overflow-001.html new file mode 100644 index 0000000000..b0ca883534 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/baseline-block-with-overflow-001.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<title>CSS Test: Baseline of blocks with `overflow: hidden`</title> +<link rel="match" href="baseline-block-with-overflow-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +section { + margin-bottom: 1px; +} +.outer { + display: inline-block; + background: orange; + padding-bottom: 20px; +} +.inner { + width: 30px; + height: 30px; + overflow: hidden; + background: blue; +} +.inline-block { + display: inline-block; +} +.margin-bottom { + margin-bottom: 30px; +} +</style> +<body> + <section> + <div class="outer"> + <div class="inner inline-block"> + </div> + </div> + XX + </section> + <section> + <div class="outer"> + <div class="inner"> + </div> + </div> + XX + </section> + <section> + <div class="outer"> + <div class="inner"> + XX + </div> + </div> + XX + </section> + <section> + <div class="outer"> + <div class="inner margin-bottom inline-block"> + XX + </div> + </div> + XX + </section> + <section class="margin-bottom"> + <div class="outer"> + <div class="inner margin-bottom"> + XX + </div> + </div> + XX + </section> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-001-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-001-ref.xht new file mode 100644 index 0000000000..10fe3e08b4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-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: 80px; + width: 640px; + } + ]]></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/linebox/border-padding-bleed-001.xht b/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-001.xht new file mode 100644 index 0000000000..0f76472745 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-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: line-height - border-top and padding-top of inline non-replaced element paint over previous line box</title> + + <!-- + Inspired by + http://archive.webstandards.org/css/winie/inline.html + --> + + <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#leading" title="10.8.1 Leading and half-leading" /> + <link rel="bookmark" href="http://archive.webstandards.org/css/winie/inline.html" /> + <link rel="match" href="border-padding-bleed-001-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="Although margins, borders and padding of inline non-replaced elements do not enter into the line box calculation, they are still rendered around inline boxes. This means that if the height specified by 'line-height' (40px in this testcase) is equal to the content height (40px in this testcase) of contained boxes, then background-color of padding-top area and border-top may 'bleed' into the adjoining preceding line box. Since line boxes are rendered in document order, this causes padding-top and border-top of 2nd line box (the span element in this testcase) to be painted over border-bottom and padding-bottom of inline boxes of previous line and, in this testcase, over the 1st line box." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: red; + font: 40px/1 Ahem; + } + + span + { + background-color: green; /* so that padding-top area is painted green */ + border-top: green solid 15px; + color: green; + padding-top: 25px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div>shuldboverlaPPed<br /> + <span>bleedover1stline</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-002.xht b/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-002.xht new file mode 100644 index 0000000000..7e3d64dd64 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-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: line-height - padding-top of inline non-replaced element paint over previous line box</title> + + <!-- + Inspired by + http://archive.webstandards.org/css/winie/inline.html + --> + + <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#leading" title="10.8.1 Leading and half-leading" /> + <link rel="bookmark" href="http://archive.webstandards.org/css/winie/inline.html" /> + <link rel="match" href="border-padding-bleed-001-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="Although margins, borders and padding of inline non-replaced elements do not enter into the line box calculation, they are still rendered around inline boxes. This means that if the height specified by 'line-height' (40px in this testcase) is equal to the content height (40px in this testcase) of contained boxes, then background-color of padding-top area and border-top may 'bleed' into the adjoining preceding line box. Since line boxes are rendered in document order, this causes padding-top of 2nd line box (the span element in this testcase) to be painted over border-bottom and padding-bottom of inline boxes of previous line and, in this testcase, over the 1st line box." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: red; + font: 40px/1 Ahem; + } + + span + { + background-color: green; /* so that padding-top area is painted green */ + color: green; + padding-top: 1em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div>shuldboverlaPPed<br /> + <span>bleedover1stline</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-003.xht b/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-003.xht new file mode 100644 index 0000000000..74dd19b2d4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/border-padding-bleed-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: line-height - border-top of inline non-replaced element paint over previous line box</title> + + <!-- + Inspired by + http://archive.webstandards.org/css/winie/inline.html + --> + + <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#leading" title="10.8.1 Leading and half-leading" /> + <link rel="bookmark" href="http://archive.webstandards.org/css/winie/inline.html" /> + <link rel="match" href="border-padding-bleed-001-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="Although margins, borders and padding of inline non-replaced elements do not enter into the line box calculation, they are still rendered around inline boxes. This means that if the height specified by 'line-height' (40px in this testcase) is equal to the content height (40px in this testcase) of contained boxes, then background-color of padding-top area and border-top may 'bleed' into the adjoining preceding line box. Since line boxes are rendered in document order, this causes border-top of 2nd line box (the span element in this testcase) to be painted over border-bottom and padding-bottom of inline boxes of previous line and, in this testcase, over the 1st line box." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: red; + font: 40px/1 Ahem; + } + + span + { + border-top: green solid 1em; + color: green; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div>shuldboverlaPPed<br /> + <span>bleedover1stline</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/crashtests/dir-change-simplifed-crash.html b/testing/web-platform/tests/css/CSS2/linebox/crashtests/dir-change-simplifed-crash.html new file mode 100644 index 0000000000..4e05bc8cb9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/crashtests/dir-change-simplifed-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/#direction"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +body, div { position: absolute; } +body { direction: rtl; white-space: pre-line; } +</style> +<body>  
'123456789<div> </div> +<script> + // Force layout and await paint + document.body.offsetLeft; + requestAnimationFrame(() => requestAnimationFrame(() => { + document.querySelector("div").dir = "ltr"; + })); +</script> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/crashtests/inline-block-baseline-crash.html b/testing/web-platform/tests/css/CSS2/linebox/crashtests/inline-block-baseline-crash.html new file mode 100644 index 0000000000..8c88583c55 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/crashtests/inline-block-baseline-crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/#propdef-vertical-align"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +div::after { + display: layout(parent); + content: ""; +} +</style> +<body style="columns: 2"> + <div style="display: inline-block"></div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/empty-inline-001.xht b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-001.xht new file mode 100644 index 0000000000..514cea7ed6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-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: Empty inline 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="../reference/ref-if-there-is-no-red.xht" /> + + <meta name="assert" content="Empty inline elements create a zero-height line box." /> + <style type="text/css"> + div + { + background: red; + } + span + { + display: inline; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div> + <span></span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/empty-inline-002-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-002-ref.xht new file mode 100644 index 0000000000..347b652c8b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-002-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[ + p {margin: 1em auto 0em;} + + div + { + background-color: green; + height: 150px; + margin: 0px 125px 125px; + padding: 100px 0px; + width: 250px; + } + + div > div + { + background-color: transparent; + border: green solid 25px; + height: 100px; + padding: 0px; + position: relative; + right: 250px; + width: 500px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div> + <div></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/empty-inline-002.xht b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-002.xht new file mode 100644 index 0000000000..3d2064c75a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-002.xht @@ -0,0 +1,69 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Empty line box influence</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="empty-inline-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Empty inline elements still influence calculation just like elements with content." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div, span + { + font: 100px/1em Ahem; + } + #div1 + { + margin-top: 100px; + } + #div2, #div3 + { + width: 500px; + } + #div2 + { + border: 25px solid green; + } + span + { + background: green; + border: 25px solid green; + margin: 100px; + padding: 100px; + } + #div3 + { + border: 25px solid red; + height: 100px; + position: relative; + top: -150px; + z-index: -1; + } + #div3 div + { + background: red; + border: 25px solid red; + height: 300px; + margin: 0 100px; + position: relative; + top: -125px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span></span> + </div> + <div id="div3"> + <div></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/empty-inline-003-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-003-ref.xht new file mode 100644 index 0000000000..a6de93f17b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-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/" /> + <link rel="author" title="Bruno Fassino" href="http://www.brunildo.org/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + color: white; + line-height: 5; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a wide filled green rectangle with one "X" in it and if there is <strong>no red</strong>.</p> + + <div>X</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/empty-inline-003.xht b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-003.xht new file mode 100644 index 0000000000..2af8bf805f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/empty-inline-003.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: Line height calculations - Empty inline elements influence</title> + + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" /> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Bruno Fassino" href="http://www.brunildo.org/" /> + <link rel="match" href="empty-inline-003-ref.xht" /> + + <meta content="The line-height of an empty inline element influences the height of a line containing it with some other content" name="assert" /> + + <style type="text/css"><![CDATA[ + div#rel-pos-wrapper {position: relative;} + + div#test + { + background-color: green; + color: white; + line-height: 1; + } + + span#empty-inline-element {line-height: 5;} + + div#reference-overlapped-red + { + background-color: red; + left: 0; + line-height: 5; + position: absolute; + top: 0; + width: 100%; + z-index: -1; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a wide filled green rectangle with one "X" in it and if there is <strong>no red</strong>.</p> + + <div id="rel-pos-wrapper"> + + <div id="test"><span id="empty-inline-element"></span>X</div> + + <div id="reference-overlapped-red">X</div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/fractional-line-height.html b/testing/web-platform/tests/css/CSS2/linebox/fractional-line-height.html new file mode 100644 index 0000000000..0b748072b7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/fractional-line-height.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Container height calculation with fractional line height and fractional child height</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties"> +<link rel="match" href="../../reference/nothing.html"> +<style> + .container { float:left; overflow:auto; width:50px; } + .container > span { display:inline-block; width:10px; } +</style> +<p>There should be nothing below.</p> + +<!-- None of these should not trigger a vertical scrollbar, because the height + of the overflow:auto container is auto, so it should make room for + whatever's inside. --> + +<div class="container" style="line-height:19.75px;"> + <span style="height:100.25px;"></span> +</div> + +<div class="container" style="line-height:19.75px;"> + <span style="height:100.75px;"></span> +</div> + +<div class="container" style="line-height:19.25px;"> + <span style="height:100.25px;"></span> +</div> + +<div class="container" style="line-height:19.25px;"> + <span style="height:100.75px;"></span> +</div> diff --git a/testing/web-platform/tests/css/CSS2/linebox/iframe-in-block-in-inline-ref.html b/testing/web-platform/tests/css/CSS2/linebox/iframe-in-block-in-inline-ref.html new file mode 100644 index 0000000000..4b3ac9f171 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/iframe-in-block-in-inline-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div> + <iframe src="support/iframe-inner.html"></iframe> +</div> diff --git a/testing/web-platform/tests/css/CSS2/linebox/iframe-in-block-in-inline.html b/testing/web-platform/tests/css/CSS2/linebox/iframe-in-block-in-inline.html new file mode 100644 index 0000000000..affbd303ad --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/iframe-in-block-in-inline.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/#inline-boxes"> +<link rel="author" href="mailto:kojii@chromium.org"> +<link rel="match" href="iframe-in-block-in-inline-ref.html" /> +<span> + <div> + <iframe src="support/iframe-inner.html"></iframe> + </div> +</span> diff --git a/testing/web-platform/tests/css/CSS2/linebox/iframe-in-wrapped-span-ref.html b/testing/web-platform/tests/css/CSS2/linebox/iframe-in-wrapped-span-ref.html new file mode 100644 index 0000000000..721d3d8b31 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/iframe-in-wrapped-span-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<br> +<iframe src="support/iframe-inner.html"></iframe> diff --git a/testing/web-platform/tests/css/CSS2/linebox/iframe-in-wrapped-span.html b/testing/web-platform/tests/css/CSS2/linebox/iframe-in-wrapped-span.html new file mode 100644 index 0000000000..b2435a6e30 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/iframe-in-wrapped-span.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/#inline-boxes"> +<link rel="author" href="mailto:kojii@chromium.org"> +<link rel="match" href="iframe-in-wrapped-span-ref.html" /> +<span> + <br> + <iframe src="support/iframe-inner.html"></iframe> +</span> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-box-001-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-box-001-ref.xht new file mode 100644 index 0000000000..f900a69385 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-box-001-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/" /> + + <style type="text/css"><![CDATA[ + div {width: 192px;} + + span {border-color: blue;} + + span#top + { + border-style: solid none solid solid; + border-width: 2px 0px 2px 2px; + } + + div#middle {background-color: orange;} + + span#bottom + { + border-style: solid solid solid none; + border-width: 2px 2px 2px 0px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are blue borders around the top, left and bottom but not the right side of the text "First line", and borders around the top, right, bottom but not the left of the text "Last line".</p> + + <div><span id="top">First line</span></div> + <div id="middle">Filler Text</div> + <div><span id="bottom">Last line</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-box-001.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-box-001.xht new file mode 100644 index 0000000000..41a372a7fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-box-001.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: Inline box containing block boxes</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" /> + <link rel="match" href="inline-box-001-ref.xht" /> + + <meta name="assert" content="Inline boxes that contain block boxes will break up the inline content around the block box." /> + <style type="text/css"> + #div1 + { + border: 2px solid blue; + display: inline; + } + div div + { + background: orange; + width: 2in; + } + </style> + </head> + <body> + <p>Test passes if there are blue borders around the top, left and bottom but not the right side of the text "First line", and borders around the top, right, bottom but not the left of the text "Last line".</p> + <div id="div1"> + First line + <div>Filler Text</div> + Last line + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-box-002-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-box-002-ref.xht new file mode 100644 index 0000000000..c96eebc3df --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-box-002-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <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 {width: 192px;} + + div#yellow + { + background-color: yellow; + height: 192px; + } + + span.blue {background-color: blue;} + + div#orange {background-color: orange;} + ]]></style> + + </head> + + <body> + + <p>Test passes if an orange stripe is between two shorter blue stripes and all three stripes are below a yellow square.</p> + + <div id="yellow"></div> + + <div><span class="blue">Filler Text</span></div> + + <div id="orange">Filler Text</div> + + <div><span class="blue">Filler Text</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-box-002.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-box-002.xht new file mode 100644 index 0000000000..5de05aa519 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-box-002.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: Block boxes within inline boxes are affected by 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" /> + <link rel="match" href="inline-box-002-ref.xht" /> + + <meta name="assert" content="Block boxes within inline boxes are also affected by relative positioning on the inline box." /> + <style type="text/css"> + #div1 + { + background: yellow; + height: 2in; + position: relative; + width: 2in; + } + #div2 + { + background: blue; + display: inline; + position: relative; + top: 2in; + } + #div3 + { + background: orange; + width: 2in; + } + </style> + </head> + <body> + <p>Test passes if an orange stripe is between two shorter blue stripes and all three stripes are below a yellow square.</p> + <div id="div1"> + <div id="div2"> + Filler Text + <div id="div3">Filler Text</div> + Filler Text + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-children-root-linebox-crash-001.html b/testing/web-platform/tests/css/CSS2/linebox/inline-children-root-linebox-crash-001.html new file mode 100644 index 0000000000..7fe6b3ea5d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-children-root-linebox-crash-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/981602"> +<link rel="author" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.class6 { writing-mode: vertical-rl; } +</style> +<svg> +<radialGradient id="svgvar00004"> +<pattern> +<foreignObject> +<pre class="class6"> +<svg> +<polyline fill="url(#svgvar00004) red"> +</svg> +<script>test(() => {});</script> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-001-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-001-ref.xht new file mode 100644 index 0000000000..d142292ad8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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[ + div + { + border: solid 1px black; + width: 600px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if all the words "Filler Text" are on the same line and they are contained by a black box.</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/linebox/inline-formatting-context-001.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-001.xht new file mode 100644 index 0000000000..ca4de2083c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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: Inline formatting context and basic horizontal Layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-001-ref.xht" /> + + <meta name="assert" content="Inline boxes are laid out horizontally or one after the other starting at the top of the containing block." /> + <style type="text/css"> + #div1 + { + border: solid 1px black; + width: 600px; + } + div div + { + display: inline; + } + </style> + </head> + <body> + <p>Test passes if all the words "Filler Text" are on the same line and they are contained by a black box.</p> + <div id="div1"> + <div>Filler Text </div> + <div>Filler Text </div> + <div>Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-002-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-002-ref.xht new file mode 100644 index 0000000000..f82f8fe1ae --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-002-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: black; + float: left; + padding-left: 100px; + } + + span {background-color: white;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a black stripe on the left side of "Filler Text".</p> + + <div><span>Filler Text</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-002.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-002.xht new file mode 100644 index 0000000000..27f6fe2588 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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: Inline formatting context with a horizontal left margins</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-002-ref.xht" /> + + <meta name="assert" content="Horizontal left margins are respected between inline boxes." /> + <style type="text/css"> + div + { + background: black; + display: inline; + line-height: 1em; + } + div div + { + background: white; + margin-left: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a black stripe on the left side of "Filler Text".</p> + <div> + <div>Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-003-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-003-ref.xht new file mode 100644 index 0000000000..03ba993de2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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 + { + background-color: black; + float: left; + padding-right: 100px; + } + + span {background-color: white;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a black stripe on the right side of "Filler Text".</p> + + <div><span>Filler Text</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-003.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-003.xht new file mode 100644 index 0000000000..827349d8e6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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: Inline formatting context with a horizontal right margins</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-003-ref.xht" /> + + <meta name="assert" content="Horizontal right margins are respected between inline boxes." /> + <style type="text/css"> + div + { + background: black; + display: inline; + line-height: 1em; + } + div div + { + background: white; + margin-right: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a black stripe on the right side of "Filler Text".</p> + <div> + <div>Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-004.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-004.xht new file mode 100644 index 0000000000..ddd51a8dfe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-004.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: Inline formatting context with a left border</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-002-ref.xht" /> + + <meta name="assert" content="Left borders are respected between inline boxes." /> + <style type="text/css"> + div + { + display: inline; + } + div div + { + border-left: 100px solid black; + } + </style> + </head> + <body> + <p>Test passes if there is a black stripe on the left side of "Filler Text".</p> + <div> + <div>Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-005.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-005.xht new file mode 100644 index 0000000000..83c7b1b793 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-005.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: Inline formatting context with a right border</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-003-ref.xht" /> + + <meta name="assert" content="Right borders are respected between inline boxes." /> + <style type="text/css"> + div + { + display: inline; + } + div div + { + border-right: 100px solid black; + } + </style> + </head> + <body> + <p>Test passes if there is a black stripe on the right side of "Filler Text".</p> + <div> + <div>Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-006.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-006.xht new file mode 100644 index 0000000000..9b923833d3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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: Inline formatting context with left padding</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-002-ref.xht" /> + + <meta name="assert" content="Left padding are respected between inline boxes." /> + <style type="text/css"> + div + { + display: inline; + } + #div1 + { + background: black; + padding-left: 100px; + } + div div + { + background: white; + } + </style> + </head> + <body> + <p>Test passes if there is a black stripe on the left side of "Filler Text".</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/linebox/inline-formatting-context-007.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-007.xht new file mode 100644 index 0000000000..0eae0b50b0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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: Inline formatting context with right padding</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-003-ref.xht" /> + + <meta name="assert" content="Right padding are respected between inline boxes." /> + <style type="text/css"> + div + { + display: inline; + } + #div1 + { + background: black; + padding-right: 100px; + } + div div + { + background: white; + } + </style> + </head> + <body> + <p>Test passes if there is a black stripe on the right side of "Filler Text".</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/linebox/inline-formatting-context-008-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-008-ref.xht new file mode 100644 index 0000000000..8650d13d38 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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 + { + background-color: green; + height: 200px; + width: 200px; + } + ]]></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/linebox/inline-formatting-context-008.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-008.xht new file mode 100644 index 0000000000..e2d3d7ba49 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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: Inline element widths are determined by 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-008-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Inline element width is determined by the containing block." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + background: red; + font: 100px/1em Ahem; + height: 2em; + width: 2em; + } + div div + { + color: green; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div>XX XX</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-009-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-009-ref.xht new file mode 100644 index 0000000000..a81d221011 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-009-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[ + table + { + background-color: blue; + border-spacing: 0px; + height: 200px; + } + + td + { + padding: 0px; + width: 100px; + } + + td#middle {background-color: orange;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the filled orange rectangle has a filled blue rectangle on either side.</p> + + <table> + <tr><td></td><td id="middle"></td><td></td></tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-009.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-009.xht new file mode 100644 index 0000000000..562d060644 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-009.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: Inline element widths are determined by the containing block and floated 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-04-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-009-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Inline element width is determined by the containing block and any floated elements." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + background: orange; + font: 100px/1em Ahem; + height: 2em; + width: 3em; + } + #div2 + { + background: blue; + float: right; + height: 1em; + width: 1em; + } + div div + { + color: blue; + } + </style> + </head> + <body> + <p>Test passes if the filled orange rectangle has a filled blue rectangle on either side.</p> + <div id="div1"> + <div id="div2"></div> + <div>X X X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010.xht new file mode 100644 index 0000000000..ce08486de9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010.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: Line boxes are tall enough for all boxes</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="A line box is always tall enough to contain all the boxes in the line." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + height: 25px; + white-space: pre; + } + span + { + background: blue; + font: 50px Ahem; + } + #span1 + { + line-height: 50px; + } + #span2 + { + line-height: 10px; + } + </style> + </head> + <body> + <p>Test passes if the black squares and blue rectangles have the same height.</p> + <div> + <span id="span1"> X </span><span id="span2"> X </span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010b.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010b.xht new file mode 100644 index 0000000000..9192003732 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010b.xht @@ -0,0 +1,111 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: line-height - line box height calculations</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#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" title="9.4.2 Inline formatting contexts" /> + + <meta content="text/javascript" http-equiv="Content-Script-Type" /> + <meta content="ahem dom image interact" name="flags" /> + <meta content="A line box is always tall enough for all of the boxes it contains. A line box can be as tall as the tallest inline non-replaced box it contains." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + background: white url("support/ruler-v-100px-200px.png") no-repeat; + margin: 8px 8px 8px 55px; + /* + + 16px : margin collapsing between body's margin-top and p's margin-top == max(8px, 16px) + + + 20px : first line of p + + + 20px : second line box of p + + + 20px : third line box of p + + + 24px : margin-bottom of p + ======= + 100px + + */ + } + + p + { + font: 1em/1.25 serif; + margin: 1em 0.5em 1.5em; + } + + div + { + background-color: orange; /* The line box will be painted orange */ + font-family: Ahem; + line-height: 0; + } + + span + { + color: black; + line-height: 1; + vertical-align: baseline; + } + + span#twenty {font-size: 20px; display: none;} + + span#thirty {font-size: 30px; display: none;} + + span#forty {font-size: 40px; display: none;} + + span#fifty {font-size: 50px; display: none;} + + span#sixty {font-size: 60px; display: none;} + + span#eighty {font-size: 80px; display: none;} + + span#one-hundred {font-size: 100px; display: none;} + ]]></style> + + <script type="text/javascript"><![CDATA[ + function resetChkboxes() + { + var collectionOfCheckboxes = document.getElementsByTagName("input"); + for (var iterator = 0; iterator < collectionOfCheckboxes.length; iterator++) + { + collectionOfCheckboxes.item(iterator).checked = false; + }; + } + + function updateLinebox(chkbox) + { + if(chkbox.checked) + { + document.getElementById(chkbox.id.slice(3)).style.display = "inline"; + } + else + { + document.getElementById(chkbox.id.slice(3)).style.display = "none"; + }; + } + ]]></script> + + </head> + + <body onload="resetChkboxes();"> + + <p>Check or uncheck as many checkboxes as you want.<br /> + Test passes if the orange rectangle is always just<br /> + tall enough to contain the tallest black square in it.</p> + + <div><span id="twenty">2</span> <span id="thirty">3</span> <span id="forty">4</span> <span id="fifty">5</span> <span id="sixty">6</span> <span id="eighty">8</span> <span id="one-hundred">1</span></div> + + <p><input type="checkbox" id="chktwenty" value="20" onclick="updateLinebox(this);" /><input type="checkbox" id="chkthirty" value="30" onclick="updateLinebox(this);" /><input type="checkbox" id="chkforty" value="40" onclick="updateLinebox(this);" /><input type="checkbox" id="chkfifty" value="50" onclick="updateLinebox(this);" /><input type="checkbox" id="chksixty" value="60" onclick="updateLinebox(this);" /><input type="checkbox" id="chkeighty" value="80" onclick="updateLinebox(this);" /><input type="checkbox" id="chkone-hundred" value="100" onclick="updateLinebox(this);" /></p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010c.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010c.xht new file mode 100644 index 0000000000..9c70da07b3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010c.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: line-height - line box height calculations</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#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" title="9.4.2 Inline formatting contexts" /> + + <meta content="ahem image" name="flags" /> + <meta content="The line box height is given by the distance between the uppermost box top and the lowermost box bottom. The line box height is not necessarly given by the height of the tallest inline box contained in the line box." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: orange; /* The line box will be painted orange */ + color: black; + } + + span {font: 1.25em/1 Ahem;} + + span#va-minus10 {vertical-align: -10px;} + + span#va-baseline {vertical-align: baseline;} + + span#va-plus10 {vertical-align: 10px;} + + span#va-plus20 {vertical-align: 20px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange rectangle is just tall enough to contain the bottommost small filled black square and the uppermost small filled black square.</p> + + <!-- + In this test, the short vertical blue line represents the tallest + inline box present in the line box. And its presence contribute + to demonstrate that the line box height is not necessarly given + by the height of its tallest inline box. + --> + + <div> + <span id="va-minus10">1</span> + <span id="va-baseline">0</span> + <img src="support/swatch-blue.png" width="5" height="35" alt="Image download support must be enabled" /> + <span id="va-plus10">1</span> + <span id="va-plus20">2</span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010d.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010d.xht new file mode 100644 index 0000000000..f76e6fe495 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-010d.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: line-height - line box height calculations</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#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" title="9.4.2 Inline formatting contexts" /> + + <meta content="image" name="flags" /> + <meta content="The line box height is given by the distance between the uppermost box top and the lowermost box bottom. The line box height is not necessarly given by the height of the tallest inline box contained in the line box." name="assert" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: orange; /* The line box will be painted orange */ + color: black; + } + + img#va-minus10 {vertical-align: -10px;} + + img#va-baseline {vertical-align: baseline;} + + img#va-plus10 {vertical-align: 10px;} + + img#va-plus20 {vertical-align: 20px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange rectangle is just tall enough to contain the bottommost small filled teal square and the uppermost small filled teal square.</p> + + <!-- + In this test, the short vertical blue line represents the tallest + inline box present in the line box. And its presence contribute + to demonstrate that the line box height is not necessarly given + by the height of its tallest inline box. + --> + + <div> + <img id="va-minus10" src="support/swatch-teal.png" width="20" height="20" alt="Image dowload support must be enabled" /> + <img id="va-baseline" src="support/swatch-teal.png" width="20" height="20" alt="Image dowload support must be enabled" /> + <img id="blue" src="support/swatch-blue.png" width="5" height="35" alt="Image download support must be enabled" /> + <img id="va-plus10" src="support/swatch-teal.png" width="20" height="20" alt="Image dowload support must be enabled" /> + <img id="va-plus20" src="support/swatch-teal.png" width="20" height="20" alt="Image dowload support must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-011-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-011-ref.xht new file mode 100644 index 0000000000..7a5681cc78 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-011-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 {border-top: orange solid medium;} + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the black square and blue rectangles touch the orange line.</p> + + <div><img src="support/swatch-blue.png" width="90" height="90" alt="Image download support must be enabled" /> <img src="support/swatch-blue.png" width="20" height="50" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="50" height="50" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" 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/linebox/inline-formatting-context-011.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-011.xht new file mode 100644 index 0000000000..59bcc11a66 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-011.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: Vertical-align and alignment of inline boxes</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-011-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property determines the vertical alignment of a box within a line box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + border-top: solid orange; + } + span + { + border: 20px solid blue; + display: inline-block; + font: 50px Ahem; + } + #span1 + { + color: blue; + line-height: 1em; + } + #span2 + { + line-height: 10px; + vertical-align: top; + } + </style> + </head> + <body> + <p>Test passes if the black square and blue rectangles touch the orange line.</p> + <div> + <span id="span1">X</span> + <span id="span2">X</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-012.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-012.xht new file mode 100644 index 0000000000..2e87918967 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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 xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Inline boxes vertically stack if they do not fit horizontally</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="../generated-content/after-content-display-002-ref.xht" /> + + <meta name="assert" content="Inline boxes stack vertically when they do not fit within an element horizontally." /> + <style type="text/css"> + div + { + width: 50px; + } + span + { + white-space: nowrap; + } + </style> + </head> + <body> + <p>Test passes if there are <strong>2 lines of "Filler text"</strong>.</p> + <div> + <span>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/linebox/inline-formatting-context-013-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-013-ref.xht new file mode 100644 index 0000000000..95b2983dd8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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[ + div + { + border-bottom: green solid 20px; + border-top: green solid 20px; + width: 100px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no vertical space between the green and blue stripes.</p> + + <div><img src="support/swatch-blue.png" width="100" height="20" alt="Image download support must be enabled" /> <img src="support/green15x15.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="100" height="20" 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/linebox/inline-formatting-context-013.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-013.xht new file mode 100644 index 0000000000..3bd974c079 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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: Wrapping inline boxes and vertical spacing</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-013-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Line boxes are stacked with no vertical separation and they never overlap." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + font: 20px/1em Ahem; + height: 5em; + width: 5em; + } + .color1 + { + color: green; + } + .color2 + { + color: blue; + } + </style> + </head> + <body> + <p>Test passes if there is no vertical space between the green and blue stripes.</p> + <div> + <span class="color1">XXXXX</span> + <span class="color2">XXXXX</span> + <span class="color1">XXXXX</span> + <span class="color2">XXXXX</span> + <span class="color1">XXXXX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-014.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-014.xht new file mode 100644 index 0000000000..9f347f313e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-014.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: Line boxes span the container</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Line boxes span the entire width of a container unless constrained by floats." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + } + span + { + background: red; + border: solid green; + color: green; + } + </style> + </head> + <body> + <p>Test passes if there is a green stripe and <strong>no red</strong>.</p> + <div> + <span>XXXXX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-015-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-015-ref.xht new file mode 100644 index 0000000000..3b54365291 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-015-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + p {margin: 1em 0em;} + + table + { + background-color: orange; + border-spacing: 0px; + width: 200px; + } + + td + { + padding: 0px; + vertical-align: top; + } + + td:first-child {width: 110px;} + + div + { + border: blue solid 5px; + height: 20px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the "Filler Text" is to the right of the blue box and an orange background covers the area behind both the "Filler Text" and the blue box.</p> + + <table> + <tr><td><div></div></td><td>Filler Text Filler Text</td></tr> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-015.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-015.xht new file mode 100644 index 0000000000..15aac62807 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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: Line boxes next to floats</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-015-ref.xht" /> + + <meta name="assert" content="Line boxes adjust for floated elements." /> + <style type="text/css"> + #div1 + { + width: 200px; + } + #div2 + { + border: 5px solid blue; + height: 20px; + float: left; + width: 50%; + } + #div3 + { + background: orange; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" is to the right of the blue box and an orange background covers the area behind both the "Filler Text" and the blue box.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">Filler Text Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-016.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-016.xht new file mode 100644 index 0000000000..f384f27ec6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-016.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Line box distribution with the 'text-align' property</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <meta name="assert" content="When the inline box is wider than the line boxes the 'text-align' property is used to align the line boxes." /> + <style type="text/css"> + div + { + border: solid black; + text-align: right; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" is aligned to the right side of the box.</p> + <div> + <span>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/linebox/inline-formatting-context-017.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-017.xht new file mode 100644 index 0000000000..787140e41e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-017.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: Text-align 'justify' and space and word stretching</title> + <link 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-27 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <meta name="flags" content="ahem may" /> + <meta name="assert" content="If 'text-align' is set to 'justify' the user agent may stretch spaces and/or words." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: orange; + font: 1em/1 Ahem; + text-align: justify; + width: 20em; + } + span + { + color: blue; + } + </style> + </head> + <body> + <p>Test passes if the rightmost orange stripe extends to the right of the rightmost blue stripe.</p> + <div> + XXXX XXXX XXXXXX <span>XXXXX XXXXXX XXX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-018.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-018.xht new file mode 100644 index 0000000000..a422270472 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-018.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: Text-align 'justify' and 'inline-table' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <meta name="assert" content="If 'text-align' is set to 'justify' the user agent does not stretch spaces and/or words when the 'display' property is set to 'inline-table'." /> + <style type="text/css"> + div + { + border: solid black; + text-align: justify; + width: 200px; + } + span + { + display: inline-table; + } + </style> + </head> + <body> + <p>Test passes if the width of spaces and/or characters of the first line of "Filler Text" is larger than the second line of "Filler Text".</p> + <div> + Filler Text Filler Text + <span>Filler Text Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-019.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-019.xht new file mode 100644 index 0000000000..6cc7aa9185 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-019.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: Text-align 'justify' and 'inline-block' elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <meta name="assert" content="If 'text-align' is set to 'justify' the user agent does not stretch spaces and/or words when the 'display' property is set to 'inline-block'." /> + <style type="text/css"> + div + { + border: solid black; + text-align: justify; + width: 200px; + } + span + { + display: inline-block; + } + </style> + </head> + <body> + <p>Test passes if the width of spaces and/or characters of the first line of "Filler Text" is larger than the second line of "Filler Text".</p> + <div> + Filler Text Filler Text + <span>Filler Text Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-020.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-020.xht new file mode 100644 index 0000000000..14f6343049 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-020.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: Inline boxes exceeding the line box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <meta name="assert" content="Inline boxes are split onto additional lines if the line box does not fit within the width." /> + <style type="text/css"> + div + { + border: solid black; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if there are at least two lines of "Filler Text" below.</p> + <div> + <span>Filler Text Filler Text Filler Text Filler Text Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-021.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-021.xht new file mode 100644 index 0000000000..180b899b7a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-021.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: Inline boxes exceeding the line box and overflowing</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <meta name="assert" content="If inline boxes cannot be split (i.e.: white-space: nowrap) then the inline box overflows the line box." /> + <style type="text/css"> + div + { + background: orange; + width: 200px; + } + span + { + white-space: nowrap; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" extends beyond the orange box.</p> + <div> + <span>Filler Text Filler Text Filler Text Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-022-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-022-ref.xht new file mode 100644 index 0000000000..74e1df2671 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-022-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 + { + line-height: 10px; + margin-top: -6px; + width: 130px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div><img src="support/swatch-blue.png" width="130" height="10" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="10" height="10" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="130" height="10" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="10" height="20" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="10" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="130" height="10" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="120" height="10" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="10" height="10" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="130" height="10" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-022.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-022.xht new file mode 100644 index 0000000000..da6b35126a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-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 xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Inline boxes that are split and the margin, border, padding effect</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-022-ref.xht" /> + + <meta name="flags" content="ahem image" /> + <meta name="assert" content="Margins, borders and padding have no visual effect when inline boxes are split." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: url('support/inline-formatting-context-022.png') no-repeat 0 -1.5em; + color: blue; + font: 15pt/1em Ahem; + margin-top: 2em; + height: 5em; + width: 6.5em; + } + span + { + margin: 1em 0; + padding: 1em; + border: 0.5em solid blue; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div> + <span>XXXXX XXXXX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-023-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-023-ref.xht new file mode 100644 index 0000000000..a4f783d8b6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-023-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 + { + line-height: 30px; + margin: auto 2px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 3 instances of "Filler Text".</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/linebox/inline-formatting-context-023.xht b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-023.xht new file mode 100644 index 0000000000..49f8f54169 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-formatting-context-023.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: Bidirectional text runs can create additional line boxes</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" /> + <link rel="match" href="inline-formatting-context-023-ref.xht" /> + + <meta name="assert" content="Additional inline boxes can be created for the bidirectional text." /> + <style type="text/css"> + #span1 + { + margin: 1px; + padding: 1px; + line-height: 25px; + } + #span2 + { + direction: rtl; + unicode-bidi: bidi-override; + line-height: 30px; + } + </style> + </head> + <body> + <p>Test passes if there are 3 instances of "Filler Text".</p> + <div> + <span id="span1">Filler Text <span id="span2">txeT relliF</span> Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-negative-margin-001.html b/testing/web-platform/tests/css/CSS2/linebox/inline-negative-margin-001.html new file mode 100644 index 0000000000..b1ce232e6e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-negative-margin-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<title>CSS Test: Check inline negative margin should not cause the line to wrap</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="help" href="https://crbug.com/979894"> +<link rel="help" href="https://crbug.com/1011816"> +<link rel="help" href="https://crbug.com/1040461"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#inline-width"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#container { + font-family: Ahem; + font-size: 10px; + line-height: 1; + margin-left: 10ch; +} +inline-block { + display: inline-block; +} +.w1 { width: 1ch; } +.w2 { width: 2ch; } +.w3 { width: 3ch; } +.w4 { width: 4ch; } +.w5 { width: 5ch; } +span { + color: orange; +} +img { + height: .6em; + background: orange; +} +</style> +<body> + <section id="container"> + <div><inline-block data-expected-height=10>123 <span style="margin-left: -8ch">1234 </span></inline-block></div> + <div><inline-block data-expected-height=10>123 <span style="margin-left: -8ch">123 </span></inline-block></div> + <div class="w4" data-expected-height=10>123 <span style="margin-left: -4ch">1234 </span></div> + <div class="w4" data-expected-height=10>123 <span style="margin-left: -4ch">123 </span></div> + <div class="w4" data-expected-height=10><img class="w4"><span style="margin-left: -4ch">123</span></div> + <div class="w4" data-expected-height=10><img class="w5"><span style="margin-left: -5ch">123</span></div> + <div class="w4" data-expected-height=20><img class="w5"><span style="margin-left: -3ch">123</span></div> + <div class="w4" data-expected-height=10><img class="w4"><img class="w1" style="margin-left: -1ch"></div> + <div class="w4" data-expected-height=20><img class="w4"><img class="w2" style="margin-left: -1ch"></div> + <div class="w4" data-expected-height=10><img class="w5"><img class="w1" style="margin-left: -2ch"></div> + <div class="w4" data-expected-height=20><img class="w5"><img class="w2" style="margin-left: -2ch"></div> + + <div class="w4" data-expected-height=20><img class="w3"><img class="w2"><img class="w1" style="margin-left: -2ch"></div> + <div class="w4" data-expected-height=20><img class="w2"> <img class="w2"><img class="w1" style="margin-left: -2ch"></div> + </section> +<script>checkLayout('[data-expected-height]');</script> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/inline-negative-margin-minmax-crash-001.html b/testing/web-platform/tests/css/CSS2/linebox/inline-negative-margin-minmax-crash-001.html new file mode 100644 index 0000000000..d6480edd62 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/inline-negative-margin-minmax-crash-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Test: Check inline negative margin with fit-content should not cause hang</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://crbug.com/1028817"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#inline-width"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +div { + width: fit-content; +} +span { + margin-left: -15px; +} +</style> +<body> + <div>| <span>Operation</span></div> +<script>test(() => {});</script> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/leading-001-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/leading-001-ref.xht new file mode 100644 index 0000000000..2d6e784d2e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/leading-001-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[ + table + { + border-bottom: blue solid 50px; + border-spacing: 0px; + border-right: blue solid 100px; + border-top: blue solid 50px; + } + + td + { + background-color: orange; + height: 100px; + padding: 0px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a filled orange square is vertically centered inside a bigger filled blue square.</p> + + <table> + <tr><td></td></tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/leading-001.xht b/testing/web-platform/tests/css/CSS2/linebox/leading-001.xht new file mode 100644 index 0000000000..060ca310c4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/leading-001.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Leading and half leading line heights</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="leading-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Line-height can be different from the content area so space is above and below." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 100px/1em Ahem; + background: blue; + width: 200px; + } + span + { + color: orange; + line-height: 200px; + } + </style> + </head> + <body> + <p>Test passes if a filled orange square is vertically centered inside a bigger filled blue square.</p> + <div> + <span>X</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-box-height-001.xht b/testing/web-platform/tests/css/CSS2/linebox/line-box-height-001.xht new file mode 100644 index 0000000000..de7483edb7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-box-height-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: Height for inline elements when 'line-height' is smaller than 'height'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets the initial height but that height is increased if the content height is larger." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + color: blue; + font: 100px/1 Ahem; + position: relative; + } + span + { + line-height: 0; + } + #div2 + { + background: orange; + height: 200px; + left: 100px; + position: absolute; + top: 0; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangle have the same height.</p> + <div id="div1"> + <div>X</div> + <span>X</span> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-box-height-002-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-box-height-002-ref.xht new file mode 100644 index 0000000000..5decfe5b07 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-box-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 same height.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><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/linebox/line-box-height-002.xht b/testing/web-platform/tests/css/CSS2/linebox/line-box-height-002.xht new file mode 100644 index 0000000000..9c23382644 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-box-height-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: Height for inline replaced elements and 'line-height'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-box-height-002-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'line-height' property doe not set the height for inline replaced elements. The height of the replaced element sets the line-height'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + img + { + display: inline; + line-height: 2in; + } + div div + { + background: orange; + height: 96px; + left: 1in; + position: absolute; + top: 0; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same height.</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/linebox/line-breaking-font-size-zero-001-ref.html b/testing/web-platform/tests/css/CSS2/linebox/line-breaking-font-size-zero-001-ref.html new file mode 100644 index 0000000000..c9ad49695f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-breaking-font-size-zero-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + background: blue; +} + +inline-block { + display: inline-block; + width: 80px; + height: 1em; + background: orange; +} +</style> +</head> +<body> + <div> + <inline-block></inline-block><br> + <inline-block></inline-block><br> + <inline-block></inline-block><br> + <inline-block></inline-block><br> + <inline-block></inline-block> + </div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-breaking-font-size-zero-001.html b/testing/web-platform/tests/css/CSS2/linebox/line-breaking-font-size-zero-001.html new file mode 100644 index 0000000000..6378af39fa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-breaking-font-size-zero-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>CSS Test: Check line breaks when break opportunities have font-size: 0</title> +<link rel="match" href="line-breaking-font-size-zero-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css2/text.html#propdef-white-space" /> +<link rel="author" href="mailto:kojii@chromium.org"> +<style> +div { + width: 100px; + background: blue; +} + +inline-block { + display: inline-block; + width: 80px; + height: 1em; + background: orange; +} + +sep { + font-size: 0; +} +</style> +</head> +<body> + <div> + <inline-block></inline-block><sep> </sep> + <inline-block></inline-block><sep>, </sep> + <inline-block></inline-block><sep>) (</sep> + <inline-block></inline-block><sep>a</sep> + <inline-block></inline-block> + </div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-001.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-001.xht new file mode 100644 index 0000000000..093c528849 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-001.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: Line-height using pixels with a minimum minus one value, -1px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1px; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-002-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-002-ref.xht new file mode 100644 index 0000000000..4a8731e626 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-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 {margin-top: -10px;} + + img + img + { + left: 2px; + position: relative; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-002.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-002.xht new file mode 100644 index 0000000000..c2d79e9621 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-002.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Line-height using pixels with a minimum value, 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-04-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0px; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-003.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-003.xht new file mode 100644 index 0000000000..eaecbc8819 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-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: Line-height using pixels with a minimum plus one value, 1px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1px; + } + #div3 + { + height: 21px; + left: 1.1em; + position: absolute; + top: -9px; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-004.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-004.xht new file mode 100644 index 0000000000..54073f03a6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-004.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Line-height using pixels with a negative zero value, -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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a negative zero length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0px; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-005.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-005.xht new file mode 100644 index 0000000000..771b73e089 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-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: Line-height using pixels with a positive zero value, +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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive zero length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0px; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-006-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-006-ref.xht new file mode 100644 index 0000000000..b8babd7bb2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-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 + img + { + left: 2px; + position: relative; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="96" alt="Image download support must be enabled" /><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/linebox/line-height-006.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-006.xht new file mode 100644 index 0000000000..23f97548d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-006.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: Line-height 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a nominal length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 96px; + } + #div3 + { + height: 96px; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-007.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-007.xht new file mode 100644 index 0000000000..230959c92c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-007.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Line-height 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive nominal length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +96px; + } + #div3 + { + height: 96px; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-012.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-012.xht new file mode 100644 index 0000000000..2dcf24aa75 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-012.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: Line-height using points with a minimum minus one value, -1pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1pt; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-013.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-013.xht new file mode 100644 index 0000000000..793ec3df6b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-013.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Line-height using points with a minimum value, 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0pt; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-014.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-014.xht new file mode 100644 index 0000000000..cfc476ced1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-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: Line-height using points with a minimum plus one value, 1pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + + <meta name="flags" content="96dpi ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1pt; + } + #div3 + { + height: 21px; + left: 1.1em; + position: absolute; + top: -9px; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-015.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-015.xht new file mode 100644 index 0000000000..06937a1c44 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-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: Line-height using points with a negative zero value, -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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a negative zero length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0pt; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-016.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-016.xht new file mode 100644 index 0000000000..e321d8137c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-016.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: Line-height using points with a positive zero value, +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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive zero length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0pt; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-017.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-017.xht new file mode 100644 index 0000000000..1da91497a7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-017.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: Line-height 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a nominal length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 72pt; + } + #div3 + { + height: 72pt; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-018.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-018.xht new file mode 100644 index 0000000000..4f17ebd5da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-018.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: Line-height 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive nominal length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +72pt; + } + #div3 + { + height: 72pt; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-023.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-023.xht new file mode 100644 index 0000000000..5fd1aeb3da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-023.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: Line-height using picas with a minimum minus one value, -1pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1pc; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-024.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-024.xht new file mode 100644 index 0000000000..4875daa567 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-024.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: Line-height using picas with a minimum value, 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0pc; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-025-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-025-ref.xht new file mode 100644 index 0000000000..549a9a2549 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-025-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: -2px;} + + img + img + { + left: 2px; + position: relative; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 vertical black stripes have the <strong>same height</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="36" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" height="36" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-025.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-025.xht new file mode 100644 index 0000000000..98086a4865 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-025.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: Line-height using picas with a minimum plus one value, 1pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-025-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1pc; + } + #div3 + { + left: 1.1em; + position: absolute; + top: -2px; + } + #div4 + { + height: 20px; + } + #div5 + { + height: 1pc; + } + </style> + </head> + <body> + <p>Test passes if the 2 vertical black stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"> + <div id="div4"></div> + <div id="div5"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-026.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-026.xht new file mode 100644 index 0000000000..658d49943c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-026.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: Line-height using picas with a negative zero value, -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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a negative zero length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0pc; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-027.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-027.xht new file mode 100644 index 0000000000..cdb3e0861f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-027.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: Line-height using picas with a positive zero value, +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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive zero length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0pc; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-028.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-028.xht new file mode 100644 index 0000000000..7e30abac43 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-028.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: Line-height 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a nominal length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 6pc; + } + #div3 + { + height: 6pc; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-029.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-029.xht new file mode 100644 index 0000000000..188e0149e5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-029.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: Line-height 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive nominal length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +6pc; + } + #div3 + { + height: 6pc; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-034.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-034.xht new file mode 100644 index 0000000000..f084c3f987 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-034.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: Line-height using centimeters with a minimum minus one value, -1cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1cm; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-035.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-035.xht new file mode 100644 index 0000000000..231e72d750 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-035.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: Line-height using centimeters with a minimum value, 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0cm; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-036.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-036.xht new file mode 100644 index 0000000000..40f63bd55a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-036.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: Line-height using centimeters with a minimum plus one value, 1cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1cm; + } + #div3 + { + height: 1cm; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the two boxes below are the same height.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-037.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-037.xht new file mode 100644 index 0000000000..43c90531ac --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-037.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: Line-height using centimeters with a negative zero value, -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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a negative zero length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0cm; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-038.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-038.xht new file mode 100644 index 0000000000..c59ff2ba54 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-038.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: Line-height using centimeters with a positive zero value, +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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive zero length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0cm; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-039.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-039.xht new file mode 100644 index 0000000000..c9a018f47f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-039.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: Line-height 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a nominal length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 2.54cm; + } + #div3 + { + height: 2.54cm; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-040.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-040.xht new file mode 100644 index 0000000000..99c169eed6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-040.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: Line-height 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive nominal length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +2.54cm; + } + #div3 + { + height: 2.54cm; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-045.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-045.xht new file mode 100644 index 0000000000..ff4861469e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-045.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: Line-height using millimeters with a minimum minus one value, -1mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1mm; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-046.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-046.xht new file mode 100644 index 0000000000..93c3759dfa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-046.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: Line-height using millimeters with a minimum value, 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0mm; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-047.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-047.xht new file mode 100644 index 0000000000..dea26a62cb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-047.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: Line-height using millimeters with a minimum plus one value, 1mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1mm; + } + #div3 + { + left: 1.1em; + position: absolute; + top: -0.4em; + } + #div4 + { + height: 20px; + } + #div5 + { + height: 1mm; + } + </style> + </head> + <body> + <p>Test passes if the two boxes below are the same height.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"> + <div id="div4"></div> + <div id="div5"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-048.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-048.xht new file mode 100644 index 0000000000..4df02a6e4a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-048.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: Line-height using millimeters with a negative zero value, -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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a negative zero length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0mm; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-049.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-049.xht new file mode 100644 index 0000000000..3fafac0094 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-049.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: Line-height using millimeters with a positive zero value, +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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive zero length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0mm; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-050.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-050.xht new file mode 100644 index 0000000000..6c67af3b4d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-050.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: Line-height 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-04-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a nominal length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 25.4mm; + } + #div3 + { + height: 25.4mm; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-051.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-051.xht new file mode 100644 index 0000000000..8cf9c4cdd9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-051.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: Line-height using millimeters with a positive nominal value, +25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive nominal length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +25.4mm; + } + #div3 + { + height: 25.4mm; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-056.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-056.xht new file mode 100644 index 0000000000..d46eaa24cb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-056.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: Line-height using inches with a minimum minus one value, -1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1in; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-057.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-057.xht new file mode 100644 index 0000000000..d8732f7d2e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-057.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: Line-height using inches with a minimum value, 0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0in; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-058.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-058.xht new file mode 100644 index 0000000000..4421e233f7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-058.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: Line-height using inches with a minimum plus one value, 1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1in; + } + #div3 + { + height: 1in; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-059.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-059.xht new file mode 100644 index 0000000000..507e46865d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-059.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: Line-height using inches with a negative zero value, -0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a negative zero length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0in; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-060.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-060.xht new file mode 100644 index 0000000000..302d820fee --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-060.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: Line-height using inches with a positive zero value, +0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive zero length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0in; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-061-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-061-ref.xht new file mode 100644 index 0000000000..fe2ab15ca0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-061-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 + img + { + left: 2px; + position: relative; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 tall black vertical stripes have the <strong>same height</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="288" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" height="288" 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/linebox/line-height-061.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-061.xht new file mode 100644 index 0000000000..a50d020397 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-061.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: Line-height using inches with a nominal value, 3in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-061-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a nominal length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 3in; + } + #div3 + { + height: 3in; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 tall black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-062.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-062.xht new file mode 100644 index 0000000000..c3e06ef952 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-062.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: Line-height using inches with a positive nominal value, +3in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-061-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive nominal length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +3in; + } + #div3 + { + height: 3in; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 tall black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-067.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-067.xht new file mode 100644 index 0000000000..22a5071e80 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-067.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: Line-height using 'em' units with a minimum minus one value, -1em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one length value in 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1em; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-068.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-068.xht new file mode 100644 index 0000000000..f475980c84 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-068.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: Line-height using 'em' units with a minimum value, 0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0em; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-069-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-069-ref.xht new file mode 100644 index 0000000000..fa9e9246c6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-069-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 + img + { + left: 2px; + position: relative; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" height="20" 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/linebox/line-height-069.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-069.xht new file mode 100644 index 0000000000..317c107d17 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-069.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: Line-height using 'em' units with a minimum plus one value, 1em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-069-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1em; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-070.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-070.xht new file mode 100644 index 0000000000..119cd8cc99 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-070.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: Line-height using 'em' units with a negative zero value, -0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a negative zero 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0em; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-071.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-071.xht new file mode 100644 index 0000000000..4ee26475db --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-071.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: Line-height using 'em' units with a positive zero value, +0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive zero 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0em; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-072-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-072-ref.xht new file mode 100644 index 0000000000..0596900cfc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-072-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 + img + { + left: 2px; + position: relative; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" height="120" 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/linebox/line-height-072.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-072.xht new file mode 100644 index 0000000000..2cd105fde3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-072.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: Line-height using 'em' units with a nominal value, 6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-072-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 6em; + } + #div3 + { + height: 6em; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-073.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-073.xht new file mode 100644 index 0000000000..90d1a9949c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-073.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: Line-height using 'em' units with a positive nominal value, +6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-072-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +6em; + } + #div3 + { + height: 6em; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-078.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-078.xht new file mode 100644 index 0000000000..acbdf6e029 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-078.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: Line-height using 'ex' units with a minimum minus one value, -1ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one length value in 'ex' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1ex; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-079.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-079.xht new file mode 100644 index 0000000000..59f985f3d1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-079.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: Line-height using 'ex' units with a minimum value, 0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0ex; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-080.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-080.xht new file mode 100644 index 0000000000..b2df826884 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-080.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: Line-height using 'ex' units with a minimum plus one value, 1ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-025-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1ex; + } + #div3 + { + height: 36px; + left: 1.1em; + position: absolute; + top: -2px; + } + </style> + </head> + <body> + <p>Test passes if the 2 vertical black stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-081.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-081.xht new file mode 100644 index 0000000000..b065789e77 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-081.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: Line-height using 'ex' units with a negative zero value, -0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0ex; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-082.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-082.xht new file mode 100644 index 0000000000..4dd0eaf8be --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-082.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: Line-height using 'ex' units with a positive zero value, +0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0ex; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-083.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-083.xht new file mode 100644 index 0000000000..2736285a09 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-083.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: Line-height using 'ex' units with a nominal value, 6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 6ex; + } + #div3 + { + height: 1in; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-084.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-084.xht new file mode 100644 index 0000000000..7d4cab2a4d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-084.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: Line-height using 'ex' units with a positive nominal value, +6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' 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; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +6ex; + } + #div3 + { + height: 1in; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-089.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-089.xht new file mode 100644 index 0000000000..cbb88b100b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-089.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: Line-height using percentages with a minimum minus one value, -1%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1%; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-090.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-090.xht new file mode 100644 index 0000000000..b1a176a3f2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-090.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: Line-height using percentages with a minimum value, 0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0%; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-091.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-091.xht new file mode 100644 index 0000000000..53821feb84 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-091.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: Line-height using percentages with a minimum plus one value, 1%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="96dpi ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1%; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the two boxes below are the same height.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-092.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-092.xht new file mode 100644 index 0000000000..ba66d29d94 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-092.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: Line-height using percentages with a negative zero value, -0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a negative zero length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0%; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-093.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-093.xht new file mode 100644 index 0000000000..9d1f3c96fa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-093.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: Line-height using percentages with a positive zero value, +0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive zero length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0%; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-094.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-094.xht new file mode 100644 index 0000000000..5879c95818 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-094.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: Line-height using percentages with a nominal value, 100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-069-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a nominal length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 100%; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-095.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-095.xht new file mode 100644 index 0000000000..592d327302 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-095.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: Line-height using percentages with a positive nominal value, +100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-069-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive nominal length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +100%; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-100.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-100.xht new file mode 100644 index 0000000000..821c37d59e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-100.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: Line-height with a minimum minus one value, -1</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem invalid should" /> + <meta name="assert" content="The 'line-height' property sets a minimum minus one number value." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + position: relative; + width: 1em; + } + #div2, #div3, #div4 + { + position: absolute; + top: 0; + } + #div2, #div4 + { + background: black; + } + #div2 + { + height: 1.2em; + left: 0; + } + #div3 + { + background: blue; + color: blue; + left: 1em; + line-height: -1; + } + #div4 + { + height: 1em; + left: 2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3">X</div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-101.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-101.xht new file mode 100644 index 0000000000..1fe198f1a1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-101.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: Line-height with a minimum value, 0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum number value." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 0; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-102-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-102-ref.xht new file mode 100644 index 0000000000..12f04c565e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-102-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 + img + { + left: 2px; + position: relative; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 vertical black stripes have the <strong>same height</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" height="40" 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/linebox/line-height-102.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-102.xht new file mode 100644 index 0000000000..d4426b8024 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-102.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: Line-height using pixels with a minimum plus one value, 1</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-102-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a minimum plus one number value." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 1; + } + #div3 + { + height: 2em; + left: 1.1em; + position: absolute; + top: 0em; + } + </style> + </head> + <body> + <p>Test passes if the 2 vertical black stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-103.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-103.xht new file mode 100644 index 0000000000..ec45d0f7da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-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: Line-height using pixels with a negative zero value, -0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a negative zero number value." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: -0; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-104.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-104.xht new file mode 100644 index 0000000000..4801ca2a95 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-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: Line-height with a positive zero value, +0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive zero number value." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +0; + } + #div3 + { + height: 1em; + left: 1.1em; + position: absolute; + top: -0.5em; + } + </style> + </head> + <body> + <p>Test passes if the 2 small black squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-105-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-105-ref.xht new file mode 100644 index 0000000000..dc8d0172da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-105-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 + img + { + left: 2px; + position: relative; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="100" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" 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/linebox/line-height-105.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-105.xht new file mode 100644 index 0000000000..848595dba0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-105.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: Line-height with a nominal value, 5</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-105-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a nominal number value." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: 5; + } + #div3 + { + height: 5em; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-106.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-106.xht new file mode 100644 index 0000000000..b2bc9e7716 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-106.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: Line-height with a positive nominal value, +5</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-105-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property sets a positive nominal number value." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + width: 1em; + } + #div2, #div3 + { + background: black; + } + #div2 + { + line-height: +5; + } + #div3 + { + height: 5em; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-111.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-111.xht new file mode 100644 index 0000000000..9c0017bb64 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-111.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: Line-height with keyword value of 'normal'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem should" /> + <meta name="assert" content="The 'line-height' property set to 'normal' uses the default line-height." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 100px Ahem; + } + div div + { + background: black; + float: left; + width: 1em; + } + #test + { + background: blue; + color: blue; + line-height: normal; + } + #one + { + height: 1em; + } + #onepointtwo + { + height: 1.2em; + } + </style> + </head> + <body> + <p>Test passes if the height of the blue box is similar to the height of the black boxes. It is acceptable to have the blue box height be shorter or taller than the height of either of the black boxes. The black boxes represent the recommended settings for 'line-height'.</p> + <div> + <div id="onepointtwo"></div> + <div id="test">X</div> + <div id="one"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-112.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-112.xht new file mode 100644 index 0000000000..6460895667 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-112.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: Line-height with keyword value of 'inherit'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'line-height' property set to 'inherit' uses the default line-height." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + line-height: 1in; + position: relative; + width: 1em; + } + div div + { + background: black; + line-height: 1em; + } + #div2 + { + line-height: inherit; + } + #div3 + { + height: 1in; + left: 1.1em; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the 2 black vertical stripes have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="div2">X</div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-121-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-121-ref.xht new file mode 100644 index 0000000000..4adadb0a13 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-121-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 a short green rectangle and <strong>no red</strong>.</p> + + <div><img src="support/green15x15.png" width="120" height="40" 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/linebox/line-height-121.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-121.xht new file mode 100644 index 0000000000..38cc708841 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-121.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: The 'line-height' property</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-04-04 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-height/001.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> + <link rel="match" href="line-height-121-ref.xht" /> + + <meta name="flags" content="ahem" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { background: red; height: 1.25em; width: 7.5em; } + .test { font: 2.5em/0 Ahem; background: green; color: green; } + .test { line-height: 1; } /* should override previous line */ + </style> + </head> + <body> + <p>Test passes if there is a short green rectangle and <strong>no red</strong>.</p> + <div class="container"><div class="test">ppp</div></div> + + <!-- "p" is like an underscore in Ahem. --> + + <!-- the result will be that if the line-height is 0, then the + container will be visible as the test will be height:0 and the + text will overflow the test with a small green line, leaving + the red of the container visible. otherwise, line-height is + 1, the test block will grow to be bigger than the + container, overflowing it, and hiding the red. --> + + <!-- see ../001.html --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-122.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-122.xht new file mode 100644 index 0000000000..280e49e7ba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-122.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Images on baselines</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-height/002.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> + + <meta content="image" name="flags" /> + + <style type="text/css"> + p { font: 15px/1 serif; } + span { background: lime; } + </style> + </head> + <body> + <p>There should be a bright green line below the orange square below.</p> + <p><span><img alt="Please enable images for this test." src="support/swatch-orange.png" /></span></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-123.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-123.xht new file mode 100644 index 0000000000..118232cc09 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-123.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Images on baselines</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-height/003.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> + + <meta content="image" name="flags" /> + + <style type="text/css"> + body { font: 15px/1 serif; } + td { background: lime; padding: 0; } + </style> + </head> + <body> + <p>There should be a bright green line below the orange square below.</p> + <table><tr><td><img alt="Please enable images for this test." src="support/swatch-orange.png"/></td></tr></table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-124.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-124.xht new file mode 100644 index 0000000000..f90fb79414 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-124.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Images on baselines</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-height/004.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> + + <meta content="image" name="flags" /> + + <style type="text/css"> + body { font: 15px/1 serif; } + span { background: lime; } + </style> + </head> + <body> + <p>There should be a bright green line below the orange square below.</p> + <table><tr><td><span><img alt="Please enable images for this test." src="support/swatch-orange.png"/></span></td></tr></table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-125-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-125-ref.xht new file mode 100644 index 0000000000..5ceb2a45e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-125-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 + { + font-size: 50px; + line-height: 50px; + width: 200px; + } + + span + { + background-color: green; + color: white; + padding-top: 10px; + } + ]]></style> + + </head> + + <body> + + <p>There should be one word on the line below, clearly saying "pass".</p> + + <div><span>PASS</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-125.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-125.xht new file mode 100644 index 0000000000..47ca6eb843 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-125.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: Inheritance of em units</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-04-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-height/005.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> + <link rel="match" href="line-height-125-ref.xht" /> + + <style type="text/css"> + .fontsize { font-size: 10px; } + .lineheight { line-height: 1em; } + .test { font-size: 50px; width: 200px; padding-top: 10px; } + .fail { color: red; } + .pass { color: white; background: green; padding-top: 10px; } + </style> + </head> + <body> + <p>There should be one word on the line below, clearly saying "pass".</p> + <div class="fontsize"> + <div class="lineheight"> + <div class="test"><span class="fail">FAIL</span> <span class="pass">PASS</span></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-126-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-126-ref.xht new file mode 100644 index 0000000000..56ea70a1ca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-126-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[ + div + { + border-top: green solid 1px; + width: 10em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a short thin green line 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/linebox/line-height-126.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-126.xht new file mode 100644 index 0000000000..bb979b8d91 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-126.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: line-height of images</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-height/006.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> + <link rel="match" href="line-height-126-ref.xht" /> + + <meta content="image" name="flags" /> + + <style type="text/css"> + div { background: red; line-height: 0; width: 10em; } + img { width: 10em; height: 1px; vertical-align: top; } + </style> + </head> + <body> + <p>Test passes if there is a short thin green line and <strong>no red</strong>.</p> + <div><img src="support/1x1-green.png" alt="FAIL (images required)"/></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-127-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-127-ref.xht new file mode 100644 index 0000000000..7324408086 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-127-ref.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS 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 <strong>no red</strong>.</p> + + <div><img src="support/green15x15.png" width="160" height="47" alt="Image download support must be enabled" /><img src="support/green15x15.png" width="160" 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/linebox/line-height-127.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-127.xht new file mode 100644 index 0000000000..3b75153036 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-127.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: line-height of images</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-height/007.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> + <link rel="match" href="line-height-127-ref.xht" /> + + <meta content="ahem image" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + table { font: 10em/1 Ahem; border-spacing: 0; } + td { padding: 0; background: red; } + img { width: 1em; height: 1px; } + .test { line-height: 0; background: green; } + .control { height: 0.3em; background: green; width: 1em; } + </style> + </head> + <body> + + <!-- + ! The 0.3em comes from the following: + ! + ! * The font is 1em high + ! * The line height is 0 + ! * The half leading is therefore -0.5em centered around the middle of the font + ! * The baseline is 0.2em from the bottom of the font + ! * Thus the distance from the baseline to the center is 0.3em + ! * The image is placed on the baseline + | * The line box has to include the image and the middle of the font + ! * Thus the line box is 0.3em high + ! + !--> + + <p>Test passes if there is <strong>no red</strong>.</p> + <table> + <tr> + <td><div class="test"><img src="support/1x1-white.png" alt="FAIL (images required)"/></div></td> + <td><div class="control"></div></td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-128-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-128-ref.xht new file mode 100644 index 0000000000..698cdc7553 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-128-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: 180px; + width: 360px; + } + ]]></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/linebox/line-height-128.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-128.xht new file mode 100644 index 0000000000..8d6c34dc44 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-128.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: Test</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-04-04 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/fonts/line-height/008.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> + <link rel="match" href="line-height-128-ref.xht" /> + + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div { background: red; color: green; border: 1em solid; float: left; font: 3.75em/1 Ahem; } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div>XXXX</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-129.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-129.xht new file mode 100644 index 0000000000..78f90fbd7e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-129.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> + + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + + <title>CSS Test: height of line box and inline replaced elements</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Alan Gresley" href="mailto:alan@css-class.com" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Oct/0546.html" title="line-height: normal and multiple descendant font sizes" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="This test checks the height determination of a line box when such line box is made of a single inline replaced element. In this test, we verify that the margin box of an inline replaced element does indeed determine the line box height. div {line-height: 0px} rule only determines the minimum of the line box height." /> + + <style type="text/css"><![CDATA[ + div + { + background-color: red; + line-height: 0px; + } + + img + { + margin-bottom: -100px; + margin-top: 0px; + vertical-align: bottom; /* or top */ + /* + By default, images "sit" on the baseline (vertical-align's default value is 'baseline', not 'bottom' and not 'top') and not at the bottom of line boxes. Therefore, if we want to "nullify" the height of line box, then we must set 'vertical-align' to 'bottom' or to 'top'. "In case they [inline boxes] are [vertically-] aligned [to] 'top' or 'bottom', they must be aligned so as to minimize the line box height.": the line box height would not be minimizable to zero if the inline replaced box had been "sitting" on the baseline. + */ + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="target"><img src="support/green_box.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-001-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-001-ref.xht new file mode 100644 index 0000000000..594f61ab66 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-001-ref.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <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 rectangles have the <strong>same height</strong>.</p> + + <div><img src="support/swatch-blue.png" width="96" height="192" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="192" 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/linebox/line-height-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-001.xht new file mode 100644 index 0000000000..6262579386 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-001.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Line-height applied to elements with 'display' set to 'table-row-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'table-row-group'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #test + { + display: table-row-group; + line-height: 2in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: blue; + display: table-cell; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"> </div> + </div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-002.xht new file mode 100644 index 0000000000..98b2f5424e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-002.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Line-height applied to elements with 'display' set to 'table-header-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'table-header-group'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #test + { + display: table-header-group; + line-height: 2in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: blue; + display: table-cell; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"> </div> + </div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-003.xht new file mode 100644 index 0000000000..af7bda03dc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-003.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: Line-height applied to elements with 'display' set to 'table-footer-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'table-footer-group'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #test + { + display: table-footer-group; + line-height: 2in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: blue; + display: table-cell; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell"> </div> + </div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-004.xht new file mode 100644 index 0000000000..d7fd186138 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-004.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: Line-height applied to elements with 'display' set to 'table-row'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'table-row'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + line-height: 2in; + } + #cell + { + background: blue; + display: table-cell; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="row"> + <div id="cell"> </div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-005-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-005-ref.xht new file mode 100644 index 0000000000..c648cbeaf7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-005-ref.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <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/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><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/linebox/line-height-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-005.xht new file mode 100644 index 0000000000..d312d0377e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-005.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: Line-height applied to elements with 'display' set to 'table-column-group'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-005-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'table-column-group'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 1in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #test + { + display: table-column-group; + line-height: 2in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: blue; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-006.xht new file mode 100644 index 0000000000..61caf7d866 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-006.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: Line-height applied to elements with 'display' set to 'table-column'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-005-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'table-column'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 1in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #test + { + display: table-column; + line-height: 2in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: blue; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-007.xht new file mode 100644 index 0000000000..43d6b077d3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-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: Line-height applied to elements with 'display' set to 'table-cell'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'table-cell'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: blue; + display: table-cell; + line-height: 2in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="row"> + <div id="cell"> </div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-008.xht new file mode 100644 index 0000000000..6e88cd99fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-008.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: Line-height applied to elements with 'display' set to 'inline'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'inline'." /> + <style type="text/css"> + #div1 + { + background: blue; + position: relative; + width: 2in; + } + #div2 + { + display: inline; + line-height: 1in; + } + #div3 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + .box + { + background: blue; + height: 0.5in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div class="box"></div> + <div id="div2"> </div> + <div class="box"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-009.xht new file mode 100644 index 0000000000..99d587141d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-009.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: Line-height applied to elements with 'display' set to 'block'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'block'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + div div + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + span + { + background: blue; + display: block; + line-height: 2in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <span> </span> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-010.xht new file mode 100644 index 0000000000..d89f44114b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-010.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: Line-height applied to elements with 'display' set to 'list-item'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'list-item'." /> + <style type="text/css"> + #div1 + { + margin-left: 1em; + position: relative; + } + div div + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + span + { + background: blue; + display: list-item; + line-height: 2in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange boxes below are the same height and there is a marker bullet on the left-hand side of the blue box.</p> + <div id="div1"> + <span> </span> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-012.xht new file mode 100644 index 0000000000..e11ddd0cd3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-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: Line-height applied to elements with 'display' set to 'inline-block'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'inline-block'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: blue; + display: inline-block; + line-height: 2in; + width: 1in; + } + #div3 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange 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/linebox/line-height-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-013.xht new file mode 100644 index 0000000000..fefe16d603 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-013.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: Line-height applied to elements with 'display' set to 'table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'table'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + line-height: 2in; + } + #row + { + display: table-row; + } + #cell + { + background: blue; + display: table-cell; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="row"> + <div id="cell"> </div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-014.xht new file mode 100644 index 0000000000..8216c04f09 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-014.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: Line-height applied to elements with 'display' set to 'inline-table'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'inline-table'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #table + { + display: inline-table; + table-layout: fixed; + line-height: 2in; + } + #row + { + display: table-row; + } + #cell + { + background: blue; + display: table-cell; + width: 1in; + } + .box + { + background: black; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="row"> + <div id="cell"> </div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-015.xht new file mode 100644 index 0000000000..3a40b32a41 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-015.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: Line-height applied to elements with 'display' set to 'table-caption'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'table-caption'." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: orange; + height: 2in; + left: 1in; + position: absolute; + top: 0; + width: 1in; + } + #table + { + display: table; + } + #caption + { + background: blue; + line-height: 2in; + display: table-caption; + width: 1in; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the <strong>same height</strong>.</p> + <div id="div1"> + <div id="table"> + <div id="caption"> </div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-016-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-016-ref.xht new file mode 100644 index 0000000000..f1af3d01dd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-016-ref.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {margin: 100px auto auto 100px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div><img src="support/green15x15.png" width="100" height="100" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-016.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-016.xht new file mode 100644 index 0000000000..d1b788983a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-applies-to-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: Line-height applied to elements with 'display' set to 'none'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-applies-to-016-ref.xht" /> + + <meta name="assert" content="The 'line-height' property applies to elements with 'display' set to 'none'." /> + <style type="text/css"> + div + { + background-color: green; + color: green; + height: 100px; + margin: 100px; + width: 100px; + } + div div + { + background-color: red; + display: none; + font-size: 72pt; + line-height: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div> + <div>Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-001-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-001-ref.xht new file mode 100644 index 0000000000..91e07de116 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-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[ + div + { + font: 1in/1 serif; + margin-top: 0.5in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if "Filler Text" is completely visible without any clipping and if there is no red.</p> + + <div>Filler Text</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-001.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-001.xht new file mode 100644 index 0000000000..ab7850dc21 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-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: Glyphs overflow line box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-bleed-001-ref.xht" /> + + <meta name="assert" content="Glyphs bleed out of the box when 'line-height' is less than the content height and the height of the box is not increased." /> + <style type="text/css"> + #div1 + { + font: 1in/1em serif; + margin-top: 1in; + } + div div + { + background: red; + line-height: 0; + } + </style> + </head> + <body> + <p>Test passes if "Filler Text" is completely visible without any clipping and if there is no red.</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/linebox/line-height-bleed-002-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-002-ref.xht new file mode 100644 index 0000000000..942dbea380 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-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 + { + background-color: green; + height: 100px; + margin-top: 50px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-002.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-002.xht new file mode 100644 index 0000000000..9c69a86734 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-002.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: Glyphs overflow when line height of container is less than content height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="line-height-bleed-002-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="That glyphs bleed out of the box when 'line-height' can overlap adjoining line boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: green; + font: 100px/1em Ahem; + line-height: 0; + margin-top: 100px; + width: 100px; + } + div:first-letter + { + color: red; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div> + <span>X X</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-003.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-003.xht new file mode 100644 index 0000000000..e678d2a5a7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-bleed-003.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: Leading and half leading line heights leads to space above and below</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="assert" content="Line-height can be different from the content area so there is space above and below." /> + <style type="text/css"> + div + { + font: 0.5in/1em serif; + } + span + { + border-bottom: 1in solid blue; + line-height: 0; + } + </style> + </head> + <body> + <p>Test passes if there is space between bottom of the first line of "Fillet Text" and the blue box.</p> + <div> + <span>Filler Text<br />Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-largest-001.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-largest-001.xht new file mode 100644 index 0000000000..5052031a74 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-largest-001.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: Line-height with multiple font sizes</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="may" /> + <meta name="assert" content="The 'line-height' value may use the largest font size when there is more than one font size." /> + <style type="text/css"> + div + { + background-color: blue; + } + #span1 + { + font-size: 0.5in; + } + #span2 + { + font-size: 1in; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below is completely contained within the blue box.</p> + <div> + <span id="span1">Filler</span> + <span id="span2">Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-normal-recommendation-001.xht b/testing/web-platform/tests/css/CSS2/linebox/line-height-normal-recommendation-001.xht new file mode 100644 index 0000000000..9d5103ce87 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-normal-recommendation-001.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: Line-height recommended 'normal' value</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem should" /> + <meta name="assert" content="It is recommended that the 'normal' value for 'line-height' is set to 1.0 or 1.2 'em' units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 1in Ahem; + } + #div1 + { + position: relative; + } + div div + { + position: absolute; + top: 0; + } + #div2 + { + height: 1em; + left: 0; + width: 1in; + } + #div3 + { + background: blue; + display: block; + left: 1in; + position: absolute; + width: 1in; + } + #div4 + { + height: 1.2em; + left: 2in; + width: 1in; + } + #div2, #div4 + { + background: orange; + } + </style> + </head> + <body> + <p>Test passes if there is a blue box below. It is recommended that the blue box is the same height as one of the orange boxes but it is not required.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"> </div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-oof-descendants-001-ref.html b/testing/web-platform/tests/css/CSS2/linebox/line-height-oof-descendants-001-ref.html new file mode 100644 index 0000000000..c338a1b115 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-oof-descendants-001-ref.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +p { + font-size: 20px; + line-height: 0; +} +</style> +<p>Some paragraph</p> +<p>Some paragraph</p> +<p>Some paragraph</p> +<p>Some other paragraph</p> diff --git a/testing/web-platform/tests/css/CSS2/linebox/line-height-oof-descendants-001.html b/testing/web-platform/tests/css/CSS2/linebox/line-height-oof-descendants-001.html new file mode 100644 index 0000000000..6663b1949a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/line-height-oof-descendants-001.html @@ -0,0 +1,17 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: line-height is not affected by out-of-flow descendants</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#line-height"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1426760"> +<link rel="match" href="line-height-oof-descendants-001-ref.html"> +<style> +p { + font-size: 20px; + line-height: 0; +} +</style> +<p><span style="position: absolute;"></span>Some paragraph</p> +<p><span style="float: left;"></span>Some paragraph</p> +<p><span style="position: fixed;"></span>Some paragraph</p> +<p>Some other paragraph</p> diff --git a/testing/web-platform/tests/css/CSS2/linebox/needs-layout-transform.html b/testing/web-platform/tests/css/CSS2/linebox/needs-layout-transform.html new file mode 100644 index 0000000000..8a307b3b68 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/needs-layout-transform.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Reusing cached lines multiple times should not crash</title> +<link rel="author" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://crbug.com/1102083"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<a><object id="target"><b></b></object><br></a> +<script> +test(() => { + const target = document.getElementById('target'); + target.style.setProperty('transition-delay', '9999s'); + document.body.offsetWidth; + target.style.transform = 'scale(1)'; + document.body.offsetHeight; +}, 'No crash'); +</script> diff --git a/testing/web-platform/tests/css/CSS2/linebox/soft-wrap-opportunity-after-replaced-content-crash.html b/testing/web-platform/tests/css/CSS2/linebox/soft-wrap-opportunity-after-replaced-content-crash.html new file mode 100644 index 0000000000..2f2707f2d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/soft-wrap-opportunity-after-replaced-content-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="help" href="https://github.com/servo/servo/issues/30703"> + <link rel="author" href="mailto:mrobinson@igalia.com"> + <body> + <br><img> + </body> +</html> + diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/1x1-green.png b/testing/web-platform/tests/css/CSS2/linebox/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/1x1-green.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/1x1-white.png b/testing/web-platform/tests/css/CSS2/linebox/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/1x1-white.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/black15x15.png b/testing/web-platform/tests/css/CSS2/linebox/support/black15x15.png Binary files differnew file mode 100644 index 0000000000..b1bbef2cd5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/black15x15.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/blue96x96.png b/testing/web-platform/tests/css/CSS2/linebox/support/blue96x96.png Binary files differnew file mode 100644 index 0000000000..820f8cace2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/blue96x96.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/green15x15.png b/testing/web-platform/tests/css/CSS2/linebox/support/green15x15.png Binary files differnew file mode 100644 index 0000000000..51741584a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/green15x15.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/green_box.png b/testing/web-platform/tests/css/CSS2/linebox/support/green_box.png Binary files differnew file mode 100644 index 0000000000..6ed4aa506e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/green_box.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/iframe-inner.html b/testing/web-platform/tests/css/CSS2/linebox/support/iframe-inner.html new file mode 100644 index 0000000000..9d8f106b48 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/iframe-inner.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<span style="position: relative">More...</span> diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/inline-formatting-context-022.png b/testing/web-platform/tests/css/CSS2/linebox/support/inline-formatting-context-022.png Binary files differnew file mode 100644 index 0000000000..60d6463610 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/inline-formatting-context-022.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/ruler-v-100px-200px.png b/testing/web-platform/tests/css/CSS2/linebox/support/ruler-v-100px-200px.png Binary files differnew file mode 100644 index 0000000000..3eef21447a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/ruler-v-100px-200px.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/swatch-blue.png b/testing/web-platform/tests/css/CSS2/linebox/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/swatch-orange.png b/testing/web-platform/tests/css/CSS2/linebox/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/swatch-teal.png b/testing/web-platform/tests/css/CSS2/linebox/support/swatch-teal.png Binary files differnew file mode 100644 index 0000000000..0293ce89de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/swatch-teal.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/support/swatch-white.png b/testing/web-platform/tests/css/CSS2/linebox/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/support/swatch-white.png diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-004-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-004-ref.xht new file mode 100644 index 0000000000..46a4400ceb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-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 + { + background-color: black; + height: 20px; + width: 20px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a small black 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/linebox/vertical-align-004.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-004.xht new file mode 100644 index 0000000000..0c5240cc8d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-004.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: Vertical-align using pixels with a negative zero value, -0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0px; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-005.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-005.xht new file mode 100644 index 0000000000..0f300578da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-005.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: Vertical-align using pixels with a zero value, 0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a zero length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0px; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-006.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-006.xht new file mode 100644 index 0000000000..bd2f40b9ed --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-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: Vertical-align using pixels with a positive zero value, +0px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive zero length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0px; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-007-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-007-ref.xht new file mode 100644 index 0000000000..9fd287de72 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-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 + img + { + position: relative; + top: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" height="20" 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/linebox/vertical-align-007.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-007.xht new file mode 100644 index 0000000000..282f11c3c4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-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: Vertical-align using pixels with a nominal value, 96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a nominal length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 96px; + left: 1em; + } + #span1 + { + vertical-align: 96px; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-008.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-008.xht new file mode 100644 index 0000000000..27acf92519 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-008.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: Vertical-align using pixels with a positive nominal value, +96px</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive nominal length value in pixels." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 96px; + left: 1em; + } + #span1 + { + vertical-align: +96px; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-016.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-016.xht new file mode 100644 index 0000000000..d8d5a26b07 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-016.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: Vertical-align using points with a negative zero value, -0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0pt; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-017.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-017.xht new file mode 100644 index 0000000000..a6cb9d57d4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-017.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: Vertical-align using points with a zero value, 0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a zero length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0pt; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-018.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-018.xht new file mode 100644 index 0000000000..ea92024074 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-018.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: Vertical-align using points with a positive zero value, +0pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0pt; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-019.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-019.xht new file mode 100644 index 0000000000..1391a88a4c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-019.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: Vertical-align using points with a nominal value, 72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a nominal length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 72pt; + left: 1em; + } + #span1 + { + vertical-align: 72pt; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-020.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-020.xht new file mode 100644 index 0000000000..e4f8d85150 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-020.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: Vertical-align using points with a positive nominal value, +72pt</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a nominal length value in points." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 72pt; + left: 1em; + } + #span1 + { + vertical-align: +72pt; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-028.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-028.xht new file mode 100644 index 0000000000..eb15812971 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-028.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: Vertical-align using picas with a negative zero value, -0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0pc; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-029.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-029.xht new file mode 100644 index 0000000000..8dcadd3faf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-029.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: Vertical-align using picas with a zero value, 0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a zero length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0pc; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-030.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-030.xht new file mode 100644 index 0000000000..71fd6122e1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-030.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: Vertical-align using picas with a positive zero value, +0pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive zero length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0pc; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-031.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-031.xht new file mode 100644 index 0000000000..e6e50bcdc5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-031.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: Vertical-align using picas with a nominal value, 6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a nominal length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 6pc; + left: 1em; + } + #span1 + { + vertical-align: 6pc; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-032.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-032.xht new file mode 100644 index 0000000000..6f589064fe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-032.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: Vertical-align using picas with a positive nominal value, +6pc</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive nominal length value in picas." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 6pc; + left: 1em; + } + #span1 + { + vertical-align: +6pc; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-040.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-040.xht new file mode 100644 index 0000000000..03e333e357 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-040.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: Vertical-align using centimeters with a negative zero value, -0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0cm; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-041.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-041.xht new file mode 100644 index 0000000000..f5ffb8646f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-041.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: Vertical-align using centimeters with a zero value, 0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a zero length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0cm; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-042.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-042.xht new file mode 100644 index 0000000000..701c8d5c9e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-042.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: Vertical-align using centimeters with a positive zero value, +0cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive zero length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0cm; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-043.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-043.xht new file mode 100644 index 0000000000..9753da5442 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-043.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: Vertical-align using centimeters with a nominal value, 2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a nominal length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 2.54cm; + left: 1em; + } + #span1 + { + vertical-align: 2.54cm; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-044.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-044.xht new file mode 100644 index 0000000000..608a6ec88f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-044.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: Vertical-align using centimeters with a positive nominal value, +2.54cm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive nominal length value in centimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 2.54cm; + left: 1em; + } + #span1 + { + vertical-align: +2.54cm; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-052.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-052.xht new file mode 100644 index 0000000000..a0efd41f3e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-052.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: Vertical-align using millimeters with a negative zero value, -0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0mm; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-053.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-053.xht new file mode 100644 index 0000000000..e061a83bfd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-053.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: Vertical-align using millimeters with a zero value, 0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a zero length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0mm; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-054.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-054.xht new file mode 100644 index 0000000000..0e33ce13dd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-054.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: Vertical-align using millimeters with a positive zero value, +0mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive zero length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0mm; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-055.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-055.xht new file mode 100644 index 0000000000..4a9d06c603 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-055.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: Vertical-align using millimeters with a nominal value, 25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a nominal length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 25.4mm; + left: 1em; + } + #span1 + { + vertical-align: 25.4mm; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-056.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-056.xht new file mode 100644 index 0000000000..d47d515610 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-056.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: Vertical-align using millimeters with a positive nominal value, +25.4mm</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive nominal length value in millimeters." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 25.4mm; + left: 1em; + } + #span1 + { + vertical-align: +25.4mm; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-064.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-064.xht new file mode 100644 index 0000000000..e0cfc059ab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-064.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: Vertical-align using inches with a negative zero value, -0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0in; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-065.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-065.xht new file mode 100644 index 0000000000..8103243f21 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-065.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: Vertical-align using inches with a zero value, 0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a zero length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0in; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-066.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-066.xht new file mode 100644 index 0000000000..4a208131a8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-066.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: Vertical-align using inches with a positive zero value, +0in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive zero length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0in; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-067.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-067.xht new file mode 100644 index 0000000000..ad701d5299 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-067.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: Vertical-align using inches with a nominal value, 1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a nominal length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 1in; + left: 1em; + } + #span1 + { + vertical-align: 1in; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-068.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-068.xht new file mode 100644 index 0000000000..81554acd36 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-068.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: Vertical-align using inches with a positive nominal value, +1in</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive nominal length value in inches." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 1in; + left: 1em; + } + #span1 + { + vertical-align: +1in; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-076.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-076.xht new file mode 100644 index 0000000000..c3e6dd83b3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-076.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: Vertical-align using 'em' units with a negative zero value, -0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero 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; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0em; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-077.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-077.xht new file mode 100644 index 0000000000..2169b9a0de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-077.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: Vertical-align using 'em' units with a zero value, 0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a zero 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; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0em; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-078.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-078.xht new file mode 100644 index 0000000000..75ea2be7c8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-078.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: Vertical-align using 'em' units with a positive zero value, +0em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive zero 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; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0em; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-079-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-079-ref.xht new file mode 100644 index 0000000000..950508fe5b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-079-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 + img + { + position: relative; + top: 120px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" height="20" 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/linebox/vertical-align-079.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-079.xht new file mode 100644 index 0000000000..beb0291a25 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-079.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: Vertical-align using 'em' units with a nominal value, 6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' 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; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 6em; + left: 1em; + } + #span1 + { + vertical-align: 6em; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-080.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-080.xht new file mode 100644 index 0000000000..c293843ae4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-080.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: Vertical-align using 'em' units with a positive nominal value, +6em</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-079-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' 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; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 6em; + left: 1em; + } + #span1 + { + vertical-align: +6em; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-088.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-088.xht new file mode 100644 index 0000000000..ab1695203e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-088.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: Vertical-align using 'ex' units with a negative zero value, -0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' 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; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0ex; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-089.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-089.xht new file mode 100644 index 0000000000..662a15cac7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-089.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: Vertical-align using 'ex' units with a zero value, 0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' 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; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0ex; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-090.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-090.xht new file mode 100644 index 0000000000..1182dde9ae --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-090.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: Vertical-align using 'ex' units with a positive zero value, +0ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' 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; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0ex; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-091.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-091.xht new file mode 100644 index 0000000000..f7a22b452d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-091.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: Vertical-align using 'ex' units with a nominal value, 6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' 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; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 6ex; + left: 1em; + } + #span1 + { + vertical-align: 6ex; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-092.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-092.xht new file mode 100644 index 0000000000..5cf4b9023b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-092.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: Vertical-align using 'ex' units with a positive nominal value, +6ex</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' 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; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 6ex; + left: 1em; + } + #span1 + { + vertical-align: +6ex; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-100.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-100.xht new file mode 100644 index 0000000000..b66e5d336e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-100.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: Vertical-align using percentages with a negative zero value, -0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1em; + line-height: 1em; + position: relative; + width: 1em; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0%; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-101.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-101.xht new file mode 100644 index 0000000000..61b2541bad --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-101.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: Vertical-align using percentages with a zero value, 0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a zero length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1em; + line-height: 1em; + position: relative; + width: 1em; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0%; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-102.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-102.xht new file mode 100644 index 0000000000..fd1eb42aca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-102.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: Vertical-align using percentages with a positive zero value, +0%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive zero length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1em; + line-height: 1em; + position: relative; + width: 1em; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0%; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-103-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-103-ref.xht new file mode 100644 index 0000000000..888b4575e9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-103-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 + img + { + position: relative; + top: 20px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + + <div><img src="support/black15x15.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black15x15.png" width="20" height="20" 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/linebox/vertical-align-103.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-103.xht new file mode 100644 index 0000000000..665f03477a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-103.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: Vertical-align using percentages with a nominal value, 100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-103-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a nominal length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1em; + line-height: 1em; + position: relative; + width: 1em; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 100%; + left: 1em; + } + #span1 + { + vertical-align: 100%; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-104.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-104.xht new file mode 100644 index 0000000000..5cd2dabe2e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-104.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: Vertical-align using percentages with a positive nominal value, +100%</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-103-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive nominal length value in percentages." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + height: 1em; + line-height: 1em; + position: relative; + width: 1em; + } + #div2 + { + color: red; + } + #div3 + { + position: absolute; + top: 0; + } + #div4 + { + position: absolute; + top: 100%; + left: 1em; + } + #span1 + { + vertical-align: +100%; + } + </style> + </head> + <body> + <p>Test passes if there are 2 small black squares and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span>X + </div> + <div id="div3">X</div> + <div id="div4">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-109.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-109.xht new file mode 100644 index 0000000000..d43e3c7b40 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-109.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: Vertical-align with a negative zero value and no units, -0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a negative zero length value with no units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: -0; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-110.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-110.xht new file mode 100644 index 0000000000..de19a1b6ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-110.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: Vertical-align with a zero value and no units, 0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a zero length value with no units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: 0; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-111.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-111.xht new file mode 100644 index 0000000000..076ff5621c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-111.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: Vertical-align with a positive zero value and no units, +0</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-004-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets a positive zero length value with no units." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1 Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: +0; + } + </style> + </head> + <body> + <p>Test passes if there is a small black square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-112.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-112.xht new file mode 100644 index 0000000000..296f030c19 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-112.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: Vertical-align with a keyword, 'baseline'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets the keyword 'baseline'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 0.5in/1em Ahem; + position: relative; + } + #div3 + { + top: -0.7in; + } + #span1 + { + color: red; + vertical-align: baseline; + } + #span2 + { + font: 1.5in/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is a small and large box on the page and there is no red visible on the page.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span><span id="span2">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-113.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-113.xht new file mode 100644 index 0000000000..798d641f00 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-113.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: Vertical-align with a keyword, 'bottom'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets the keyword 'bottom'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 0.5in/1em Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 1in; + } + #span1 + { + color: red; + vertical-align: bottom; + } + #span2 + { + font: 1.5in/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is a small and large box on the page and there is no red visible on the page.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span><span id="span2">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-114.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-114.xht new file mode 100644 index 0000000000..35f33a2fe8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-114.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: Vertical-align with a keyword, 'middle'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets the keyword 'middle'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 0.5in/1em Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0.75in; + } + #span1 + { + color: red; + vertical-align: middle; + } + #span2 + { + font: 1.5in/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is a small and large box on the page and there is no red visible on the page.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span><span id="span2">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-115.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-115.xht new file mode 100644 index 0000000000..06d31ff0c9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-115.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-align with a keyword, 'sub'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets the keyword 'sub'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 48px/1em Ahem; + position: relative; + } + #div3 + { + border-top: 2px solid blue; + height: 48px; + position: absolute; + top: 38px; + width: 48px; + z-index: 1; + } + #span1 + { + color: orange; + vertical-align: sub; + } + #span2 + { + color: white; + font: 96px/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is vertical white space between the bottom of the blue line and the top of the orange square.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span><span id="span2">X</span> + </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-116.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-116.xht new file mode 100644 index 0000000000..866858d74c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-116.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-align with a keyword, 'super'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets the keyword 'super'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 48px/1em Ahem; + position: relative; + } + #div3 + { + border-top: 2px solid blue; + height: 48px; + position: absolute; + top: 86px; + width: 48px; + z-index: 1; + } + #span1 + { + color: orange; + vertical-align: super; + } + #span2 + { + color: white; + font: 96px/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is vertical white space between the top of the blue line and the bottom of the orange square.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span><span id="span2">X</span> + </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-117.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-117.xht new file mode 100644 index 0000000000..ef380d89a2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-117.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: Vertical-align with a keyword, 'text-bottom'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets the keyword 'text-bottom'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + position: absolute; + top: 1in; + } + #span1 + { + font: 1.5in/1em Ahem; + } + span span + { + color: red; + vertical-align: text-bottom; + } + #div2, span span + { + font: 0.5in/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is a large and small box on the page and there is no red visible on the page.</p> + <div id="div1"> + <div> + <span id="span1"><span>X</span>X</span> + </div> + <div id="div2">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-117a-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-117a-ref.xht new file mode 100644 index 0000000000..72dd617d22 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-117a-ref.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 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: yellow; + height: 175px; + position: relative; + } + + img {position: absolute;} + + img#first-black + { + left: 0px; + top: 90px; + } + + img#second-blue + { + left: 120px; + top: 45px; + } + + img#third-black + { + left: 520px; + top: 90px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue stripe is vertically offset <strong>above the black stripes on both sides</strong>. The blue stripe must be clearly and entirely above the black stripes.</p> + + <div><img id="first-black" src="../support/black15x15.png" width="160" height="40" alt="Image download support must be enabled" /><img id="second-blue" src="../support/blue15x15.png" width="440" height="40" alt="Image download support must be enabled" /><img id="third-black" src="../support/black15x15.png" width="160" height="40" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-117a.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-117a.xht new file mode 100644 index 0000000000..ee85840bb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-117a.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: 'vertical-align: text-bottom' - line-height</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#leading" title="Section 10.8.1 Leading and half-leading" /> + <link rel="match" href="vertical-align-117a-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="For inline non-replaced elements (such as the span element in this testcase), the box used for vertical-alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side). 'vertical-align: text-bottom' will align the bottom of such box with the bottom of the parent's content area and not with the bottom of the parent's box." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + /* + The sole purpose for such yellow background + is to help delimit and visually identify the + content area of the block container box. + */ + font: 2.5em/3.25 Ahem; + /* + equivalent to font: 40px/130px (with top-half-leading + and bottom-half-leading each equal to 45px) but + entirely font-size-relative and perfectly + text-size-scalable in all browsers + */ + } + + span + { + color: blue; + margin: auto -1em; + vertical-align: text-bottom; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue stripe is vertically offset <strong>above the black stripes on both sides</strong>. The blue stripe must be clearly and entirely above the black stripes.</p> + + <div>TTTT<span>MustBeAbove</span>TTTT</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-118.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-118.xht new file mode 100644 index 0000000000..6bab25f911 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-118.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: Vertical-align with a keyword, 'text-top'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets the keyword 'text-top'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + position: absolute; + top: 0; + } + #span1 + { + font: 1.5in/1em Ahem; + } + span span + { + color: red; + vertical-align: text-top; + } + #div2, span span + { + font: 0.5in/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is a large and small box on the page and there is no red visible on the page.</p> + <div id="div1"> + <div> + <span id="span1"><span>X</span>X</span> + </div> + <div id="div2">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-118a-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-118a-ref.xht new file mode 100644 index 0000000000..b0f2b248a4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-118a-ref.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 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: yellow; + height: 175px; + position: relative; + } + + img {position: absolute;} + + img#first-black + { + left: 0px; + top: 45px; + } + + img#second-blue + { + left: 120px; + top: 90px; + } + + img#third-black + { + left: 520px; + top: 45px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue stripe is vertically offset <strong>below the black stripes on both sides</strong>. The blue stripe must be clearly and entirely below the black stripes.</p> + + <div><img id="first-black" src="../support/black15x15.png" width="160" height="40" alt="Image download support must be enabled" /><img id="second-blue" src="../support/blue15x15.png" width="440" height="40" alt="Image download support must be enabled" /><img id="third-black" src="../support/black15x15.png" width="160" height="40" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-118a.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-118a.xht new file mode 100644 index 0000000000..9598cbdd3c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-118a.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: 'vertical-align: text-top' - line-height</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#leading" title="Section 10.8.1 Leading and half-leading" /> + <link rel="match" href="vertical-align-118a-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="For inline non-replaced elements (such as the span element in this testcase), the box used for vertical-alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side). 'vertical-align: text-top' will align the top of such box with the top of the parent's content area and not with the bottom of the parent's box." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + /* + The sole purpose for such yellow background + is to help delimit and visually identify the + content area of the block container box. + */ + font: 2.5em/3.25 Ahem; + /* + equivalent to font: 40px/130px (with top-half-leading + and bottom-half-leading each equal to 45px) but + entirely font-size-relative and perfectly + text-size-scalable in all browsers + */ + } + + span + { + color: blue; + margin: auto -1em; + vertical-align: text-top; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue stripe is vertically offset <strong>below the black stripes on both sides</strong>. The blue stripe must be clearly and entirely below the black stripes.</p> + + <div>LLLL<span>MustBeBelow</span>LLLL</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-119.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-119.xht new file mode 100644 index 0000000000..26c3758f62 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-119.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: Vertical-align with a keyword, 'top'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets the keyword 'top'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 0.5in/1em Ahem; + position: relative; + } + #div3 + { + position: absolute; + top: 0; + } + #span1 + { + color: red; + vertical-align: top; + } + #span2 + { + font: 1.5in/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is a small and large box on the page and there is no red visible on the page.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span><span id="span2">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-120.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-120.xht new file mode 100644 index 0000000000..dd01dfb76a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-120.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: Vertical-align with a keyword, 'inherit'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property sets the keyword 'inherit' and inherits the computed value from the parent element." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 0.5in/1em Ahem; + position: relative; + } + #div2 + { + vertical-align: middle; + } + #div3 + { + position: absolute; + top: 0.75in; + } + #span1 + { + color: red; + vertical-align: inherit; + } + #span2 + { + font: 1.5in/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if there is a small and large box on the page and there is no red visible on the page.</p> + <div id="div1"> + <div id="div2"> + <span id="span1">X</span><span id="span2">X</span> + </div> + <div id="div3">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-121-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-121-ref.xht new file mode 100644 index 0000000000..c0db9e0e8b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-121-ref.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 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[ + div#table + { + border-collapse: collapse; + display: table; + font: 30px/1 Ahem; + width: 6em; + } + + div.tr + { + display: table-row; + } + + div.td + { + color: white; + display: table-cell; + } + + div#top + { + border-top: blue solid medium; + } + + div.navy + { + color: navy; + } + ]]></style> + + </head> + + <body> + + <p>There should be a plus sign with a blue line traversing through its middle.</p> + + <div id="table"> + <div class="tr"><div class="td">A</div><div class="td">B</div><div class="navy td">C</div><div class="navy td">D</div><div class="td">E</div><div class="td">F</div></div> + + <div class="tr"><div class="td">G</div><div class="navy td">H</div><div class="navy td">I</div><div class="navy td">J</div><div class="navy td">K</div><div class="td">L</div></div> + + <div class="tr" id="top"><div class="td">M</div><div class="navy td">N</div><div class="navy td">O</div><div class="navy td">P</div><div class="navy td">Q</div><div class="td">R</div></div> + + <div class="tr"><div class="td">S</div><div class="td">T</div><div class="navy td">U</div><div class="navy td">V</div><div class="td">W</div><div class="td">X</div></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-121.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-121.xht new file mode 100644 index 0000000000..eac216efdf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-121.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: vertical-align: top</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/" /> <!-- 2016-06-01 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/inline/vertical-align/001.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" /> + <link rel="match" href="vertical-align-121-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div { color: navy; text-align: center; width: 6em; font: 30px/1 Ahem; } + span { font-size: 2em; } + .bottom { border-bottom: solid blue; } + .bottom span { vertical-align: bottom; } + .top span { vertical-align: top; } + </style> + </head> + <body> + + <p>There should be a plus sign with a blue line traversing through its middle.</p> + <div class="bottom">x<span>X</span>x</div> + <div class="top">x<span>X</span>x</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-001-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-001-ref.xht new file mode 100644 index 0000000000..8ed51e0c21 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-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: orange; + height: 96px; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + + <div><img src="support/swatch-blue.png" width="20" height="20" 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/linebox/vertical-align-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-001.xht new file mode 100644 index 0000000000..fca1480f73 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-001.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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'table-row-group'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #test + { + display: table-row-group; + vertical-align: bottom; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: orange; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell">X</div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-002.xht new file mode 100644 index 0000000000..44eda65ed8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-002.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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'table-header-group'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #test + { + display: table-header-group; + vertical-align: bottom; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: orange; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell">X</div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-003.xht new file mode 100644 index 0000000000..9ccd4e0ae2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'table-footer-group'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #test + { + display: table-footer-group; + vertical-align: bottom; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: orange; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="test"> + <div id="row"> + <div id="cell">X</div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-004.xht new file mode 100644 index 0000000000..f526a704d3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-004.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-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'table-row'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + vertical-align: bottom; + } + #cell + { + background: orange; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="row"> + <div id="cell">X</div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-005.xht new file mode 100644 index 0000000000..624517ae3c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-005.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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'table-column-group'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #test + { + display: table-column-group; + vertical-align: bottom; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: orange; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell">X</div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-006.xht new file mode 100644 index 0000000000..a5aacec7d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-006.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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'table-column'." /> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/003.html"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #test + { + display: table-column; + vertical-align: bottom; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: orange; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="test"></div> + <div id="row"> + <div id="cell">X</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-007-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-007-ref.xht new file mode 100644 index 0000000000..1d19405b65 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-007-ref.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 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: 96px; + width: 96px; + } + + img + { + position: relative; + top: 76px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is in the <strong>lower-left corner</strong> of a bigger orange square.</p> + + <div><img src="support/swatch-blue.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-007.xht new file mode 100644 index 0000000000..b328b514de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-007.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-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-007-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property applies to elements with 'display' set to 'table-cell'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #table + { + display: table; + table-layout: fixed; + } + #row + { + display: table-row; + } + #cell + { + background: orange; + display: table-cell; + height: 1in; + vertical-align: bottom; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>lower-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="row"> + <div id="cell">X</div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-008-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-008-ref.xht new file mode 100644 index 0000000000..a7b75fcf7d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-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[ + div + { + background-color: orange; + height: 100px; + } + + img + { + position: relative; + top: 80px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is in the <strong>lower-left corner</strong> of a wide orange rectangle.</p> + + <div><img src="support/swatch-blue.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-008.xht new file mode 100644 index 0000000000..d9d9176a2d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-008-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property applies to elements with 'display' set to 'inline'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: orange; + } + div div + { + display: inline; + } + #div1 + { + color: blue; + font: 20px/1em Ahem; + vertical-align: bottom; + } + #div2 + { + color: orange; + font: 100px/1em Ahem; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>lower-left corner</strong> of a wide orange rectangle.</p> + <div> + <div id="div1">X</div> + <div id="div2">X</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-009.xht new file mode 100644 index 0000000000..0270f4119b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'block'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + span + { + background: orange; + color: blue; + display: block; + font: 20px/1em Ahem; + height: 1in; + vertical-align: bottom; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div> + <span>X</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-010.xht new file mode 100644 index 0000000000..7240970c26 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-010.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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'list-item'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: orange; + color: blue; + display: list-item; + font: 50px/1 Ahem; + height: 100px; + margin-left: 2em; + vertical-align: middle; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a blue square in the upper-left corner of the orange square and there is a blue marker bullet on the left-hand side of the squares.</p> + <div>X</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-012.xht new file mode 100644 index 0000000000..2cc4f8a01f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-012.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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'inline-block'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: orange; + color: blue; + display: inline-block; + font: 20px/1em Ahem; + height: 1in; + vertical-align: bottom; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div>X</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-013.xht new file mode 100644 index 0000000000..a618891b72 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-013.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-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'table'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #table + { + display: table; + table-layout: fixed; + vertical-align: bottom; + } + #row + { + display: table-row; + } + #cell + { + background: orange; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="row"> + <div id="cell">X</div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-014.xht new file mode 100644 index 0000000000..bec0080b2e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-014.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-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'inline-table'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #table + { + display: inline-table; + table-layout: fixed; + vertical-align: bottom; + } + #row + { + display: table-row; + } + #cell + { + background: orange; + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="row"> + <div id="cell">X</div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-015.xht new file mode 100644 index 0000000000..68f7c0705f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-applies-to-015.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: Vertical-align applied to elements 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-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-applies-to-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property does not apply to elements with 'display' set to 'table-caption'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + color: blue; + font: 20px/1em Ahem; + } + #table + { + display: table; + } + #caption + { + background: orange; + display: table-caption; + height: 1in; + vertical-align: bottom; + width: 1in; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the <strong>upper-left corner</strong> of a bigger orange square.</p> + <div id="table"> + <div id="caption">X</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/linebox/vertical-align-baseline-001-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-001-ref.xht new file mode 100644 index 0000000000..5b3d04d533 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + border-bottom: orange solid medium; + color: blue; + font: 100px/1 Ahem; + height: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if 2 blue squares are touching but not overlapping the orange line.</p> + + <div>A B</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-001.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-001.xht new file mode 100644 index 0000000000..916d649e8a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-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: Vertical-align set to '0%' is equal to 'baseline'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-baseline-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property set to '0%' means the same as the 'baseline'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + border-bottom: solid orange; + color: blue; + font: 100px/1 Ahem; + height: 100px; + } + #span1 + { + vertical-align: 0%; + } + #span2 + { + vertical-align: baseline; + } + </style> + </head> + <body> + <p>Test passes if 2 blue squares are touching but not overlapping the orange line.</p> + <div> + <span id="span1">X</span> + <span id="span2">X</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-002.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-002.xht new file mode 100644 index 0000000000..69c380bdd7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-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: Vertical-align set to '0' is equal to 'baseline'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-baseline-001-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property set to '0' means the same as the 'baseline'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + border-bottom: solid orange; + color: blue; + font: 100px/1 Ahem; + height: 100px; + } + #span1 + { + vertical-align: 0%; + } + #span2 + { + vertical-align: baseline; + } + </style> + </head> + <body> + <p>Test passes if 2 blue squares are touching but not overlapping the orange line.</p> + <div> + <span id="span1">X</span> + <span id="span2">X</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-003-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-003-ref.xht new file mode 100644 index 0000000000..90b1cdb65a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-003-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/" /> + + <style type="text/css"><![CDATA[ + table + { + background-color: orange; + border-spacing: 0px; + } + + col#middle {width: 80px;} + + td {padding: 0px;} + + td.bottom + { + background-color: white; + vertical-align: bottom; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the last line of "Filler Text" inside the orange rectangle is on the same line as the arrows "-->" "<--".</p> + + <table> + <col></col> <col id="middle"></col> <col></col> + <tr><td class="bottom">--> </td><td>Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</td><td class="bottom"> <--</td></tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-003.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-003.xht new file mode 100644 index 0000000000..b6b5ea30de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-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: Vertical-align applied to 'inline-block' and baseline alignment</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-baseline-003-ref.xht" /> + + <meta name="assert" content="The 'vertical-align' property aligns the last line box of 'inline-block' elements with the baseline." /> + <style type="text/css"> + #span1 + { + font-size: 16px; + } + #span2 + { + background: orange; + display: inline-block; + width: 5em; + } + </style> + </head> + <body> + <p>Test passes if the last line of "Filler Text" inside the orange rectangle is on the same line as the arrows "-->" "<--".</p> + <div> + <span id="span1">--> <span id="span2">Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</span> <--</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-004.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-004.xht new file mode 100644 index 0000000000..454aa6218b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-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: Vertical-align applied to empty 'inline-block' and baseline alignment</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property aligns an empty 'inline-block' elements' bottom margin edge with the baseline." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: black; + width: 3in; + } + #span1 + { + color: white; + font: 1in/1em Ahem; + } + #span2 + { + background: white; + display: inline-block; + height: 1in; + position: relative; + top: 0.2em; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there are 2 parallel black bars of equal width.</p> + <div> + <span id="span1">X<span id="span2"></span>X</span> + </div> + <div id="reference">XXX</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-004a-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-004a-ref.xht new file mode 100644 index 0000000000..8182e70892 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-004a-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + font: 1em/1.25 serif; + margin: 1em 0em; + } + + div + { + background-color: yellow; + height: 209px; + position: relative; + } + + img#blue-square, img#vertical-ruler {vertical-align: top;} + + img#black-stripe + { + bottom: 0px; + position: absolute; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the bottom edge of the blue square is flush with the 100px<br /> + line and if the top edge of the black stripe is flush with the 200px line.</p> + + <div><img id="blue-square" src="../support/blue15x15.png" width="100" height="100" alt="Image download support must be enabled" /><img id="vertical-ruler" src="../support/ruler-v-100px-200px.png" width="55" height="250" alt="Image download support must be enabled" /><img id="black-stripe" src="../support/black15x15.png" width="345" height="10" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-004a.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-004a.xht new file mode 100644 index 0000000000..dbb83cf965 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-004a.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: Vertical-align applied to empty 'inline-block' and baseline alignment</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#leading" title="10.8.1 Leading and half-leading" /> + <link rel="match" href="vertical-align-baseline-004a-ref.xht" /> + + <meta content="ahem image" name="flags" /> + <meta content="The baseline of an 'inline-block' that has no in-flow line boxes is at its bottom margin edge. The bottom margin edge of an 'inline-block' that has no inflow line boxes will 'sit' on the baseline, will be located on the baseline of such 'inline-block'." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + font: 1em/1.25 serif; + margin: 1em 0em; + } + + div#wrapper + { + background-color: yellow; + /* + The sole purpose for such yellow background + is to help delimit and visually identify the + content area of the block container box. + */ + + color: black; + font: 50px/1 Ahem; + /* + So that 50px / 5 == 10 without remainder; + that way, the accurate position of baseline + does not imply fractional pixel. + Also, the height of the "p" glyph will not + create fractional pixel either. + */ + } + + div#inline-block-without-inflow-line-boxes + { + background-color: blue; + display: inline-block; + margin-bottom: 99px; + height: 2em; + width: 2em; + } + + img + { + position: absolute; + top: 72px; + + /* + + 16px : max(body's margin-top, p's margin-top) == max(8px, 16px) + + + 20px : p's first line box height + + + 20px : p's second line box height + + + 16px : p's margin-bottom + ======== + 72px + + */ + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the bottom edge of the blue square is flush with the 100px<br /> + line and if the top edge of the black stripe is flush with the 200px line.</p> + + <div id="wrapper"><div id="inline-block-without-inflow-line-boxes"></div><img src="support/ruler-v-100px-200px.png" width="55" height="250" alt="Image download support must be enabled" />pppppppp</div> + + <!-- + By definition, the top of "p" glyphs - which is the + black stripe in the rendered layout - should be + perfectly flush with the baseline. + --> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-005.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-005.xht new file mode 100644 index 0000000000..511c537124 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-005.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: Vertical-align applied to an 'inline-block' with 'overflow' not set to 'visible' and baseline alignment</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'vertical-align' property aligns an 'inline-block' elements' bottom margin edge with the baseline when 'overflow' is not set to 'visible'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + } + #span1 + { + background: blue; + color: blue; + } + #span2 + { + color: orange; + display: inline-block; + margin-bottom: 1em; + height: 4em; + overflow: hidden; + width: 5em; + } + </style> + </head> + <body> + <p>Test passes if the orange box below is above the blue box.</p> + <div> + <span id="span1">X<span id="span2">XXXXX XXXXX XXXXX XXXXX XXXXX</span>X</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-005a.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-005a.xht new file mode 100644 index 0000000000..e2983d5b8e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-005a.xht @@ -0,0 +1,89 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: Vertical-align applied to an 'inline-block' with 'overflow' not set to 'visible' and baseline alignment</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#leading" title="10.8.1 Leading and half-leading" /> + <link rel="match" href="vertical-align-baseline-004a-ref.xht" /> + + <meta content="ahem image" name="flags" /> + <meta content="The baseline of an 'inline-block' whose 'overflow' property has a computed value other than 'visible' is located at its bottom margin edge." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + font: 1em/1.25 serif; + margin: 1em 0em; + } + + div#wrapper + { + background-color: yellow; + /* + The sole purpose for such yellow background + is to help delimit and visually identify the + content area of the block container box. + */ + + color: black; + font: 50px/1 Ahem; + /* + So that 50px / 5 == 10 without remainder; + that way, the accurate position of baseline + does not imply fractional pixel. + Also, the height of the "p" glyph will not + create fractional pixel either. + */ + } + + div#inline-block-with-overflow-hidden + { + color: blue; + display: inline-block; + margin-bottom: 99px; + height: 2em; + overflow: hidden; + width: 2em; + } + + img + { + position: absolute; + top: 72px; + + /* + + 16px : max(body's margin-top, p's margin-top) == max(8px, 16px) + + + 20px : p's first line box height + + + 20px : p's second line box height + + + 16px : p's margin-bottom + ======== + 72px + + */ + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the bottom edge of the blue square is flush with the 100px<br /> + line and if the top edge of the black stripe is flush with the 200px line.</p> + + <div id="wrapper"> + <div id="inline-block-with-overflow-hidden">XXX XXX XXX</div><img src="support/ruler-v-100px-200px.png" width="55" height="250" alt="Image download support must be enabled" />pppppppp + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-006.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-006.xht new file mode 100644 index 0000000000..7d142e1794 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-006.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Baseline alignment with an inline element parent</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + + <meta name="assert" content="The baseline of an inline element is aligned with the baseline of its child inline-block when 'vertical-align: baseline' is specified on the child." /> + <style type="text/css"> + #test + { + display: inline-block; + font-size: 2em; + vertical-align: baseline; + } + </style> + </head> + <body> + <p>Test passes if the bottoms of all the 'X's are aligned.</p> + <div> + <span>XXXXX<span id="test">XXXXX</span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-006a.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-006a.xht new file mode 100644 index 0000000000..084110c370 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-006a.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: Baseline alignment of an inline-block with vertical padding and margin</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#leading" title="10.8.1 Leading and half-leading" /> + + <meta name="assert" content="The baseline of an (anonymous) inline element is aligned with the baseline of the last line box of an 'inline-block' in the normal flow as 'vertical-align: baseline' is by default applied. In such case, the vertical padding and vertical margin have no influence on the position of the baseline line of an 'inline-block'." /> + + <style type="text/css"><![CDATA[ + div > div + { + display: inline-block; + font-size: 30px; + margin: 0.3em 0em; + padding: 0.7em 0em; + vertical-align: baseline; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the bottom of all 'L's are aligned.</p> + + <div>LLLLL + <div> + <p>ABCDE</p> + <p>LLLLL</p> + </div>LLLLL + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-007-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-007-ref.xht new file mode 100644 index 0000000000..d787250f0e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-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[ + span {font-size: 2em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the bottoms of all the 'X's are aligned.</p> + + <div>XXXXX<span>XXXXX</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-007.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-007.xht new file mode 100644 index 0000000000..e272425996 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-007.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: Baseline alignment with a block element parent</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-05 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-baseline-007-ref.xht" /> + + <meta name="assert" content="The baseline of a block element is aligned with the baseline of its child inline element when 'vertical-align: baseline' is specified on the child." /> + <style type="text/css"> + span + { + font-size: 2em; + vertical-align: baseline; + } + </style> + </head> + <body> + <p>Test passes if the bottoms of all the 'X's are aligned.</p> + <div> + XXXXX<span>XXXXX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-008-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-008-ref.xht new file mode 100644 index 0000000000..887ae37573 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-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 + { + left: 3px; + position: relative; + top: 3px; + } + + span {font-size: 2em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the bottoms of all the 'X's are aligned.</p> + + <div>XXXXX<span>XXXXX</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-008.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-008.xht new file mode 100644 index 0000000000..eac3e33903 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-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: Baseline alignment with a table-cell element parent</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-05 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-baseline-008-ref.xht" /> + + <meta name="assert" content="The baseline of a table cell element is aligned with the baseline of its child inline element when 'vertical-align: baseline' is specified on the child." /> + <style type="text/css"> + span + { + font-size: 2em; + vertical-align: baseline; + } + </style> + </head> + <body> + <p>Test passes if the bottoms of all the 'X's are aligned.</p> + <table> + <tr> + <td>XXXXX<span>XXXXX</span></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-009.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-009.xht new file mode 100644 index 0000000000..a74543110d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-009.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: Baseline alignment with a table caption element parent</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-baseline-007-ref.xht" /> + + <meta name="assert" content="The baseline of a table caption element is aligned with the baseline of its child inline element when 'vertical-align: baseline' is specified on the child." /> + <style type="text/css"> + span + { + font-size: 2em; + vertical-align: baseline; + } + </style> + </head> + <body> + <p>Test passes if the bottoms of all the 'X's are aligned.</p> + <table> + <caption>XXXXX<span>XXXXX</span></caption> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-010.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-010.xht new file mode 100644 index 0000000000..1e5a0df855 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-baseline-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: Baseline alignment with an inline-block element parent</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <meta name="assert" content="The baseline of an inline-block element is aligned with the baseline of its child inline element when 'vertical-align: baseline' is specified on the child." /> + <style type="text/css"> + div + { + display: inline-block; + } + span + { + font-size: 2em; + vertical-align: baseline; + } + </style> + </head> + <body> + <p>Test passes if the bottoms of all the 'X's are aligned.</p> + <div> + XXXXX<span>XXXXX</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-boxes-001.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-boxes-001.xht new file mode 100644 index 0000000000..3534f49651 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-boxes-001.xht @@ -0,0 +1,76 @@ +<!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: Vertical Alignment boxes: replaced elements</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height"/> + <meta name="flags" content="ahem image"/> + <meta name="assert" content="Vertical alignment aligns the margin box of inline replaced elements."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .test { + height: 2em; + font: 40px/60px Ahem; color: orange; + } + + #control { + height: 40px; + margin-bottom: -18px; + } + #length { + vertical-align: -28px; + padding-top: 15px; + border-top: 10px solid; + margin: 10px 0; + } + #percent { + vertical-align: 50%; + padding-bottom: 15px; + border-bottom: 10px solid; + margin-bottom: -48px; + } + #text-bottom { + vertical-align: text-bottom; + padding-bottom: 10px; + border-bottom: 15px solid; + margin-bottom: -10px; + } + #text-top { + vertical-align: text-top; + padding-top: 15px; + border-top: 10px solid; + margin-top: 10px; + } + #middle { + vertical-align: middle; + padding-top: 15px; + border-top: 10px solid; + margin-bottom: -28px; + } + #baseline { + vertical-align: baseline; + padding-bottom: 10px; + border-bottom: 15px solid; + margin-bottom: -18px; + } + + img { + background: orange; + } + </style> + </head> + <body> + <p>There should be a single orange rectangle with perfectly straight sides below.</p> + <div class="test"> + <img id="control" src="support/swatch-orange.png" alt="FAIL"/><!-- + --><img id="baseline" src="support/swatch-orange.png" alt="FAIL"/><!-- + --><img id="middle" src="support/swatch-orange.png" alt="FAIL"/><!-- + --><img id="text-top" src="support/swatch-orange.png" alt="FAIL"/><!-- + --><img id="text-bottom" src="support/swatch-orange.png" alt="FAIL"/><!-- + --><img id="percent" src="support/swatch-orange.png" alt="FAIL"/><!-- + --><img id="length" src="support/swatch-orange.png" alt="FAIL"/> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-negative-leading-001-ref.html b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-negative-leading-001-ref.html new file mode 100644 index 0000000000..912cd378e1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-negative-leading-001-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + margin: 30px 0; + color: orange; + background-color: blue; + line-height: 10px; + font-size: 30px; + font-family: Ahem; +} +.lh20 { line-height: 20px; } +.lh30 { line-height: 30px; } +.up5 { position: relative; top: -5px; } +.up10 { position: relative; top: -10px; } +.down5 { position: relative; top: 5px; } +.down10 { position: relative; top: 10px; } +</style> +<body> +<div class="container"> + <span>XX</span> + <span>XX</span> + <span>XX</span> +</div> +<div class="container lh30"> + <span class="up10">XX</span> + <span>XX</span> + <span class="down10">XX</span> +</div> +<div class="container"><span>XX</span></div> +<div class="container"><span>XX</span></div> +<div class="container lh20"><span class="up5">XX</span></div> +<div class="container lh20"><span class="down5">XX</span></div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-negative-leading-001.html b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-negative-leading-001.html new file mode 100644 index 0000000000..4ce5f6d2ad --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-negative-leading-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>Test vertical-align: top and bottom do not affect the line height</title> +<link rel="match" href="vertical-align-negative-leading-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align"> +<link rel="author" href="mailto:kojii@chromium.org"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + margin: 30px 0; + color: orange; + background-color: blue; + line-height: 10px; + font-size: 30px; + font-family: Ahem; +} +span { background: purple; } +.top { vertical-align: top; } +.bottom { vertical-align: bottom; } +.text-top { vertical-align: text-top; } +.text-bottom { vertical-align: text-bottom; } +</style> +<body> +<div class="container"> + <span class="top">XX</span> + <span>XX</span> + <span class="bottom">XX</span> +</div> +<div class="container"> + <span class="text-top">XX</span> + <span>XX</span> + <span class="text-bottom">XX</span> +</div> +<div class="container"><span class="top">XX</span></div> +<div class="container"><span class="bottom">XX</span></div> +<div class="container"><span class="text-top">XX</span></div> +<div class="container"><span class="text-bottom">XX</span></div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-nested-top-001-ref.html b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-nested-top-001-ref.html new file mode 100644 index 0000000000..1fd155e380 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-nested-top-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> +body { + font-size: 18px; + line-height: 20px; +} +.hb { + font-size: 12px; + vertical-align: top; +} +</style> +<body> + <span class="hb">XX</span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-nested-top-001.html b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-nested-top-001.html new file mode 100644 index 0000000000..3667ced2ca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-nested-top-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="match" href="vertical-align-nested-top-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" /> +<link rel="author" href="kojii@chromium.org"> +<style> +body { + font-size: 18px; + line-height: 20px; +} +.hb { + font-size: 12px; + vertical-align: top; +} +.g2 { + vertical-align: top; +} +</style> +<body> + <span class="hb">X<span class="g2">X</span></span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-sub-001-ref.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-sub-001-ref.xht new file mode 100644 index 0000000000..9167843266 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-sub-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[ + div + { + color: green; + font-size: 1in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div>Filler Text</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-sub-001.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-sub-001.xht new file mode 100644 index 0000000000..096ff0c3c8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-sub-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: Vertical-align set to 'sub' does not adjust font-size</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-06 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-sub-001-ref.xht" /> + + <meta name="assert" content="The 'vertical-align' property value 'sub' has no effect on the font-size of an element's text." /> + <style type="text/css"> + div + { + font-size: 1in; + } + #span1 + { + color: red; + position: absolute; + } + #span2 + { + color: green; + position: absolute; + vertical-align: sub; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div> + <span id="span1">Filler Text</span> + <span id="span2">Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-super-001.xht b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-super-001.xht new file mode 100644 index 0000000000..b7415548ab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-super-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: Vertical-align set to 'super' does not adjust font-size</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-06 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" /> + <link rel="match" href="vertical-align-sub-001-ref.xht" /> + + <meta name="assert" content="The 'vertical-align' property value 'super' has no effect on the font-size of an element's text." /> + <style type="text/css"> + div + { + font-size: 1in; + } + #span1 + { + color: red; + position: absolute; + } + #span2 + { + color: green; + position: absolute; + vertical-align: super; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div> + <span id="span1">Filler Text</span> + <span id="span2">Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-001.html b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-001.html new file mode 100644 index 0000000000..2e03bc0d2f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-001.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" /> +<link rel="author" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +section.test { + display: inline-block; + font-size: 20px; + line-height: 1.5; + font-family: Arial; + font-family: Ahem; +} +section.test > div { + background: blue; + margin-bottom: 1em; +} +.filler { + display: inline-block; + background: cyan; + height: 3em; + width: 1em; +} +.target { + display: inline-block; + background: orange; + width: 1em; + height: 1em; +} +div.top, section.top .target { vertical-align: top; } +div.text-top, section.text-top .target { vertical-align: text-top; } +div.text-bottom, section.text-bottom .target { vertical-align: text-bottom; } +div.bottom, section.bottom .target { vertical-align: bottom; } +.test .fail { + outline: red solid 5px; +} +</style> +<body> +<section class="test top"> + <div><div class="filler"></div><div class="target" data-y="0"></div></div> + <div><div class="filler top"></div><div class="target" data-y="0"></div></div> + <div><div class="filler text-top"></div><div class="target" data-y="0"></div></div> + <div><div class="filler bottom"></div><div class="target" data-y="0"></div></div> + <div><div class="filler text-bottom"></div><div class="target" data-y="0"></div></div> +</section> +<section class="test text-top"> + <div><div class="filler"></div><div class="target" data-y="44"></div></div> + <div><div class="filler top"></div><div class="target" data-y="5"></div></div> + <div><div class="filler text-top"></div><div class="target" data-y="5"></div></div> + <div><div class="filler bottom"></div><div class="target" data-y="35"></div></div> + <div><div class="filler text-bottom"></div><div class="target" data-y="40"></div></div> +</section> +<section class="test text-bottom"> + <div><div class="filler"></div><div class="target" data-y="44"></div></div> + <div><div class="filler top"></div><div class="target" data-y="5"></div></div> + <div><div class="filler text-top"></div><div class="target" data-y="5"></div></div> + <div><div class="filler bottom"></div><div class="target" data-y="35"></div></div> + <div><div class="filler text-bottom"></div><div class="target" data-y="40"></div></div> +</section> +<section class="test bottom"> + <div><div class="filler"></div><div class="target" data-y="49"></div></div> + <div><div class="filler top"></div><div class="target" data-y="40"></div></div> + <div><div class="filler text-top"></div><div class="target" data-y="45"></div></div> + <div><div class="filler bottom"></div><div class="target" data-y="40"></div></div> + <div><div class="filler text-bottom"></div><div class="target" data-y="45"></div></div> +</section> +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + for (let target of document.getElementsByClassName('target')) { + let container = target.parentElement; + let filler = container.firstElementChild; + let section = container.parentElement; + let pass = false; + test(() => { + let y = target.offsetTop - container.offsetTop; + assert_approx_equals(y, target.dataset.y, 0); + pass = true; + }, `${section.className.substr(5)}+${filler.className.substr(7)}`); + if (!pass) + container.classList.add('fail'); + } + done(); +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-padding-ref.html b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-padding-ref.html new file mode 100644 index 0000000000..f855bab6a2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-padding-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<style> +div { + margin-top: 50px; + font-size: 10px; + line-height: 1; +} + +.inline-block { + display: inline-block; + height: 30px; + width: 30px; + background: blue; +} + +.top .inline-block { + vertical-align: top; +} + +.bottom .inline-block { + vertical-align: bottom; +} + +</style> +<body> + <div class="top"> + <span> + Next + <span class="inline-block"></span> + </span> + </div> + <div class="bottom"> + <span> + Next + <span class="inline-block"></span> + </span> + </div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-padding.html b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-padding.html new file mode 100644 index 0000000000..21451a04fa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-padding.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<link rel="match" href="vertical-align-top-bottom-padding-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" /> +<link rel="author" href="kojii@chromium.org"> +<style> +div { + margin-top: 50px; + font-size: 10px; + line-height: 1; +} + +.inline-block { + display: inline-block; + height: 30px; + width: 30px; + background: blue; +} + +.top .padding { + padding-top: 20px; +} + +.top .inline-block { + vertical-align: top; +} + +.bottom .padding { + padding-bottom: 20px; +} + +.bottom .inline-block { + vertical-align: bottom; +} + +</style> +<body> + <div class="top"> + <span class="padding"> + Next + <span class="inline-block"></span> + </span> + </div> + <div class="bottom"> + <span class="padding"> + Next + <span class="inline-block"></span> + </span> + </div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/linebox/video-needs-layout-crash.html b/testing/web-platform/tests/css/CSS2/linebox/video-needs-layout-crash.html new file mode 100644 index 0000000000..b8c52edf82 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/linebox/video-needs-layout-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/981602"> +<link rel="author" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<b>abc<video style="contain:size"></video></b><div contenteditable></div> +<script>test(() => {});</script> |
