[css-text] Resolve 'text-indent' percentage against the content-box i…

…nline-size of the box itself, not its containing block. (#13721) bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1453298 gecko-commit: 2775681c72a3474e217b1790fe17d3afb0aa98bc gecko-integration-branch: mozilla-inbound gecko-reviewers: emilio
web-platform-tests · Nov 1, 2018 · cf14912 · cf14912
1 parent 29c3aa8
commit cf14912
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 34 deletions.
diff --git a/css/CSS2/css1/c547-indent-001-ref.xht b/css/CSS2/css1/c547-indent-001-ref.xht
@@ -32,13 +32,7 @@
   margin-top: 0em;
   }
 
-  div#X
-  {
-  float: left;
-  margin-left: 50%;
-  }
-
-  div#after-X
+  div
   {
   background-color: aqua;
   width: 25%;
@@ -58,9 +52,7 @@
   the others should all be<br />
   <em>aligned on the left</em> of the window.</p>
 
-  <div id="X">X</div>
-
-  <div id="after-X"><br />The X on the previous line should be centered across the window.</div>
+  <div><span style="padding-left:50%">X The first X in this sentence should be indented to the center of this block.</span></div>
 
  </body>
 </html>
diff --git a/css/CSS2/css1/c547-indent-001.xht b/css/CSS2/css1/c547-indent-001.xht
@@ -27,7 +27,7 @@
    <em>aligned on the left</em> of the window.
   </p>
   <div>
-   X The X on the previous line should be centered across the window.
+   X The first X in this sentence should be indented to the center of this block.
   </div>
  </body>
 </html>
diff --git a/css/CSS2/text/text-indent-percent-001-ref.xht b/css/CSS2/text/text-indent-percent-001-ref.xht
@@ -2,7 +2,7 @@
 <title>text-indent test</title>
 <style type="text/css">
 div { width: 500px; }
-p { width: 300px; text-indent: 50px; }
+p { width: 300px; text-indent: 30px; }
 </style>
 </head>
 <body>
@@ -11,4 +11,4 @@ p { width: 300px; text-indent: 50px; }
 </div>
 
 
-</body></html>
+</body></html>
diff --git a/css/css-text/text-indent/reference/text-indent-percentage-001-ref.xht b/css/css-text/text-indent/reference/text-indent-percentage-001-ref.xht
@@ -19,7 +19,7 @@
 	<body>
 		<p>Test passes if there is no red visible on the page.</p>
 		<div id="parent">
-			<div>X</div>
+			<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>
@@ -31,4 +31,4 @@
 			ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br />
 		</div>
 	</body>
-</html>
+</html>
diff --git a/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html b/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html
@@ -4,11 +4,11 @@
 <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;
   font-family: Ahem;
 }
 </style>
 
-<p>Test passes if there is a single black X below and no red.
 <div>X</div>
diff --git a/css/css-text/text-indent/text-indent-percentage-001.xht b/css/css-text/text-indent/text-indent-percentage-001.xht
@@ -18,7 +18,7 @@
 			#reference1
 			{
 				color: red;
-				left: 0;
+				left: 100px; /* see comments for #test1 below */
 				position: absolute;
 				top: 0;
 				z-index: -1;
@@ -29,8 +29,8 @@
 			}
 			#test1
 			{
-    			text-indent: 50%;
-    			margin-left: -50%;
+    			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
 			{

diff --git a/css/css-text/text-indent/text-indent-percentage-002.html b/css/css-text/text-indent/text-indent-percentage-002.html
@@ -8,7 +8,7 @@
 <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>
-section { position: absolute; }
+body { background: white; }
 section, div {
   border-right: 10px solid white;
   margin-right: 10px;
@@ -19,10 +19,7 @@
   box-sizing: border-box;
   width: 120px;
 }
-.test div { text-indent: 50%; color: red; }
-.ref div { text-indent: 50px; }
+.test div { text-indent: 50%; }
 </style>
 
-<p>Test passes if there is a single black X below and no red.
 <section class=test><div>X</div></section>
-<section class=ref><div>X</div></section>
diff --git a/css/css-text/text-indent/text-indent-percentage-003.html b/css/css-text/text-indent/text-indent-percentage-003.html
@@ -8,7 +8,7 @@
 <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>
-section { position: absolute; }
+body { background: white; }
 section, div {
   border-right: 10px solid white;
   margin-right: 10px;
@@ -19,10 +19,7 @@
   box-sizing: border-box;
   width: 120px;
 }
-.test div { text-indent: 50%; color: red; overflow: hidden; } /* overflow:hidden should not make any difference, but it does in some browsers */
-.ref div { text-indent: 50px; }
+.test div { text-indent: 50%; overflow: hidden; } /* overflow:hidden should not make any difference, but it does in some browsers */
 </style>
 
-<p>Test passes if there is a single black X below and no red.
 <section class=test><div>X</div></section>
-<section class=ref><div>X</div></section>
diff --git a/css/css-text/text-indent/text-indent-percentage-004.html b/css/css-text/text-indent/text-indent-percentage-004.html
@@ -8,7 +8,7 @@
 <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>
-section { position: absolute; }
+body { background: white; }
 section, div {
   border-right: 10px solid white;
   margin-right: 10px;
@@ -19,10 +19,7 @@
   box-sizing: border-box;
   width: 120px;
 }
-.test div { text-indent: calc(25px + 25%); color: red; }
-.ref div { text-indent: 50px; }
+.test div { text-indent: calc(25px + 25%); }
 </style>
 
-<p>Test passes if there is a single black X below and no red.
 <section class=test><div>X</div></section>
-<section class=ref><div>X</div></section>