variable-first-letter.html (3395B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Variables with ::first-letter pseudo-element.</title> 5 6 <meta rel="author" title="Kevin Babbitt"> 7 <meta rel="author" title="Greg Whitworth"> 8 <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> 9 <!-- This is not directly specified in the spec but should work --> 10 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> 11 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <style> 15 #div1::first-letter { 16 color: var(--my-color); 17 --my-color: rgb(0, 0, 255); 18 } 19 20 #div2::first-letter { 21 font-size: var(--my-font-size); 22 --my-font-size: 25px; 23 } 24 25 #div3::first-letter { 26 font-weight: var(--my-font-weight); 27 --my-font-weight: 900; 28 } 29 30 #div4::first-letter { 31 position: var(--my-position); 32 --my-position: absolute; 33 } 34 35 #div5::first-letter { 36 color: var(--my-color1); 37 --my-color1: var(--my-color2); 38 --my-color2: rgb(0, 0, 255); 39 } 40 41 #div6::first-letter { 42 position: var(--my-position1); 43 --my-position1: var(--my-position2); 44 --my-position2: absolute; 45 } 46 </style> 47 </head> 48 <body> 49 <div id="div1">CSS variable defining 'color' property should be applied to ::first-letter and its color should be blue.</div> 50 <div id="div2">CSS variable defining 'font-size' property should be applied to ::first-letter and its font-size should be 25px.</div> 51 <div id="div3">CSS variable defining 'font-weight' property should be applied to ::first-letter and its font-weight should be 900.</div> 52 <div id="div4">CSS variable defining 'position' property should not be applied to ::first-letter and its position should be static.</div> 53 <div id="div5">CSS variable referencing another CSS variable that defines 'color' property should be applied to ::first-letter and its color should be blue.</div> 54 <div id="div6">CSS variable referencing another CSS variable that defines 'position' property should not be applied to ::first-letter and its position should be static.</div> 55 56 <script> 57 "use strict"; 58 var testcases = [ 59 { elementId: "div1", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "color" }, 60 { elementId: "div2", property: "font-size", expectedValue: "25px", testName: "font-size" }, 61 { elementId: "div3", property: "font-weight", expectedValue: "900", testName: "font-weight" }, 62 { elementId: "div4", property: "position", expectedValue: "static", testName: "position" }, 63 { elementId: "div5", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "nested color" }, 64 { elementId: "div6", property: "position", expectedValue: "static", testName: "abspos" }, 65 ]; 66 67 testcases.forEach(function (tc) { 68 test( function () { 69 var elem = document.getElementById(tc.elementId); 70 var actualValue = window.getComputedStyle(elem, ':first-letter').getPropertyValue(tc.property); 71 assert_equals(tc.expectedValue, actualValue); 72 }, tc.testName); 73 }); 74 </script> 75 </body> 76 </html>