Attachment #827085: box-sizing-test Update for bug #243412

View | Details | Raw Unified | Return to bug 243412
Collapse All | Expand All

(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Border-Box with specified width</title>
 4 
  <title>CSS Test: Box Sizing - Border-Box with specified width</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, including their borders and padding." />
 7 
  <meta name="assert" content="-moz-box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." />
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      width: 300px;
 10 
      width: 300px;
(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Border-Box with specified width</title>
 4 
  <title>CSS Test: Box Sizing - Border-Box with specified width</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, including their borders and padding." />
 7 
  <meta name="assert" content="-moz-box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." />
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      width: 300px;
 10 
      width: 300px;
(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Border-Box with specified width/height</title>
 4 
  <title>CSS Test: Box Sizing - Border-Box with specified width/height</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, including their borders and padding." />
 7 
  <meta name="assert" content="-moz-box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." />
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      width: 300px;
 10 
      width: 300px;
(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Border-Box with min/max width/height</title>
 4 
  <title>CSS Test: Box Sizing - Border-Box with min/max width/height</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, including their borders and padding." />
 7 
  <meta name="assert" content="-moz-box-sizing: border-box should make the element's (pixel) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." />
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      min-width: 500px;
 10 
      min-width: 500px;
(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Content-Box with specified width/height</title>
 4 
  <title>CSS Test: Box Sizing - Content-Box with specified width/height</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, not including their borders and padding." />
 7 
  <meta name="assert" content="-moz-box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      width: 300px;
 10 
      width: 300px;
(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Content-Box with specified width/height</title>
 4 
  <title>CSS Test: Box Sizing - Content-Box with specified width/height</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, not including their borders and padding." />
 7 
  <meta name="assert" content="-moz-box-sizing: content-box should make the element's width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      width: 300px;
 10 
      width: 300px;
(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Content-Box with min/max width/height</title>
 4 
  <title>CSS Test: Box Sizing - Content-Box with min/max width/height</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, not including their borders and padding." />
 7 
  <meta name="assert" content="-moz-box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      min-width: 500px;
 10 
      min-width: 500px;
(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Padding-Box with specified width/height</title>
 4 
  <title>CSS Test: Box Sizing - Padding-Box with specified width/height</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, including their padding but not their borders." />
 7 
  <meta name="assert" content="-moz-box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge."/>
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      width: 300px;
 10 
      width: 300px;
(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Padding-Box with specified width/height</title>
 4 
  <title>CSS Test: Box Sizing - Padding-Box with specified width/height</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, including their padding but not their borders." />
 7 
  <meta name="assert" content="-moz-box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge and the height be the distance from the top padding edge to the bottom padding edge."/>
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      width: 300px;
 10 
      width: 300px;
(-)de96ebc53249 (-1 / +1 lines)
Line     Link Here 
 Lines 4-10    Link Here 
4 
  <title>CSS Test: Box Sizing - Padding-Box with min/max width/height</title>
 4 
  <title>CSS Test: Box Sizing - Padding-Box with min/max width/height</title>
5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
 5 
  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
 6 
  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
7 
  <meta name="assert" content="The box-sized elements should each take up 1/2 of the horizontal space of the containing element, including their padding but not their borders." />
 7 
  <meta name="assert" content="-moz-box-sizing: padding-box should make the element's width be the distance from the left padding edge to the right padding edge and the height be the distance from the top padding edge to the bottom padding edge."/>
8 
  <style type="text/css"><![CDATA[
 8 
  <style type="text/css"><![CDATA[
9 
    .container {
 9 
    .container {
10 
      min-width: 500px;
 10 
      min-width: 500px;
(-)de96ebc53249 (-2 / +2 lines)
Line     Link Here 
 Lines 26-39    Link Here 
26 
      #img1 {
 26 
      #img1 {
27 
        min-width:   70px;
 27 
        min-width:   70px;
28 
        max-width:  175px;
 28 
        max-width:  115px;
29 
        min-height:  55px;
 29 
        min-height:  55px;
30 
        max-height: 130px;
 30 
        max-height: 130px;
31 
      }
 31 
      }
32 
      #img2 {
 32 
      #img2 {
33 
        max-width:  85px;
 33 
        max-width:  85px;
34 
        min-height: 60px;
 34 
        min-height: 70px;
35 
      }
 35 
      }
36 
      #img3 {
 36 
      #img3 {
(-)de96ebc53249 (-2 / +2 lines)
Line     Link Here 
 Lines 27-40    Link Here 
27 
      #img1 {
 27 
      #img1 {
28 
        min-width:   80px;
 28 
        min-width:   80px;
29 
        max-width:  185px;
 29 
        max-width:  125px;
30 
        min-height:  65px;
 30 
        min-height:  65px;
31 
        max-height: 140px;
 31 
        max-height: 140px;
32 
      }
 32 
      }
33 
      #img2 {
 33 
      #img2 {
34 
        max-width:  95px;
 34 
        max-width:  95px;
35 
        min-height: 60px;
 35 
        min-height: 80px;
36 
      }
 36 
      }
37 
      #img3 {
 37 
      #img3 {
(-)de96ebc53249 (-2 / +2 lines)
Line     Link Here 
 Lines 25-38    Link Here 
25 
      #img1 {
 25 
      #img1 {
26 
        min-width:   60px;
 26 
        min-width:   60px;
27 
        max-width:  165px;
 27 
        max-width:  125px;
28 
        min-height:  45px;
 28 
        min-height:  45px;
29 
        max-height: 120px;
 29 
        max-height: 120px;
30 
      }
 30 
      }
31 
      #img2 {
 31 
      #img2 {
32 
        max-width:  75px;
 32 
        max-width:  75px;
33 
        min-height: 50px;
 33 
        min-height: 60px;
34 
      }
 34 
      }
35 
      #img3 {
 35 
      #img3 {

Return to bug 243412