Changeset 167315 in webkit
- Timestamp:
- Apr 15, 2014 10:52:10 AM (10 years ago)
- Location:
- trunk/PerformanceTests
- Files:
-
- 1 deleted
- 6 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/PerformanceTests/ChangeLog
r167292 r167315 1 2014-04-15 Zoltan Horvath <zoltan@webkit.org> 2 3 [CSS Shapes] Linking stylesheet instead of inline style definition has ruined ShapesRegions test 4 https://bugs.webkit.org/show_bug.cgi?id=131572 5 6 Reviewed by Rob Buis. 7 8 In r167022 I moved the common CSS selectors into RegionsShapes.css, then I linked it into the perf test 9 files, but the measurement results dropped down from about 400ms to 10ms. I realized it's caused by the 10 linked css rule, so I've put the selectors back into every test case, which fixes the test measurements. 11 12 * Layout/Shapes/resources/RegionsShapes.css: Removed. 13 * Layout/Shapes/resources/RegionsShapesContent.html: 14 * Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html: 15 * Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html: 16 * Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html: 17 * Layout/Shapes/resources/RegionsShapesContentNoShapes.html: 18 1 19 2014-04-14 Geoffrey Garen <ggaren@apple.com> 2 20 -
trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html
r167022 r167315 2 2 <html> 3 3 <head> 4 <link rel="stylesheet" type="text/css" href="./Shapes/resources/RegionsShapes.css">5 4 <style> 6 article { -webkit-flow-into: article; } 5 body { 6 padding: 0; 7 margin: 0; 8 text-align: justify; 9 font-family: Palatino, Georgia, serif; 10 font-size: 10px; 11 -webkit-hyphens: auto; 12 text-align: justify; 13 line-height: 1.2em; 14 } 15 16 article { 17 -webkit-flow-into: article; 18 } 7 19 8 20 .regionColumns { … … 25 37 } 26 38 39 #region1 { width: 40%; } 40 #region2 { width: 22%; } 41 #region3 { width: 22%; } 27 42 #region4 { height: 200px; } 28 43 #region5 { height: 300px; } 44 45 .shape { 46 width: 100px; 47 height: 100px; 48 } 49 50 #circleShape { 51 float: left; 52 -webkit-shape-outside: circle(closest-side at center); 53 -webkit-shape-margin: 2px; 54 -webkit-clip-path: circle(closest-side at center); 55 background-color: green; 56 } 57 58 #imageShape { 59 float: left; 60 background-image: url("./Shapes/resources/shape.gif"); 61 -webkit-shape-outside: url("./Shapes/resources/shape.gif"); 62 -webkit-shape-margin: 2px; 63 width: 200px; 64 height: 200px; 65 } 66 67 #insetShape { 68 float: right; 69 -webkit-shape-outside: inset(5px); 70 -webkit-clip-path: inset(5px); 71 -webkit-shape-margin: 4px; 72 background-color: red; 73 border: 1px solid black; 74 } 75 76 #roundedInsetShape { 77 float: right; 78 -webkit-shape-outside: inset(5px round 64px 32px 16px 36px); 79 -webkit-clip-path: inset(5px round 64px 32px 16px 36px); 80 -webkit-shape-margin: 4px; 81 background-color: lightblue; 82 opacity: 0.4; 83 border: 1px solid black; 84 } 85 86 #triangleLeft { 87 float: left; 88 -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%); 89 -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); 90 -webkit-shape-margin: 4px; 91 background-color: yellow; 92 opacity: 0.4; 93 } 94 95 #triangleRight { 96 float: right; 97 -webkit-shape-outside: polygon(100% 0, 0 50%, 100% 100%); 98 -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%); 99 -webkit-shape-margin: 4px; 100 background-color: orange; 101 } 102 103 #selfIntersectingStar { 104 float: left; 105 -webkit-shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); 106 -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); 107 -webkit-shape-margin: 4px; 108 background-color: blue; 109 width: 100px; 110 height: 200px; 111 } 29 112 30 113 @media screen and (max-width: 650px) { -
trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html
r167022 r167315 2 2 <html> 3 3 <head> 4 <link rel="stylesheet" type="text/css" href="resources/RegionsShapes.css">5 4 <style> 6 body { width: 400px; } 7 8 #imageShape { 9 // Relative to RegionsShapesNoRegions.html 10 background: url("./resources/shape.gif") no-repeat; 11 -webkit-shape-outside: url("./resources/shape.gif"); 5 body { 6 padding: 0; 7 margin: 0; 8 text-align: justify; 9 font-family: Palatino, Georgia, serif; 10 font-size: 10px; 11 -webkit-hyphens: auto; 12 text-align: justify; 13 line-height: 1.2em; 14 width: 400px; 12 15 } 13 16 … … 23 26 } 24 27 25 .region { 26 clear: both; 27 padding-top: 20px; 28 margin-right: 2%; 28 #region1 { width: 100%; } 29 30 .shape { 31 width: 100px; 32 height: 100px; 29 33 } 30 34 31 #region1 { width: 100%; } 35 #circleShape { 36 float: left; 37 -webkit-shape-outside: circle(closest-side at center); 38 -webkit-shape-margin: 2px; 39 -webkit-clip-path: circle(closest-side at center); 40 background-color: green; 41 } 42 43 #imageShape { 44 float: left; 45 /* Relative to RegionsShapesNoRegions.html */ 46 background-image: url("./resources/shape.gif"); 47 -webkit-shape-outside: url("./resources/shape.gif"); 48 -webkit-shape-margin: 2px; 49 width: 200px; 50 height: 200px; 51 } 52 53 #insetShape { 54 float: right; 55 -webkit-shape-outside: inset(5px); 56 -webkit-clip-path: inset(5px); 57 -webkit-shape-margin: 4px; 58 background-color: red; 59 border: 1px solid black; 60 } 61 62 #roundedInsetShape { 63 float: right; 64 -webkit-shape-outside: inset(5px round 64px 32px 16px 36px); 65 -webkit-clip-path: inset(5px round 64px 32px 16px 36px); 66 -webkit-shape-margin: 4px; 67 background-color: lightblue; 68 opacity: 0.4; 69 border: 1px solid black; 70 } 71 72 #triangleLeft { 73 float: left; 74 -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%); 75 -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); 76 -webkit-shape-margin: 4px; 77 background-color: yellow; 78 opacity: 0.4; 79 } 80 81 #triangleRight { 82 float: right; 83 -webkit-shape-outside: polygon(100% 0, 0 50%, 100% 100%); 84 -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%); 85 -webkit-shape-margin: 4px; 86 background-color: orange; 87 } 88 89 #selfIntersectingStar { 90 float: left; 91 -webkit-shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); 92 -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); 93 -webkit-shape-margin: 4px; 94 background-color: blue; 95 width: 100px; 96 height: 200px; 97 } 32 98 </style> 33 99 </head> -
trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html
r167022 r167315 2 2 <html> 3 3 <head> 4 <link rel="stylesheet" type="text/css" href="resources/RegionsShapes.css">5 4 <style> 6 body { width: 600px; } 7 8 #imageShape { 9 // Relative to RegionsShapesNoRegions.html 10 background: url("./resources/shape.gif") no-repeat; 11 -webkit-shape-outside: url("./resources/shape.gif"); 5 body { 6 padding: 0; 7 margin: 0; 8 text-align: justify; 9 font-family: Palatino, Georgia, serif; 10 font-size: 10px; 11 -webkit-hyphens: auto; 12 text-align: justify; 13 line-height: 1.2em; 14 width: 600px; 12 15 } 13 16 … … 29 32 margin-right: 2%; 30 33 } 34 31 35 #region1, #region2 { width: 46%; } 36 37 .shape { 38 width: 100px; 39 height: 100px; 40 } 41 42 #circleShape { 43 float: left; 44 -webkit-shape-outside: circle(closest-side at center); 45 -webkit-shape-margin: 2px; 46 -webkit-clip-path: circle(closest-side at center); 47 background-color: green; 48 } 49 50 #imageShape { 51 float: left; 52 /* Relative to RegionsShapesNoRegions.html */ 53 background-image: url("./resources/shape.gif"); 54 -webkit-shape-outside: url("./resources/shape.gif"); 55 -webkit-shape-margin: 2px; 56 width: 200px; 57 height: 200px; 58 } 59 60 #insetShape { 61 float: right; 62 -webkit-shape-outside: inset(5px); 63 -webkit-clip-path: inset(5px); 64 -webkit-shape-margin: 4px; 65 background-color: red; 66 border: 1px solid black; 67 } 68 69 #roundedInsetShape { 70 float: right; 71 -webkit-shape-outside: inset(5px round 64px 32px 16px 36px); 72 -webkit-clip-path: inset(5px round 64px 32px 16px 36px); 73 -webkit-shape-margin: 4px; 74 background-color: lightblue; 75 opacity: 0.4; 76 border: 1px solid black; 77 } 78 79 #triangleLeft { 80 float: left; 81 -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%); 82 -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); 83 -webkit-shape-margin: 4px; 84 background-color: yellow; 85 opacity: 0.4; 86 } 87 88 #triangleRight { 89 float: right; 90 -webkit-shape-outside: polygon(100% 0, 0 50%, 100% 100%); 91 -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%); 92 -webkit-shape-margin: 4px; 93 background-color: orange; 94 } 95 96 #selfIntersectingStar { 97 float: left; 98 -webkit-shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); 99 -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); 100 -webkit-shape-margin: 4px; 101 background-color: blue; 102 width: 100px; 103 height: 200px; 104 } 32 105 </style> 33 106 </head> 34 35 107 <body> 36 108 <div class="page"> -
trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html
r167022 r167315 2 2 <html> 3 3 <head> 4 <link rel="stylesheet" type="text/css" href="resources/RegionsShapes.css">5 4 <style> 6 body { width: 800px; } 7 8 #imageShape { 9 // Relative to RegionsShapesNoRegions.html 10 background: url("./resources/shape.gif") no-repeat; 11 -webkit-shape-outside: url("./resources/shape.gif"); 5 body { 6 padding: 0; 7 margin: 0; 8 text-align: justify; 9 font-family: Palatino, Georgia, serif; 10 font-size: 10px; 11 -webkit-hyphens: auto; 12 text-align: justify; 13 line-height: 1.2em; 14 width: 800px; 12 15 } 13 16 … … 24 27 } 25 28 29 #region1 { width: 40%; } 30 #region2 { width: 22%; } 31 #region3 { width: 22%; } 32 26 33 .region { 27 34 clear: both; … … 29 36 margin-right: 2%; 30 37 } 38 39 .shape { 40 width: 100px; 41 height: 100px; 42 } 43 44 #circleShape { 45 float: left; 46 -webkit-shape-outside: circle(closest-side at center); 47 -webkit-shape-margin: 2px; 48 -webkit-clip-path: circle(closest-side at center); 49 background-color: green; 50 } 51 52 #imageShape { 53 float: left; 54 /* Relative to RegionsShapesNoRegions.html */ 55 background-image: url("./resources/shape.gif"); 56 -webkit-shape-outside: url("./resources/shape.gif"); 57 -webkit-shape-margin: 2px; 58 width: 200px; 59 height: 200px; 60 } 61 62 #insetShape { 63 float: right; 64 -webkit-shape-outside: inset(5px); 65 -webkit-clip-path: inset(5px); 66 -webkit-shape-margin: 4px; 67 background-color: red; 68 border: 1px solid black; 69 } 70 71 #roundedInsetShape { 72 float: right; 73 -webkit-shape-outside: inset(5px round 64px 32px 16px 36px); 74 -webkit-clip-path: inset(5px round 64px 32px 16px 36px); 75 -webkit-shape-margin: 4px; 76 background-color: lightblue; 77 opacity: 0.4; 78 border: 1px solid black; 79 } 80 81 #triangleLeft { 82 float: left; 83 -webkit-shape-outside: polygon(0 0, 100% 50%, 0 100%); 84 -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); 85 -webkit-shape-margin: 4px; 86 background-color: yellow; 87 opacity: 0.4; 88 } 89 90 #triangleRight { 91 float: right; 92 -webkit-shape-outside: polygon(100% 0, 0 50%, 100% 100%); 93 -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%); 94 -webkit-shape-margin: 4px; 95 background-color: orange; 96 } 97 98 #selfIntersectingStar { 99 float: left; 100 -webkit-shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); 101 -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); 102 -webkit-shape-margin: 4px; 103 background-color: blue; 104 width: 100px; 105 height: 200px; 106 } 31 107 </style> 32 108 </head> 33 34 109 <body> 35 110 <div class="page"> -
trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html
r167042 r167315 2 2 <html> 3 3 <head> 4 <link rel="stylesheet" type="text/css" href="./resources/RegionsShapes.css">5 4 <style> 5 body { 6 padding: 0; 7 margin: 0; 8 text-align: justify; 9 font-family: Palatino, Georgia, serif; 10 font-size: 10px; 11 -webkit-hyphens: auto; 12 text-align: justify; 13 line-height: 1.2em; 14 } 15 6 16 article { -webkit-flow-into: article; } 7 17 … … 25 35 } 26 36 37 #region1 { width: 40%; } 38 #region2 { width: 22%; } 39 #region3 { width: 22%; } 27 40 #region4 { height: 200px; } 28 41 #region5 { height: 300px; } … … 41 54 } 42 55 43 #circleShape { -webkit-shape-outside: none; } 44 #imageShape { -webkit-shape-outside: none; } 45 #insetShape { -webkit-shape-outside: none; } 46 #roundedInsetShape { -webkit-shape-outside: none; } 47 #triangleLeft { -webkit-shape-outside: none; } 48 #triangleRight { -webkit-shape-outside: none; } 49 #selfIntersectingStar { -webkit-shape-outside: none; } 56 .shape { 57 width: 100px; 58 height: 100px; 59 } 60 61 #circleShape { 62 float: left; 63 -webkit-shape-margin: 2px; 64 -webkit-clip-path: circle(closest-side at center); 65 background-color: green; 66 } 67 68 #imageShape { 69 float: left; 70 background-image: url("shape.gif"); 71 -webkit-shape-margin: 2px; 72 width: 200px; 73 height: 200px; 74 } 75 76 #insetShape { 77 float: right; 78 -webkit-clip-path: inset(5px); 79 -webkit-shape-margin: 4px; 80 background-color: red; 81 border: 1px solid black; 82 } 83 84 #roundedInsetShape { 85 float: right; 86 -webkit-clip-path: inset(5px round 64px 32px 16px 36px); 87 -webkit-shape-margin: 4px; 88 background-color: lightblue; 89 opacity: 0.4; 90 border: 1px solid black; 91 } 92 93 #triangleLeft { 94 float: left; 95 -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); 96 -webkit-shape-margin: 4px; 97 background-color: yellow; 98 opacity: 0.4; 99 } 100 101 #triangleRight { 102 float: right; 103 -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%); 104 -webkit-shape-margin: 4px; 105 background-color: orange; 106 } 107 108 #selfIntersectingStar { 109 float: left; 110 -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); 111 -webkit-shape-margin: 4px; 112 background-color: blue; 113 width: 100px; 114 height: 200px; 115 } 50 116 </style> 51 117 </head>
Note: See TracChangeset
for help on using the changeset viewer.