Commit 77cff3ba authored by ed@opera.com's avatar ed@opera.com

[SVG2] overflow should be ignored in img and background-image.

BUG=371250

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

git-svn-id: svn://svn.chromium.org/blink/trunk@173752 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 99902d4c
<!doctype html>
<html>
<head>
<style type="text/css">
.test-class {
margin: 50px auto;
/* same svg as in the test, but with overflow="hidden" specified on the root */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiIG92ZXJmbG93PSJoaWRkZW4iPgo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUuODU3OSIgeTE9IjUuODU3OSIgeDI9IjM0LjE0MjEiIHkyPSIzNC4xNDIxIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSAwLjcwNzEgLTAuNzA3MSAwLjcwNzEgMjAgLTguMjg0MykiPgoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzAwQTk5NSIvPgoJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzNDMzc5NSIvPgoJPHN0b3AgIG9mZnNldD0iMC41MDU2IiBzdHlsZT0ic3RvcC1jb2xvcjojQTUzNTk0Ii8+Cgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojREEyMTI4Ii8+CjwvbGluZWFyR3JhZGllbnQ+Cjxwb2x5Z29uIGZpbGw9InVybCgjU1ZHSURfMV8pIiBwb2ludHM9IjIwLDQwIDAsMjAgMjAsMCA0MCwyMCAiLz4KPC9zdmc+Cg==);
background-size: contain;
}
</style>
</head>
<body>
<div style="width: 100%;">
<div class="test-class" style="width:60px; height:60px;">
</div>
<div class="test-class" style="width:40px; height:40px;">
</div>
<div class="test-class" style="width:28px; height:28px;">
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style type="text/css">
.test-class {
margin: 50px auto;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIiBvdmVyZmxvdz0iYXV0byI+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUuODU3OSIgeTE9IjUuODU3OSIgeDI9IjM0LjE0MjEiIHkyPSIzNC4xNDIxIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSAwLjcwNzEgLTAuNzA3MSAwLjcwNzEgMjAgLTguMjg0MykiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMEE5OTUiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojM0MzNzk1Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC41MDU2IiBzdHlsZT0ic3RvcC1jb2xvcjojQTUzNTk0Ii8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0RBMjEyOCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwb2x5Z29uIGZpbGw9InVybCgjU1ZHSURfMV8pIiBwb2ludHM9IjIwLDQwIDAsMjAgMjAsMCA0MCwyMCAiLz4NCjwvc3ZnPg==);
background-size: contain;
}
</style>
</head>
<body>
<div style="width: 100%;">
<div class="test-class" style="width:60px; height:60px;">
</div>
<div class="test-class" style="width:40px; height:40px;">
</div>
<div class="test-class" style="width:28px; height:28px;">
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style type="text/css">
.test-class {
margin: 50px auto;
background-size: contain;
}
</style>
</head>
<body>
<div style="width: 100%;">
<img class="test-class" style="width:60px; height:60px;" src="resources/overflow-hidden.svg">
<img class="test-class" style="width:40px; height:40px;" src="resources/overflow-hidden.svg">
<img class="test-class" style="width:28px; height:28px;" src="resources/overflow-hidden.svg">
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style type="text/css">
.test-class {
margin: 50px auto;
background-size: contain;
}
</style>
</head>
<body>
<div style="width: 100%;">
<img class="test-class" style="width:60px; height:60px;" src="resources/overflow-auto.svg">
<img class="test-class" style="width:40px; height:40px;" src="resources/overflow-auto.svg">
<img class="test-class" style="width:28px; height:28px;" src="resources/overflow-auto.svg">
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve" overflow="auto">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.8579" y1="5.8579" x2="34.1421" y2="34.1421" gradientTransform="matrix(0.7071 0.7071 -0.7071 0.7071 20 -8.2843)">
<stop offset="0" style="stop-color:#00A995"/>
<stop offset="0" style="stop-color:#3C3795"/>
<stop offset="0.5056" style="stop-color:#A53594"/>
<stop offset="1" style="stop-color:#DA2128"/>
</linearGradient>
<polygon fill="url(#SVGID_1_)" points="20,40 0,20 20,0 40,20 "/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve" overflow="hidden">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.8579" y1="5.8579" x2="34.1421" y2="34.1421" gradientTransform="matrix(0.7071 0.7071 -0.7071 0.7071 20 -8.2843)">
<stop offset="0" style="stop-color:#00A995"/>
<stop offset="0" style="stop-color:#3C3795"/>
<stop offset="0.5056" style="stop-color:#A53594"/>
<stop offset="1" style="stop-color:#DA2128"/>
</linearGradient>
<polygon fill="url(#SVGID_1_)" points="20,40 0,20 20,0 40,20 "/>
</svg>
......@@ -533,6 +533,10 @@ void FrameView::applyOverflowToViewportAndSetRenderer(RenderObject* o, Scrollbar
EOverflow overflowY = o->style()->overflowY();
if (o->isSVGRoot()) {
// Don't allow overflow to affect <img> and css backgrounds
if (toRenderSVGRoot(o)->isEmbeddedThroughSVGImage())
return;
// FIXME: evaluate if we can allow overflow for these cases too.
// Overflow is always hidden when stand-alone SVG documents are embedded.
if (toRenderSVGRoot(o)->isEmbeddedThroughFrameContainingSVGDocument()) {
......
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