diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-exclusions | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-exclusions')
18 files changed, 1015 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-exclusions/META.yml b/testing/web-platform/tests/css/css-exclusions/META.yml new file mode 100644 index 0000000000..32410e6918 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/META.yml @@ -0,0 +1,3 @@ +spec: https://drafts.csswg.org/css-exclusions/ +suggested_reviewers: + - astearns diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01-ref.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01-ref.xht new file mode 100644 index 0000000000..1d202b224d --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01-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 Test: wrap-flow:none</title> + <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> + <style> + /*<![CDATA[*/ + +#containing-block { + position: relative; + width: 400px; + height: 400px; + border: 1px solid #e0e0e0; + font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ +} + +#top-fragment, #left-fragment, #right-fragment, #bottom-fragment { + display: inline-block; + background: black; +} + +#top-fragment, #bottom-fragment { + width: 400px; + height: 150px; +} + +#left-fragment, #right-fragment { + width: 150px; + height: 100px; +} + +#exclusion { + display: inline-block; + width: 100px; + height: 100px; + background: #0f0; +} + + +/*]]>*/ +</style> +</head> +<body> + <p>You should see a green square in a solid 400px by 400px black background. You should not see any red background.</p> + <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="right-fragment"></div><div id="bottom-fragment"></div></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01.xht new file mode 100644 index 0000000000..45f3d1a1c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01.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: wrap-flow:none</title> + <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/> + <link rel="match" href="exclusions-wrap-flow-01-ref.xht"/> + <meta name="assert" content= + "Tests that wrap-flow:both is implemented. The inline boxes defined in the container + with the exclusion element should wrap around the margin edges of the exclusion. Inline boxes + are flowing to the left and right of the exclusion element."/> + <style> + /*<![CDATA[*/ + +#containing-block { + position: relative; + width: 400px; + height: 400px; + border: 1px solid #e0e0e0; + background: red; + font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ +} + +#exclusion { + wrap-flow: both; +} + +#top-fragment, #left-fragment, #right-fragment, #bottom-fragment { + display: inline-block; + background: black; +} + +#top-fragment, #bottom-fragment { + width: 400px; + height: 150px; +} + +#left-fragment, #right-fragment { + width: 150px; + height: 100px; +} + +#exclusion { + position: absolute; + top: 150px; + left: 150px; + width: 100px; + height: 100px; + background: #0f0; +} + + +/*]]>*/ +</style> +</head> +<body> + <p>You should see a green square in a solid 400px by 400px black background. You should not see any red background.</p> + <div id="containing-block"><div id="exclusion"></div><div id="top-fragment"></div><div id="left-fragment"></div><div id="right-fragment"></div><div id="bottom-fragment"></div></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02-ref.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02-ref.xht new file mode 100644 index 0000000000..24e490c47e --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02-ref.xht @@ -0,0 +1,68 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: wrap-flow:none</title> + <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> + <style> + /*<![CDATA[*/ + + #containing-block { + position: relative; + width: 400px; + background: red; + font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ + } + + #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b { + display: inline-block; + background: black; + } + + #top-fragment { + width: 400px; + height: 150px; + } + + #bottom-fragment-a { + width: 150px; + height:150px; + } + + #bottom-fragment-b { + width: 250px; + height: 150px; + } + + #left-fragment { + width: 150px; + height: 100px; + } + + #exclusion { + display: inline-block; + top: 150px; + left: 150px; + width: 100px; + height: 100px; + background: #0f0; + } + + #clear-area { + display: inline-block; + background: #080; + top: 150px; + left: 250px; + width: 150px; + height: 100px; + } + + + /*]]>*/ + </style> + </head> + <body> + <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the + right of the light green area and to the edge of the black background container. You should not see any red background.</p> + <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> + </body> + </html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02.xht new file mode 100644 index 0000000000..4ff8cc4e98 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02.xht @@ -0,0 +1,76 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: wrap-flow:none</title> + <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/> + <link rel="match" href="exclusions-wrap-flow-01-ref.xht"/> + <meta name="assert" content= + "Tests that wrap-flow:start is implemented. The inline boxes defined in the container + with the exclusion element should wrap around the left margin edge of the exclusion but + not to the right. Inline boxes + are flowing to the left of the exclusion element only."/> + <style> + /*<![CDATA[*/ + + #containing-block { + position: relative; + width: 400px; + background: red; + font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ + } + + #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b { + display: inline-block; + background: black; + } + + #top-fragment { + width: 400px; + height: 150px; + } + + #bottom-fragment-a { + width: 150px; + height:150px; + } + + #bottom-fragment-b { + width: 250px; + height: 150px; + } + + #left-fragment { + width: 150px; + height: 100px; + } + + #exclusion { + position: absolute; + wrap-flow: start; + top: 150px; + left: 150px; + width: 100px; + height: 100px; + background: #0f0; + } + + #clear-area { + position: absolute; + background: #080; + top: 150px; + left: 250px; + width: 150px; + height: 100px; + } + + + /*]]>*/ + </style> + </head> + <body> + <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the + right of the light green area and to the edge of the black background container. You should not see any red background.</p> + <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> + </body> + </html> diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03-ref.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03-ref.xht new file mode 100644 index 0000000000..88f921a3c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03-ref.xht @@ -0,0 +1,66 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: wrap-flow:none</title> + <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> + <style> + /*<![CDATA[*/ + + #containing-block { + position: relative; + width: 400px; + background: red; + font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ + } + + #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b { + display: inline-block; + background: black; + } + + #top-fragment { + width: 400px; + height: 150px; + } + + #bottom-fragment-a { + width: 150px; + height:150px; + } + + #bottom-fragment-b { + width: 250px; + height: 150px; + } + + #left-fragment { + width: 150px; + height: 100px; + } + + #exclusion { + display: inline-block; + top: 150px; + left: 150px; + width: 100px; + height: 100px; + background: #0f0; + } + + #clear-area { + display: inline-block; + background: #080; + width: 150px; + height: 100px; + } + + + /*]]>*/ + </style> + </head> + <body> + <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the + left of the light green area and to the edge of the black background container. You should not see any red background.</p> + <div id="containing-block"><div id="top-fragment"></div><div id="clear-area"></div><div id="exclusion"></div><div id="left-fragment"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> + </body> + </html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03.xht new file mode 100644 index 0000000000..48802eac21 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03.xht @@ -0,0 +1,77 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: wrap-flow:none</title> + <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/> + <link rel="match" href="exclusions-wrap-flow-01-ref.xht"/> + <meta name="assert" content= + "Tests that wrap-flow:start is implemented. The inline boxes defined in the container + with the exclusion element should wrap around the left margin edge of the exclusion but + not to the right. Inline boxes + are flowing to the left of the exclusion element only."/> + <style> + /*<![CDATA[*/ + + #containing-block { + position: relative; + width: 400px; + background: red; + font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ + } + + #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b { + display: inline-block; + background: black; + } + + #top-fragment { + width: 400px; + height: 150px; + } + + #bottom-fragment-a { + width: 150px; + height:150px; + } + + #bottom-fragment-b { + width: 250px; + height: 150px; + } + + #left-fragment { + width: 150px; + height: 100px; + } + + #exclusion { + position: absolute; + wrap-flow: end; + top: 150px; + left: 150px; + width: 100px; + height: 100px; + background: #0f0; + } + + #clear-area { + position: absolute; + background: #080; + top: 150px; + left: 0px; + width: 150px; + height: 100px; + z-index: -1; + } + + + /*]]>*/ + </style> + </head> + <body> + <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the + left of the light green area and to the edge of the black background container. You should not see any red background.</p> + <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> + </body> + </html> diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04-ref.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04-ref.xht new file mode 100644 index 0000000000..840d0b2634 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04-ref.xht @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: wrap-flow:none</title> + <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> + <style> + /*<![CDATA[*/ + + #containing-block { + position: relative; + width: 400px; + background: red; + font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ + } + + #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b { + display: inline-block; + background: black; + } + + #top-fragment { + width: 400px; + height: 150px; + } + + #bottom-fragment-a { + width: 150px; + height:150px; + } + + #bottom-fragment-b { + width: 250px; + height: 150px; + } + + #exclusion { + display: inline-block; + top: 150px; + left: 150px; + width: 100px; + height: 100px; + background: #0f0; + } + + #clear-area-a, #clear-area-b { + display: inline-block; + background: #080; + width: 150px; + height: 100px; + } + /*]]>*/ + </style> + </head> + <body> + <p>You should see a light green square centered in a solid dark green 100px high dark green stripe on top of a 400px by 400px black background. You should not see any red background.</p> + <div id="containing-block"><div id="top-fragment"></div><div id="clear-area-a"></div><div id="exclusion"></div><div id="clear-area-b"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> + </body> + </html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04.xht new file mode 100644 index 0000000000..ca2c7e35de --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04.xht @@ -0,0 +1,76 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: wrap-flow:none</title> + <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/> + <link rel="match" href="exclusions-wrap-flow-01-ref.xht"/> + <meta name="assert" content= + "Tests that wrap-flow:start is implemented. The inline boxes defined in the container + with the exclusion element should wrap around the left margin edge of the exclusion but + not to the right. Inline boxes + are flowing to the left of the exclusion element only."/> + <style> + /*<![CDATA[*/ + + #containing-block { + position: relative; + width: 400px; + background: red; + font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ + } + + #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b { + display: inline-block; + background: black; + } + + #top-fragment { + width: 400px; + height: 150px; + } + + #bottom-fragment-a { + width: 150px; + height:150px; + } + + #bottom-fragment-b { + width: 250px; + height: 150px; + } + + #exclusion { + position: absolute; + wrap-flow: clear; + top: 150px; + left: 150px; + width: 100px; + height: 100px; + background: #0f0; + } + + #clear-area-a, #clear-area-b { + position: absolute; + background: #080; + width: 150px; + height: 100px; + top: 150px; + } + + #clear-area-a { + left: 0px; + } + + #clear-area-b { + left: 250px; + } + + /*]]>*/ + </style> + </head> + <body> + <p>You should see a light green square centered in a solid dark green 100px high dark green stripe on top of a 400px by 400px black background. You should not see any red background.</p> + <div id="containing-block"><div id="exclusion"></div><div id="clear-area-a"></div><div id="clear-area-b"></div><div id="top-fragment"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> + </body> + </html> diff --git a/testing/web-platform/tests/css/css-exclusions/inheritance.html b/testing/web-platform/tests/css/css-exclusions/inheritance.html new file mode 100644 index 0000000000..b083ed8a50 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/inheritance.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Exclusions properties</title> +<link rel="help" href="https://drafts.csswg.org/css-exclusions/#property-index"> +<meta name="assert" content="Properties do not inherit."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_not_inherited('wrap-flow', 'auto', 'both'); +assert_not_inherited('wrap-through', 'wrap', 'none'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-exclusions/resources/helper.js b/testing/web-platform/tests/css/css-exclusions/resources/helper.js new file mode 100644 index 0000000000..6cd9ffddc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/resources/helper.js @@ -0,0 +1,14 @@ +function checkLinePos(spanID,expectedPos,coordToCheck) { + if(coordToCheck == "top") + var spanToCheck = document.getElementById(spanID).getBoundingClientRect().top; + else if(coordToCheck == "right") + var spanToCheck = document.getElementById(spanID).getBoundingClientRect().right; + else if(coordToCheck == "left") + var spanToCheck = document.getElementById(spanID).getBoundingClientRect().left; + else + var spanToCheck = document.getElementById(spanID).getBoundingClientRect().bottom; + + /* Verify that the span appears where expected. It should be at expectedPos + Test will allow 1/4 line height (3px) of leeway for minor spacing differences */ + return( (spanToCheck >= expectedPos) && (spanToCheck <= (expectedPos+3)) ) +} diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-001.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-001.html new file mode 100644 index 0000000000..f87c5baf8b --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>CSS Exclusions Test: wrap-flow property set to clear</title> + <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"> + <meta name="flags" content="ahem dom"> + <meta name="assert" content="The text should flow above and below the exclusion, and not on either side"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="resources/helper.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + * { + margin: 0px; + padding: 0px; + } + .exclusion { + wrap-flow: clear; + position: absolute; + top: 40px; + left: 50px; + width: 110px; + height: 110px; + background: blue; + } + #content { + width: 400px; + height: 200px; + line-height: 12px; + font: 12px Ahem; + } + </style> + </head> + <body> + <div class="exclusion"></div> + + <div id="content"><span id="linesAbove">A<BR>B<BR>C<BR></span><span id="linesBelow">D<BR>E</span> + </div> + + <div id="log"></div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + document.fonts.ready.then(() => { + test(function() {assert_equals(checkLinePos("linesBelow",150,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly"); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-002.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-002.html new file mode 100644 index 0000000000..4f56a99a24 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-002.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>CSS Exclusions Test: wrap-flow property set to start</title> + <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"> + <meta name="flags" content="ahem dom"> + <meta name="assert" content="Text should flow from the beginning of the line to the exclusion, as well as above and below"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="resources/helper.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + * { + margin: 0px; + padding: 0px; + } + .exclusion { + wrap-flow: start; + position: absolute; + top: 40px; + left: 40px; + width: 60px; + height: 25px; + background: blue; + } + #content { + width: 400px; + line-height: 12px; + font: 12px Ahem; + } + </style> + </head> + <body> + <div class="exclusion"></div> + + <div id="content"> + <span id="linesAbove">ethical<BR>beer<BR>craft<BR></span> + <span id="lineLeft1">foo</span> + <span id="lineLeft2">sed</span> + <span id="linesBelow">Vegan<BR>cliche<BR>retro</span> + </div> + + <div id="log"></div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + document.fonts.ready.then(() => { + test(function() {assert_equals(checkLinePos("lineLeft1",36,"top"), true)}, "Verify top of the 'lineLeft1' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("lineLeft2",48,"top"), true)}, "Verify top of the 'lineLeft2' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("lineLeft2",36,"right"), true)}, "Verify right of the 'lineLeft2' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("linesBelow",65,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly"); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-003.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-003.html new file mode 100644 index 0000000000..f48d8a8fbb --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-003.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>CSS Exclusions Test: wrap-flow property set to auto</title> + <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"> + <meta name="flags" content="ahem dom"> + <meta name="assert" content="No exclusion should be created"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="resources/helper.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + * { + margin: 0px; + padding: 0px; + } + .exclusion { + wrap-flow: auto; + position: absolute; + top: 10px; + left: 20px; + width: 60px; + height: 25px; + background: blue; + } + #content { + width: 400px; + line-height: 12px; + font: 12px Ahem; + } + </style> + </head> + <body> + <div class="exclusion"></div> + + <div id="content"> + <span id="line1">ethical beer craft</span><BR> + <span id="line2">Fixie pork belly</span><BR> + <span id="line3">food truck in marfa</span><BR> + <span id="line4">american apparel squid</span> + </div> + + <div id="log"></div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + document.fonts.ready.then(() => { + test(function() {assert_equals(checkLinePos("line1",216,"right"), true)}, "Verify right of the 'line1' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line2",192,"right"), true)}, "Verify right of the 'line2' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line3",228,"right"), true)}, "Verify right of the 'line3' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line4",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line4",264,"right"), true)}, "Verify right of the 'line4' span is positioned correctly"); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-004.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-004.html new file mode 100644 index 0000000000..c2369a12ee --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-004.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>CSS Exclusions Test: wrap-flow property set to both</title> + <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"> + <meta name="flags" content="ahem dom"> + <meta name="assert" content="Text should flow on both the left and right side of the exclusion, in addition to above and below"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="resources/helper.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + * { + margin: 0px; + padding: 0px; + } + .exclusion { + wrap-flow: both; + position: absolute; + top: 15px; + left: 70px; + width: 60px; + height: 25px; + background: blue; + } + #content { + width: 400px; + line-height: 12px; + font: 12px Ahem; + } + </style> + </head> + <body> + <div class="exclusion"></div> + + <div id="content"> + <span id="line1">ethical beer craft</span><BR> + <span id="line2Left">jean </span><span id="line2Right">vegan</span><BR> + <span id="line3Left">fund </span><span id="line3Right">selvage</span><BR> + <span id="line4Left">swags </span><span id="line4Right">unami</span><BR> + <span id="line5">american apparel squid</span> + </div> + + <div id="log"></div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + document.fonts.ready.then(() => { + /* Line 1 */ + test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify right of the 'line1' span is positioned correctly"); + /* Line 2 */ + test(function() {assert_equals(checkLinePos("line2Left",12,"top"), true)}, "Verify top of the 'line2' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line2Right",130,"left"), true)}, "Verify left of the 'line2' span is positioned correctly"); + /* Line 3 */ + test(function() {assert_equals(checkLinePos("line3Left",24,"top"), true)}, "Verify top of the 'line3' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line3Right",130,"left"), true)}, "Verify left of the 'line3' span is positioned correctly"); + /* Line 4 */ + test(function() {assert_equals(checkLinePos("line4Left",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line4Right",130,"left"), true)}, "Verify left of the 'line4' span is positioned correctly"); + /* Line 5 */ + test(function() {assert_equals(checkLinePos("line5",48,"top"), true)}, "Verify top of the 'line5' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line5",0,"left"), true)}, "Verify right of the 'line5' span is positioned correctly"); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-005.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-005.html new file mode 100644 index 0000000000..d16c8479ca --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-005.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>CSS Exclusions Test: wrap-flow property set to end</title> + <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"> + <meta name="flags" content="ahem dom"> + <meta name="assert" content="Text should flow on the right side of the exclusion, as well as above and below"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="resources/helper.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + * { + margin: 0px; + padding: 0px; + } + .exclusion { + wrap-flow: end; + position: absolute; + top: 15px; + left: 70px; + width: 60px; + height: 25px; + background: blue; + } + #content { + width: 400px; + line-height: 12px; + font: 12px Ahem; + } + </style> + </head> + <body> + <div class="exclusion"></div> + + <div id="content"> + <span id="line1">ethical beer craft</span><BR> + <span id="line2">jean</span><BR> + <span id="line3">fun</span><BR> + <span id="line4">swags</span><BR> + <span id="line5">american apparel squid</span> + </div> + + <div id="log"></div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + document.fonts.ready.then(() => { + /* Line 1 */ + test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the 'line1' span is positioned correctly"); + /* Line 2 */ + test(function() {assert_equals(checkLinePos("line2",12,"top"), true)}, "Verify top of the 'line2' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line2",130,"left"), true)}, "Verify left of the 'line2' span is positioned correctly"); + /* Line 3 */ + test(function() {assert_equals(checkLinePos("line3",24,"top"), true)}, "Verify top of the 'line3' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line3",130,"left"), true)}, "Verify left of the 'line3' span is positioned correctly"); + /* Line 4 */ + test(function() {assert_equals(checkLinePos("line4",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line4",130,"left"), true)}, "Verify left of the 'line4' span is positioned correctly"); + /* Line 5 */ + test(function() {assert_equals(checkLinePos("line5",48,"top"), true)}, "Verify top of the 'line5' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line5",0,"left"), true)}, "Verify left of the 'line5' span is positioned correctly"); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-006.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-006.html new file mode 100644 index 0000000000..d9c107ae75 --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-006.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>CSS Exclusions Test: wrap-flow property set to maximum</title> + <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"> + <meta name="flags" content="ahem dom"> + <meta name="assert" content="Text should flow in the left OR right side of the exclusion depending on which has more space, as well as above and below"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="resources/helper.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + * { + margin: 0px; + padding: 0px; + } + .exclusion { + wrap-flow: maximum; + position: absolute; + top: 40px; + left: 40px; + width: 60px; + height: 25px; + background: blue; + } + #content { + width: 400px; + line-height: 12px; + font: 12px Ahem; + } + </style> + </head> + <body> + <div class="exclusion"></div> + + <div id="content"> + <span id="line1">ethical<BR>beer<BR>craft<BR></span> + <span id="line2">foo</span> + <span id="line3">sed</span> + <span id="line4">Vegan<BR>cliche<BR>retro</span> + </div> + + <div id="log"></div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + document.fonts.ready.then(() => { + /*Line 1*/ + test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the 'line1' span is positioned correctly"); + /*Line 2*/ + test(function() {assert_equals(checkLinePos("line2",36,"top"), true)}, "Verify top of the 'line2' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line2",100,"left"), true)}, "Verify left of the 'line2' span is positioned correctly"); + /*Line 3*/ + test(function() {assert_equals(checkLinePos("line3",48,"top"), true)}, "Verify top of the 'line3' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line3",100,"left"), true)}, "Verify left of the 'line3' span is positioned correctly"); + /*Line 4*/ + test(function() {assert_equals(checkLinePos("line4",65,"top"), true)}, "Verify top of the 'line4' span is positioned correctly"); + test(function() {assert_equals(checkLinePos("line4",0,"left"), true)}, "Verify left of the 'line4' span is positioned correctly"); + done(); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-through-001.html b/testing/web-platform/tests/css/css-exclusions/wrap-through-001.html new file mode 100644 index 0000000000..8c2f9d797b --- /dev/null +++ b/testing/web-platform/tests/css/css-exclusions/wrap-through-001.html @@ -0,0 +1,73 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>CSS Exclusions Test: wrap-through property set to none</title> + <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-through-property"> + <meta name="flags" content="ahem dom"> + <meta name="assert" content="The wrapping context should not be inheritted from the parent node when wrap-through is set to none"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="resources/helper.js"></script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + * { + margin: 0px; + padding: 0px; + } + .exclusion { + wrap-flow: both; + position: absolute; + top: 15px; + left: 70px; + width: 60px; + height: 36px; + background: blue; + } + #content1, #content2 { + width: 400px; + line-height: 12px; + font: 12px Ahem; + } + #content2 { + wrap-through: none; + } + </style> + </head> + <body> + <div id="myContainer"> + <div class="exclusion"></div> + + <div id="content1"> + <span id="line1">ethical beer craft</span><BR> + <span id="line2Left">jean </span><span id="line2Right">vegan</span><BR> + <span id="line3Left">fund </span><span id="line3Right">selvage</span><BR> + </div> + <div id="content2"> + <span id="line4Left">swags </span><span id="line4Right">unami</span> + </div> + </div> + + <div id="log"></div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + document.fonts.ready.then(() => { + /* Line 1 */ + test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the first line above the exclusion"); + test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the first line above the exclusion"); + /* Line 2 */ + test(function() {assert_equals(checkLinePos("line2Left",12,"top"), true)}, "Verify top of the second line on the left of the exclusion"); + test(function() {assert_equals(checkLinePos("line2Right",130,"left"), true)}, "Verify left of the second line on the right of the exclusion"); + /* Line 3 */ + test(function() {assert_equals(checkLinePos("line3Left",24,"top"), true)}, "Verify top of the third line on the left of the exclusion"); + test(function() {assert_equals(checkLinePos("line3Right",130,"left"), true)}, "Verify left of the third line on the right of the exclusion"); + /* Line 4 */ + test(function() {assert_equals(checkLinePos("line4Left",36,"top"), true)}, "Verify top of the fourth line with no wrapping-through = none"); + test(function() {assert_equals(checkLinePos("line4Right",72,"left"), true)}, "Verify left of the fourth line with wrapping-through = none"); + done(); + }); + </script> + </body> +</html> |