Attachment #130206 for bug #79048

View Details Raw Unified Return to Bug 79048

| Differences between



2012-02-20  Dean Jackson  <dino@apple.com>

        Enable compositing when a CSS filter is animating
        https://bugs.webkit.org/show_bug.cgi?id=79048

        Reviewed by NOBODY (OOPS!).

        Now that some systems (e.g. OS X) have both hardware accelerated
        CSS filters, and the ability to animate them via the hardware
        compositor, all CSS filters should be composited when animating.

        Test: css3/filters/composited-during-animation.html
              css3/filters/composited-during-animation-layertree.html:

        * rendering/RenderLayerCompositor.cpp:
        (WebCore::RenderLayerCompositor::requiresCompositingForAnimation):
            Add test for CSSWebKitFilter property.

2012-03-02  Maciej Stachowiak  <mjs@apple.com>

        REGRESSION(r97353): Crash when accessing location or history properties inside a navigated window

Lines 1505-1511 bool RenderLayerCompositor::requiresCompositingForAnimation(RenderObject* render a/Source/WebCore/rendering/RenderLayerCompositor.cpp_sec1
- a/Source/WebCore/rendering/RenderLayerCompositor.cpp -1 / +7 lines
1505		1505
1506	if (AnimationController* animController = renderer->animation()) {	1506	if (AnimationController* animController = renderer->animation()) {
1507	return (animController->isRunningAnimationOnRenderer(renderer, CSSPropertyOpacity) && inCompositingMode())	1507	return (animController->isRunningAnimationOnRenderer(renderer, CSSPropertyOpacity) && inCompositingMode())
1508	\|\| animController->isRunningAnimationOnRenderer(renderer, CSSPropertyWebkitTransform);	1508	\|\| animController->isRunningAnimationOnRenderer(renderer, CSSPropertyWebkitTransform)
		1509	#if ENABLE(CSS_FILTERS)
		1510	#if !defined(BUILDING_ON_SNOW_LEOPARD) && !defined(BUILDING_ON_LION)
		1511	\|\| animController->isRunningAnimationOnRenderer(renderer, CSSPropertyWebkitFilter)
		1512	#endif // !SNOW_LEOPARD && !LION
		1513	#endif // CSS_FILTERS
		1514	;
1509	}	1515	}
1510	return false;	1516	return false;
1511	}	1517	}



2012-02-20  Dean Jackson  <dino@apple.com>

        Enable compositing when a CSS filter is animating
        https://bugs.webkit.org/show_bug.cgi?id=79048

        Reviewed by NOBODY (OOPS!).

        * css3/filters/composited-during-animation-expected.txt: Added.
        * css3/filters/composited-during-animation.html: Added.
        * css3/filters/composited-during-animation-layertree-expected.txt: Added.
        * css3/filters/composited-during-animation-layertree.html:

2012-03-02  Dirk Pranke  <dpranke@chromium.org>

        Fix expectation for svg/foreignObject/fO-parent-display-changes.svg.



        
PASS: Element grayscale-box had filter value grayscale(1) before animation.
PASS: Element sepia-box had filter value sepia(1) before animation.
PASS: Element saturate-box had filter value saturate(1) before animation.
PASS: Element huerotate-box had filter value hue-rotate(90deg) before animation.
PASS: Element invert-box had filter value invert(1) before animation.
PASS: Element opacity-box had filter value opacity(0) before animation.
PASS: Element brightness-box had filter value brightness(0) before animation.
PASS: Element contrast-box had filter value contrast(0) before animation.
PASS: Element blur-box had filter value blur(10px) before animation.
PASS - "webkitFilter" property for "grayscale-box" element at 1s saw something close to: grayscale(0.5)
PASS - "webkitFilter" property for "sepia-box" element at 1s saw something close to: sepia(0.5)
PASS - "webkitFilter" property for "saturate-box" element at 1s saw something close to: saturate(0.5)
PASS - "webkitFilter" property for "huerotate-box" element at 1s saw something close to: hue-rotate(90deg)
PASS - "webkitFilter" property for "invert-box" element at 1s saw something close to: invert(0.5)
PASS - "webkitFilter" property for "opacity-box" element at 1s saw something close to: opacity(0.5)
PASS - "webkitFilter" property for "brightness-box" element at 1s saw something close to: brightness(0.5)
PASS - "webkitFilter" property for "contrast-box" element at 1s saw something close to: contrast(0.5)
PASS - "webkitFilter" property for "blur-box" element at 1s saw something close to: blur(10px)




   
   
   
  
(GraphicsLayer
  (bounds 800.00 600.00)
  (children 1
    (GraphicsLayer
      (bounds 800.00 600.00)
      (children 4
        (GraphicsLayer
          (position 18.00 18.00)
          (bounds 160.00 90.00)
          (drawsContent 1)
        )
        (GraphicsLayer
          (position 18.00 132.00)
          (bounds 160.00 90.00)
          (drawsContent 1)
        )
        (GraphicsLayer
          (position 18.00 246.00)
          (bounds 160.00 90.00)
          (drawsContent 1)
        )
        (GraphicsLayer
          (position 18.00 360.00)
          (bounds 160.00 90.00)
          (drawsContent 1)
        )
      )
    )
  )
)




<!DOCTYPE html>
<html>
<head>
  <style>
    img {
        margin: 10px;
        -webkit-animation-duration: 5s !important;
        -webkit-animation-iteration-count: infinite !important;
        -webkit-animation-direction: alternate !important;
    }

    #grayscale-box {
        -webkit-animation-name: grayscale-anim;
        -webkit-filter: grayscale(1);
    }

    #sepia-box {
        -webkit-filter: sepia(1);
    }

    #saturate-box {
        -webkit-animation: saturate-anim;
        -webkit-filter: saturate(1);
    }

    #huerotate-box {
        -webkit-filter: hue-rotate(90deg);
    }

    #invert-box {
        -webkit-animation: invert-anim;
        -webkit-filter: invert(1);
    }

    #opacity-box {
        -webkit-filter: opacity(0);
    }

    #brightness-box {
        -webkit-animation: brightness-anim;
        -webkit-filter: brightness(0);
    }

    #contrast-box {
        -webkit-filter: contrast(0);
    }


    @-webkit-keyframes grayscale-anim {
        from { -webkit-filter: grayscale(0); }
        to   { -webkit-filter: grayscale(1); }
    }

    @-webkit-keyframes saturate-anim {
        from { -webkit-filter: saturate(0); }
        to   { -webkit-filter: saturate(1); }
    }

    @-webkit-keyframes invert-anim {
        from { -webkit-filter: invert(0); }
        to   { -webkit-filter: invert(1); }
    }

    @-webkit-keyframes brightness-anim {
        from { -webkit-filter: brightness(1); }
        to   { -webkit-filter: brightness(0); }
    }

  </style>
  <script>
      if (window.layoutTestController) {
          layoutTestController.waitUntilDone();
          layoutTestController.dumpAsText();
      }

      function doTest() {
          if (window.layoutTestController) {
              document.getElementById('layer-tree').innerText = layoutTestController.layerTreeAsText()
              layoutTestController.notifyDone();
          }
      }
      
      window.addEventListener("load", doTest, false);
  </script>
</head>
<body>

<!-- Every third image below is animating, and thus might
     get a compositing layer. Every 3n+1 element is not animating but
     has a static filter, and shouldn't need a compositing layer.
     Every 3n+2 element is a purely static image, and shouldn't
     even be a layer -->
<img src="resources/reference.png" id="grayscale-box">
<img src="resources/reference.png" id="sepia-box">
<img src="resources/reference.png">
<br>
<img src="resources/reference.png" id="saturate-box">
<img src="resources/reference.png" id="huerotate-box">
<img src="resources/reference.png">
<br>
<img src="resources/reference.png" id="invert-box">
<img src="resources/reference.png" id="opacity-box">
<img src="resources/reference.png">
<br>
<img src="resources/reference.png" id="brightness-box">
<img src="resources/reference.png" id="contrast-box">
<img src="resources/reference.png">

<pre id="layer-tree">Layer tree goes here in DRT</pre>

</body>
</html>



<!DOCTYPE html>

<html>
<head>
  <style>
    img {
        margin: 10px;
    }

    .animating img {
        -webkit-animation-duration: 2s !important;
        -webkit-animation-timing-function: linear !important;
    }

    #grayscale-box {
        -webkit-animation-name: grayscale-anim;
        -webkit-filter: grayscale(1);
    }

    #sepia-box {
        -webkit-animation: sepia-anim;
        -webkit-filter: sepia(1);
    }

    #saturate-box {
        -webkit-animation: saturate-anim;
        -webkit-filter: saturate(1);
    }

    #huerotate-box {
        -webkit-animation: huerotate-anim;
        -webkit-filter: hue-rotate(90deg);
    }

    #invert-box {
        -webkit-animation: invert-anim;
        -webkit-filter: invert(1);
    }

    #opacity-box {
        -webkit-animation: opacity-anim;
        -webkit-filter: opacity(0);
    }

    #brightness-box {
        -webkit-animation: brightness-anim;
        -webkit-filter: brightness(0);
    }

    #contrast-box {
        -webkit-animation: contrast-anim;
        -webkit-filter: contrast(0);
    }

    #blur-box {
        -webkit-animation: blur-anim;
        -webkit-filter: blur(10px);
    }


    @-webkit-keyframes grayscale-anim {
        from { -webkit-filter: grayscale(0); }
        to   { -webkit-filter: grayscale(1); }
    }

    @-webkit-keyframes sepia-anim {
        from { -webkit-filter: sepia(0); }
        to   { -webkit-filter: sepia(1); }
    }

    @-webkit-keyframes saturate-anim {
        from { -webkit-filter: saturate(0); }
        to   { -webkit-filter: saturate(1); }
    }

    @-webkit-keyframes huerotate-anim {
        from { -webkit-filter: hue-rotate(0); }
        to   { -webkit-filter: hue-rotate(180deg); }
    }

    @-webkit-keyframes invert-anim {
        from { -webkit-filter: invert(0); }
        to   { -webkit-filter: invert(1); }
    }

    @-webkit-keyframes opacity-anim {
        from { -webkit-filter: opacity(1); }
        to   { -webkit-filter: opacity(0); }
    }

    @-webkit-keyframes brightness-anim {
        from { -webkit-filter: brightness(1); }
        to   { -webkit-filter: brightness(0); }
    }

    @-webkit-keyframes contrast-anim {
        from { -webkit-filter: contrast(1); }
        to   { -webkit-filter: contrast(0); }
    }

    @-webkit-keyframes blur-anim {
        from { -webkit-filter: blur(0); }
        to   { -webkit-filter: blur(20px); }
    }

  </style>
  <script src="../../animations/resources/animation-test-helpers.js"></script>
  <script type="text/javascript">

    const preExpectedValues = [
        // [element-id, property, expected-value]
        ["grayscale-box", "webkitFilter", 'grayscale(1)'],
        ["sepia-box", "webkitFilter", 'sepia(1)'],
        ["saturate-box", "webkitFilter", 'saturate(1)'],
        ["huerotate-box", "webkitFilter", 'hue-rotate(90deg)'],
        ["invert-box", "webkitFilter", 'invert(1)'],
        ["opacity-box", "webkitFilter", 'opacity(0)'],
        ["brightness-box", "webkitFilter", 'brightness(0)'],
        ["contrast-box", "webkitFilter", 'contrast(0)'],
        ["blur-box", "webkitFilter", 'blur(10px)'],
    ];

    const expectedValues = [
        // [animation-name, time, element-id, property, expected-value, tolerance]
        ["grayscale-anim",  1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.15],
        ["sepia-anim",  1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.15],
        ["saturate-anim",  1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.15],
        ["huerotate-anim",  1, "huerotate-box", "webkitFilter", 'hue-rotate(90deg)', 20],
        ["invert-anim",  1, "invert-box", "webkitFilter", 'invert(0.5)', 0.15],
        ["opacity-anim",  1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.15],
        ["brightness-anim",  1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.15],
        ["contrast-anim",  1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.15],
        ["blur-anim",  1, "blur-box", "webkitFilter", 'blur(10px)', 4],
    ];

    function runPreTest() {
        var preResult = "";

        for (var i=0; i < preExpectedValues.length; i++) {
            var id = preExpectedValues[i][0];
            var prop = preExpectedValues[i][1];
            var expected = preExpectedValues[i][2];
            var element = document.getElementById(id);
            var computedStyle = window.getComputedStyle(element)[prop];
            if (computedStyle == expected)
              preResult += "PASS: Element " + id + " had filter value " + expected + " before animation.<br>";
            else
              preResult += "FAIL: Element " + id + " had filter value " + computedStyle + " rather than " + expected + " before animation.<br>";
        }
        document.getElementById("preresult").innerHTML = preResult;
      
        // Completed the pre-animation tests. Now start the animation.
        setTimeout(function () {
            document.body.className = "animating";
            runAnimationTest(expectedValues);
        }, 0);
    }
    
    if (window.layoutTestController) {
        layoutTestController.dumpAsText();
        layoutTestController.waitUntilDone();
    }
    
    window.addEventListener("load", runPreTest, false);
  </script>
</head>
<body>

<img src="resources/reference.png" id="grayscale-box">
<img src="resources/reference.png" id="sepia-box">
<img src="resources/reference.png" id="saturate-box">
<img src="resources/reference.png" id="huerotate-box">
<img src="resources/reference.png" id="invert-box">
<img src="resources/reference.png" id="opacity-box">
<img src="resources/reference.png" id="brightness-box">
<img src="resources/reference.png" id="contrast-box">
<img src="resources/reference.png" id="blur-box">

<!-- this result element is filled in the script above, before the animations start -->
<div id="preresult">
</div>

<!-- this result element is filled by the animation test system -->
<div id="result">
</div>
</body>
</html>

Return to Bug 79048

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +18 lines
		1	2012-02-20 Dean Jackson <dino@apple.com>
		2
		3	Enable compositing when a CSS filter is animating
		4	https://bugs.webkit.org/show_bug.cgi?id=79048
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	Now that some systems (e.g. OS X) have both hardware accelerated
		9	CSS filters, and the ability to animate them via the hardware
		10	compositor, all CSS filters should be composited when animating.
		11
		12	Test: css3/filters/composited-during-animation.html
		13	css3/filters/composited-during-animation-layertree.html:
		14
		15	* rendering/RenderLayerCompositor.cpp:
		16	(WebCore::RenderLayerCompositor::requiresCompositingForAnimation):
		17	Add test for CSSWebKitFilter property.
		18
1	2012-03-02 Maciej Stachowiak <mjs@apple.com>	19	2012-03-02 Maciej Stachowiak <mjs@apple.com>
2		20
3	REGRESSION(r97353): Crash when accessing location or history properties inside a navigated window	21	REGRESSION(r97353): Crash when accessing location or history properties inside a navigated window

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +12 lines
		1	2012-02-20 Dean Jackson <dino@apple.com>
		2
		3	Enable compositing when a CSS filter is animating
		4	https://bugs.webkit.org/show_bug.cgi?id=79048
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	* css3/filters/composited-during-animation-expected.txt: Added.
		9	* css3/filters/composited-during-animation.html: Added.
		10	* css3/filters/composited-during-animation-layertree-expected.txt: Added.
		11	* css3/filters/composited-during-animation-layertree.html:
		12
1	2012-03-02 Dirk Pranke <dpranke@chromium.org>	13	2012-03-02 Dirk Pranke <dpranke@chromium.org>
2		14
3	Fix expectation for svg/foreignObject/fO-parent-display-changes.svg.	15	Fix expectation for svg/foreignObject/fO-parent-display-changes.svg.

Line 0 a/LayoutTests/css3/filters/composited-during-animation-expected.txt_sec1
- a/LayoutTests/css3/filters/composited-during-animation-expected.txt +20 lines
	1
	2	PASS: Element grayscale-box had filter value grayscale(1) before animation.
	3	PASS: Element sepia-box had filter value sepia(1) before animation.
	4	PASS: Element saturate-box had filter value saturate(1) before animation.
	5	PASS: Element huerotate-box had filter value hue-rotate(90deg) before animation.
	6	PASS: Element invert-box had filter value invert(1) before animation.
	7	PASS: Element opacity-box had filter value opacity(0) before animation.
	8	PASS: Element brightness-box had filter value brightness(0) before animation.
	9	PASS: Element contrast-box had filter value contrast(0) before animation.
	10	PASS: Element blur-box had filter value blur(10px) before animation.
	11	PASS - "webkitFilter" property for "grayscale-box" element at 1s saw something close to: grayscale(0.5)
	12	PASS - "webkitFilter" property for "sepia-box" element at 1s saw something close to: sepia(0.5)
	13	PASS - "webkitFilter" property for "saturate-box" element at 1s saw something close to: saturate(0.5)
	14	PASS - "webkitFilter" property for "huerotate-box" element at 1s saw something close to: hue-rotate(90deg)
	15	PASS - "webkitFilter" property for "invert-box" element at 1s saw something close to: invert(0.5)
	16	PASS - "webkitFilter" property for "opacity-box" element at 1s saw something close to: opacity(0.5)
	17	PASS - "webkitFilter" property for "brightness-box" element at 1s saw something close to: brightness(0.5)
	18	PASS - "webkitFilter" property for "contrast-box" element at 1s saw something close to: contrast(0.5)
	19	PASS - "webkitFilter" property for "blur-box" element at 1s saw something close to: blur(10px)
	20

Line 0 a/LayoutTests/css3/filters/composited-during-animation-layertree-expected.txt_sec1
- a/LayoutTests/css3/filters/composited-during-animation-layertree-expected.txt +35 lines
	1
	2
	3
	4
	5	(GraphicsLayer
	6	(bounds 800.00 600.00)
	7	(children 1
	8	(GraphicsLayer
	9	(bounds 800.00 600.00)
	10	(children 4
	11	(GraphicsLayer
	12	(position 18.00 18.00)
	13	(bounds 160.00 90.00)
	14	(drawsContent 1)
	15	)
	16	(GraphicsLayer
	17	(position 18.00 132.00)
	18	(bounds 160.00 90.00)
	19	(drawsContent 1)
	20	)
	21	(GraphicsLayer
	22	(position 18.00 246.00)
	23	(bounds 160.00 90.00)
	24	(drawsContent 1)
	25	)
	26	(GraphicsLayer
	27	(position 18.00 360.00)
	28	(bounds 160.00 90.00)
	29	(drawsContent 1)
	30	)
	31	)
	32	)
	33	)
	34	)
	35

Line 0 a/LayoutTests/css3/filters/composited-during-animation-layertree.html_sec1
- a/LayoutTests/css3/filters/composited-during-animation-layertree.html +112 lines
		1	<!DOCTYPE html>
		2	<html>
		3	<head>
		4	<style>
		5	img {
		6	margin: 10px;
		7	-webkit-animation-duration: 5s !important;
		8	-webkit-animation-iteration-count: infinite !important;
		9	-webkit-animation-direction: alternate !important;
		10	}
		11
		12	#grayscale-box {
		13	-webkit-animation-name: grayscale-anim;
		14	-webkit-filter: grayscale(1);
		15	}
		16
		17	#sepia-box {
		18	-webkit-filter: sepia(1);
		19	}
		20
		21	#saturate-box {
		22	-webkit-animation: saturate-anim;
		23	-webkit-filter: saturate(1);
		24	}
		25
		26	#huerotate-box {
		27	-webkit-filter: hue-rotate(90deg);
		28	}
		29
		30	#invert-box {
		31	-webkit-animation: invert-anim;
		32	-webkit-filter: invert(1);
		33	}
		34
		35	#opacity-box {
		36	-webkit-filter: opacity(0);
		37	}
		38
		39	#brightness-box {
		40	-webkit-animation: brightness-anim;
		41	-webkit-filter: brightness(0);
		42	}
		43
		44	#contrast-box {
		45	-webkit-filter: contrast(0);
		46	}
		47
		48
		49	@-webkit-keyframes grayscale-anim {
		50	from { -webkit-filter: grayscale(0); }
		51	to { -webkit-filter: grayscale(1); }
		52	}
		53
		54	@-webkit-keyframes saturate-anim {
		55	from { -webkit-filter: saturate(0); }
		56	to { -webkit-filter: saturate(1); }
		57	}
		58
		59	@-webkit-keyframes invert-anim {
		60	from { -webkit-filter: invert(0); }
		61	to { -webkit-filter: invert(1); }
		62	}
		63
		64	@-webkit-keyframes brightness-anim {
65	from { -webkit-filter: brightness(1); }
66	to { -webkit-filter: brightness(0); }
67	}
68
69	</style>
70	<script>
71	if (window.layoutTestController) {
72	layoutTestController.waitUntilDone();
73	layoutTestController.dumpAsText();
74	}
75
76	function doTest() {
77	if (window.layoutTestController) {
78	document.getElementById('layer-tree').innerText = layoutTestController.layerTreeAsText()
79	layoutTestController.notifyDone();
80	}
81	}
82
83	window.addEventListener("load", doTest, false);
84	</script>
85	</head>
86	<body>
87
88	<!-- Every third image below is animating, and thus might
89	get a compositing layer. Every 3n+1 element is not animating but
90	has a static filter, and shouldn't need a compositing layer.
91	Every 3n+2 element is a purely static image, and shouldn't
92	even be a layer -->
93	<img src="resources/reference.png" id="grayscale-box">
94	<img src="resources/reference.png" id="sepia-box">
95	<img src="resources/reference.png">
96	<br>
97	<img src="resources/reference.png" id="saturate-box">
98	<img src="resources/reference.png" id="huerotate-box">
99	<img src="resources/reference.png">
100	<br>
101	<img src="resources/reference.png" id="invert-box">
102	<img src="resources/reference.png" id="opacity-box">
103	<img src="resources/reference.png">
104	<br>
105	<img src="resources/reference.png" id="brightness-box">
106	<img src="resources/reference.png" id="contrast-box">
107	<img src="resources/reference.png">
108
109	<pre id="layer-tree">Layer tree goes here in DRT</pre>
110
111	</body>
112	</html>