diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
| commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
| tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/CSS2/visudet | |
| parent | Initial commit. (diff) | |
| download | thunderbird-upstream.tar.xz thunderbird-upstream.zip | |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/visudet')
67 files changed, 1929 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/visudet/content-height-001.html b/testing/web-platform/tests/css/CSS2/visudet/content-height-001.html new file mode 100644 index 0000000000..d4aaaa929c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/content-height-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 inline level box content height test</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="match" href="reference/content-height-001-ref.html"> +<meta name="assert" content="The height of the content area of an inline-level box does not depend on the value of the line-height property"> +<style> + +div { font-size: 50px; display: inline-block; color: transparent; } + +span { background: blue; } + +div { line-height: 200px; } +div:nth-of-type(2) { line-height: 30px; } +div:nth-of-type(3) { line-height: normal; } +</style> + +<p>Test passes if the blue shape below is a rectangle, but not some other polygon. + +<div><span>aa</span></div><div><span>aa</span></div><div><span>aa</span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/content-height-002.html b/testing/web-platform/tests/css/CSS2/visudet/content-height-002.html new file mode 100644 index 0000000000..038775b686 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/content-height-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 inline level box content height test</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="match" href="reference/content-height-002-ref.html"> +<meta name="assert" content="The height of the content area of an inline-level box does not depend on the value of the line-height property, + even when fallback fonts are used"> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0061, U+0020; +} +@font-face { + font-family: 'deep-b-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); + unicode-range: U+0062, U+0020; +} + +div { + font-size: 50px; + display: inline-block; + color: transparent; + font-family: high-a-only, deep-b-only; +} + +span { background: blue; } + +div { line-height: 200px; } +div:nth-of-type(2) { line-height: 30px; } +div:nth-of-type(3) { line-height: normal; } +</style> + +<p>Test passes if the blue shape below is a rectangle, but not some other polygon. + +<div><span>ab</span></div><div><span>ab</span></div><div><span>ab</span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/content-height-003.html b/testing/web-platform/tests/css/CSS2/visudet/content-height-003.html new file mode 100644 index 0000000000..f0b09741b5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/content-height-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 inline level box content height test</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="match" href="reference/content-height-003-ref.html"> +<meta name="assert" content="The height of the content area of an inline-level box does not depend on the value of the line-height property, + even when fallback fonts are used at the exclusion of the first available font"> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0061, U+0020; +} +@font-face { + font-family: 'deep-b-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); + unicode-range: U+0062, U+0020; +} + +div { + font-size: 50px; + display: inline-block; + color: transparent; + font-family: high-a-only, deep-b-only; +} + +span { background: blue; } + +div { line-height: 200px; } +div:nth-of-type(2) { line-height: 30px; } +div:nth-of-type(3) { line-height: normal; } +</style> + +<p>Test passes if the blue shape below is a rectangle, but not some other polygon. + +<div><span>bb</span></div><div><span>bb</span></div><div><span>bb</span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/content-height-004.html b/testing/web-platform/tests/css/CSS2/visudet/content-height-004.html new file mode 100644 index 0000000000..d18c856973 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/content-height-004.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 inline level box content height test</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="match" href="reference/content-height-004-ref.html"> +<meta name="assert" content="The height of the content area of an inline-level does not depend on fallback fonts + regardless of whether they are used on not."> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0061, U+0020; +} +@font-face { + font-family: 'deep-b-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); + unicode-range: U+0062, U+0020; +} + +div { + font-size: 50px; + display: inline-block; + color: transparent; + font-family: high-a-only, deep-b-only; +} + +span { background: blue; } + +div { } +div:nth-of-type(2) { } +div:nth-of-type(3) { } +div:nth-of-type(4) { font-family: high-a-only } +aside { + max-width: 300px; + overflow: hidden; + white-space: pre; +} +</style> + +<p>Test passes if the blue shape below is a rectangle, but not some other polygon. + +<aside> +<div><span>aa</span></div><div><span>bb</span></div><div><span>ab</span></div><div><span>aaa</span></div> +</aside> diff --git a/testing/web-platform/tests/css/CSS2/visudet/content-height-005.html b/testing/web-platform/tests/css/CSS2/visudet/content-height-005.html new file mode 100644 index 0000000000..1b84ca7649 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/content-height-005.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 inline level box content height test</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="mismatch" href="reference/content-height-005-ref.html"> +<meta name="assert" content="The height of the content area of an inline-level depends on the primary font"> +<style> +@font-face { + font-family: 'high'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); +} +@font-face { + font-family: 'deep'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); +} + +div { + font-size: 50px; + display: inline-block; +} + +span { + padding-left: 1em; + color: black; + border-top: solid 1px; + border-bottom: solid 1px; +} + +div:nth-of-type(1) { font-family: deep; } +div:nth-of-type(2) { font-family: high; margin-left: -1em; } +</style> + +<p>Test passes if there are <strong>more than 2</strong> lines below. + +<div><span></span></div><div><span></span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-applies-to-010a-ref.xht b/testing/web-platform/tests/css/CSS2/visudet/height-applies-to-010a-ref.xht new file mode 100644 index 0000000000..5dd9a4f916 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-applies-to-010a-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[ + li + { + color: green; + font: 2em/1 serif; + list-style-type: "\2022"; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if <strong>3 green "PASS"</strong> are each preceded by a filled disc.</p> + + <ul> + <li>PASS</li> + </ul> + + <ul> + <li>PASS</li> + </ul> + + <ul> + <li>PASS</li> + </ul> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-applies-to-010a.xht b/testing/web-platform/tests/css/CSS2/visudet/height-applies-to-010a.xht new file mode 100644 index 0000000000..8339c008f9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-applies-to-010a.xht @@ -0,0 +1,65 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: height set to 0 to elements with 'display' set to 'list-item'</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@MIT.EDU" /> + <link rel="help" title="10.5 Content height: the 'height' property" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" /> + <link rel="help" title="11.1.1 Overflow: the 'overflow' property" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> + <link rel="match" href="height-applies-to-010a-ref.xht" /> + + <meta content="If height of content exceeds the set height of a block-level non-replaced element in normal flow (like a list-item element such as in this test), then the content should overflow according to the 'overflow' property." name="assert" /> + + <style type="text/css"><![CDATA[ + div + { + color: green; + display: list-item; + font: 2em/1 serif; + height: 0px; + margin-left: 1.25em; + overflow: visible; + list-style-type: "\2022"; + } + + ul + { + height: auto; + margin-top: 3em; + overflow: visible; + } + + li + { + color: green; + font: 2em/1 serif; + height: 0px; + overflow: visible; + list-style-type: "\2022"; + } + + ul#heightless {height: 0px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if <strong>3 green "PASS"</strong> are each preceded by a filled disc.</p> + + <div>PASS</div> + + <ul> + <li>PASS</li> + </ul> + + <ul id="heightless"> + <li>PASS</li> + </ul> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-computed-001-ref.xht b/testing/web-platform/tests/css/CSS2/visudet/height-computed-001-ref.xht new file mode 100644 index 0000000000..06e23ae387 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-computed-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 Reference File</title> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 14px} + span {display: inline-block} + #container {background: green; height: 70px; min-height: 140px} + #child1 {background: #66F; width: 70px; height: 70px} + #child2 {background: #AAF; width: 70px; height: 70px} + ]]></style> + </head> + + <body> + <p>Test passes if (1) the two blue rectangles have the same height + and (2) that height is about the same as the green rectangle.</p> + + <p> + <span id="container"> + <span id="child1"></span><span id="child2"></span> + </span> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-computed-001.xht b/testing/web-platform/tests/css/CSS2/visudet/height-computed-001.xht new file mode 100644 index 0000000000..862bfed68b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-computed-001.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + <title>CSS min-height: min-height does not influence the computed height</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#min-max-heights" title="10.7 Minimum and maximum heights: 'min-height' and 'max-height'" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.7" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'. Note: These steps do not affect the real computed value of 'height'." /> + <link rel="match" href="height-computed-001-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 14px} + span {display: inline-block} + #container {background: green; height: 70px; min-height: 140px} + #child1 {background: #66F; width: 70px; height: inherit} /* Inherits 70px */ + #child2 {background: #AAF; width: 70px; height: 70px} + ]]></style> + </head> + + <body> + <p>Test passes if (1) the two blue rectangles have the same height + and (2) that height is about the same as the green rectangle.</p> + + <p> + <span id="container"> + <span id="child1"></span><span id="child2"></span> + </span> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-computed-002-ref.xht b/testing/web-platform/tests/css/CSS2/visudet/height-computed-002-ref.xht new file mode 100644 index 0000000000..82fdbedf2e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-computed-002-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + <title>CSS Reference File</title> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 14px} + span {display: inline-block} + #container {background: red; height: 70px; max-height: 40px} + #child1 {background: #66F; width: 70px; height: 70px} + #child2 {background: #AAF; width: 70px; height: 70px} + ]]></style> + </head> + + <body> + <p>Test passes if (1) the two blue rectangles have the same height + and (2) there is no red.</p> + + <p> + <span id="container"> + <span id="child1"></span><span id="child2"></span> + </span> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-computed-002.xht b/testing/web-platform/tests/css/CSS2/visudet/height-computed-002.xht new file mode 100644 index 0000000000..f703335df2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-computed-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 max-height: max-height does not influence the computed height</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#min-max-heights" title="10.7 Minimum and maximum heights: 'min-height' and 'max-height'" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.7" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'. [...] Note: These steps do not affect the real computed value of 'height'." /> + <link rel="match" href="height-computed-002-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 14px} + span {display: inline-block} + #container {background: red; height: 70px; max-height: 40px} + #child1 {background: #66F; width: 70px; height: inherit} /* Inherits 70px */ + #child2 {background: #AAF; width: 70px; height: 70px} + ]]></style> + </head> + + <body> + <p>Test passes if (1) the two blue rectangles have the same height + and (2) there is no red.</p> + + <p> + <span id="container"> + <span id="child1"></span><span id="child2"></span> + </span> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-percentage-003a-ref.xht b/testing/web-platform/tests/css/CSS2/visudet/height-percentage-003a-ref.xht new file mode 100644 index 0000000000..6872c9810a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-percentage-003a-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body + { + background-color: green; + color: white; + margin: 0px; + } + + p {margin-top: 0px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the background of this page is green and if there is <strong>no red and no vertical scrollbar</strong>.</p> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-percentage-003a.xht b/testing/web-platform/tests/css/CSS2/visudet/height-percentage-003a.xht new file mode 100644 index 0000000000..f394e89954 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-percentage-003a.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: Height percentage - 100% of the initial containing block's height</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Jan/1176.html" title="[CSS21] min-height: 100% in html, body" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" title="10.5 Content height: the 'height' property" /> + <link rel="match" href="height-percentage-003a-ref.xht" /> + + <meta name="assert" content="The initial containing block has the dimensions of the viewport. A percentage height on the root element is relative to the initial containing block. A 'height: 100%' of the document root element should use all of the document root element's height." /> + + <style type="text/css"><![CDATA[ + html + { + background-color: red; + height: 100%; + } + + body, p + { + height: 100%; + margin: 0px; + } + + p + { + background-color: green; + color: white; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the background of this page is green and if there is <strong>no red and no vertical scrollbar</strong>.</p> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-percentage-004-ref.xht b/testing/web-platform/tests/css/CSS2/visudet/height-percentage-004-ref.xht new file mode 100644 index 0000000000..db11099d73 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-percentage-004-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 test: inherited percentage height</title> + + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"> + p {margin-right: 7em} + #container div {position: absolute; top: 0; right: 0; + background: aqua; height: 100%} + </style> + </head> + + <body> + <p>Test passes if the light blue box ("Block A") is the full height + of the viewport and there is no red.</p> + + <div id="container"> + <div> + Block A + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/height-percentage-004.xht b/testing/web-platform/tests/css/CSS2/visudet/height-percentage-004.xht new file mode 100644 index 0000000000..51f58511d8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/height-percentage-004.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS test: inherited percentage height</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#the-height-property" title="10.5 Content height: the 'height' property" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.7" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'. Note: These steps do not affect the real computed value of 'height'." /> + <link rel="match" href="height-percentage-004-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"> + p {margin-right: 7em} + #container {height: 100%; background: red} + #container div {position: absolute; top: 0; right: 0; + background: aqua; height: inherit} + </style> + </head> + + <body> + <p>Test passes if the light blue box ("Block A") is the full height + of the viewport and there is no red.</p> + + <div id="container"> + <div> + Block A + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-001-ref.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-001-ref.xht new file mode 100644 index 0000000000..9f14c821b3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-001-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + <title>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + ]]></style> + </head> + + <body> + <p> + All the <span>words</span> are aligned on the same baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-001.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-001.xht new file mode 100644 index 0000000000..82a2493c17 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-001.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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an 'inline-block’ whose ‘overflow’ property has a computed value of ‘visible’ is the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case the baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-001-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: visible} + ]]></style> + </head> + + <body> + <p> + All the <span>words</span> are aligned on the same baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-002.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-002.xht new file mode 100644 index 0000000000..8b73ec9838 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-002.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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an 'inline-block’ whose ‘overflow’ property has a computed value of ‘visible’ is the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case the baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-001-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: visible; line-height: 1} + ]]></style> + </head> + + <body> + <p> + All the <span> <br />words</span> are aligned on the same baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-003.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-003.xht new file mode 100644 index 0000000000..632e2c08c6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-003.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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an inline-block whose ‘overflow’ property has a computed value not equal to ‘visible’ is the higher of either its bottom margin edge or the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case its baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-001-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: auto; + /* The last line box of the inline-block is above its bottom margin edge */ + line-height: 1; height: 2em; margin-bottom: 0.2em} + ]]></style> + </head> + + <body> + <p> + All the <span>words</span> are aligned on the same baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-004.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-004.xht new file mode 100644 index 0000000000..f2691cff18 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-004.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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an inline-block whose ‘overflow’ property has a computed value not equal to ‘visible’ is the higher of either its bottom margin edge or the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case its baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-001-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: hidden; + /* The last line box of the inline-block is above its bottom margin edge */ + line-height: 1; height: 2em; margin-bottom: 0.2em} + ]]></style> + </head> + + <body> + <p> + All the <span>words</span> are aligned on the same baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-005.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-005.xht new file mode 100644 index 0000000000..51f544ab64 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-005.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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an inline-block whose ‘overflow’ property has a computed value not equal to ‘visible’ is the higher of either its bottom margin edge or the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case its baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-001-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: auto; + /* The last line box of the inline-block is above its bottom margin edge */ + line-height: 1; height: 2.5em; margin-bottom: 0.2em} + ]]></style> + </head> + + <body> + <p> + All the <span> <br />words</span> are aligned on the same baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-006.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-006.xht new file mode 100644 index 0000000000..d994da7107 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-006.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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an inline-block whose ‘overflow’ property has a computed value not equal to ‘visible’ is the higher of either its bottom margin edge or the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case its baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-001-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: hidden; + /* The last line box of the inline-block is above its bottom margin edge */ + line-height: 1; height: 2.5em; margin-bottom: 0.2em} + ]]></style> + </head> + + <body> + <p> + All the <span> <br />words</span> are aligned on the same baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-010-ref.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-010-ref.xht new file mode 100644 index 0000000000..774416d11a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-010-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + <title>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + img {height: 1em; width: 1em} + ]]></style> + </head> + + <body> + <p> + A blue square + <img src="support/swatch-blue.png" alt="[blue square]" /> + sits on the baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-010.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-010.xht new file mode 100644 index 0000000000..a906f02ef0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-010.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + <title>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an 'inline-block’ whose ‘overflow’ property has a computed value of ‘visible’ is the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case the baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-010-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: visible; + /* This inline-block has no line boxes, it's aligned at the bottom margin */ + height: 1em; width: 1em; background: blue} + ]]></style> + </head> + + <body> + <p> + A blue square + <span></span> + sits on the baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-011.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-011.xht new file mode 100644 index 0000000000..6d63b62a7e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-011.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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an 'inline-block’ whose ‘overflow’ property has a computed value of ‘visible’ is the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case the baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-010-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: visible; + /* This inline-block has no line boxes, it's aligned at the bottom margin */ + vertical-align: -0.5em; margin-bottom: 0.5em; + height: 1em; width: 1em; background: blue} + ]]></style> + </head> + + <body> + <p> + A blue square + <span></span> + sits on the baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-012.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-012.xht new file mode 100644 index 0000000000..f1566a9b88 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an inline-block whose ‘overflow’ property has a computed value not equal to ‘visible’ is the higher of either its bottom margin edge or the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case its baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-010-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: auto; + /* This inline-block has no line boxes, it's aligned at the bottom margin */ + height: 1em; width: 1em; background: blue} + ]]></style> + </head> + + <body> + <p> + A blue square + <span></span> + sits on the baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-013.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-013.xht new file mode 100644 index 0000000000..d975aa9f6d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-013.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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an inline-block whose ‘overflow’ property has a computed value not equal to ‘visible’ is the higher of either its bottom margin edge or the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case its baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-010-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: hidden; + /* This inline-block has no line boxes, it's aligned at the bottom margin */ + height: 1em; width: 1em; background: blue} + ]]></style> + </head> + + <body> + <p> + A blue square + <span></span> + sits on the baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-014.xht b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-014.xht new file mode 100644 index 0000000000..455de0d5e4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/inline-block-baseline-014.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>Vertical-align: baseline of an inline-block depends on 'overflow'</title> + + <link rel="help" href="http://www.w3.org/TR/CSS22/visudet.html#leading" title="10.8.1 Leading and half-leading" /> + <link rel="help" href="http://www.w3.org/TR/CSS22/changes.html#s.10.8.1" title="C.1 Changes since the Recommendation of 7 June 2011" /> + <meta name="assert" content="The baseline of an inline-block whose ‘overflow’ property has a computed value not equal to ‘visible’ is the higher of either its bottom margin edge or the baseline of its last line box in the normal flow, unless it has no in-flow line boxes, in which case its baseline is the bottom margin edge." /> + <link rel="match" href="inline-block-baseline-010-ref.xht" /> + <link rel="author" title="Bert Bos" href="mailto:bert@w3.org" /> + + + <style type="text/css"><![CDATA[ + body {background: white; color: black; font-size: 15px} + p {white-space: nowrap; line-height: 5} + span {display: inline-block; overflow: hidden; + /* This inline-block has no line boxes, it's aligned at the bottom margin */ + vertical-align: -0.5em; margin-bottom: 0.5em; + height: 1em; width: 1em; background: blue} + ]]></style> + </head> + + <body> + <p> + A blue square + <span></span> + sits on the baseline. + </p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/line-height-201.html b/testing/web-platform/tests/css/CSS2/visudet/line-height-201.html new file mode 100644 index 0000000000..00ab2aa527 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/line-height-201.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 Line height test: explicit sizing</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="match" href="reference/line-height-201-ref.html"> +<meta name="assert" content="non-normal values of line-height result in the height of the inline-level box to be exactly the specified dimention, + even when fallback fonts with metrics different from the first available font one are used."> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0020, U+0061; +} +@font-face { + font-family: 'deep-b-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); + unicode-range: U+0062; +} + +#red { /* red to be uncovered if the test divs aren't tall enough */ + position: absolute; + background: red; + width: 100px; + height: 100px; +} + +div:not(#red) { + position: absolute; + width: 50px; + line-height: 100px; + font-family: high-a-only, deep-b-only; + background: url("support/1x1-green.png") 0 0 / 50px 100px no-repeat, red; /* gets red if the div is too large */ + color: transparent; +} +#test { + font-size: 20px; /* With a font-size smaller than the line-height */ +} +#test2 { + margin-left: 50px; + font-size: 150px; /* With a font-size larger than the line-height */ +} +</style> + +<p>Test passes if there is a <strong>green square</strong> and <strong>no red</strong> below. + +<div id=red></div> + +<div id=test>ab</div> +<div id=test2>ab</div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/line-height-202.html b/testing/web-platform/tests/css/CSS2/visudet/line-height-202.html new file mode 100644 index 0000000000..aef970b443 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/line-height-202.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 Line height test: baseline position when explicit sizing</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="match" href="reference/line-height-202-ref.html"> +<meta name="assert" content="The position of the baseline in an inline-level box whose height is determined by a non-normal value of line-height + does not depend on fonts other than the first available font"> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0020, U+0061; +} +@font-face { + font-family: 'deep-b-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); + unicode-range: U+0062; +} + +div { + position: absolute; + line-height: 100px; + font-size: 100px; + width: 300px; /* plenty of room for the (invisible) text */ + text-align: right; + color: transparent; +} +span { /* visible thing aligned to the baseline, and small enough to not influence its position */ + display: inline-block; + width: 20px; + height: 20px; + +} + +/* white #h is on top of red #hd, + and the presence of a fallback font in #hd should not influence the position of the baseline, + so #h should completely cover #hd, + and no red should be visible. */ +#hd { font-family: high-a-only, deep-b-only; } +#hd span { background: red; } + +#h { font-family: high-a-only; } +#h span { background: white; } + +</style> + +<p>Test passes if there is <strong>no red</strong> below. + +<div id=hd>ab<span></span></div> +<div id=h>aa<span></span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/line-height-203.html b/testing/web-platform/tests/css/CSS2/visudet/line-height-203.html new file mode 100644 index 0000000000..9e8ee2dc40 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/line-height-203.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 Line height test: baseline position with explicit sizing</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="mismatch" href="reference/line-height-203-ref.html"> +<meta name="assert" content="The position of the baseline in an inline-level box whose height is determined by a non-normal value of line-height + does depend on the first available font."> +<style> +@font-face { + font-family: 'high'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); +} +@font-face { + font-family: 'deep'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); +} + +div { + position: absolute; + line-height: 100px; + font-size: 100px; + width: 300px; /* plenty of room for the (invisible) text */ + text-align: right; + color: transparent; +} +span { /* visible thing aligned to the baseline, and small enough to not influence its position */ + display: inline-block; + width: 20px; + height: 20px; +} + +/* white #h is on top of green #d, + but as they have different primary fonts, + their baselines should not line up and green #d should be visible.*/ +#d { font-family: deep; } +#d span { background: green; } + +#h { font-family: high; } +#h span { background: white; } + +</style> + +<p>Test passes if there is a small green rectangle or square below. + +<div id=d>aa<span></span></div> +<div id=h>aa<span></span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/line-height-204.html b/testing/web-platform/tests/css/CSS2/visudet/line-height-204.html new file mode 100644 index 0000000000..1bb0183db4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/line-height-204.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS2 Line height test: baseline position, normal sizing vs explicit sizing</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="match" href="reference/line-height-202-ref.html"> +<meta name="assert" content="The position of the baseline in an inline-level box whose line-height is normal + and the position of the baseline in an inline-level box whose line-height is set to a non normal value resulting in the same height + are the same, + assuming only the first available font is used."> +<style> +@font-face { + font-family: 'high'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); +} + +div { + position: absolute; + font-size: 100px; + width: 2em; /* plenty of room for the (invisible) text */ + text-align: right; + color: transparent; +} +span { /* visible thing aligned to the baseline, and small enough to not influence its position */ + display: inline-block; + width: 20px; + height: 20px; +} + +/* white #lh-auto is on top of red #lh-manual, + and as their baselines should line up + #lh-manual should be fully covered, + and no red should be visible */ +#lh-manual { font-family: high; } +#lh-manual span { background: red; } + +#lh-auto { font-family: high; line-height: normal; } +#lh-auto span { background: white; } + +</style> + +<body onload="measure()"> +<p>Test passes if there is <strong>no red</strong> below. + +<div id=lh-manual>a<span></span></div> +<div id=lh-auto>a<span></span></div> + +<script> +function measure() { /* let layout complete first, so that we can measure things */ + var lha = document.getElementById("lh-auto"); + var lhm = document.getElementById("lh-manual") + var h = window.getComputedStyle(lha).height; /*getting the used-value of line-height by proxy */ + lhm.style.lineHeight = h; + document.documentElement.className = ""; +} +</script> diff --git a/testing/web-platform/tests/css/CSS2/visudet/line-height-205.html b/testing/web-platform/tests/css/CSS2/visudet/line-height-205.html new file mode 100644 index 0000000000..f9cb02797f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/line-height-205.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 Line height test: normal sizing</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="match" href="reference/line-height-202-ref.html"> +<meta name="assert" content="The height of an inline-level box whose line-height is normal and uses both the first available font and fallback fonts + is the same as the union of + baseline-aligned adjacent inline-level boxes, each using the various fonts as their primary one."> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0020, U+0061; +} +@font-face { + font-family: 'deep-b-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); + unicode-range: U+0020, U+0062; +} + +div { + position: absolute; + line-height: normal; + font-size: 100px; + color: transparent; +} + +.h { font-family: high-a-only; } +.d { font-family: deep-b-only; } +.hd { font-family: high-a-only, deep-b-only; } +.white { background: white; } +.red { background: red; } +.shift { margin-left: 300px; } +</style> + +<p>Test passes if there is <strong>no red</strong> below. + +<!-- Check if the hd div is larger--> + +<div class="hd red">ab</div> +<div class=white><span class=h>a</span><span class=d>b</span></div> + +<!-- Same thing, reversed, to check if the hd dix is smaller --> + +<div class="red shift"><span class=h>a</span><span class=d>b</span></div> +<div class="hd white shift">ab</div> + diff --git a/testing/web-platform/tests/css/CSS2/visudet/line-height-206.html b/testing/web-platform/tests/css/CSS2/visudet/line-height-206.html new file mode 100644 index 0000000000..ad24ede74a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/line-height-206.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 Line height test: normal sizing with fallback fonts</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#line-height"> +<link rel="mismatch" href="reference/line-height-206-ref.html"> +<meta name="assert" content="The height of an inline-level box whose line-height is normal and which only uses glyphs from the fallback font + must still take the strut from the first available font into account."> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0061, U+0020; +} +@font-face { + font-family: 'deep-b-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); + unicode-range: U+0062, U+0020; +} + +div { + position: absolute; + line-height: normal; + font-size: 100px; + color: transparent; + border: solid black 1px; +} + +.h { font-family: high-a-only; } +.dh { font-family: deep-b-only, high-a-only; } +</style> + +<p>There should be two stacked rectangles below: a tall one above a short one, both the same width, sharing the edge at which they touch. + +<!-- Both divs show the same content with the same font, + but the first div has an unused first available font + while the second one does not. + As the height calculation takes the strut into account, + these two boxes should have different heights --> +<div class="dh">a</div> +<div class="h">a</div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/max-width-109.xht b/testing/web-platform/tests/css/CSS2/visudet/max-width-109.xht new file mode 100644 index 0000000000..ab7f7dffc0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/max-width-109.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> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + <title>CSS Test: Max-width - replaced elements</title> + <link rel="author" title="James Hopkins" href="http://idreamincode.co.uk/css21testsuite"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"/> + <meta name="flags" content="image"/> + <meta name="assert" content="For UAs who choose to scale replaced elements, the height of that element (based on it's intrinsic ratio) should be re-calculated based on it's constraining 'max-width' value"/> + <style type="text/css"> + #test{ + width:200px; + } + #test img{ + max-width:100px; + width:200%; + } + </style> + </head> + + <body> + <p>Test is passed if there is a blue square (four equal sides) below.</p> + <div id="test"> + <img src="support/swatch-blue.png" alt="Test image"/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-001-ref.html b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-001-ref.html new file mode 100644 index 0000000000..d6ca716b0c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference file</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> + +div { font-size: 50px; display: inline-block; color: transparent; } + +span { background: blue; } + +div { line-height: 200px; } +</style> + +<p>Test passes if the blue shape below is a rectangle, but not some other polygon. + +<div><span>aa</span></div><div><span>aa</span></div><div><span>aa</span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-002-ref.html b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-002-ref.html new file mode 100644 index 0000000000..bb148292a3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-002-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference file</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0061, U+0020; +} +@font-face { + font-family: 'deep-b-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); + unicode-range: U+0062, U+0020; +} + +div { + font-size: 50px; + display: inline-block; + color: transparent; + font-family: high-a-only, deep-b-only; +} + +span { background: blue; } + +div { line-height: 200px; } +</style> + +<p>Test passes if the blue shape below is a rectangle, but not some other polygon. + +<div><span>ab</span></div><div><span>ab</span></div><div><span>ab</span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-003-ref.html b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-003-ref.html new file mode 100644 index 0000000000..86727624bf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-003-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference file</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0061, U+0020; +} +@font-face { + font-family: 'deep-b-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/AD.woff) format('woff'); + unicode-range: U+0062, U+0020; +} + +div { + font-size: 50px; + display: inline-block; + color: transparent; + font-family: high-a-only, deep-b-only; +} + +span { background: blue; } + +div { line-height: 200px; } +</style> + +<p>Test passes if the blue shape below is a rectangle, but not some other polygon. + +<div><span>bb</span></div><div><span>bb</span></div><div><span>bb</span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-004-ref.html b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-004-ref.html new file mode 100644 index 0000000000..657da1ec93 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-004-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS2 Line height test: explicit sizing</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0061, U+0020; +} + +div { + font-size: 50px; + display: inline-block; + color: transparent; +} + +span { background: blue; } + +div { font-family: high-a-only } +aside { + max-width: 300px; + overflow: hidden; + white-space: pre; +} +</style> + +<p>Test passes if the blue shape below is a rectangle, but not some other polygon. + +<aside> +<div><span>aaaaaaaaa</span></div> +</aside> diff --git a/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-005-ref.html b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-005-ref.html new file mode 100644 index 0000000000..b68f8a9419 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/reference/content-height-005-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference file</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> + +div { + font-size: 50px; + display: inline-block; +} + +span { + padding-left: 1em; + color: black; + border-top: solid 1px; + border-bottom: solid 1px; +} + +</style> + +<p>Test passes if there are <strong>more than 2</strong> lines below. + +<div><span></span></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-201-ref.html b/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-201-ref.html new file mode 100644 index 0000000000..3564bf7785 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-201-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference file</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> +div { + position: absolute; + width: 100px; + height: 100px; + background: green; +} +</style> + +<p>Test passes if there is a <strong>green square</strong> and <strong>no red</strong> below. + +<div></div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-202-ref.html b/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-202-ref.html new file mode 100644 index 0000000000..2b77a6b3dd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-202-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference file</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<p>Test passes if there is <strong>no red</strong> below. diff --git a/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-203-ref.html b/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-203-ref.html new file mode 100644 index 0000000000..ec605c76a9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-203-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference file</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<p>Test passes if there is a small green rectangle or square below. diff --git a/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-206-ref.html b/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-206-ref.html new file mode 100644 index 0000000000..8ddf2b47a7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/reference/line-height-206-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference file</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> +@font-face { + font-family: 'high-a-only'; + font-style: normal; + font-weight: 400; + src: url(/fonts/Revalia.woff) format('woff'); + unicode-range: U+0061; +} + +div { + position: absolute; + line-height: normal; + font-size: 100px; + color: transparent; + border: solid black 1px; + font-family: high-a-only; +} +</style> + +<p>There should be two stacked rectangles below: a tall one above a short one, both the same width, sharing the edge at which they touch. + +<div>a</div> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-all-auto-ref.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-all-auto-ref.html new file mode 100644 index 0000000000..5a1df9485f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-all-auto-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Reference: CSS 2.1 replaced element sizing</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + + span { + display: inline-block; + width: 50px; + height: 25px; + } + + </style> +</head> +<body> + +<div> + <span style="background: black;"></span>, <!-- height-25-width-50 --> + <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 --> + <span style="background: silver;"></span>, <!-- width-50-ratio-2 --> + <span style="background: blue; width: 300px"></span>, <!-- height-25-no-ratio --> + <span style="background: orange; height: 150px"></span>, <!-- width-50-no-ratio --> + <span style="background: gray; width: 200px; height: 100px"></span>, <!-- ratio-2 --> + <span style="background: aqua; width: 300px; height: 150px"></span>. <!-- no-ratio --> + +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-all-auto.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-all-auto.html new file mode 100644 index 0000000000..bc2b4593ab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-all-auto.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Test: CSS 2.1 replaced element sizing</title> + <link rel="match" href="replaced-elements-all-auto-ref.html"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + + </style> +</head> +<body> + +<div> + <img src="support/height-25-width-50.svg">, + <img src="support/height-25-ratio-2.svg">, + <img src="support/width-50-ratio-2.svg">, + <img src="support/height-25-no-ratio.svg">, + <img src="support/width-50-no-ratio.svg">, + <img src="support/ratio-2.svg">, + <img src="support/no-ratio.svg">. +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-height-20-ref.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-height-20-ref.html new file mode 100644 index 0000000000..503d83bd78 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-height-20-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Reference: CSS 2.1 replaced element sizing</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + + span { + display: inline-block; + width: 40px; + height: 20px; + } + + </style> +</head> +<body> + +<div> + <span style="background: black;"></span>, <!-- height-25-width-50 --> + <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 --> + <span style="background: silver;"></span>, <!-- width-50-ratio-2 --> + <span style="background: blue; width: 300px"></span>, <!-- height-25-no-ratio --> + <span style="background: orange; width: 50px"></span>, <!-- width-50-no-ratio --> + <span style="background: gray"></span>, <!-- ratio-2 --> + <span style="background: aqua; width: 300px"></span>. <!-- no-ratio --> + +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-height-20.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-height-20.html new file mode 100644 index 0000000000..2ca34befff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-height-20.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Test: CSS 2.1 replaced element sizing</title> + <link rel="match" href="replaced-elements-height-20-ref.html"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + img { height: 20px } + + </style> +</head> +<body> + +<div> + <img src="support/height-25-width-50.svg">, + <img src="support/height-25-ratio-2.svg">, + <img src="support/width-50-ratio-2.svg">, + <img src="support/height-25-no-ratio.svg">, + <img src="support/width-50-no-ratio.svg">, + <img src="support/ratio-2.svg">, + <img src="support/no-ratio.svg">. +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-max-height-20.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-max-height-20.html new file mode 100644 index 0000000000..eb2ee98443 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-max-height-20.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Test: CSS 2.1 replaced element sizing</title> + <link rel="match" href="replaced-elements-height-20-ref.html"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + img { max-height: 20px } + + </style> +</head> +<body> + +<div> + <img src="support/height-25-width-50.svg">, + <img src="support/height-25-ratio-2.svg">, + <img src="support/width-50-ratio-2.svg">, + <img src="support/height-25-no-ratio.svg">, + <img src="support/width-50-no-ratio.svg">, + <img src="support/ratio-2.svg">, + <img src="support/no-ratio.svg">. +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-max-width-40.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-max-width-40.html new file mode 100644 index 0000000000..9fb7aad4ee --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-max-width-40.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Test: CSS 2.1 replaced element sizing</title> + <link rel="match" href="replaced-elements-width-40-ref.html"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + img { max-width: 40px } + + </style> +</head> +<body> + +<div> + <img src="support/height-25-width-50.svg">, + <img src="support/height-25-ratio-2.svg">, + <img src="support/width-50-ratio-2.svg">, + <img src="support/height-25-no-ratio.svg">, + <img src="support/width-50-no-ratio.svg">, + <img src="support/ratio-2.svg">, + <img src="support/no-ratio.svg">. +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-height-20.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-height-20.html new file mode 100644 index 0000000000..5294aadcb4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-height-20.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Test: CSS 2.1 replaced element sizing</title> + <link rel="match" href="replaced-elements-all-auto-ref.html"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + img { min-height: 20px } + + </style> +</head> +<body> + +<div> + <img src="support/height-25-width-50.svg">, + <img src="support/height-25-ratio-2.svg">, + <img src="support/width-50-ratio-2.svg">, + <img src="support/height-25-no-ratio.svg">, + <img src="support/width-50-no-ratio.svg">, + <img src="support/ratio-2.svg">, + <img src="support/no-ratio.svg">. +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-height-40-ref.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-height-40-ref.html new file mode 100644 index 0000000000..668be594f0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-height-40-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Reference: CSS 2.1 replaced element sizing</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + + span { + display: inline-block; + width: 80px; + height: 40px; + } + + </style> +</head> +<body> + +<div> + <span style="background: black;"></span>, <!-- height-25-width-50 --> + <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 --> + <span style="background: silver;"></span>, <!-- width-50-ratio-2 --> + <span style="background: blue; width: 300px"></span>, <!-- height-25-no-ratio --> + <span style="background: orange; width: 50px; height: 150px"></span>, <!-- width-50-no-ratio --> + <span style="background: gray; width: 200px; height: 100px"></span>, <!-- ratio-2 --> + <span style="background: aqua; width: 300px; height: 150px"></span>. <!-- no-ratio --> + +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-height-40.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-height-40.html new file mode 100644 index 0000000000..700909ec52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-height-40.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Test: CSS 2.1 replaced element sizing</title> + <link rel="match" href="replaced-elements-min-height-40-ref.html"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + img { min-height: 40px } + + </style> +</head> +<body> + +<div> + <img src="support/height-25-width-50.svg">, + <img src="support/height-25-ratio-2.svg">, + <img src="support/width-50-ratio-2.svg">, + <img src="support/height-25-no-ratio.svg">, + <img src="support/width-50-no-ratio.svg">, + <img src="support/ratio-2.svg">, + <img src="support/no-ratio.svg">. +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-width-40.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-width-40.html new file mode 100644 index 0000000000..03e6a9cba9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-width-40.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Test: CSS 2.1 replaced element sizing</title> + <link rel="match" href="replaced-elements-all-auto-ref.html"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + img { min-width: 40px } + + </style> +</head> +<body> + +<div> + <img src="support/height-25-width-50.svg">, + <img src="support/height-25-ratio-2.svg">, + <img src="support/width-50-ratio-2.svg">, + <img src="support/height-25-no-ratio.svg">, + <img src="support/width-50-no-ratio.svg">, + <img src="support/ratio-2.svg">, + <img src="support/no-ratio.svg">. +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-width-80-ref.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-width-80-ref.html new file mode 100644 index 0000000000..6caa1c4809 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-width-80-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Reference: CSS 2.1 replaced element sizing</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + + span { + display: inline-block; + width: 80px; + height: 40px; + } + + </style> +</head> +<body> + +<div> + <span style="background: black;"></span>, <!-- height-25-width-50 --> + <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 --> + <span style="background: silver;"></span>, <!-- width-50-ratio-2 --> + <span style="background: blue; width: 300px; height: 25px"></span>, <!-- height-25-no-ratio --> + <span style="background: orange; height: 150px"></span>, <!-- width-50-no-ratio --> + <span style="background: gray; width: 200px; height: 100px"></span>, <!-- ratio-2 --> + <span style="background: aqua; width: 300px; height: 150px"></span>. <!-- no-ratio --> + +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-width-80.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-width-80.html new file mode 100644 index 0000000000..852864aa18 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-min-width-80.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Test: CSS 2.1 replaced element sizing</title> + <link rel="match" href="replaced-elements-min-width-80-ref.html"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + img { min-width: 80px } + + </style> +</head> +<body> + +<div> + <img src="support/height-25-width-50.svg">, + <img src="support/height-25-ratio-2.svg">, + <img src="support/width-50-ratio-2.svg">, + <img src="support/height-25-no-ratio.svg">, + <img src="support/width-50-no-ratio.svg">, + <img src="support/ratio-2.svg">, + <img src="support/no-ratio.svg">. +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-width-40-ref.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-width-40-ref.html new file mode 100644 index 0000000000..c110910c41 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-width-40-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Reference: CSS 2.1 replaced element sizing</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + + span { + display: inline-block; + width: 40px; + height: 20px; + } + + </style> +</head> +<body> + +<div> + <span style="background: black;"></span>, <!-- height-25-width-50 --> + <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 --> + <span style="background: silver;"></span>, <!-- width-50-ratio-2 --> + <span style="background: blue; height: 25px"></span>, <!-- height-25-no-ratio --> + <span style="background: orange; height: 150px"></span>, <!-- width-50-no-ratio --> + <span style="background: gray"></span>, <!-- ratio-2 --> + <span style="background: aqua; height: 150px"></span>. <!-- no-ratio --> + +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-width-40.html b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-width-40.html new file mode 100644 index 0000000000..4a8db48f69 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/replaced-elements-width-40.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>CSS Test: CSS 2.1 replaced element sizing</title> + <link rel="match" href="replaced-elements-width-40-ref.html"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> + <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 --> + <style type="text/css"> + + div { width: 200px } + img { width: 40px } + + </style> +</head> +<body> + +<div> + <img src="support/height-25-width-50.svg">, + <img src="support/height-25-ratio-2.svg">, + <img src="support/width-50-ratio-2.svg">, + <img src="support/height-25-no-ratio.svg">, + <img src="support/width-50-no-ratio.svg">, + <img src="support/ratio-2.svg">, + <img src="support/no-ratio.svg">. +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/visudet/support/1x1-green.png b/testing/web-platform/tests/css/CSS2/visudet/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/support/1x1-green.png diff --git a/testing/web-platform/tests/css/CSS2/visudet/support/height-25-no-ratio.svg b/testing/web-platform/tests/css/CSS2/visudet/support/height-25-no-ratio.svg new file mode 100644 index 0000000000..d046272299 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/support/height-25-no-ratio.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="25" preserveAspectRatio="none"> + <rect fill="blue" x="0" y="0" width="100%" height="100%" /> +</svg> diff --git a/testing/web-platform/tests/css/CSS2/visudet/support/height-25-ratio-2.svg b/testing/web-platform/tests/css/CSS2/visudet/support/height-25-ratio-2.svg new file mode 100644 index 0000000000..d6e71e31e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/support/height-25-ratio-2.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 500" height="25" preserveAspectRatio="none"> + <rect fill="fuchsia" x="0" y="0" width="1000" height="500" /> +</svg> diff --git a/testing/web-platform/tests/css/CSS2/visudet/support/height-25-width-50.svg b/testing/web-platform/tests/css/CSS2/visudet/support/height-25-width-50.svg new file mode 100644 index 0000000000..a45d7243c3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/support/height-25-width-50.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="25" width="50" viewBox="0 0 1000 1000" preserveAspectRatio="none"> + <rect fill="black" x="0" y="0" width="1000" height="1000" /> +</svg> diff --git a/testing/web-platform/tests/css/CSS2/visudet/support/no-ratio.svg b/testing/web-platform/tests/css/CSS2/visudet/support/no-ratio.svg new file mode 100644 index 0000000000..80429f1d1a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/support/no-ratio.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="none"> + <rect fill="aqua" x="0" y="0" width="100%" height="100%" /> +</svg> diff --git a/testing/web-platform/tests/css/CSS2/visudet/support/ratio-2.svg b/testing/web-platform/tests/css/CSS2/visudet/support/ratio-2.svg new file mode 100644 index 0000000000..fe4fe70168 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/support/ratio-2.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 500" preserveAspectRatio="none"> + <rect fill="gray" x="0" y="0" width="1000" height="500" /> +</svg> diff --git a/testing/web-platform/tests/css/CSS2/visudet/support/swatch-blue.png b/testing/web-platform/tests/css/CSS2/visudet/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/CSS2/visudet/support/width-50-no-ratio.svg b/testing/web-platform/tests/css/CSS2/visudet/support/width-50-no-ratio.svg new file mode 100644 index 0000000000..bf43cee7db --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/support/width-50-no-ratio.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" preserveAspectRatio="none"> + <rect fill="orange" x="0" y="0" width="100%" height="100%" /> +</svg> diff --git a/testing/web-platform/tests/css/CSS2/visudet/support/width-50-ratio-2.svg b/testing/web-platform/tests/css/CSS2/visudet/support/width-50-ratio-2.svg new file mode 100644 index 0000000000..62fa3cb420 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/visudet/support/width-50-ratio-2.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 500" width="50" preserveAspectRatio="none"> + <rect fill="silver" x="0" y="0" width="1000" height="500" /> +</svg> |
