mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1463599 - Create a stacking context for contain:paint. r=mattwoodrow 

MozReview-Commit-ID: Ln72MOlHXwi

--HG--
extra : rebase_source : ec6bd5d3de4635acd2e2d0dcd2222232524d9459
This commit is contained in:
Yusuf Sermet 2018-05-28 23:54:01 -07:00
Родитель c7275be13d
Коммит ebb3ebe1db
6 изменённых файлов: 198 добавлений и 1 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
layout/generic/nsFrame.cpp
Просмотреть файл

@ -11019,6 +11019,7 @@ nsIFrame::IsVisuallyAtomic(EffectSet* aEffectSet,
const nsStyleEffects* aStyleEffects) {
return HasOpacity(aEffectSet) ||
IsTransformed(aStyleDisplay) ||
aStyleDisplay->IsContainPaint() ||
// strictly speaking, 'perspective' doesn't require visual atomicity,
// but the spec says it acts like the rest of these
ChildrenHavePerspective(aStyleDisplay) ||

62
layout/reftests/w3c-css/submitted/contain/contain-paint-stacking-context-001-ref.html Normal file
Просмотреть файл

@ -0,0 +1,62 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
<style>
div {
position: relative;
width: 100px;
}
#div1,
#div3 {
background-color: #cfc;
}
#div1 {
z-index: 5;
}
#div2 {
z-index: 1;
background-color: #fdd;
height: 100px;
top: -20px;
}
#div2_1 {
background-color: #ffc;
z-index: 6;
top: -10px;
}
#div2_2 {
z-index: 3;
position: absolute;
top: -15px;
width: 40px;
height: 100px;
background-color: #ddf;
}
#div3 {
z-index: 2;
top: -50px;
}
</style>
</head>
<body>
<div id="div1">
<br/><br/>
</div>
<div id="div2">
<div id="div2_1">
<br/><br/>
</div>
<div id="div2_2">
</div>
</div>
<div id="div3">
<br/><br/>
</div>
</body>
</html>

66
layout/reftests/w3c-css/submitted/contain/contain-paint-stacking-context-001a.html Normal file
Просмотреть файл

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children.</title>
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
<style>
div {
position: relative;
width: 100px;
}
#div1,
#div3 {
background-color: #cfc;
}
#div1 {
z-index: 5;
}
#div2 {
contain: paint;
background-color: #fdd;
height: 100px;
top: -20px;
}
#div2_1 {
background-color: #ffc;
z-index: 6;
top: -10px;
}
#div2_2 {
z-index: 3;
position: absolute;
top: -15px;
width: 40px;
height: 100px;
background-color: #ddf;
}
#div3 {
z-index: 2;
top: -50px;
}
</style>
</head>
<body>
<div id="div1">
<br/><br/>
</div>
<div id="div2">
<div id="div2_1">
<br/><br/>
</div>
<div id="div2_2">
</div>
</div>
<div id="div3">
<br/><br/>
</div>
</body>
</html>

66
layout/reftests/w3c-css/submitted/contain/contain-paint-stacking-context-001b.html Normal file
Просмотреть файл

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: 'will-change: contain' with stacking contents. Z-index is defined only for siblings and children.</title>
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
<style>
div {
position: relative;
width: 100px;
}
#div1,
#div3 {
background-color: #cfc;
}
#div1 {
z-index: 5;
}
#div2 {
will-change: contain;
background-color: #fdd;
height: 100px;
top: -20px;
}
#div2_1 {
background-color: #ffc;
z-index: 6;
top: -10px;
}
#div2_2 {
z-index: 3;
position: absolute;
top: -15px;
width: 40px;
height: 100px;
background-color: #ddf;
}
#div3 {
z-index: 2;
top: -50px;
}
</style>
</head>
<body>
<div id="div1">
<br/><br/>
</div>
<div id="div2">
<div id="div2_1">
<br/><br/>
</div>
<div id="div2_2">
</div>
</div>
<div id="div3">
<br/><br/>
</div>
</body>
</html>

2
layout/reftests/w3c-css/submitted/contain/reftest.list
Просмотреть файл

@ -9,3 +9,5 @@ default-preferences pref(layout.css.contain.enabled,true)
== contain-paint-containing-block-fixed-001.html contain-paint-containing-block-fixed-001-ref.html
== contain-paint-formatting-context-float-001.html contain-paint-formatting-context-float-001-ref.html
== contain-paint-formatting-context-margin-001.html contain-paint-formatting-context-margin-001-ref.html
== contain-paint-stacking-context-001a.html contain-paint-stacking-context-001-ref.html
== contain-paint-stacking-context-001b.html contain-paint-stacking-context-001-ref.html

2
servo/components/style/properties/longhand/box.mako.rs
Просмотреть файл

@ -593,7 +593,7 @@ ${helpers.predefined_type("contain",
"specified::Contain::empty()",
animation_value_type="discrete",
products="gecko",
flags="FIXPOS_CB",
flags="CREATES_STACKING_CONTEXT FIXPOS_CB",
gecko_pref="layout.css.contain.enabled",
spec="https://drafts.csswg.org/css-contain/#contain-property")}