Commit e736426a authored by rune@opera.com's avatar rune@opera.com

Support style invalidation for scrollbar pseudo elements.

No need to fall back to subtree recalc for:

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece

R=chrishtr@chromium.org,esprehn@chromium.org
BUG=424546

Review URL: https://codereview.chromium.org/653423003

git-svn-id: svn://svn.chromium.org/blink/trunk@183922 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 12a7c371
Style invalidation for scrollbar pseudo elements.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS getComputedStyle(scroller1, '::-webkit-scrollbar').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 3
PASS getComputedStyle(scroller1, '::-webkit-scrollbar').backgroundColor is green
PASS getComputedStyle(scroller2, '::-webkit-scrollbar').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 8
PASS getComputedStyle(scroller2, '::-webkit-scrollbar').backgroundColor is green
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-button').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 7
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-button').backgroundColor is green
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-button').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 12
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-button').backgroundColor is green
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-corner').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 4
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-corner').backgroundColor is green
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-corner').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 9
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-corner').backgroundColor is green
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-thumb').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 4
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-thumb').backgroundColor is green
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-thumb').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 9
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-thumb').backgroundColor is green
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-track').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 4
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-track').backgroundColor is green
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-track').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 9
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-track').backgroundColor is green
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-track-piece').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 5
PASS getComputedStyle(scroller1, '::-webkit-scrollbar-track-piece').backgroundColor is green
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-track-piece').backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 10
PASS getComputedStyle(scroller2, '::-webkit-scrollbar-track-piece').backgroundColor is green
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.scroller::-webkit-scrollbar {
height: 5px;
}
.scroller {
width: 200px;
height: 10px;
overflow-x: scroll;
}
.scroller > div {
width: 400px;
}
.t1 .scroller::-webkit-scrollbar,
.t2 + .scroller::-webkit-scrollbar,
.t3 .scroller::-webkit-scrollbar-button,
.t4 + .scroller::-webkit-scrollbar-button,
.t5 .scroller::-webkit-scrollbar-corner,
.t6 + .scroller::-webkit-scrollbar-corner,
.t7 .scroller::-webkit-scrollbar-thumb,
.t8 + .scroller::-webkit-scrollbar-thumb,
.t9 .scroller::-webkit-scrollbar-track,
.t10 + .scroller::-webkit-scrollbar-track,
.t11 .scroller::-webkit-scrollbar-track-piece,
.t12 + .scroller::-webkit-scrollbar-track-piece {
background-color: green;
}
</style>
<div>
<div id="scrollerParent">
<div>
<div id="scroller1" class="scroller">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div></div>
</div>
</div>
</div>
<div>
<div id="scrollerSibling"></div>
<div id="scroller2" class="scroller">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<div></div>
</div>
<script>
description("Style invalidation for scrollbar pseudo elements.");
var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";
function testScrollbarPseudo(pseudoElm, scroller, classElement, testClass, expectedCount) {
var computedString = "getComputedStyle(" + scroller + ", '" + pseudoElm + "').backgroundColor";
shouldBe(computedString, "transparent");
document.body.offsetTop; // force recalc
classElement.className = testClass;
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "" + expectedCount);
shouldBe(computedString, "green");
classElement.className = "";
}
// The expected affected element counts below need an explanation:
//
// The descendant selector tests invalidate 2 normal dom elements:
// #scrollerParent, #scroller1
//
// The sibling selector tests invalidate 7 normal dom elements:
// #scrollerSibling, #scroller2, the div child of #scroller2 and its 4 spans
//
// In addition there the pseudo element selectors add the following pseudo elements
// on the #scroller1 and #scroller2 elements:
//
// ::-webkit-scrollbar: 1 scrollbar pseudo element (in total 3 and 8)
// ::-webkit-scrollbar-button: 1 scrollbar + 4 buttons (in total 7 and 12)
// ::-webkit-scrollbar-corner: 1 scrollbar + 1 corner (in total 4 and 9)
// ::-webkit-scrollbar-thumb: 1 scrollbar + 1 thumb (in total 4 and 9)
// ::-webkit-scrollbar-track: 1 scrollbar + 1 track (in total 4 and 9)
// ::-webkit-scrollbar-track-piece: 1 scrollbar + 2 track pieces (in total 5 and 12)
testScrollbarPseudo("::-webkit-scrollbar", "scroller1", scrollerParent, "t1", 3);
testScrollbarPseudo("::-webkit-scrollbar", "scroller2", scrollerSibling, "t2", 8);
testScrollbarPseudo("::-webkit-scrollbar-button", "scroller1", scrollerParent, "t3", 7);
testScrollbarPseudo("::-webkit-scrollbar-button", "scroller2", scrollerSibling, "t4", 12);
testScrollbarPseudo("::-webkit-scrollbar-corner", "scroller1", scrollerParent, "t5", 4);
testScrollbarPseudo("::-webkit-scrollbar-corner", "scroller2", scrollerSibling, "t6", 9);
testScrollbarPseudo("::-webkit-scrollbar-thumb", "scroller1", scrollerParent, "t7", 4);
testScrollbarPseudo("::-webkit-scrollbar-thumb", "scroller2", scrollerSibling, "t8", 9);
testScrollbarPseudo("::-webkit-scrollbar-track", "scroller1", scrollerParent, "t9", 4);
testScrollbarPseudo("::-webkit-scrollbar-track", "scroller2", scrollerSibling, "t10", 9);
testScrollbarPseudo("::-webkit-scrollbar-track-piece", "scroller1", scrollerParent, "t11", 5);
testScrollbarPseudo("::-webkit-scrollbar-track-piece", "scroller2", scrollerSibling, "t12", 10);
</script>
...@@ -110,6 +110,12 @@ static bool supportsInvalidation(CSSSelector::PseudoType type) ...@@ -110,6 +110,12 @@ static bool supportsInvalidation(CSSSelector::PseudoType type)
case CSSSelector::PseudoNot: case CSSSelector::PseudoNot:
case CSSSelector::PseudoRoot: case CSSSelector::PseudoRoot:
case CSSSelector::PseudoScope: case CSSSelector::PseudoScope:
case CSSSelector::PseudoScrollbar:
case CSSSelector::PseudoScrollbarButton:
case CSSSelector::PseudoScrollbarCorner:
case CSSSelector::PseudoScrollbarThumb:
case CSSSelector::PseudoScrollbarTrack:
case CSSSelector::PseudoScrollbarTrackPiece:
case CSSSelector::PseudoInRange: case CSSSelector::PseudoInRange:
case CSSSelector::PseudoOutOfRange: case CSSSelector::PseudoOutOfRange:
case CSSSelector::PseudoUnresolved: case CSSSelector::PseudoUnresolved:
...@@ -148,12 +154,6 @@ static bool requiresSubtreeInvalidation(const CSSSelector& selector) ...@@ -148,12 +154,6 @@ static bool requiresSubtreeInvalidation(const CSSSelector& selector)
case CSSSelector::PseudoAutofill: case CSSSelector::PseudoAutofill:
case CSSSelector::PseudoFullPageMedia: case CSSSelector::PseudoFullPageMedia:
case CSSSelector::PseudoResizer: case CSSSelector::PseudoResizer:
case CSSSelector::PseudoScrollbar:
case CSSSelector::PseudoScrollbarButton:
case CSSSelector::PseudoScrollbarCorner:
case CSSSelector::PseudoScrollbarThumb:
case CSSSelector::PseudoScrollbarTrack:
case CSSSelector::PseudoScrollbarTrackPiece:
case CSSSelector::PseudoWindowInactive: case CSSSelector::PseudoWindowInactive:
case CSSSelector::PseudoCornerPresent: case CSSSelector::PseudoCornerPresent:
case CSSSelector::PseudoDecrement: case CSSSelector::PseudoDecrement:
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment