Changeset 117603 in webkit


Ignore:
Timestamp:
May 18, 2012 9:42:18 AM (12 years ago)
Author:
commit-queue@webkit.org
Message:

Refactor LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html
​https://bugs.webkit.org/show_bug.cgi?id=86782

Patch by Joe Thomas <​joethomas@motorola.com> on 2012-05-18
Reviewed by Tony Chang.

Refactored the testcase to include round-trip testing.

  • fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt:
  • fast/backgrounds/background-shorthand-with-backgroundSize-style.html:
Location:
trunk/LayoutTests
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r117602 r117603  
     12012-05-18  Joe Thomas  <joethomas@motorola.com>
     2
     3        Refactor LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html
     4        https://bugs.webkit.org/show_bug.cgi?id=86782
     5
     6        Reviewed by Tony Chang.
     7
     8        Refactored the testcase to include round-trip testing.
     9
     10        * fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt:
     11        * fast/backgrounds/background-shorthand-with-backgroundSize-style.html:
     12
    1132012-05-18  Brady Eidson  <beidson@apple.com>
    214

  • trunk/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt

    r116645 r117603  
    1 Bug 27577: [CSS3 Backgrounds and Borders] Add background-size to the background shorthand
     1Tests background shortand property with background-size
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    44
    55
     6PASS e.style.background is 'red url(dummy://test.png) no-repeat border-box border-box 50% 50% / cover'
     7PASS e.style.backgroundSize is 'cover'
     8PASS checkStyle() is true
     9PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50% 50% / cover'
     10PASS computedStyle.getPropertyValue("background-size") is 'cover'
     11PASS checkComputedStyleValue() is true
    612
    7 PASS testCover.style.background is 'red url(dummy://test.png) no-repeat border-box border-box 50% 50% / cover'
    8 PASS testCover.style.backgroundSize is 'cover'
    9 PASS testContain.style.background is 'red url(dummy://test.png) no-repeat padding-box padding-box 20px 50% / contain'
    10 PASS testContain.style.backgroundSize is 'contain'
    11 PASS testPercentage.style.background is 'red url(dummy://test.png) no-repeat 50px 60px / 50% 75%'
    12 PASS testPercentage.style.backgroundSize is '50% 75%'
    13 PASS testPixels.style.background is 'red url(dummy://test.png) repeat padding-box border-box 0% 0% / 100px 200px'
    14 PASS testPixels.style.backgroundSize is '100px 200px'
    15 PASS testAuto.style.background is 'red url(dummy://test.png) repeat content-box border-box 50% 50% / auto'
    16 PASS testAuto.style.backgroundSize is 'auto'
    17 PASS testBrokenCover.style.background is ''
    18 PASS testBrokenCover.style.backgroundSize is ''
    19 PASS testBrokenContain.style.background is ''
    20 PASS testBrokenContain.style.backgroundSize is ''
    21 PASS testBrokenPixels.style.background is ''
    22 PASS testBrokenPixels.style.backgroundSize is ''
     13PASS e.style.background is 'red url(dummy://test.png) no-repeat padding-box padding-box 20px 50% / contain'
     14PASS e.style.backgroundSize is 'contain'
     15PASS checkStyle() is true
     16PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 20px 50% / contain'
     17PASS computedStyle.getPropertyValue("background-size") is 'contain'
     18PASS checkComputedStyleValue() is true
    2319
    24 PASS window.getComputedStyle(testCover,null).getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50% 50% / cover'
    25 PASS window.getComputedStyle(testCover,null).getPropertyValue("background-size") is 'cover'
    26 PASS window.getComputedStyle(testContain,null).getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 20px 50% / contain'
    27 PASS window.getComputedStyle(testContain,null).getPropertyValue("background-size") is 'contain'
    28 PASS window.getComputedStyle(testPercentage,null).getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50px 60px / 50% 75%'
    29 PASS window.getComputedStyle(testPercentage,null).getPropertyValue("background-size") is '50% 75%'
    30 PASS window.getComputedStyle(testPixels,null).getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / 100px 200px'
    31 PASS window.getComputedStyle(testPixels,null).getPropertyValue("background-size") is '100px 200px'
    32 PASS window.getComputedStyle(testAuto,null).getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 50% 50% / auto'
    33 PASS window.getComputedStyle(testAuto,null).getPropertyValue("background-size") is 'auto'
    34 PASS window.getComputedStyle(testBrokenCover,null).getPropertyValue("background") is 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'
    35 PASS window.getComputedStyle(testBrokenCover,null).getPropertyValue("background-size") is 'auto'
    36 PASS window.getComputedStyle(testBrokenContain,null).getPropertyValue("background") is 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'
    37 PASS window.getComputedStyle(testBrokenContain,null).getPropertyValue("background-size") is 'auto'
    38 PASS window.getComputedStyle(testBrokenPixels,null).getPropertyValue("background") is 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'
    39 PASS window.getComputedStyle(testBrokenPixels,null).getPropertyValue("background-size") is 'auto'
     20PASS e.style.background is 'red url(dummy://test.png) no-repeat 50px 60px / 50% 75%'
     21PASS e.style.backgroundSize is '50% 75%'
     22PASS checkStyle() is true
     23PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50px 60px / 50% 75%'
     24PASS computedStyle.getPropertyValue("background-size") is '50% 75%'
     25PASS checkComputedStyleValue() is true
     26
     27PASS e.style.background is 'red url(dummy://test.png) repeat border-box border-box 0% 0% / 100px 200px'
     28PASS e.style.backgroundSize is '100px 200px'
     29PASS checkStyle() is true
     30PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / 100px 200px'
     31PASS computedStyle.getPropertyValue("background-size") is '100px 200px'
     32PASS checkComputedStyleValue() is true
     33
     34PASS e.style.background is 'red url(dummy://test.png) repeat content-box content-box 50% 50% / auto'
     35PASS e.style.backgroundSize is 'auto'
     36PASS checkStyle() is true
     37PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 50% 50% / auto'
     38PASS computedStyle.getPropertyValue("background-size") is 'auto'
     39PASS checkComputedStyleValue() is true
     40
     41PASS e.style.background is ''
     42PASS e.style.backgroundSize is ''
     43PASS checkStyle() is true
     44PASS computedStyle.getPropertyValue("background") is 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'
     45PASS computedStyle.getPropertyValue("background-size") is 'auto'
     46PASS checkComputedStyleValue() is true
     47
     48PASS e.style.background is ''
     49PASS e.style.backgroundSize is ''
     50PASS checkStyle() is true
     51PASS computedStyle.getPropertyValue("background") is 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'
     52PASS computedStyle.getPropertyValue("background-size") is 'auto'
     53PASS checkComputedStyleValue() is true
     54
     55PASS e.style.background is ''
     56PASS e.style.backgroundSize is ''
     57PASS checkStyle() is true
     58PASS computedStyle.getPropertyValue("background") is 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'
     59PASS computedStyle.getPropertyValue("background-size") is 'auto'
     60PASS checkComputedStyleValue() is true
     61
    4062PASS successfullyParsed is true
    4163

  • trunk/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html

    r116645 r117603  
    22<html>
    33<script src="../js/resources/js-test-pre.js"></script>
    4 <div id="test-cover" style="background: center / cover red url(dummy://test.png) no-repeat border-box"></div>
    5 <div id="test-contain" style="background: red 20px / contain url(dummy://test.png) no-repeat padding-box"></div>
    6 <div id="test-percentage" style="background: red url(dummy://test.png) 50px 60px / 50% 75% no-repeat"></div>
    7 <div id="test-pixels" style="background: red url(dummy://test.png) repeat top left / 100px 200px border-box padding-box"></div>
    8 <div id="test-auto" style="background: red url(dummy://test.png) repeat 50% / auto auto border-box content-box"></div>
    9 <div id="test-broken-cover" style="background: red / cover url(dummy://test.png) repeat"></div>
    10 <div id="test-broken-contain" style="background: red url(dummy://test.png) repeat 25px / contain contain"></div>
    11 <div id="test-broken-pixels" style="background: red top left / 100px cover url(dummy://test.png) repeat"></div>
     4<div id="test"> </div>
    125<script>
    13  if (window.layoutTestController)
    14      layoutTestController.dumpAsText();
    15  description("Bug 27577: [CSS3 Backgrounds and Borders] Add background-size to the background shorthand ");
    16  var testCover = document.getElementById("test-cover");
    17  var testContain = document.getElementById("test-contain");
    18  var testPercentage = document.getElementById("test-percentage");
    19  var testPixels = document.getElementById("test-pixels");
    20  var testAuto = document.getElementById("test-auto");
    21  var testBrokenCover = document.getElementById("test-broken-cover");
    22  var testBrokenContain = document.getElementById("test-broken-contain");
    23  var testBrokenPixels = document.getElementById("test-broken-pixels");
    24  debug("");
    25  shouldBe("testCover.style.background", "'red url(dummy://test.png) no-repeat border-box border-box 50% 50% / cover'");
    26  shouldBe("testCover.style.backgroundSize", "'cover'");
    27  shouldBe("testContain.style.background", "'red url(dummy://test.png) no-repeat padding-box padding-box 20px 50% / contain'");
    28  shouldBe("testContain.style.backgroundSize", "'contain'");
    29  shouldBe("testPercentage.style.background", "'red url(dummy://test.png) no-repeat 50px 60px / 50% 75%'");
    30  shouldBe("testPercentage.style.backgroundSize", "'50% 75%'");
    31  shouldBe("testPixels.style.background", "'red url(dummy://test.png) repeat padding-box border-box 0% 0% / 100px 200px'");
    32  shouldBe("testPixels.style.backgroundSize", "'100px 200px'");
    33  shouldBe("testAuto.style.background", "'red url(dummy://test.png) repeat content-box border-box 50% 50% / auto'");
    34  shouldBe("testAuto.style.backgroundSize", "'auto'");
    35  shouldBe("testBrokenCover.style.background", "''");
    36  shouldBe("testBrokenCover.style.backgroundSize", "''");
    37  shouldBe("testBrokenContain.style.background", "''");
    38  shouldBe("testBrokenContain.style.backgroundSize", "''");
    39  shouldBe("testBrokenPixels.style.background", "''");
    40  shouldBe("testBrokenPixels.style.backgroundSize", "''");
    41  debug("");
    42  shouldBe('window.getComputedStyle(testCover,null).getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50% 50% / cover'");
    43  shouldBe('window.getComputedStyle(testCover,null).getPropertyValue("background-size")', "'cover'");
    44  shouldBe('window.getComputedStyle(testContain,null).getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 20px 50% / contain'");
    45  shouldBe('window.getComputedStyle(testContain,null).getPropertyValue("background-size")', "'contain'");
    46  shouldBe('window.getComputedStyle(testPercentage,null).getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50px 60px / 50% 75%'");
    47  shouldBe('window.getComputedStyle(testPercentage,null).getPropertyValue("background-size")', "'50% 75%'");
    48  shouldBe('window.getComputedStyle(testPixels,null).getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / 100px 200px'");
    49  shouldBe('window.getComputedStyle(testPixels,null).getPropertyValue("background-size")', "'100px 200px'");
    50  shouldBe('window.getComputedStyle(testAuto,null).getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 50% 50% / auto'");
    51  shouldBe('window.getComputedStyle(testAuto,null).getPropertyValue("background-size")', "'auto'");
    52  shouldBe('window.getComputedStyle(testBrokenCover,null).getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'");
    53  shouldBe('window.getComputedStyle(testBrokenCover,null).getPropertyValue("background-size")', "'auto'");
    54  shouldBe('window.getComputedStyle(testBrokenContain,null).getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'");
    55  shouldBe('window.getComputedStyle(testBrokenContain,null).getPropertyValue("background-size")', "'auto'");
    56  shouldBe('window.getComputedStyle(testBrokenPixels,null).getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'");
    57  shouldBe('window.getComputedStyle(testBrokenPixels,null).getPropertyValue("background-size")', "'auto'");
     6 description("Tests background shortand property with background-size");
     7
     8 var e = document.getElementById('test');
     9 var computedStyle = window.getComputedStyle(e, null);
     10
     11 function checkStyle() {
     12     var before = e.style.background;
     13     e.style.background = 'none';
     14     e.style.background = before;
     15     return (e.style.background == before);
     16 }
     17
     18 function checkComputedStyleValue() {
     19     var before = window.getComputedStyle(e, null).getPropertyValue('background');
     20     e.style.background = 'none';
     21     e.style.background = before;
     22     return (window.getComputedStyle(e, null).getPropertyValue('background') == before);
     23 }
     24
     25 e.style.background = "center / cover red url(dummy://test.png) no-repeat border-box";
     26 shouldBe("e.style.background", "'red url(dummy://test.png) no-repeat border-box border-box 50% 50% / cover'");
     27 shouldBe("e.style.backgroundSize", "'cover'");
     28 shouldBe("checkStyle()", "true");
     29 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50% 50% / cover'");
     30 shouldBe('computedStyle.getPropertyValue("background-size")', "'cover'");
     31 shouldBe("checkComputedStyleValue()", "true");
     32 debug("")
     33
     34 e.style.background = "red 20px / contain url(dummy://test.png) no-repeat padding-box";
     35 shouldBe("e.style.background", "'red url(dummy://test.png) no-repeat padding-box padding-box 20px 50% / contain'");
     36 shouldBe("e.style.backgroundSize", "'contain'");
     37 shouldBe("checkStyle()", "true");
     38 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 20px 50% / contain'");
     39 shouldBe('computedStyle.getPropertyValue("background-size")', "'contain'");
     40 shouldBe("checkComputedStyleValue()", "true");
     41 debug("")
     42
     43 e.style.background = "red url(dummy://test.png) 50px 60px / 50% 75% no-repeat";
     44 shouldBe("e.style.background", "'red url(dummy://test.png) no-repeat 50px 60px / 50% 75%'");
     45 shouldBe("e.style.backgroundSize", "'50% 75%'");
     46 shouldBe("checkStyle()", "true");
     47 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 50px 60px / 50% 75%'");
     48 shouldBe('computedStyle.getPropertyValue("background-size")', "'50% 75%'");
     49 shouldBe("checkComputedStyleValue()", "true");
     50 debug("")
     51
     52 e.style.background = "red url(dummy://test.png) repeat top left / 100px 200px border-box border-box";
     53 shouldBe("e.style.background", "'red url(dummy://test.png) repeat border-box border-box 0% 0% / 100px 200px'");
     54 shouldBe("e.style.backgroundSize", "'100px 200px'");
     55 shouldBe("checkStyle()", "true");
     56 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / 100px 200px'");
     57 shouldBe('computedStyle.getPropertyValue("background-size")', "'100px 200px'");
     58 shouldBe("checkComputedStyleValue()", "true");
     59 debug("")
     60
     61 e.style.background = "red url(dummy://test.png) repeat 50% / auto auto content-box content-box";
     62 shouldBe("e.style.background", "'red url(dummy://test.png) repeat content-box content-box 50% 50% / auto'");
     63 shouldBe("e.style.backgroundSize", "'auto'");
     64 shouldBe("checkStyle()", "true");
     65 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 50% 50% / auto'");
     66 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
     67 shouldBe("checkComputedStyleValue()", "true");
     68 debug("")
     69
     70 e.style.background = "";
     71 e.style.background = "red / cover url(dummy://test.png) repeat";
     72 shouldBe("e.style.background", "''");
     73 shouldBe("e.style.backgroundSize", "''");
     74 shouldBe("checkStyle()", "true");
     75 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'");
     76 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
     77 shouldBe("checkComputedStyleValue()", "true");
     78 debug("")
     79
     80 e.style.background = "";
     81 e.style.background = "red url(dummy://test.png) repeat 25px / contain contain";
     82 shouldBe("e.style.background", "''");
     83 shouldBe("e.style.backgroundSize", "''");
     84 shouldBe("checkStyle()", "true");
     85 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'");
     86 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
     87 shouldBe("checkComputedStyleValue()", "true");
     88 debug("")
     89
     90 e.style.background = "";
     91 e.style.background = "red top left / 100px cover url(dummy://test.png) repeat";
     92 shouldBe("e.style.background", "''");
     93 shouldBe("e.style.backgroundSize", "''");
     94 shouldBe("checkStyle()", "true");
     95 shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto'");
     96 shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
     97 shouldBe("checkComputedStyleValue()", "true");
     98 debug("")
    5899</script>
    59100<script src="../js/resources/js-test-post.js"></script>
Note: See TracChangeset for help on using the changeset viewer.