cssar/index.html at main · oklar/cssar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Runtime CSS Generator with Regex Token Extraction</title>

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      .test-result {
        margin-top: 1em;
        font-family: monospace;
      }
      .pass {
        color: green;
      }
      .fail {
        color: red;
      }
    </style>
    <script src="cssr.js"></script>
  </head>
  <body>
    <!-- Elements under test -->
    <div
      id="styled-box"
      class="color:red font-size:20px border:2px_solid_powderblue background-color:coral"
    >
      Styled box
    </div>
    <div
      id="calc-box"
      class="width:calc(100%_-_20px) height:calc(50vh_-_10px) padding:10px_20px"
    >
      Calc box
    </div>
    <div id="border-box" class="border:2px_solid_powderblue">Border box</div>

    <button
      id="add-btn"
      onclick="document.body.insertAdjacentHTML('beforeend', `<div id='dynamic-box' class='color:#aaaeae padding:20px_25px width:calc(80%_-_30px)'>dynamic</div>`)"
    >
      Add Dynamic Box
    </button>

    <div id="test-output" class="test-result"></div>

    <!-- External test runner -->
    <script>
      function runExternalTests() {
        const outputEl = document.getElementById("test-output");
        outputEl.innerHTML = "";
        const tests = [];
        const styled = getComputedStyle(document.getElementById("styled-box"));
        const calcBox = document.getElementById("calc-box");
        const calcStyle = getComputedStyle(calcBox);
        const borderBox = document.getElementById("border-box");
        const borderStyle = getComputedStyle(borderBox);

        tests.push({
          name: "Styled Box Color",
          pass: styled.color === "rgb(255, 0, 0)",
          expected: "rgb(255, 0, 0)",
          actual: styled.color,
        });
        tests.push({
          name: "Styled Box Font Size",
          pass: styled.fontSize === "20px",
          expected: "20px",
          actual: styled.fontSize,
        });

        tests.push({
          name: "Calc Box Width",
          pass: calcStyle.width.includes("px") && calcStyle.width !== "auto",
          expected: "width applied (calc result)",
          actual: calcStyle.width,
        });

        tests.push({
          name: "Calc Box Height",
          pass: calcStyle.height.includes("px") && calcStyle.height !== "auto",
          expected: "height applied (calc result)",
          actual: calcStyle.height,
        });

        tests.push({
          name: "Border Width",
          pass: borderStyle.borderWidth === "2px",
          expected: "2px",
          actual: borderStyle.borderWidth,
        });
        tests.push({
          name: "Border Style",
          pass: borderStyle.borderStyle === "solid",
          expected: "solid",
          actual: borderStyle.borderStyle,
        });
        tests.push({
          name: "Border Color",
          pass: borderStyle.borderColor === "rgb(176, 224, 230)",
          expected: "rgb(176, 224, 230)",
          actual: borderStyle.borderColor,
        });

        tests.forEach((t) => {
          const d = document.createElement("div");
          d.className = t.pass ? "pass" : "fail";
          d.textContent = `${t.name}: ${t.pass ? "PASS" : "FAIL"} (expected: ${
            t.expected
          }, got: ${t.actual})`;
          outputEl.appendChild(d);
        });
      }
      window.addEventListener("load", () => setTimeout(runExternalTests, 100));
    </script>
  </body>
</html>