Bug 1169837 - Remove box-sizing: padding-box in FF UI & Gecko Tests. r=dholbert

This commit is contained in:
Kyle Zentner 2015-06-02 08:46:00 -04:00
parent 88e065697c
commit 3b4c44713c
33 changed files with 16 additions and 406 deletions

View File

@ -8,7 +8,7 @@
body {
display: flex;
box-sizing: padding-box;
box-sizing: border-box;
min-height: 100vh;
padding: 0 48px;
align-items: center;

View File

@ -168,7 +168,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon
}
.searchbar-engine-one-off-item:not(.last-row) {
box-sizing: padding-box;
box-sizing: content-box;
border-bottom: 1px solid #ccc;
}

View File

@ -191,7 +191,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon
}
.searchbar-engine-one-off-item:not(.last-row) {
box-sizing: padding-box;
box-sizing: content-box;
border-bottom: 1px solid #ccc;
}

View File

@ -6,7 +6,7 @@
body {
display: flex;
box-sizing: padding-box;
box-sizing: border-box;
min-height: 100vh;
padding: 0 48px;
align-items: center;

View File

@ -225,7 +225,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon
}
.searchbar-engine-one-off-item:not(.last-row) {
box-sizing: padding-box;
box-sizing: content-box;
border-bottom: 1px solid #ccc;
}

View File

@ -11,7 +11,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=320799
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=320799">Mozilla Bug 320799</a>
<p id="display">
<select id="s" style="width: 100px; box-sizing: padding-box">
<select id="s" style="width: 100px; box-sizing: border-box; border: 0">
<option>This is a test, it really is a test I tell you</option>
</select>
<select id="s2">

View File

@ -25,7 +25,7 @@ var currentResize = -1;
var currentBoxSizing = 0;
var currentPointer = 0;
var resizeTypes = [ "horizontal", "vertical", "none", "inherit", "both" ];
var boxSizingTypes = [ "", "border-box", "padding-box" ];
var boxSizingTypes = [ "", "border-box" ];
var pointerTypes = [ synthesizeMouse, synthesizeTouch]
function doTheTest() {

View File

@ -46,18 +46,6 @@
</div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div style="width: 37px">A B</div>
<div style="width: auto">A B</div>
<div style="width: auto">A<br>B</div>
<div style="width: auto">A B</div>
<div style="width: 37px">A B</div>
<div style="width: 38px">A B</div>
<div style="width: 48px">A B</div>
</div></td>
<td id="bsborder"><div>
<!-- box-sizing: border-box -->
<div style="width: 37px">A B</div>

View File

@ -13,7 +13,6 @@
td > div { width: 100px; }
td#bscontent > div > div { box-sizing: content-box; }
td#bspadding > div > div { box-sizing: padding-box; }
td#bsborder > div > div { box-sizing: border-box; }
td > div > div {
@ -47,18 +46,6 @@
</div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div style="width: auto">A B</div>
<div style="width: -moz-max-content">A B</div>
<div style="width: -moz-min-content">A B</div>
<div style="width: -moz-fit-content">A B</div>
<div style="width: -moz-available">A B</div>
<div style="width: 50px">A B</div>
<div style="width: 60%">A B</div>
</div></td>
<td id="bsborder"><div>
<!-- box-sizing: border-box -->
<div style="width: auto">A B</div>

View File

@ -39,17 +39,6 @@
</td>
<td id="bspadding">
<!-- box-sizing: padding-box -->
<table><tr><td><div>A B</div></td></tr></table>
<table><tr><td><div>A B</div></td></tr></table>
<table><tr><td><div>A<br>B</div></td></tr></table>
<table><tr><td><div>A B</div></td></tr></table>
<table><tr><td><div>A B</div></td></tr></table>
<table><tr><td><div style="width: 138px">A B</div></td></tr></table>
</td>
<td id="bsborder">
<!-- box-sizing: border-box -->
<table><tr><td><div>A B</div></td></tr></table>

View File

@ -11,7 +11,6 @@
td { border: 1px solid; padding: 1px solid; }
td#bscontent td > div { box-sizing: content-box; }
td#bspadding td > div { box-sizing: padding-box; }
td#bsborder td > div { box-sizing: border-box; }
td td > div {
@ -43,17 +42,6 @@
</td>
<td id="bspadding">
<!-- box-sizing: padding-box -->
<table><tr><td><div style="width: auto">A B</div></td></tr></table>
<table><tr><td><div style="width: -moz-max-content">A B</div></td></tr></table>
<table><tr><td><div style="width: -moz-min-content">A B</div></td></tr></table>
<table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table>
<table><tr><td><div style="width: -moz-available">A B</div></td></tr></table>
<table><tr><td><div style="width: 150px">A B</div></td></tr></table>
</td>
<td id="bsborder">
<!-- box-sizing: border-box -->
<table><tr><td><div style="width: auto">A B</div></td></tr></table>

View File

@ -13,7 +13,6 @@
td > div { width: 100px; }
td#bscontent > div > div { box-sizing: content-box; }
td#bspadding > div > div { box-sizing: padding-box; }
td#bsborder > div > div { box-sizing: border-box; }
td > div > div {
@ -47,18 +46,6 @@
</div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div style="width: auto">A B</div>
<div style="width: -moz-max-content">A B</div>
<div style="width: -moz-min-content">A B</div>
<div style="width: -moz-fit-content">A B</div>
<div style="width: -moz-available">A B</div>
<div style="width: 50px">A B</div>
<div style="width: 60%">A B</div>
</div></td>
<td id="bsborder"><div>
<!-- box-sizing: border-box -->
<div style="width: auto">A B</div>

View File

@ -48,18 +48,6 @@
</div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div>A B</div>
<div>A B</div>
<div>A<br>B</div>
<div>A B</div>
<div style="width: 37px">A B</div>
<div style="width: 38px">A B</div>
<div style="width: 48px">A B</div>
</div></td>
<td id="bsborder"><div>
<!-- box-sizing: border-box -->
<div>A B</div>

View File

@ -14,7 +14,6 @@
direction: rtl; position: relative; }
td#bscontent > div > div { box-sizing: content-box; }
td#bspadding > div > div { box-sizing: padding-box; }
td#bsborder > div > div { box-sizing: border-box; }
td > div > div {
@ -59,18 +58,6 @@
</div></td>
<td id="bspadding"><div>
<!-- box-sizing: padding-box -->
<div style="width: auto">A B</div>
<div style="width: -moz-max-content">A B</div>
<div style="width: -moz-min-content">A B</div>
<div style="width: -moz-fit-content">A B</div>
<div style="width: -moz-available">A B</div>
<div style="width: 50px">A B</div>
<div style="width: 60%">A B</div>
</div></td>
<td id="bsborder"><div>
<!-- box-sizing: border-box -->
<div style="width: auto">A B</div>

View File

@ -43,10 +43,5 @@ hbox {
<div><hbox class="cb" style="height:29px;">content-box 20px</hbox></div>
<div><hbox class="pb" style="height:16px;">padding-box 20px</hbox></div>
<div><hbox class="pb" style="height:46px;">padding-box 50px</hbox></div>
<div><hbox class="pb" style="height:16px;">padding-box 20px</hbox></div>
</body>
</html>

View File

@ -25,11 +25,6 @@ hbox {
background:pink;
}
.pb {
box-sizing:padding-box;
background:cyan;
}
</style>
</head>
<body>
@ -44,10 +39,5 @@ hbox {
<div><hbox class="cb" style="max-height:20px;">content-box 20px</hbox></div>
<div><hbox class="pb" style="height:20px;">padding-box 20px</hbox></div>
<div><hbox class="pb" style="min-height:50px;">padding-box 50px</hbox></div>
<div><hbox class="pb" style="max-height:20px;">padding-box 20px</hbox></div>
</body>
</html>

View File

@ -9,26 +9,14 @@
box-sizing:border-box;
}
#paddingBox {
background:gold;
height:100px;
box-sizing:padding-box;
}
</style>
<div id="borderBox"></div>
<p id="heightWidth1"></p>
<div id="paddingBox"></div>
<p id="heightWidth2"></p>
<script>
var divs = document.getElementsByTagName("div");
var textEle1 = document.getElementById("heightWidth1");
textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height;
textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width;
var textEle2 = document.getElementById("heightWidth2");
textEle2.innerHTML += "height = " + getComputedStyle(divs[1]).height;
textEle2.innerHTML += ", width = " + getComputedStyle(divs[1]).width;
</script>

View File

@ -10,27 +10,14 @@
border: 20px solid gold;
}
#paddingBox {
background:gold;
height:100px;
box-sizing:padding-box;
padding: 20px;
}
</style>
<div id="borderBox"></div>
<p id="heightWidth1"></p>
<div id="paddingBox"></div>
<p id="heightWidth2"></p>
<script>
var divs = document.getElementsByTagName("div");
var textEle1 = document.getElementById("heightWidth1");
textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height;
textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width;
var textEle2 = document.getElementById("heightWidth2");
textEle2.innerHTML += "height = " + getComputedStyle(divs[1]).height;
textEle2.innerHTML += ", width = " + getComputedStyle(divs[1]).width;
</script>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden;
padding: 30px;
box-sizing: padding-box;">
box-sizing: border-box;">
</div>
</body>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden;
padding: 15% 30px;
box-sizing: padding-box;">
box-sizing: border-box;">
</div>
</body>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden;
padding: calc(15%) 30px;
box-sizing: padding-box;">
box-sizing: border-box;">
</div>
</body>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden;
padding: calc(10% + 10px) 30px;
box-sizing: padding-box;">
box-sizing: border-box;">
</div>
</body>

View File

@ -4,6 +4,6 @@
<img src="lime100x100.png"
style="height: 200px; display: block; visibility: hidden;
padding: calc(30px);
box-sizing: padding-box;">
box-sizing: border-box;">
</div>
</body>

View File

@ -1,40 +0,0 @@
<!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 Reference: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<style type="text/css"><![CDATA[
.container {
width: 300px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
width: 140px;
z-index: 1;
float: left;
padding: 0px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -1,43 +0,0 @@
<!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: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: padding-box should make the element's (percentage) width be the distance from the left padding edge to the right padding edge."/>
<style type="text/css"><![CDATA[
.container {
width: 300px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: padding-box;
width: 50%;
z-index: 1;
float: left;
padding: 0px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -1,42 +0,0 @@
<!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 Reference: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<style type="text/css"><![CDATA[
.container {
width: 300px;
height: 400px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
width: 130px;
height: 350px;
z-index: 1;
float: left;
padding: 25px 10px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -1,45 +0,0 @@
<!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: Box Sizing - Padding-Box with specified width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="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."/>
<style type="text/css"><![CDATA[
.container {
width: 300px;
height: 400px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: padding-box;
width: 50%;
height: 100%;
z-index: 1;
float: left;
padding: 25px 10px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -1,42 +0,0 @@
<!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 Reference: Box Sizing - Padding-Box with min/max width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<style type="text/css"><![CDATA[
.container {
width: 500px;
height: 70px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
height: calc(100% - 10px);
width: calc(50% - 10px);
z-index: 1;
float: left;
padding: 5px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -1,49 +0,0 @@
<!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: Box Sizing - Padding-Box with min/max width/height</title>
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
<link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
<meta name="assert" content="box-sizing: padding-box should make the element's (calc) 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."/>
<style type="text/css"><![CDATA[
.container {
min-width: 500px;
max-width: 700px;
min-height: 70px;
max-height: 90px;
border: 2px solid black;
position: absolute;
left: 25px;
top: 25px;
background-color: red;
}
.box-sized {
box-sizing: padding-box;
min-width: 250px;
max-width: 350px;
min-height: 70px;
max-height: 90px;
z-index: 1;
float: left;
padding: 5px 5px;
}
#one {
background-color: green;
}
#two {
background-color: blue;
}
]]></style>
</head>
<body>
The two divs should be side-by-side, not one on top of another. No red should be visible.
<br />
<div class="container">
<div class="box-sized" id="one">LEFT HALF</div>
<div class="box-sized" id="two">RIGHT HALF</div>
</div>
</body>
</html>

View File

@ -21,7 +21,7 @@
.with-padding {
padding: 5px 5px;
box-sizing: padding-box;
box-sizing: border-box;
}
#img1 {

View File

@ -5,9 +5,6 @@
== box-sizing-content-box-001.xht box-sizing-content-box-001-ref.xht
== box-sizing-content-box-002.xht box-sizing-content-box-002-ref.xht
== box-sizing-content-box-003.xht box-sizing-content-box-003-ref.xht
== box-sizing-padding-box-001.xht box-sizing-padding-box-001-ref.xht
== box-sizing-padding-box-002.xht box-sizing-padding-box-002-ref.xht
== box-sizing-padding-box-003.xht box-sizing-padding-box-003-ref.xht
random-if(Android) skip-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-001.xht box-sizing-replaced-001-ref.xht #bug 982547 # Initial mulet triage: parity with B2G/B2G Desktop
fuzzy-if(Android,27,874) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-002.xht box-sizing-replaced-002-ref.xht # Bug 1128229 # Initial mulet triage: parity with B2G/B2G Desktop
fuzzy-if(Android,14,869) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-003.xht box-sizing-replaced-003-ref.xht # Bug 1128229 # Initial mulet triage: parity with B2G/B2G Desktop

View File

@ -1045,7 +1045,7 @@ var gCSSProperties = {
inherited: false,
type: CSS_TYPE_LONGHAND,
initial_values: [ "content-box" ],
other_values: [ "border-box", "padding-box" ],
other_values: [ "border-box" ],
invalid_values: [ "margin-box", "content", "padding", "border", "margin" ]
},
"-moz-box-sizing": {
@ -1055,7 +1055,7 @@ var gCSSProperties = {
alias_for: "box-sizing",
subproperties: [ "box-sizing" ],
initial_values: [ "content-box" ],
other_values: [ "border-box", "padding-box" ],
other_values: [ "border-box" ],
invalid_values: [ "margin-box", "content", "padding", "border", "margin" ]
},
"-moz-columns": {

View File

@ -7,7 +7,7 @@
body {
display: flex;
flex-direction: column;
box-sizing: padding-box;
box-sizing: border-box;
min-height: 100vh;
padding-top: 0;
padding-bottom: 0;