- Revision
- 104525
- Author
- [email protected]
- Date
- 2012-01-09 17:54:08 -0800 (Mon, 09 Jan 2012)
Log Message
background position parsing test for CSS3 calc
https://bugs.webkit.org/show_bug.cgi?id=75823
Reviewed by Daniel Bates.
Tests for future implementation of CSS3 calc() (see http://webkit.org/b/16662)
These tests are expected to 'fail', and will pass once calc() functionality is landed.
For now, they serve to demonstrate that the current code doesn't crash on these tests.
* css3/calc/background-position-parsing-expected-mismatch.html: Added.
* css3/calc/background-position-parsing.html: Added.
* css3/calc/resources/diamond.png: Added.
* css3/calc/resources/ring.png: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (104524 => 104525)
--- trunk/LayoutTests/ChangeLog 2012-01-10 01:32:54 UTC (rev 104524)
+++ trunk/LayoutTests/ChangeLog 2012-01-10 01:54:08 UTC (rev 104525)
@@ -1,3 +1,20 @@
+2012-01-09 Mike Lawther <[email protected]>
+
+ background position parsing test for CSS3 calc
+ https://bugs.webkit.org/show_bug.cgi?id=75823
+
+ Reviewed by Daniel Bates.
+
+ Tests for future implementation of CSS3 calc() (see http://webkit.org/b/16662)
+
+ These tests are expected to 'fail', and will pass once calc() functionality is landed.
+ For now, they serve to demonstrate that the current code doesn't crash on these tests.
+
+ * css3/calc/background-position-parsing-expected-mismatch.html: Added.
+ * css3/calc/background-position-parsing.html: Added.
+ * css3/calc/resources/diamond.png: Added.
+ * css3/calc/resources/ring.png: Added.
+
2012-01-09 Noel Gordon <[email protected]>
http/tests/inspector-enabled/dedicated-workers-list.html flakey on linux
Added: trunk/LayoutTests/css3/calc/background-position-parsing-expected-mismatch.html (0 => 104525)
--- trunk/LayoutTests/css3/calc/background-position-parsing-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/css3/calc/background-position-parsing-expected-mismatch.html 2012-01-10 01:54:08 UTC (rev 104525)
@@ -0,0 +1,137 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+<head>
+ <title>CSS Test: CSS background position: parsing</title>
+ <link rel="author" title="Ian Hickson" href=""
+ <link rel="help" href=""
+ <meta name="flags" content="invalid">
+ <style type="text/css">
+ .case { float: left; border: solid; margin: 0.2em; zoom:0.5 } /* 150 x 100 */
+ .test { background: #FFFFCC url(resources/ring.png) no-repeat; padding: 16px; }
+ .control { width: 118px; height: 68px; background: url(resources/diamond.png) no-repeat; }
+
+ .a .control, .b .control, .c .control, .d .control, .e .control, .f .control { background-position: 100% 100%; }
+ .case.a .test { background-position: right bottom; }
+ .case.b .test { background-position: bottom right; }
+ .case.c .test { background-position: 100% bottom; }
+ .case.d .test { background-position: right 100%; }
+ .case.e .test { background-position: 100% 58px; }
+ .case.f .test { background-position: 108px 100%; }
+
+ .g .control, .h .control, .i .control, .j .control, .k .control, .l .control, .m .control { background-position: 54px 28px; }
+ .case.g .test { background-position: center center; }
+ .case.h .test { background-position: 50% 50%; }
+ .case.i .test { background-position: center 50%; }
+ .case.j .test { background-position: 50% center; }
+ .case.k .test { background-position: 50%; }
+ .case.l .test { background-position: center; }
+ .case.m .test { background-position: 54px; }
+
+ .n .control, .o .control { background-position: 54px 56px; }
+ .case.n .test { background-position: bottom center; }
+ .case.o .test { background-position: center bottom; }
+
+ .p .control, .q .control { background-position: 108px 28px; }
+ .case.p .test { background-position: right center; }
+ .case.q .test { background-position: center right; }
+
+ .r .control { background-position: top right; }
+ .case.r0 .test { background-position: right top; }
+ .case.r1 .test { background-position: right 0; }
+ .case.r2 .test { background-position: right 0px; }
+ .case.r3 .test { background-position: right 0%; }
+ .case.r4 .test { background-position: 100% top; }
+ .case.r5 .test { background-position: 100% 0; }
+ .case.r6 .test { background-position: 100% 0px; }
+ .case.r7 .test { background-position: 100% 0%; }
+ .case.r8 .test { background-position: 108px top; }
+ .case.r9 .test { background-position: 108px 0; }
+ .case.r10 .test { background-position: 108px 0px; }
+ .case.r11 .test { background-position: 108px 0%; }
+
+ .negative .control { background-position: 0% 0%; }
+ .negative3 .control { background-position: 50% 50%; } /* CSS3 background supports comma */
+ .case.t1 .test { background-position: right bottom bottom; }
+ .case.t2 .test { background-position: bottom right bottom; }
+ .case.t3 .test { background-position: bottom 100%; }
+ .case.t4 .test { background-position: 100% right; }
+ .case.t5 .test { background-position: bottom 8px; }
+ .case.t6 .test { background-position: 23px right; }
+ .case.t7 .test { background-position: center 50% center; }
+ .case.t8 .test { background-position: 50% 50% 50%; }
+ .case.t9 .test { background-position: center 50% 50%; }
+ .case.t10 .test { background-position: 50%, 100%; } /* CSS3 background supports comma */
+ /* This test makes sure the comma either is
+ a) invalid per CSS2.1
+ b) handled correctly per CSS3
+ and NOT parsed as a valid separator of x and y offsets. */
+ .case.t11 .test { background-position: bottom 54px; }
+ .case.t12 .test { background-position: 50 50%; }
+ .case.t13 .test { background-position: bottom 100; }
+ .case.t14 .test { background-position: rightbottom; }
+ .case.t15 .test { background-position: 0 right; }
+ .case.t16 .test { background-position: 0px right; }
+ .case.t17 .test { background-position: 0% right; }
+ .case.t18 .test { background-position: top 100%; }
+ .case.t19 .test { background-position: top 108px; }
+ .case.t20 .test { background-position: top top; }
+ .case.t21 .test { background-position: left right; }
+ .case.t22 .test { background-position: left left; }
+ </style>
+ </head>
+<body>
+ <p>In all the following boxes, the fuchsia diamond should be surrounded by a ring.</p>
+ <div class="case a"><div class="test"><div class="control"></div></div></div>
+ <div class="case b"><div class="test"><div class="control"></div></div></div>
+ <div class="case c"><div class="test"><div class="control"></div></div></div>
+ <div class="case d"><div class="test"><div class="control"></div></div></div>
+ <div class="case e"><div class="test"><div class="control"></div></div></div>
+ <div class="case f"><div class="test"><div class="control"></div></div></div>
+ <div class="case g"><div class="test"><div class="control"></div></div></div>
+ <div class="case h"><div class="test"><div class="control"></div></div></div>
+ <div class="case i"><div class="test"><div class="control"></div></div></div>
+ <div class="case j"><div class="test"><div class="control"></div></div></div>
+ <div class="case k"><div class="test"><div class="control"></div></div></div>
+ <div class="case l"><div class="test"><div class="control"></div></div></div>
+ <div class="case m"><div class="test"><div class="control"></div></div></div>
+ <div class="case n"><div class="test"><div class="control"></div></div></div>
+ <div class="case o"><div class="test"><div class="control"></div></div></div>
+ <div class="case p"><div class="test"><div class="control"></div></div></div>
+ <div class="case q"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r0"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r1"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r2"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r3"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r4"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r5"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r6"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r7"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r8"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r9"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r10"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t1"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t2"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t3"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t4"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t5"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t6"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t7"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t8"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t9"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative negative3 t10"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t11"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t12"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t13"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t14"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t15"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t16"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t17"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t18"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t19"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t20"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t21"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t22"><div class="test"><div class="control"></div></div></div>
+
+
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/calc/background-position-parsing.html (0 => 104525)
--- trunk/LayoutTests/css3/calc/background-position-parsing.html (rev 0)
+++ trunk/LayoutTests/css3/calc/background-position-parsing.html 2012-01-10 01:54:08 UTC (rev 104525)
@@ -0,0 +1,137 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+<head>
+ <title>CSS Test: CSS background position: parsing</title>
+ <link rel="author" title="Ian Hickson" href=""
+ <link rel="help" href=""
+ <meta name="flags" content="invalid">
+ <style type="text/css">
+ .case { float: left; border: solid; margin: 0.2em; zoom:0.5 } /* 150 x 100 */
+ .test { background: #FFFFCC url(resources/ring.png) no-repeat; padding: -webkit-calc(16px); }
+ .control { width: 118px; height: 68px; background: url(resources/diamond.png) no-repeat; }
+
+ .a .control, .b .control, .c .control, .d .control, .e .control, .f .control { background-position: 100% 100%; }
+ .case.a .test { background-position: right bottom; }
+ .case.b .test { background-position: bottom right; }
+ .case.c .test { background-position: -webkit-calc(100%) bottom; }
+ .case.d .test { background-position: right -webkit-calc(100%); }
+ .case.e .test { background-position: -webkit-calc(100%) -webkit-calc(58px); }
+ .case.f .test { background-position: -webkit-calc(50% + 54px) -webkit-calc(50% + 29px); }
+
+ .g .control, .h .control, .i .control, .j .control, .k .control, .l .control, .m .control { background-position: 54px 28px; }
+ .case.g .test { background-position: center center; }
+ .case.h .test { background-position: -webkit-calc(50%) -webkit-calc(50%); }
+ .case.i .test { background-position: center -webkit-calc(50%); }
+ .case.j .test { background-position: -webkit-calc(50%) center; }
+ .case.k .test { background-position: -webkit-calc(50%); }
+ .case.l .test { background-position: center; }
+ .case.m .test { background-position: -webkit-calc(54px); }
+
+ .n .control, .o .control { background-position: 54px 56px; }
+ .case.n .test { background-position: bottom center; }
+ .case.o .test { background-position: center bottom; }
+
+ .p .control, .q .control { background-position: 108px 28px; }
+ .case.p .test { background-position: right center; }
+ .case.q .test { background-position: center right; }
+
+ .r .control { background-position: top right; }
+ .case.r0 .test { background-position: right top; }
+ .case.r1 .test { background-position: right 0; }
+ .case.r2 .test { background-position: right -webkit-calc(0px); }
+ .case.r3 .test { background-position: right -webkit-calc(0%); }
+ .case.r4 .test { background-position: -webkit-calc(100%) top; }
+ .case.r5 .test { background-position: -webkit-calc(100%) 0; }
+ .case.r6 .test { background-position: -webkit-calc(100%) -webkit-calc(0px); }
+ .case.r7 .test { background-position: -webkit-calc(100%) -webkit-calc(0%); }
+ .case.r8 .test { background-position: -webkit-calc(108px) top; }
+ .case.r9 .test { background-position: -webkit-calc(108px) 0; }
+ .case.r10 .test { background-position: -webkit-calc(108px) -webkit-calc(0px); }
+ .case.r11 .test { background-position: -webkit-calc(108px) -webkit-calc(0%); }
+
+ .negative .control { background-position: 0% 0%; }
+ .negative3 .control { background-position: 50% 50%; } /* CSS3 background supports comma */
+ .case.t1 .test { background-position: right bottom bottom; }
+ .case.t2 .test { background-position: bottom right bottom; }
+ .case.t3 .test { background-position: bottom -webkit-calc(100%); }
+ .case.t4 .test { background-position: -webkit-calc(100%) right; }
+ .case.t5 .test { background-position: bottom -webkit-calc(8px); }
+ .case.t6 .test { background-position: -webkit-calc(23px) right; }
+ .case.t7 .test { background-position: center -webkit-calc(50%) center; }
+ .case.t8 .test { background-position: -webkit-calc(50%) -webkit-calc(50%) -webkit-calc(50%); }
+ .case.t9 .test { background-position: center -webkit-calc(50%) -webkit-calc(50%); }
+ .case.t10 .test { background-position: -webkit-calc(50%), -webkit-calc(100%); } /* CSS3 background supports comma */
+ /* This test makes sure the comma either is
+ a) invalid per CSS2.1
+ b) handled correctly per CSS3
+ and NOT parsed as a valid separator of x and y offsets. */
+ .case.t11 .test { background-position: bottom -webkit-calc(54px); }
+ .case.t12 .test { background-position: 50 -webkit-calc(50%); }
+ .case.t13 .test { background-position: bottom 100; }
+ .case.t14 .test { background-position: rightbottom; }
+ .case.t15 .test { background-position: 0 right; }
+ .case.t16 .test { background-position: -webkit-calc(0px) right; }
+ .case.t17 .test { background-position: -webkit-calc(0%) right; }
+ .case.t18 .test { background-position: top -webkit-calc(100%); }
+ .case.t19 .test { background-position: top -webkit-calc(108px); }
+ .case.t20 .test { background-position: top top; }
+ .case.t21 .test { background-position: left right; }
+ .case.t22 .test { background-position: left left; }
+ </style>
+ </head>
+<body>
+ <p>In all the following boxes, the fuchsia diamond should be surrounded by a ring.</p>
+ <div class="case a"><div class="test"><div class="control"></div></div></div>
+ <div class="case b"><div class="test"><div class="control"></div></div></div>
+ <div class="case c"><div class="test"><div class="control"></div></div></div>
+ <div class="case d"><div class="test"><div class="control"></div></div></div>
+ <div class="case e"><div class="test"><div class="control"></div></div></div>
+ <div class="case f"><div class="test"><div class="control"></div></div></div>
+ <div class="case g"><div class="test"><div class="control"></div></div></div>
+ <div class="case h"><div class="test"><div class="control"></div></div></div>
+ <div class="case i"><div class="test"><div class="control"></div></div></div>
+ <div class="case j"><div class="test"><div class="control"></div></div></div>
+ <div class="case k"><div class="test"><div class="control"></div></div></div>
+ <div class="case l"><div class="test"><div class="control"></div></div></div>
+ <div class="case m"><div class="test"><div class="control"></div></div></div>
+ <div class="case n"><div class="test"><div class="control"></div></div></div>
+ <div class="case o"><div class="test"><div class="control"></div></div></div>
+ <div class="case p"><div class="test"><div class="control"></div></div></div>
+ <div class="case q"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r0"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r1"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r2"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r3"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r4"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r5"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r6"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r7"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r8"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r9"><div class="test"><div class="control"></div></div></div>
+ <div class="case r r10"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t1"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t2"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t3"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t4"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t5"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t6"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t7"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t8"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t9"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative negative3 t10"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t11"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t12"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t13"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t14"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t15"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t16"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t17"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t18"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t19"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t20"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t21"><div class="test"><div class="control"></div></div></div>
+ <div class="case negative t22"><div class="test"><div class="control"></div></div></div>
+
+
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/calc/resources/diamond.png (0 => 104525)
--- trunk/LayoutTests/css3/calc/resources/diamond.png (rev 0)
+++ trunk/LayoutTests/css3/calc/resources/diamond.png 2012-01-10 01:54:08 UTC (rev 104525)
@@ -0,0 +1,6 @@
+\x89PNG
+
+
+IHDR
+
+ \x8D2Ͻ sRGB \xAE\xCE\xE9 bKGD s \x8C \xCE\xD3\xC2,3 pHYs \x9A\x9C tIME\xDA 8n\xA0\xE0[ <IDATӕ\x90A \xC2\xC0\xFF\xFFO&\xC5\xB7\x86e \x86 \x92\xCF\xE9R_\x92\x9BxJ\xA92oR\x95\xF9\x92!\xF9\xE9\xAFg\x92z\x90>\x8B\xE4 \xFB\xAC\xA2\xDA IEND\xAEB`\x82
\ No newline at end of file
Added: trunk/LayoutTests/css3/calc/resources/ring.png (0 => 104525)
--- trunk/LayoutTests/css3/calc/resources/ring.png (rev 0)
+++ trunk/LayoutTests/css3/calc/resources/ring.png 2012-01-10 01:54:08 UTC (rev 104525)
@@ -0,0 +1,8 @@
+\x89PNG
+
+
+IHDR * * \xC5\xC3\xC9[ sRGB \xAE\xCE\xE9 bKGD \xFF \xFF \xFF\xA0\xBD\xA7\x93 pHYs \x9A\x9C tIME\xDA6\x9F"( KIDATX\xC3ՙ\xB1N\xDBP\x86\xBFc\x91Vd\xB0`D,\x8C)R\x82WȖ\x95\x852e\x8B\x842GHݘ(k6\xBFa\x89vdAAD-\xEEr\nO\xAE\xDBIl\xE7,\x91\xAEc\xDF\xCF\xFF\xF9ϵﱰ\x86Hz\xDDk\xA0\xEC\x9AC3`"Q|\xBE\xEA\xB2"X\x98\xF3:\x89\xFE\xBE\x94\x97\x80geoЀ\xDF\x96\x80\xA7@k
+\x90.\xECp\x9BXr@\xDE\x9D%\xFFw\xC0\x83\xA6\xB5\xC5p\x8C\x97 \xFF\x94(>.
+\x9A\xF4\xBAO\xC0\xDE\xB8+\xE0U\xA28Yr\xDA\xC0`\xF4\xB3D\xF1~a\xD0\x90#\xE0\x9BD\xB83\x803a\xA5 \xE4!0]\xA6`X\x80Ǽ\xB0\x92\xE1\xC9/\xEBT\xB1\x84\xBA?\xACgOuw<\x90\x97\xEB\x86\xD0k^\xEAnt\x94ůh\xD2\xEB\xFE>\x99\x93Z\x9B\x80\xF4(\xFBf\x86K\x9EST\xEF\xA0e=\xB9iHG\xD9C+\x90\xAB\xAA\x9Bz\xFB\xC4S\xAA\x8B\xA9\xB1\x80(\xD3G\xEA\x95\xFCk\xD5)\xCFi\x81\xEF\xC5穢}[@UC:\xB0\x85\xD5wS\x9A\x83W\xD4v\xEEpnyr\xE2\xB5FP\xEF܁\xFASLړ\xBA(u\xEE\xFF\x8A*\xE9u\xAF\x8F?\xEF\xA8?,C?\xF0l jv}}i \xE8C\xC0\x96\x844l W\xE8\x9D\x99\xB1\xA3\x80Z\x86Y L\xCC\xE0I@-\xC3$}ֿ\x9B\xB54\xA8k-շ\xFFwwH\xA28\xC8*\xA6v\x8Dj\xB6\x93]5\x82|KU
+j}:\xD6W\xAE\xAAӾ\xE3\xD9?M\xFE\x81j\xA7\xC2zr\xA8~\xA9қC;\x9CvQ\\x8F\xDEرni\xAB\x8A\xA3f\xA2L[\xBA\xB9Ӹ\xAD\xDAY)W\x96\xEDk@lMK'\xC8x\xCB\xDE\x9E=\x87\x81\x8BU\x96.=\xF7\xA2d\xA6\xA29\x94M\xEDP\xDB\xD1x\xB6ٍ\\xD3\xEEivk\xDC\xDC
+\xC0\xCD\xFD|\x93|c\xC4\xFEf\xF4\xFB?DT IEND\xAEB`\x82
\ No newline at end of file