<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[166067] trunk/LayoutTests</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/166067">166067</a></dd>
<dt>Author</dt> <dd>stavila@adobe.com</dd>
<dt>Date</dt> <dd>2014-03-21 09:43:34 -0700 (Fri, 21 Mar 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Regions] incorrect clipping when the content has CSS Transforms like rotation
https://bugs.webkit.org/show_bug.cgi?id=110198
Reviewed by David Hyatt.
Added test that confirms the issue of transformed content being clipped was fixed.
* fast/regions/overflow-content-transform-rotate-expected.html: Added.
* fast/regions/overflow-content-transform-rotate.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastregionsoverflowcontenttransformrotateexpectedhtml">trunk/LayoutTests/fast/regions/overflow-content-transform-rotate-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsoverflowcontenttransformrotatehtml">trunk/LayoutTests/fast/regions/overflow-content-transform-rotate.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (166066 => 166067)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-03-21 16:31:22 UTC (rev 166066)
+++ trunk/LayoutTests/ChangeLog 2014-03-21 16:43:34 UTC (rev 166067)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2014-03-21 Radu Stavila <stavila@adobe.com>
+
+ [CSS Regions] incorrect clipping when the content has CSS Transforms like rotation
+ https://bugs.webkit.org/show_bug.cgi?id=110198
+
+ Reviewed by David Hyatt.
+
+ Added test that confirms the issue of transformed content being clipped was fixed.
+
+ * fast/regions/overflow-content-transform-rotate-expected.html: Added.
+ * fast/regions/overflow-content-transform-rotate.html: Added.
+
</ins><span class="cx"> 2014-03-20 Brent Fulgham <bfulgham@apple.com>
</span><span class="cx">
</span><span class="cx"> Merge WebVTT Tokenizer Updates
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionsoverflowcontenttransformrotateexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/overflow-content-transform-rotate-expected.html (0 => 166067)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/overflow-content-transform-rotate-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/overflow-content-transform-rotate-expected.html 2014-03-21 16:43:34 UTC (rev 166067)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+<!DOCTYPE HTML>
+<html lang="en-US">
+ <head>
+ <style>
+ html {
+ -webkit-font-smoothing: none;
+ }
+
+ #text {
+ -webkit-transform: rotate(90deg);
+ }
+
+ .region {
+ position: absolute;
+ left: 50px;
+ top: 100px;
+ border: 3px solid black;
+ height: 100px;
+ width: 150px;
+ }
+ </style>
+ </head>
+
+ <body>
+ <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=110198">110198</a>: [CSS Regions] incorrect clipping when the content has CSS Transforms like rotation</p>
+ <p>The text below should overflow the black-border container.</p>
+
+ <div class="region">
+ <div id="text">idLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmoddotempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, minimquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo eaconsequat. eaconsequat</div>
+ </div>
+ </body>
+</html>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionsoverflowcontenttransformrotatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/overflow-content-transform-rotate.html (0 => 166067)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/overflow-content-transform-rotate.html (rev 0)
+++ trunk/LayoutTests/fast/regions/overflow-content-transform-rotate.html 2014-03-21 16:43:34 UTC (rev 166067)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<!DOCTYPE HTML>
+<html lang="en-US">
+ <head>
+ <style>
+ html {
+ -webkit-font-smoothing: none;
+ }
+
+ #text {
+ -webkit-transform: rotate(90deg);
+ -webkit-flow-into: flow;
+ }
+
+ .region {
+ position: absolute;
+ left: 50px;
+ top: 100px;
+ border: 3px solid black;
+ height: 100px;
+ width: 150px;
+ -webkit-flow-from: flow;
+ }
+ </style>
+ </head>
+
+ <body>
+ <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=110198">110198</a>: [CSS Regions] incorrect clipping when the content has CSS Transforms like rotation</p>
+ <p>The text below should overflow the black-border container.</p>
+
+ <div class="region"></div>
+
+ <div id="text">idLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmoddotempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, minimquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo eaconsequat. eaconsequat</div>
+ </body>
+</html>
</ins><span class="cx">\ No newline at end of file
</span></span></pre>
</div>
</div>
</body>
</html>