third_party/blink/web_tests/external/wpt/css/CSS2/positioning/absolute-non-replaced-width-027.xht - chromium/src - Git at Google

 <!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: absolutely positioned non-replaced element - 'auto' margins, max-width and max-height</title>

   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
   <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" />

   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
   <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />

   <meta content="" name="flags" />
   <meta content="If 'width' is auto and 'left' and 'right' are not 'auto', then set 'auto' values for 'margin-left' and 'margin-right' to 0 and then solve for 'width'; the tentative width may be later constrained by max-width in which case, the algorithm must be re-entered. If 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'; the tentative height may be later constrained by max-height in which case, the algorithm must be re-entered." name="assert" />

   <style type="text/css"><![CDATA[
   div#rel-pos-container
   {
   background-color: green;
   height: 100px;
   position: relative;
   width: 100px;
   }

   div#rel-pos-container > div {position: absolute;}

   div#reference-red-overlapped
   {
   background-color: red;
   height: 33px;
   left: 33px;
   top: 33px;
   width: 33px;
   }

   div#test-green-overlapping
   {
   background-color: green;
   bottom: 0;
   height: auto;
   left: 0;
   margin: auto;
   max-height: 34px;
   max-width: 34px;
   right: 0;
   top: 0;
   width: auto;
   }

   /*

   First we set both margin-left and margin-right to 0 since

   "
   set 'auto' values for 'margin-left' and 'margin-right' to 0
   (...)
   5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
   "
   10.3.7 Absolutely positioned, non-replaced elements
   http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width


       0px       : left
   +
       0px (set) : margin-left
   +
       0px       : border-left
   +
       0px       : padding-left
   +
       (solve)   : width (not constrained yet by max-width)
   +
       0px       : padding-right
   +
       0px       : border-right
   +
       0px (set) : margin-right
   +
       0px       : right
   =============
     100px       : width of containing block

   So, (tentative) width is 100px but now we must
   constrain it by computed max-width value and so we
   must now re-enter the algorithm but this time,
   'width' is not 'auto': therefore horizontal margins
   must not be set to 0:

   "
   If none of the three (left, width, right) is 'auto':
   If both 'margin-left' and 'margin-right' are 'auto',
   solve the equation under the extra constraint that
   the two margins get equal values
   "
   10.3.7 Absolutely positioned, non-replaced elements
   http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

   So:

       0px       : left
   +
       (solve)   : margin-left
   +
       0px       : border-left
   +
       0px       : padding-left
   +
      34px       : width (constrained by max-width)
   +
       0px       : padding-right
   +
       0px       : border-right
   +
       (solve)   : margin-right
   +
       0px       : right
   =============
     100px       : width of containing block

   Therefore, margin-left and margin-right used values are
   each respectively equal to ((100px minus 34px) divided by 2) == 33px.

   -----------------------------------------------

   First we set both margin-top and margin-bottom to 0 since

   "
   5. 'height' is 'auto', 'top' and 'bottom' are not 'auto',
   then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0
   and solve for 'height'
   "
   10.6.4 Absolutely positioned, non-replaced elements
   http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height

       0px       : top
   +
       0px (set) : margin-top
   +
       0px       : border-top
   +
       0px       : padding-top
   +
       (solve)   : height (not constrained yet by max-height)
   +
       0px       : padding-bottom
   +
       0px       : border-bottom
   +
       0px (set) : margin-bottom
   +
       0px       : bottom
   =============
     100px       : height of containing block

   So, (tentative) height is 100px but now we must
   constrain it by computed max-height value and so we
   must now re-enter the algorithm but this time,
   'height' is not 'auto': therefore vertical margins
   must not be set to 0:

   "
   If none of the three (top, height, bottom) are 'auto':
   If both 'margin-top' and 'margin-bottom' are 'auto',
   solve the equation under the extra constraint that
   the two margins get equal values.
   "
   10.6.4 Absolutely positioned, non-replaced elements
   http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height

   So:

       0px       : top
   +
       (solve)   : margin-top
   +
       0px       : border-top
   +
       0px       : padding-top
   +
      34px       : height (constrained by max-height)
   +
       0px       : padding-bottom
   +
       0px       : border-bottom
   +
       (solve)   : margin-bottom
   +
       0px       : bottom
   =============
     100px       : height of containing block

   Therefore, margin-top and margin-bottom used values are
   each respectively equal to ((100px minus 34px) divided by 2) == 33px.

   */
   ]]></style>

  </head>

  <body>

   <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

   <div id="rel-pos-container">

 	    <div id="reference-red-overlapped"></div>

 	    <div id="test-green-overlapping"></div>

   </div>

  </body>
 </html>
	<!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: absolutely positioned non-replaced element - 'auto' margins, max-width and max-height</title>

	<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
	<link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" />

	<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements" />
	<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" />
	<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />

	<meta content="" name="flags" />
	<meta content="If 'width' is auto and 'left' and 'right' are not 'auto', then set 'auto' values for 'margin-left' and 'margin-right' to 0 and then solve for 'width'; the tentative width may be later constrained by max-width in which case, the algorithm must be re-entered. If 'height' is 'auto' and 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height'; the tentative height may be later constrained by max-height in which case, the algorithm must be re-entered." name="assert" />

	<style type="text/css"><![CDATA[
	div#rel-pos-container
	{
	background-color: green;
	height: 100px;
	position: relative;
	width: 100px;
	}

	div#rel-pos-container > div {position: absolute;}

	div#reference-red-overlapped
	{
	background-color: red;
	height: 33px;
	left: 33px;
	top: 33px;
	width: 33px;
	}

	div#test-green-overlapping
	{
	background-color: green;
	bottom: 0;
	height: auto;
	left: 0;
	margin: auto;
	max-height: 34px;
	max-width: 34px;
	right: 0;
	top: 0;
	width: auto;
	}

	/*

	First we set both margin-left and margin-right to 0 since

	"
	set 'auto' values for 'margin-left' and 'margin-right' to 0
	(...)
	5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
	"
	10.3.7 Absolutely positioned, non-replaced elements
	http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width


	0px : left
	+
	0px (set) : margin-left
	+
	0px : border-left
	+
	0px : padding-left
	+
	(solve) : width (not constrained yet by max-width)
	+
	0px : padding-right
	+
	0px : border-right
	+
	0px (set) : margin-right
	+
	0px : right
	=============
	100px : width of containing block

	So, (tentative) width is 100px but now we must
	constrain it by computed max-width value and so we
	must now re-enter the algorithm but this time,
	'width' is not 'auto': therefore horizontal margins
	must not be set to 0:

	"
	If none of the three (left, width, right) is 'auto':
	If both 'margin-left' and 'margin-right' are 'auto',
	solve the equation under the extra constraint that
	the two margins get equal values
	"
	10.3.7 Absolutely positioned, non-replaced elements
	http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

	So:

	0px : left
	+
	(solve) : margin-left
	+
	0px : border-left
	+
	0px : padding-left
	+
	34px : width (constrained by max-width)
	+
	0px : padding-right
	+
	0px : border-right
	+
	(solve) : margin-right
	+
	0px : right
	=============
	100px : width of containing block

	Therefore, margin-left and margin-right used values are
	each respectively equal to ((100px minus 34px) divided by 2) == 33px.

	-----------------------------------------------

	First we set both margin-top and margin-bottom to 0 since

	"
	5. 'height' is 'auto', 'top' and 'bottom' are not 'auto',
	then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0
	and solve for 'height'
	"
	10.6.4 Absolutely positioned, non-replaced elements
	http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height

	0px : top
	+
	0px (set) : margin-top
	+
	0px : border-top
	+
	0px : padding-top
	+
	(solve) : height (not constrained yet by max-height)
	+
	0px : padding-bottom
	+
	0px : border-bottom
	+
	0px (set) : margin-bottom
	+
	0px : bottom
	=============
	100px : height of containing block

	So, (tentative) height is 100px but now we must
	constrain it by computed max-height value and so we
	must now re-enter the algorithm but this time,
	'height' is not 'auto': therefore vertical margins
	must not be set to 0:

	"
	If none of the three (top, height, bottom) are 'auto':
	If both 'margin-top' and 'margin-bottom' are 'auto',
	solve the equation under the extra constraint that
	the two margins get equal values.
	"
	10.6.4 Absolutely positioned, non-replaced elements
	http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height

	So:

	0px : top
	+
	(solve) : margin-top
	+
	0px : border-top
	+
	0px : padding-top
	+
	34px : height (constrained by max-height)
	+
	0px : padding-bottom
	+
	0px : border-bottom
	+
	(solve) : margin-bottom
	+
	0px : bottom
	=============
	100px : height of containing block

	Therefore, margin-top and margin-bottom used values are
	each respectively equal to ((100px minus 34px) divided by 2) == 33px.

	*/
	]]></style>

	</head>

	<body>

	<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

	<div id="rel-pos-container">

	<div id="reference-red-overlapped"></div>

	<div id="test-green-overlapping"></div>

	</div>

	</body>
	</html>