Auto merge of #8381 - bholley:attr_restyle_hints, r=pcwalton

Implement attribute restyle hints

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/8381)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-11-11 01:27:45 +05:30
commit 13226f8472
18 changed files with 587 additions and 316 deletions

View file

@ -1,3 +0,0 @@
[background-root-101.htm]
type: reftest
expected: FAIL

View file

@ -1,4 +0,0 @@
[dynamic-sibling-combinator-001.htm]
type: reftest
bug: https://github.com/servo/servo/issues/7890
expected: FAIL

View file

@ -3251,6 +3251,18 @@
"url": "/_mozilla/css/quotes_simple_a.html"
}
],
"css/restyle_hints_attr.html": [
{
"path": "css/restyle_hints_attr.html",
"references": [
[
"/_mozilla/css/restyle_hints_attr_ref.html",
"=="
]
],
"url": "/_mozilla/css/restyle_hints_attr.html"
}
],
"css/restyle_hints_state.html": [
{
"path": "css/restyle_hints_state.html",
@ -8316,6 +8328,18 @@
"url": "/_mozilla/css/quotes_simple_a.html"
}
],
"css/restyle_hints_attr.html": [
{
"path": "css/restyle_hints_attr.html",
"references": [
[
"/_mozilla/css/restyle_hints_attr_ref.html",
"=="
]
],
"url": "/_mozilla/css/restyle_hints_attr.html"
}
],
"css/restyle_hints_state.html": [
{
"path": "css/restyle_hints_state.html",

View file

@ -0,0 +1,44 @@
div {
background-color: black;
padding: 10px;
width: 50px;
height: 50px;
color: gray;
}
div[foo=kokosnuss] {
background: black;
}
div[foo][bar] {
background: red;
}
div[foo=kokosnuss][bar~=fett] {
background: green;
}
div[bar] > div[baz] div {
color: cyan;
}
div[foo][bar~=butter] div {
background: purple;
color: white;
}
div[foo][bar~=butter] > div {
background: yellow;
}
div[bar~=butter][foo=kokosnuss] + div {
background: pink;
}
div[foo=kokosnuss] ~ div {
background: green;
}
div + div[foo=keine][bar=ahnung] {
background: lavender;
}

View file

@ -0,0 +1,35 @@
<!doctype html>
<meta charset="utf-8">
<title></title>
<link rel="match" href="restyle_hints_attr_ref.html">
<link rel="stylesheet" href="restyle_hints_attr.css">
<body>
<div id="d1">
<div id="d2">
<div>some text</div>
</div>
</div>
<div id="d3" foo="keine" bar="ahnung"></div>
<div id="d4"></div>
<div></div>
<script>
window.dummy = 0;
var $ = document.getElementById.bind(document);
function syncRestyle() { window.dummy += document.body.lastElementChild.offsetTop; }
$('d1').setAttribute("foo", "kokosnuss");
syncRestyle();
$('d1').setAttribute("bar", "butter");
syncRestyle();
$('d4').setAttribute("foo", true);
syncRestyle();
$('d4').setAttribute("bar", true);
syncRestyle();
$('d2').setAttribute("baz", "lecker");
syncRestyle();
$('d1').setAttribute("bar", "fett butter");
syncRestyle();
$('d3').removeAttribute("bar");
syncRestyle();
</script>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="restyle_hints_attr.css">
<title></title>
<body>
<div foo="kokosnuss" bar="butter fett">
<div baz="lecker">
<div>some text</div>
</div>
</div>
<div></div>
<div bar foo></div>
<div></div>
</body>
</html>

View file

@ -30,8 +30,9 @@
* implement attribute-based restyle hints, we can stop dirtying the subtree
* on attribute modifications, and these tests will start to be more useful.
*/
window.dummy = 0;
var $ = document.getElementById.bind(document);
function syncRestyle() { window.dummy != $("fs2").offsetTop; }
function syncRestyle() { window.dummy += $("fs2").offsetTop; }
syncRestyle();
$('fs1').disabled = true;
syncRestyle();