diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-text/text-indent')
17 files changed, 629 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/text-indent/anonymous-flex-item-001.html b/testing/web-platform/tests/css/css-text/text-indent/anonymous-flex-item-001.html new file mode 100644 index 0000000000..0b305fc307 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/anonymous-flex-item-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>text-indent in anonymous flex and grid items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="match" href="reference/anonymous-flex-grid-item-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property" title="Anonymous flex/grid items aren't anonymous block boxes."> +<link rel="help" href="https://crbug.com/1159311"> +<meta name="flags" content="ahem"> +<meta name="assert" content="text-indent applies to the first line of an anonymous flex item that is not the first item in the flex/grid container."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +main { + font: 10px/1 Ahem; + color: orange; +} +</style> + +<p> +Pass conditions: +<ul> + <li>The top left quadrant of the black-bordered rectangle is white. + <li>Only the top left quadrant of the black-bordered rectangle is white. + <li>The rest of the black-bordered rectangle is orange. + <li>No orange is outside the black-bordered rectangle. +</ul> +</p> + +<main> +<div style="text-indent: 50px; border: 3px solid black; width: 100px; display: flex;"> + <div style="width: 0px;"></div> + ABCDE + ABCDEABCDE +</div> +</main> diff --git a/testing/web-platform/tests/css/css-text/text-indent/anonymous-grid-item-001.html b/testing/web-platform/tests/css/css-text/text-indent/anonymous-grid-item-001.html new file mode 100644 index 0000000000..2683658072 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/anonymous-grid-item-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>text-indent in anonymous flex and grid items</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="match" href="reference/anonymous-flex-grid-item-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property" title="Anonymous flex/grid items aren't anonymous block boxes."> +<link rel="help" href="https://crbug.com/1159311"> +<meta name="flags" content="ahem"> +<meta name="assert" content="text-indent applies to the first line of an anonymous grid item that is not the first item in the flex/grid container."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +main { + font: 10px/1 Ahem; + color: orange; +} +</style> + +<p> +Pass conditions: +<ul> + <li>The top left quadrant of the black-bordered rectangle is white. + <li>Only the top left quadrant of the black-bordered rectangle is white. + <li>The rest of the black-bordered rectangle is orange. + <li>No orange is outside the black-bordered rectangle. +</ul> +</p> + +<main> +<div style="text-indent: 50px; border: 3px solid black; width: 100px; display: grid; grid-template-columns: auto auto;"> + <div style="width: 0px;"></div> + ABCDE + ABCDEABCDE +</div> +</main> diff --git a/testing/web-platform/tests/css/css-text/text-indent/percentage-value-intrinsic-size.html b/testing/web-platform/tests/css/css-text/text-indent/percentage-value-intrinsic-size.html new file mode 100644 index 0000000000..d63a9f1ba2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/percentage-value-intrinsic-size.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-indent-property"> +<meta name="assert" content="Percentages should be ignored when calculating min/max intrinsic sizes."> +<p>Test passes if there is a filled green square.</p> +<div id="container" data-expected-width="50" style="position:relative; float:left; height:100px; background:green;"> + <div id="foo"> + <div data-offset-x="50" data-expected-width="50" style="display:inline-block; width:50px; height:100px; background:green;"></div> + <div style="width:50px;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + document.body.offsetTop; + foo.style.textIndent = "100%"; + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/anonymous-flex-grid-item-001-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/anonymous-flex-grid-item-001-ref.html new file mode 100644 index 0000000000..517f9e65fd --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/reference/anonymous-flex-grid-item-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>text-indent in anonymous flex and grid items</title> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +main { + font: 10px/1 Ahem; + color: orange; +} +</style> + +<p> +Pass conditions: +<ul> + <li>The top left quadrant of the black-bordered rectangle is white. + <li>Only the top left quadrant of the black-bordered rectangle is white. + <li>The rest of the black-bordered rectangle is orange. + <li>No orange is outside the black-bordered rectangle. +</ul> +</p> + +<main> +<div style="text-indent: 50px; border: 3px solid black; width: 100px;"> + ABCDE ABCDEABCDE +</div> +</main> diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-each-line-hanging-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-each-line-hanging-ref.html new file mode 100644 index 0000000000..3357d7d8f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-each-line-hanging-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>text-indent 'each-line' and 'hanging' modifiers</title> + + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + div { width:80px; font: 10px Ahem; background-color:lightgray; } + .indent { color: blue; padding-left:4em; } + </style> +</head> +<body> +All black boxes should be left-aligned. All blue boxes should be right-aligned. + +<div> +<span class="indent">xxxx</span><br>xxxx<br>xxxx +</div> +<br> +<div> +<span class="indent">xxxx</span> xxxx xxxx +</div> +<br> +<div> +<span class="indent">xxxx</span><br><span class="indent">xxxx</span><br><span class="indent">xxxx</span> +</div> +<br> +<div> +<span class="indent">xxxx</span> xxxx<br><span class="indent">xxxx</span> +</div> +<br> +<div> +xxxx<br><span class="indent">xxxx</span><br><span class="indent">xxxx</span> +</div> +<br> +<div> +xxxx <span class="indent">xxxx</span> <span class="indent">xxxx</span> +</div> +<br> +<div> +xxxx<br>xxxx<br>xxxx +</div> +<br> +<div> +xxxx <span class="indent">xxxx</span><br>xxxx +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-001-ref.xht b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-001-ref.xht new file mode 100644 index 0000000000..5b065d1db7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-001-ref.xht @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: text-indent Percentage - basic cases</title> + <link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + #parent + { + font: 16px/1em Ahem; + position: relative; + width: 400px; + } + .reference{ + margin-left: 50%; + } + ]]></style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="parent"> + <div style="padding-left: 100px">X</div> + </div> + <p>Test passes if the following two text blocks look same in terms of margin-left and text-indent respectively.</p> + <div> + <span class="reference">abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.</span><br /> + ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br /> + </div> + <div> + <span class="reference">abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.</span><br /> + ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html new file mode 100644 index 0000000000..0160c34fb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +body { background: white; } +div { + padding-left: 50px; +} +span { + display: inline-block; + width: 10px; + height: 10px; + background: green; +} +</style> + +<p>Test passes if there is a green square below and no red. +<div><span></span></div> diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-tab-positions-001-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-tab-positions-001-ref.html new file mode 100644 index 0000000000..4d85456dd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-tab-positions-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>CSS Text reference file</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/> +<style> +p { font-family: monospace; white-space: pre; tab-size: 8ch; + width: 40ch; margin: 1em 8ch; border: 1px solid silver; } +</style> +The tab-stop positions should be the same in all three blocks below; +only the ‘a’ characters affected by text-indent should be unaligned. +<p>a	b	c<br>d	e	f</p> +<p> a	b	c<br>d	e	f</p> +<p><span style="margin-left:-3ch;">a </span>a'	b	c<br>d	e	f</p> diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-with-absolute-pos-child-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-with-absolute-pos-child-ref.html new file mode 100644 index 0000000000..e5feb2c7f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-with-absolute-pos-child-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>This tests that first line text-indent is applied properly when the child is a statically positioned out-of-flow renderer.</title> + +<link rel="stylesheet" href="/fonts/ahem.css" /> +<style> + body { + margin: 40px; + } + +.container { + display: block; + background-color: green; + width: 100px; + height: 20px; + color: green; + font-family: Ahem; + font-size: 10px; +} + +.inner { + display: block; + background-color: blue; + width: 20px; + height: 20px; +} +</style> +</head> +<body> +<div> +<div class=container><div class=inner style="margin-left: 20px;"></div></div> +<div class=container><div class=inner style="margin-left: 20px;"></div></div> +<div class=container><div class=inner style="margin-left: 20px;"></div></div> +<div class=container><div class=inner style="margin-left: 20px;"></div></div> +<div class=container><div class=inner style="position: relative; left: 70px;"></div></div> +<div class=container><div class=inner style="margin-left: -20px;"></div></div> +<div class=container><div class=inner style="left: 40px;"></div></div> +<div class=container><div class=inner></div></div> +<div class=container><div class=inner></div></div> +<div class=container><div class=inner style="position: relative; top: 10px"></div></div> +<div class=container><div class=inner></div></div> +</div> + +<div style="direction: rtl;"> +<div class=container><div class=inner style="margin-right: 20px;"></div></div> +<div class=container><div class=inner style="margin-right: 20px;"></div></div> +<div class=container><div class=inner style="margin-right: 20px;"></div></div> +<div class=container><div class=inner style="margin-right: 20px;"></div></div> +<div class=container><div class=inner style="position: relative; right: 70px;"></div></div> +<div class=container><div class=inner style="margin-right: -20px;"></div></div> +<div class=container><div class=inner style="right: 40px;"></div></div> +<div class=container><div class=inner></div></div> +<div class=container><div class=inner></div></div> +<div class=container><div class=inner style="position: relative; top: 10px"></div></div> +<div class=container><div class=inner></div></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-each-line-hanging.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-each-line-hanging.html new file mode 100644 index 0000000000..2c3ac08df4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-each-line-hanging.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>text-indent 'each-line' and 'hanging' modifiers</title> + <link rel="author" title="Jaehun Lim" href="mailto:ljaehun.lim@samsung.com"> + <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> + <link rel="match" href="reference/text-indent-each-line-hanging-ref.html"> + <meta name="assert" content="'each-line' and 'hanging' properly works"> + + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style> + div { width:80px; font: 10px Ahem; background-color:lightgray; } + .normal { text-indent: 4em; } + .eachline { text-indent: 4em each-line; } + .hanging { text-indent: 4em hanging; } + .eachlinehanging { text-indent: 4em each-line hanging; } + .indent { color: blue; } + </style> +</head> +<body> +All black boxes should be left-aligned. All blue boxes should be right-aligned. + +<!-- normal text-indent --> +<div class="normal"> +<span class="indent">xxxx</span> xxxx<br>xxxx +</div> +<br> +<!-- each-line with a soft wrap break --> +<div class="eachline"> +<span class="indent">xxxx</span> xxxx xxxx +</div> +<br> +<!-- each-line with a forced line break --> +<div class="eachline"> +<span class="indent">xxxx</span><br><span class="indent">xxxx</span><br><span class="indent">xxxx</span> +</div> +<br> +<!-- each-line with a soft wrap break and a forced line break --> +<div class="eachline"> +<span class="indent">xxxx</span> xxxx<br><span class="indent">xxxx</span> +</div> +<br> +<!-- normal text-indent with hanging --> +<div class="hanging"> +xxxx <span class="indent">xxxx</span><br><span class="indent">xxxx</span> +</div> +<br> +<!-- each-line and hanging with a soft wrap break --> +<div class="eachlinehanging"> +xxxx <span class="indent">xxxx</span> <span class="indent">xxxx</span> +</div> +<br> +<!-- each-line and hanging with a forced line break --> +<div class="eachlinehanging"> +xxxx<br>xxxx<br>xxxx +</div> +<br> +<!-- each-line and hanging with a soft wrap break and a forced line break --> +<div class="eachlinehanging"> +xxxx <span class="indent">xxxx</span><br>xxxx +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-long-line-crash.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-long-line-crash.html new file mode 100644 index 0000000000..9b5e079837 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-long-line-crash.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Very long line with `text-indent` should not crash</title> +<link rel="help" href="https://crbug.com/963794"> +<link rel="author" title="Koji Ishii" href="kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + width: 2147483648px; +} +div { + text-indent: 2147483648px; + width: 200%; /* Double the width in case CSS parser clamps the body width */ +} +</style> +<body> + <div>XXX</div> +<script>test(() => { document.body.offsetTop; });</script> +</body> diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-001.xht b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-001.xht new file mode 100644 index 0000000000..6da26308b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-001.xht @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: text-indent Percentage - basic cases</title> + <link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" /> + <link rel="help" title="CSS Text Level 3: 10.1. Indent Text: the ‘text-indent’ property" href="http://www.w3.org/TR/css-text-3/#text-indent" /> + <link rel="match" href="reference/text-indent-percentage-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Ensure that text-indent +50% adds 50% of its containing block's width in front of the text." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + #parent + { + font: 16px/1em Ahem; + position: relative; + width: 400px; + } + #reference1 + { + color: red; + left: 100px; /* see comments for #test1 below */ + position: absolute; + top: 0; + z-index: -1; + } + #reference2 + { + margin-left: 50%; + } + #test1 + { + margin-left: -50%; /* -50% * 400px = -200px which makes the inline-size of this block 600px */ + text-indent: 50%; /* 50% * 600px = 300px (which is 100px from the start of #parent due to the negative margin) */ + } + #test2 + { + text-indent: 50%; + } + ]]></style> + </head> + <body> + <p>Test passes if there is no red visible on the page.</p> + <div id="parent"> + <div id="reference1">X</div> + <div id="test1">X</div> + </div> + <p>Test passes if the following two text blocks look same in terms of margin-left and text-indent respectively.</p> + <div id="test2"> + abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.<br/> + ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br/> + </div> + <div> + <span id="reference2">abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.</span><br/> + ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br/> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-002.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-002.html new file mode 100644 index 0000000000..b60f99e819 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test: text-indent percentage resolution basis</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> +<link rel="match" href="reference/text-indent-percentage-002-ref.html"> +<meta name="assert" content="Percentages in text-indent refer to width of the element's content box"> +<style> +body { background: white; } +section { position: absolute; } +section, div { + border-right: 10px solid white; + margin-right: 10px; + padding-right: 10px; +} +div { + box-sizing: border-box; + width: 120px; +} +span { + display: inline-block; + width: 10px; + height: 10px; + background: green; +} +.ref span { + background: red; + /* the next two lines are to avoid antialiasing artifacts causing a tiny about of red to be visible */ + box-sizing: border-box; + border: 1px solid white; +} +.test div { text-indent: 50%; } +.ref div { text-indent: 50px; } +</style> + +<p>Test passes if there is a green square below and no red. +<section class=ref><div><span></span></div></section> +<section class=test><div><span></span></div></section> diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-003.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-003.html new file mode 100644 index 0000000000..ba5ce8f871 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-003.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test: text-indent percentage resolution basis</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> +<link rel="match" href="reference/text-indent-percentage-002-ref.html"> +<meta name="assert" content="Percentages in text-indent refer to width of the element's content box"> +<style> +body { background: white; } +section { position: absolute; } +section, div { + border-right: 10px solid white; + margin-right: 10px; + padding-right: 10px; +} +div { + box-sizing: border-box; + width: 120px; +} +span { + display: inline-block; + width: 10px; + height: 10px; + background: green; +} +.ref span { + background: red; + /* the next two lines are to avoid antialiasing artifacts causing a tiny about of red to be visible */ + box-sizing: border-box; + border: 1px solid white; +} +.test div { text-indent: 50%; overflow: hidden; } /* overflow:hidden should not make any difference, but it does in some browsers */ +.ref div { text-indent: 50px; } +</style> + +<p>Test passes if there is a green square below and no red. +<section class=ref><div><span></span></div></section> +<section class=test><div><span></span></div></section> diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-004.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-004.html new file mode 100644 index 0000000000..79829e6b08 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-004.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Text Test: text-indent percentage resolution basis, in a calc expressiong</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> +<link rel="match" href="reference/text-indent-percentage-002-ref.html"> +<meta name="assert" content="Percentages in text-indent refer to width of the element's content box, when used in a calc expression"> +<style> +body { background: white; } +section { position: absolute; } +section, div { + border-right: 10px solid white; + margin-right: 10px; + padding-right: 10px; +} +div { + box-sizing: border-box; + width: 120px; +} +span { + display: inline-block; + width: 10px; + height: 10px; + background: green; +} +.ref span { + background: red; + /* the next two lines are to avoid antialiasing artifacts causing a tiny about of red to be visible */ + box-sizing: border-box; + border: 1px solid white; +} +.test div { text-indent: calc(25px + 25%); } +.ref div { text-indent: 50px; } +</style> + +<p>Test passes if there is a green square below and no red. +<section class=ref><div><span></span></div></section> +<section class=test><div><span></span></div></section> diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-tab-positions-001.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-tab-positions-001.html new file mode 100644 index 0000000000..5bf766ce76 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-tab-positions-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>CSS Text testcase - text-indent should not affect tab-stop positions</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> +<link rel="match" href="reference/text-indent-tab-positions-001-ref.html"> +<meta name="assert" content="Tab stops occur at points that are multiples of the tab size from the block’s starting content edge."> +<style> +p { font-family: monospace; white-space: pre; tab-size: 8ch; + width: 40ch; margin: 1em 8ch; border: 1px solid silver; } +.indent { text-indent: 3ch; } +.outdent { text-indent: -3ch; } +</style> +The tab-stop positions should be the same in all three blocks below; +only the ‘a’ characters affected by text-indent should be unaligned. +<p>a	b	c<br>d	e	f</p> +<p class=indent>a	b	c<br>d	e	f</p> +<p class=outdent>a	a'	b	c<br>d	e	f</p> diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-with-absolute-pos-child.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-with-absolute-pos-child.html new file mode 100644 index 0000000000..16a6deb476 --- /dev/null +++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-with-absolute-pos-child.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>This tests that first line text-indent is applied properly when the child is a statically positioned out-of-flow renderer.</title> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> +<link rel="match" href="reference/text-indent-with-absolute-pos-child-ref.html"> +<meta name="assert" content="First line text-indent is applied properly when the child is a statically positioned out-of-flow renderer."> + +<link rel="stylesheet" href="/fonts/ahem.css" /> +<style> + body { + margin: 40px; + } + + .container { + display: block; + background-color: green; + width: 100px; + height: 20px; + color: green; + font-family: Ahem; + font-size: 10px; + } + + .inner { + display: inline; + position: absolute; + background-color: blue; + width: 20px; + height: 20px; + } +</style> +</head> +<body> +<div> +<div class=container style="text-indent: 20px"><div class=inner></div></div> +<div class=container style="text-indent: 20px"><div class=inner style="display: inline-block;"></div></div> +<div class=container style="text-indent: 20px"><div class=inner></div>foobar</div> +<div class=container style="text-indent: 20px"><div class=inner style="text-indent: 20px;">f</div></div> +<div class=container style="text-indent: 10px">foobar<div class=inner></div></div> +<div class=container style="text-indent: -20px"><div class=inner></div></div> +<div class=container style="text-indent: 20px"><div class=inner style="left: 40px;"></div></div> +<div class=container style="text-indent: 20px"><div class=inner style="display: block;"></div></div> +<div class=container style="text-indent: 20px"><div class=inner style="position: relative; display: block;"></div></div> +<div class=container style="text-indent: 20px">foobar<br><div class=inner></div></div> +<div class=container><div class=inner></div></div> +</div> + +<div style="direction: rtl;"> +<div class=container style="text-indent: 20px"><div class=inner></div></div> +<div class=container style="text-indent: 20px"><div class=inner style="display: inline-block;"></div></div> +<div class=container style="text-indent: 20px"><div class=inner></div>foobar</div> +<div class=container style="text-indent: 20px"><div class=inner style="text-indent: 20px;">f</div></div> +<div class=container style="text-indent: 10px">foobar<div class=inner></div></div> +<div class=container style="text-indent: -20px"><div class=inner></div></div> +<div class=container style="text-indent: 20px"><div class=inner style="right: 40px;"></div></div> +<div class=container style="text-indent: 20px"><div class=inner style="display: block;"></div></div> +<div class=container style="text-indent: 20px"><div class=inner style="position: relative; display: block;"></div></div> +<div class=container style="text-indent: 20px">foobar<br><div class=inner></div></div> +<div class=container><div class=inner></div></div> +</div> + +</body> +</html> |