src/third_party/WebKit/LayoutTests/fast/css/first-letter-property-whitelist.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/testharness.js"></script>
   3 <script src="../../resources/testharnessreport.js"></script>
   4 <style>
   5 #target::first-letter {}
   6 #target { visibility: hidden; }
   7 </style>
   8 <div id="target">text</div>
   9 <script>
  10 'use strict';
  11
  12 var style;
  13
  14 test(function() {
  15   var styleRule = document.styleSheets[0].rules[0];
  16   assert_equals(styleRule.selectorText, '#target::first-letter', 'make sure we have the correct style rule');
  17   style = styleRule.style;
  18 }, 'pre test setup');
  19
  20 async_test(function(testHandle) {
  21   var testCases = {
  22     backgroundAttachment: 'fixed',
  23     backgroundBlendMode: 'hue',
  24     backgroundClip: 'padding-box',
  25     backgroundColor: 'rgb(10, 20, 30)',
  26     backgroundImage: 'linear-gradient(black, white)',
  27     backgroundOrigin: 'border-box',
  28     backgroundPosition: 'left 10px top 20px',
  29     backgroundRepeat: 'no-repeat',
  30     backgroundSize: '10px 20px',
  31     border: '40px dotted rgb(10, 20, 30)',
  32     borderImage: 'linear-gradient(black, white) 10% / 20 / 30px repeat',
  33     borderRadius: '10px 20px',
  34     boxShadow: 'rgb(10, 20, 30) 10px 20px 30px 40px inset',
  35     color: 'rgba(10, 20, 30, 0.4)',
  36     float: 'right',
  37     font: 'italic small-caps 900 normal 10px/20px sans-serif',
  38     fontKerning: 'none',
  39     letterSpacing: '12px',
  40     margin: '10px 20px 30px 40px',
  41     padding: '10px 20px 30px 40px',
  42     textDecoration: 'overline wavy rgb(10, 20, 30)',
  43     textShadow: 'rgb(10, 20, 30) 10px 20px 30px',
  44     textTransform: 'capitalize',
  45     verticalAlign: '12%',
  46     webkitBackgroundComposite: 'xor',
  47     webkitBorderHorizontalSpacing: '12px',
  48     webkitBorderVerticalSpacing: '12px',
  49     webkitFontSmoothing: 'none',
  50     webkitLineBoxContain: 'glyphs',
  51     wordSpacing: '12px',
  52     visibility: 'collapse',
  53   };
  54
  55   for (var property in testCases) {
  56     style[property] = testCases[property];
  57   }
  58
  59   requestAnimationFrame(function() {
  60     testHandle.step(function() {
  61       var computedStyle = getComputedStyle(target, 'first-letter');
  62       for (var property in testCases) {
  63         assert_equals(computedStyle[property], testCases[property], property + ' property');
  64       }
  65     });
  66     testHandle.done();
  67   });
  68 }, 'Whitelisted properties should get applied to first-letter pseudo elements.');
  69
  70 async_test(function(testHandle) {
  71   var testCases = {
  72     transition: 'transform 1s',
  73     transform: 'rotate(45deg)',
  74     webkitFilter: 'url(#)',
  75     wordBreak: 'break-all',
  76   };
  77
  78   for (var property in testCases) {
  79     style[property] = testCases[property];
  80   }
  81
  82   requestAnimationFrame(function() {
  83     testHandle.step(function() {
  84       var computedStyle = getComputedStyle(target, 'first-letter');
  85       var defaultComputedStyle = getComputedStyle(target);
  86       for (var property in testCases) {
  87         assert_equals(computedStyle[property], defaultComputedStyle[property], property + ' property');
  88       }
  89     });
  90     testHandle.done();
  91   });
  92 }, 'Non-whitelisted properties should not get applied to first-letter pseudo elements.');
  93 </script>