Bug 1453298 - [css-text] Resolve 'text-indent' percentage against the content-box inline-size of the box itself, not its containing block. r=emilio
authorMats Palmgren <mats@mozilla.com>
Thu, 25 Oct 2018 16:51:44 +0200
changeset 491295 2775681c72a3474e217b1790fe17d3afb0aa98bc
parent 491294 01da72655339b6e9182e0cfb06e45ed7f0cb47ae
child 491296 4896323e685bbf01aae997920d3176b845fd7b6f
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersemilio
bugs1453298
milestone65.0a1
Bug 1453298 - [css-text] Resolve 'text-indent' percentage against the content-box inline-size of the box itself, not its containing block. r=emilio
layout/generic/nsLineLayout.cpp
layout/reftests/bugs/reftest.list
layout/reftests/text-indent/text-indent-parent-dynamic-ref.html
layout/reftests/text-indent/text-indent-single-line-percent-ref.html
testing/web-platform/meta/css/css-text/text-indent/text-indent-percentage-001.xht.ini
testing/web-platform/meta/css/css-text/text-indent/text-indent-percentage-002.html.ini
testing/web-platform/meta/css/css-text/text-indent/text-indent-percentage-003.html.ini
testing/web-platform/meta/css/css-text/text-indent/text-indent-percentage-004.html.ini
testing/web-platform/tests/css/CSS2/css1/c547-indent-001-ref.xht
testing/web-platform/tests/css/CSS2/css1/c547-indent-001.xht
testing/web-platform/tests/css/CSS2/text/text-indent-percent-001-ref.xht
testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-001-ref.xht
testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html
testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-001.xht
testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-002.html
testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-003.html
testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-004.html
--- a/layout/generic/nsLineLayout.cpp
+++ b/layout/generic/nsLineLayout.cpp
@@ -214,27 +214,20 @@ nsLineLayout::BeginLineReflow(nscoord aI
 
   psd->mNoWrap = !mStyleText->WhiteSpaceCanWrapStyle() || mSuppressLineWrap;
   psd->mWritingMode = aWritingMode;
 
   // If this is the first line of a block then see if the text-indent
   // property amounts to anything.
 
   if (0 == mLineNumber && !HasPrevInFlow(mBlockReflowInput->mFrame)) {
-    const nsStyleCoord &textIndent = mStyleText->mTextIndent;
-    nscoord pctBasis = 0;
-    if (textIndent.HasPercent()) {
-      pctBasis =
-        mBlockReflowInput->GetContainingBlockContentISize(aWritingMode);
-    }
-    nscoord indent = textIndent.ComputeCoordPercentCalc(pctBasis);
-
-    mTextIndent = indent;
-
-    psd->mICoord += indent;
+    nscoord pctBasis = mBlockReflowInput->ComputedISize();
+    mTextIndent = nsLayoutUtils::ResolveToLength<false>(mStyleText->mTextIndent,
+                                                        pctBasis);
+    psd->mICoord += mTextIndent;
   }
 
   PerFrameData* pfd = NewPerFrameData(mBlockReflowInput->mFrame);
   pfd->mAscent = 0;
   pfd->mSpan = psd;
   psd->mFrame = pfd;
   nsIFrame* frame = mBlockReflowInput->mFrame;
   if (frame->IsRubyTextContainerFrame()) {
--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@@ -2040,17 +2040,17 @@ skip-if(isDebugBuild&&winWidget) == 1330
 == 1375315-10.html 1375315-10-ref.html
 == 1375315-11.html 1375315-11-ref.html
 == 1375315-12.html 1375315-12-ref.html
 == 1374062.html 1374062-ref.html
 == 1375513.html 1375513-ref.html
 == 1375674.html 1375674-ref.html
 == 1372041.html 1372041-ref.html
 == 1376092.html 1376092-ref.html
-fuzzy-if(Android&&debug,1-1,1-1) needs-focus == 1377447-1.html 1377447-1-ref.html
+fuzzy-if(Android,0-3,0-3) needs-focus == 1377447-1.html 1377447-1-ref.html
 needs-focus != 1377447-1.html 1377447-2.html
 == 1379041.html 1379041-ref.html
 == 1379696.html 1379696-ref.html
 == 1380224-1.html 1380224-1-ref.html
 == 1384065.html 1384065-ref.html
 == 1384275-1.html 1384275-1-ref.html
 == 1381821.html 1381821-ref.html
 == 1395650-1.html 1395650-1-ref.html
--- a/layout/reftests/text-indent/text-indent-parent-dynamic-ref.html
+++ b/layout/reftests/text-indent/text-indent-parent-dynamic-ref.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
 <body>
 
 <div id="x" style="background: lightgreen; height: 3em; width: 500px; padding: 4px;">
-  <div style="text-indent: 200px; width: 200px; background: yellow;">X</div>
+  <div style="text-indent: 80px; width: 200px; background: yellow;">X</div>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/text-indent/text-indent-single-line-percent-ref.html
+++ b/layout/reftests/text-indent/text-indent-single-line-percent-ref.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <head>
 <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>
 <div>
 <p>text</p>
 </div>
 </body>
 </html>
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-text/text-indent/text-indent-percentage-001.xht.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[text-indent-percentage-001.xht]
-  expected:
-    if debug and not webrender and e10s and (os == "mac") and (version == "OS X 10.10.5") and (processor == "x86_64") and (bits == 64): FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-text/text-indent/text-indent-percentage-002.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[text-indent-percentage-002.html]
-  expected: FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-text/text-indent/text-indent-percentage-003.html.ini
+++ /dev/null
@@ -1,6 +0,0 @@
-[text-indent-percentage-003.html]
-  expected:
-    if debug and not webrender and e10s and (os == "win") and (version == "6.1.7601") and (processor == "x86") and (bits == 32): FAIL
-    if not debug and not webrender and e10s and (os == "win") and (version == "6.1.7601") and (processor == "x86") and (bits == 32): FAIL
-    if debug and not webrender and e10s and (os == "win") and (version == "10.0.15063") and (processor == "x86_64") and (bits == 64): FAIL
-    if not debug and not webrender and e10s and (os == "win") and (version == "10.0.15063") and (processor == "x86_64") and (bits == 64): FAIL
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-text/text-indent/text-indent-percentage-004.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[text-indent-percentage-004.html]
-  expected: FAIL
--- a/testing/web-platform/tests/css/CSS2/css1/c547-indent-001-ref.xht
+++ b/testing/web-platform/tests/css/CSS2/css1/c547-indent-001-ref.xht
@@ -27,23 +27,17 @@
   }
 
   p.one
   {
   background-color: aqua;
   margin-top: 0em;
   }
 
-  div#X
-  {
-  float: left;
-  margin-left: 50%;
-  }
-
-  div#after-X
+  div
   {
   background-color: aqua;
   width: 25%;
   }
   ]]>
   </style>
 
  </head>
@@ -53,14 +47,12 @@
   <p class="eight">The first line of this sentence should be indented halfway across the page, but the rest of it should be flush with the normal left margin of the page.</p>
 
   <p class="one-first">Only the first line of this sentence</p>
 
   <p class="one">should be indented,<br />
   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>
--- a/testing/web-platform/tests/css/CSS2/css1/c547-indent-001.xht
+++ b/testing/web-platform/tests/css/CSS2/css1/c547-indent-001.xht
@@ -22,12 +22,12 @@
   </p>
   <p class="one">
    Only the first line of this sentence<br />
    should be indented,<br />
    the others should all be<br />
    <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>
--- a/testing/web-platform/tests/css/CSS2/text/text-indent-percent-001-ref.xht
+++ b/testing/web-platform/tests/css/CSS2/text/text-indent-percent-001-ref.xht
@@ -1,14 +1,14 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
 <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>
 <div>
 <p>text</p>
 </div>
 
 
-</body></html>
\ No newline at end of file
+</body></html>
--- 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
@@ -14,21 +14,21 @@
 			.reference{
 				margin-left: 50%;
 			}
 		]]></style>
 	</head>
 	<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>
 			<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>
\ No newline at end of file
+</html>
--- 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
@@ -1,11 +1,11 @@
 <!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; }
 </style>
 
-<p>Test passes if there is a single black X below and no red.
 <div>X</div>
--- 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
@@ -13,29 +13,29 @@
 			{
 				font: 16px/1em Ahem;
 				position: relative;
 				width: 400px;
 			}
 			#reference1
 			{
 				color: red;
-				left: 0;
+				left: 100px; /* see comments for #test1 below */
 				position: absolute;
 				top: 0;
 				z-index: -1;
 			}
 			#reference2
 			{
 				margin-left: 50%;
 			}
 			#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
 			{
     			text-indent: 50%;
 			}
 		]]></style>
 	</head>
 	<body>
--- 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
@@ -3,25 +3,22 @@
 <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">
 <meta name="flags" content="">
 <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;
   padding-right: 10px;
 }
 div {
   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>
--- 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
@@ -3,25 +3,22 @@
 <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">
 <meta name="flags" content="">
 <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;
   padding-right: 10px;
 }
 div {
   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>
--- 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
@@ -3,25 +3,22 @@
 <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">
 <meta name="flags" content="">
 <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;
   padding-right: 10px;
 }
 div {
   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>