Changeset 167315 in webkit


Ignore:
Timestamp:
Apr 15, 2014 10:52:10 AM (10 years ago)
Author:
zoltan@webkit.org
Message:

[CSS Shapes] Linking stylesheet instead of inline style definition has ruined ShapesRegions test
https://bugs.webkit.org/show_bug.cgi?id=131572

Reviewed by Rob Buis.

In r167022 I moved the common CSS selectors into RegionsShapes.css, then I linked it into the perf test
files, but the measurement results dropped down from about 400ms to 10ms. I realized it's caused by the
linked css rule, so I've put the selectors back into every test case, which fixes the test measurements.

  • Layout/Shapes/resources/RegionsShapes.css: Removed.
  • Layout/Shapes/resources/RegionsShapesContent.html:
  • Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html:
  • Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html:
  • Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html:
  • Layout/Shapes/resources/RegionsShapesContentNoShapes.html:
Location:
trunk/PerformanceTests
Files:
1 deleted
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/PerformanceTests/ChangeLog

    r167292 r167315  
     12014-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
    1192014-04-14  Geoffrey Garen  <ggaren@apple.com>
    220
  • trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContent.html

    r167022 r167315  
    22<html>
    33<head>
    4 <link rel="stylesheet" type="text/css" href="./Shapes/resources/RegionsShapes.css">
    54<style>
    6 article { -webkit-flow-into: article; }
     5body {
     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
     16article {
     17    -webkit-flow-into: article;
     18}
    719
    820.regionColumns {
     
    2537}
    2638
     39#region1 { width: 40%; }
     40#region2 { width: 22%; }
     41#region3 { width: 22%; }
    2742#region4 { height: 200px; }
    2843#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}
    29112
    30113@media screen and (max-width: 650px) {
  • trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth400.html

    r167022 r167315  
    22<html>
    33<head>
    4 <link rel="stylesheet" type="text/css" href="resources/RegionsShapes.css">
    54<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");
     5body {
     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;
    1215}
    1316
     
    2326}
    2427
    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;
    2933}
    3034
    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}
    3298</style>
    3399</head>
  • trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth600.html

    r167022 r167315  
    22<html>
    33<head>
    4 <link rel="stylesheet" type="text/css" href="resources/RegionsShapes.css">
    54<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");
     5body {
     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;
    1215}
    1316
     
    2932    margin-right: 2%;
    3033}
     34
    3135#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}
    32105</style>
    33106</head>
    34 
    35107<body>
    36108<div class="page">
  • trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoRegionsWidth800.html

    r167022 r167315  
    22<html>
    33<head>
    4 <link rel="stylesheet" type="text/css" href="resources/RegionsShapes.css">
    54<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");
     5body {
     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;
    1215}
    1316
     
    2427}
    2528
     29#region1 { width: 40%; }
     30#region2 { width: 22%; }
     31#region3 { width: 22%; }
     32
    2633.region {
    2734    clear: both;
     
    2936    margin-right: 2%;
    3037}
     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}
    31107</style>
    32108</head>
    33 
    34109<body>
    35110<div class="page">
  • trunk/PerformanceTests/Layout/Shapes/resources/RegionsShapesContentNoShapes.html

    r167042 r167315  
    22<html>
    33<head>
    4 <link rel="stylesheet" type="text/css" href="./resources/RegionsShapes.css">
    54<style>
     5body {
     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
    616article { -webkit-flow-into: article; }
    717
     
    2535}
    2636
     37#region1 { width: 40%; }
     38#region2 { width: 22%; }
     39#region3 { width: 22%; }
    2740#region4 { height: 200px; }
    2841#region5 { height: 300px; }
     
    4154}
    4255
    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}
    50116</style>
    51117</head>
Note: See TracChangeset for help on using the changeset viewer.