third_party/WebKit/LayoutTests/fast/backgrounds/script-tests/multiple-backgrounds-computed-style.js

   1 description("This tests checks that all of the input values for background-repeat parse correctly.");
   2
   3 function test(property, value)
   4 {
   5     var div = document.createElement("div");
   6     div.setAttribute("style", value);
   7     document.body.appendChild(div);
   8
   9     var result = window.getComputedStyle(div, property)[property];
  10     document.body.removeChild(div);
  11     return result;
  12 }
  13
  14 // shorthands
  15 shouldBe('test("backgroundImage", "background: none 10px 10px, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC) 20px 20px;")',
  16   '"none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC)"');
  17 shouldBe('test("backgroundPosition", "background: none 10px 10px, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC) 20px 20px;")', '"10px 10px, 20px 20px"');
  18
  19 // background longhands
  20 shouldBe('test("backgroundImage", "background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC), none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC)")',
  21   '"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC), none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC)"');
  22 shouldBe('test("backgroundRepeat", "background-image: none, none, none, none; background-repeat: repeat-x, repeat-y, repeat, no-repeat;")', '"repeat-x, repeat-y, repeat, no-repeat"');
  23 shouldBe('test("backgroundSize", "background-image: none, none, none; background-size: contain, cover, 20px 10%;")', '"contain, cover, 20px 10%"');
  24 shouldBe('test("webkitBackgroundSize", "background-image: none, none, none; -webkit-background-size: contain, cover, 20px 10%;")', '"contain, cover, 20px 10%"');
  25 shouldBe('test("webkitBackgroundComposite", "background-image: none, none, none; -webkit-background-composite: source-over, copy, destination-in")', '"source-over, copy, destination-in"');
  26 shouldBe('test("backgroundAttachment", "background-image: none, none, none; background-attachment: fixed, scroll, local;")', '"fixed, scroll, local"');
  27 shouldBe('test("backgroundClip", "background-image: none, none; background-clip: border-box, padding-box;")', '"border-box, padding-box"');
  28 shouldBe('test("webkitBackgroundClip", "background-image: none, none; -webkit-background-clip: border-box, padding-box;")', '"border-box, padding-box"');
  29 shouldBe('test("backgroundOrigin", "background-image: none, none, none; background-origin: border-box, padding-box, content-box;")', '"border-box, padding-box, content-box"');
  30 shouldBe('test("webkitBackgroundOrigin", "background-image: none, none, none; -webkit-background-origin: border-box, padding-box, content-box;")', '"border-box, padding-box, content-box"');
  31 shouldBe('test("backgroundPosition", "background-image: none, none, none, none, none; background-position: 20px 30px, 10% 90%, top, left, center;")', '"20px 30px, 10% 90%, 50% 0%, 0% 50%, 50% 50%"');
  32 shouldBe('test("backgroundPositionX", "background-image: none, none, none, none, none; background-position-x: 20px, 10%, right, left, center;")', '"20px, 10%, 100%, 0%, 50%"');
  33 shouldBe('test("backgroundPositionY", "background-image: none, none, none, none, none; background-position-y: 20px, 10%, bottom, top, center;")', '"20px, 10%, 100%, 0%, 50%"');
  34
  35 // mask shorthands
  36 shouldBe('test("webkitMaskImage", "-webkit-mask: none 10px 10px, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC) 20px 20px;")', '"none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC)"');
  37 shouldBe('test("webkitMaskPosition", "-webkit-mask: none 10px 10px, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC) 20px 20px;")', '"10px 10px, 20px 20px"');
  38 shouldBe('test("webkitMaskClip", "-webkit-mask: center url() content-box ")', '"content-box"');
  39 shouldBe('test("webkitMaskClip", "-webkit-mask: content-box padding-box")', '"padding-box"');
  40 shouldBe('test("webkitMaskClip", "-webkit-mask: border-box url() content-box")', '"content-box"');
  41 shouldBe('test("webkitMaskClip", "-webkit-mask: url() repeat-x content-box border-box scroll ")', '"border-box"');
  42
  43 // mask longhands
  44 shouldBe('test("webkitMaskImage", "-webkit-mask-image: none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC);")', '"none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC)"');
  45 shouldBe('test("webkitMaskSize", "-webkit-mask-image: none, none, none; -webkit-mask-size: contain, cover, 20px 10%;")', '"contain, cover, 20px 10%"');
  46 shouldBe('test("webkitMaskRepeat", "-webkit-mask-image: none, none, none, none; -webkit-mask-repeat: repeat-x, repeat-y, repeat, no-repeat;")', '"repeat-x, repeat-y, repeat, no-repeat"');
  47 shouldBe('test("webkitMaskClip", "-webkit-mask-image: none, none; -webkit-mask-clip: border-box, padding-box;")', '"border-box, padding-box"');
  48 shouldBe('test("webkitMaskOrigin", "-webkit-mask-image: none, none, none; -webkit-mask-origin: border-box, padding-box, content-box;")', '"border-box, padding-box, content-box"');
  49 shouldBe('test("webkitMaskPosition", "-webkit-mask-image: none, none, none, none, none; -webkit-mask-position: 20px 30px, 10% 90%, top, left, center;")', '"20px 30px, 10% 90%, 50% 0%, 0% 50%, 50% 50%"');
  50 shouldBe('test("webkitMaskPositionX", "-webkit-mask-image: none, none, none, none, none; -webkit-mask-position-x: 20px, 10%, right, left, center;")', '"20px, 10%, 100%, 0%, 50%"');
  51 shouldBe('test("webkitMaskPositionY", "-webkit-mask-image: none, none, none, none, none; -webkit-mask-position-y: 20px, 10%, bottom, top, center;")', '"20px, 10%, 100%, 0%, 50%"');
  52 shouldBe('test("webkitMaskComposite", "-webkit-mask-image: none, none, none; -webkit-mask-composite: source-over, copy, destination-in")', '"source-over, copy, destination-in"');