htmlcsstest.cpp

Go to the documentation of this file.

/*******************************************************************************
Copyright (c) 2021, Jan Koester jan.koester@gmx.net
All rights reserved.
 
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above copyright
      notice, this list of conditions and the following disclaimer in the
      documentation and/or other materials provided with the distribution.
    * Neither the name of the <organization> nor the
      names of its contributors may be used to endorse or promote products
      derived from this software without specific prior written permission.
 
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*******************************************************************************/
 
#include <iostream>
#include <set>
 
#include "../src/html.h"
#include "../src/css.h"
#include "../src/htmlcss.h"
 
#define Red     "\033[0;31m"
#define Green   "\033[0;32m"
#define NOCOLOR "\033[0m"
 
static int testCount = 0;
static int passCount = 0;
 
static void check(bool cond, const char *desc) {
    ++testCount;
    if (cond) {
        ++passCount;
        std::cout << Green << "  PASS: " << desc << NOCOLOR << std::endl;
    } else {
        std::cout << Red   << "  FAIL: " << desc << NOCOLOR << std::endl;
    }
}
 
int main(){
    // --- approximateSelectorMatch: tag/class/id/compound ---
    std::cout << "=== approximateSelectorMatch ===" << std::endl;
    {
        using libhtmlpp::CSSStyleSheet;
        std::vector<std::string> classes = {"card", "featured"};
 
        check(CSSStyleSheet::approximateSelectorMatch("div", "div", classes, "hero"),
              "bare tag matches");
        check(!CSSStyleSheet::approximateSelectorMatch("span", "div", classes, "hero"),
              "wrong tag doesn't match");
        check(CSSStyleSheet::approximateSelectorMatch(".card", "div", classes, "hero"),
              "single class matches");
        check(CSSStyleSheet::approximateSelectorMatch(".card.featured", "div", classes, "hero"),
              "every class in compound must be present -- matches when all are");
        check(!CSSStyleSheet::approximateSelectorMatch(".card.missing", "div", classes, "hero"),
              "every class in compound must be present -- rejects when one is absent");
        check(CSSStyleSheet::approximateSelectorMatch("#hero", "div", classes, "hero"),
              "id selector matches");
        check(CSSStyleSheet::approximateSelectorMatch("div.card.featured#hero", "div", classes, "hero"),
              "full compound tag.class.class#id matches");
        check(CSSStyleSheet::approximateSelectorMatch(".other, .card", "div", classes, "hero"),
              "comma list matches if any branch matches");
    }
 
    // --- Unsupported syntax is rejected, never guessed ---
    std::cout << "=== approximateSelectorMatch rejects unsafe syntax ===" << std::endl;
    {
        using libhtmlpp::CSSStyleSheet;
        std::vector<std::string> classes = {"card"};
        check(!CSSStyleSheet::approximateSelectorMatch("[data-x]", "div", classes, ""),
              "attribute selector rejected");
        check(!CSSStyleSheet::approximateSelectorMatch("div:hover", "div", classes, ""),
              "pseudo-class rejected");
        check(!CSSStyleSheet::approximateSelectorMatch("*", "div", classes, ""),
              "universal selector rejected");
        check(!CSSStyleSheet::approximateSelectorMatch("[data-atom=header]>div", "div", classes, ""),
              "bare tag left after a combinator is rejected (would over-match every element of that tag)");
        check(CSSStyleSheet::approximateSelectorMatch("[data-atom=header]>div.card", "div", classes, ""),
              "a qualified compound after a combinator is still specific enough to check");
    }
 
    // --- approximateSelectorMatch: ancestor chain verification ---
    // Regression coverage for a real-world bug: a descendant selector like
    // ".header .frame" was being matched against ANY ".frame" element in the
    // whole document, because this matcher never checked the ".header" part
    // against anything (see approximateSelectorMatch's own doc comment). On
    // a real page-builder site, this made a header-only padding rule
    // silently apply to every section on the page, collapsing all of their
    // intended vertical spacing.
    std::cout << "=== approximateSelectorMatch with ancestor chain ===" << std::endl;
    {
        using libhtmlpp::CSSStyleSheet;
        using libhtmlpp::AncestorFrame;
        std::vector<std::string> classes = {"frame"};
 
        check(CSSStyleSheet::approximateSelectorMatch(".header .frame", "div", classes, ""),
              "with no ancestor chain given (nullptr), leading compounds are still ignored -- unchanged behavior");
 
        std::vector<AncestorFrame> matchingAncestors = {
            {"div", {"header"}, ""},
        };
        check(CSSStyleSheet::approximateSelectorMatch(".header .frame", "div", classes, "", &matchingAncestors),
              "leading compound found in the supplied ancestor chain -- matches");
 
        std::vector<AncestorFrame> unrelatedAncestors = {
            {"div", {"hero"}, ""},
        };
        check(!CSSStyleSheet::approximateSelectorMatch(".header .frame", "div", classes, "", &unrelatedAncestors),
              "leading compound absent from the supplied ancestor chain -- no longer matches (the actual bug)");
 
        check(CSSStyleSheet::approximateSelectorMatch(".header .frame", "div", classes, "",
              static_cast<const std::vector<AncestorFrame>*>(nullptr)),
              "sanity: explicit nullptr behaves the same as the default (still matches, unverified)");
 
        std::vector<AncestorFrame> outOfOrderAncestors = {
            {"div", {"b"}, ""},
            {"div", {"a"}, ""},
        };
        check(!CSSStyleSheet::approximateSelectorMatch(".a .b .frame", "div", classes, "", &outOfOrderAncestors),
              "ancestor compounds must be found in left-to-right order, not just anywhere in the chain");
 
        std::vector<AncestorFrame> inOrderAncestors = {
            {"div", {"a"}, ""},
            {"div", {"b"}, ""},
        };
        check(CSSStyleSheet::approximateSelectorMatch(".a .b .frame", "div", classes, "", &inOrderAncestors),
              "same two ancestors in the correct left-to-right order do match");
 
        std::vector<AncestorFrame> onlyOuterAncestor = {
            {"div", {"a"}, ""},
        };
        check(!CSSStyleSheet::approximateSelectorMatch(".a .b .frame", "div", classes, "", &onlyOuterAncestor),
              "a missing middle ancestor compound still fails the match");
    }
 
    // --- collectApproximateMatches: cascade priority ---
    std::cout << "=== collectApproximateMatches cascade ===" << std::endl;
    {
        using libhtmlpp::CSSStyleSheet;
        std::string css =
            ".box { color: red; font-size: 12px; }\n"
            ".box { color: blue; }\n";
        CSSStyleSheet sheet;
        sheet.parse(css);
 
        std::map<std::string,std::string> props;
        props["color"] = "inline-value"; // simulates an inline style="" already present
        std::string mediaRules;
        std::set<std::string> seen;
        sheet.collectApproximateMatches("div", "box", "hero", props, mediaRules, seen);
 
        check(props["color"] == "inline-value",
              "inline value beats a later plain (non-important) rule");
        check(props["font-size"] == "12px", "non-conflicting property still merged in");
    }
    {
        using libhtmlpp::CSSStyleSheet;
        std::string css = "#hero { color: green !important; }\n";
        CSSStyleSheet sheet;
        sheet.parse(css);
 
        std::map<std::string,std::string> props;
        props["color"] = "inline-value";
        std::string mediaRules;
        std::set<std::string> seen;
        sheet.collectApproximateMatches("div", "box", "hero", props, mediaRules, seen);
 
        check(props["color"] == "green",
              "an !important rule overrides even an inline-set value (matches real cascade precedence)");
    }
    {
        using libhtmlpp::CSSStyleSheet;
        std::string css =
            ".box { color: red; }\n"
            ".box { color: blue; }\n";
        CSSStyleSheet sheet;
        sheet.parse(css);
 
        std::map<std::string,std::string> props; // no inline style
        std::string mediaRules;
        std::set<std::string> seen;
        sheet.collectApproximateMatches("div", "box", "", props, mediaRules, seen);
 
        check(props["color"] == "blue", "later plain rule wins over an earlier plain rule");
    }
    {
        using libhtmlpp::CSSStyleSheet;
        std::string css =
            ".box { color: red !important; }\n"
            ".box { color: blue; }\n";
        CSSStyleSheet sheet;
        sheet.parse(css);
 
        std::map<std::string,std::string> props;
        std::string mediaRules;
        std::set<std::string> seen;
        sheet.collectApproximateMatches("div", "box", "", props, mediaRules, seen);
 
        check(props["color"] == "red", "!important beats a later plain rule");
    }
 
    // --- @media dedup ---
    std::cout << "=== collectApproximateMatches @media dedup ===" << std::endl;
    {
        using libhtmlpp::CSSStyleSheet;
        std::string css = "@media (max-width: 600px) { .box { color: red; } }";
        CSSStyleSheet sheet;
        sheet.parse(css);
 
        std::set<std::string> seen;
        for (int i = 0; i < 3; ++i) {
            std::map<std::string,std::string> props;
            std::string mediaRules;
            sheet.collectApproximateMatches("div", "box", "", props, mediaRules, seen);
            check((i == 0) == !mediaRules.empty(),
                  "media block text only appended the first time it's seen");
        }
        check(seen.size() == 1, "seenMediaBlocks accumulated exactly one block");
    }
 
    // --- collectStyleBlocks + getCSSRules end-to-end ---
    std::cout << "=== collectStyleBlocks + getCSSRules ===" << std::endl;
    {
        std::string html =
            "<html><head>"
            "<style>.card { color: red; } #hero { font-size: 20px; }</style>"
            "</head><body>"
            "<div id=\"hero\" class=\"card\" style=\"margin: 0\">hi</div>"
            "</body></html>";
 
        libhtmlpp::HtmlString htmlString(html);
        libhtmlpp::Element &root = htmlString.parse();
 
        libhtmlpp::CSSStyleSheet sheet;
        libhtmlpp::collectStyleBlocks(sheet, root);
        check(sheet.getRuleCount() == 2, "collected both <style> block rules");
 
        libhtmlpp::HtmlElement *target = static_cast<libhtmlpp::HtmlElement*>(&root)->getElementbyID("hero");
        check(target != nullptr, "found target element by id");
 
        if (target) {
            std::set<std::string> seen;
            auto result = libhtmlpp::getCSSRules(*target, sheet, seen);
            check(result.properties["color"] == "red", "getCSSRules folds in matching <style> block rule by class");
            check(result.properties["font-size"] == "20px", "getCSSRules folds in matching <style> block rule by id");
            check(result.properties["margin"] == "0", "getCSSRules includes the element's own inline style");
        }
    }
 
    // --- getCSSRules with an ancestor chain: the real bug, end-to-end ---
    std::cout << "=== getCSSRules with ancestor chain ===" << std::endl;
    {
        using libhtmlpp::AncestorFrame;
        std::string html =
            "<html><head>"
            "<style>"
            ".frame { padding-top: 100px; }"
            ".header .frame { padding-top: 0; }"
            "</style>"
            "</head><body>"
            "<div class=\"header\"><div id=\"headerFrame\" class=\"frame\">hi</div></div>"
            "<div class=\"hero\"><div id=\"heroFrame\" class=\"frame\">hi</div></div>"
            "</body></html>";
 
        libhtmlpp::HtmlString htmlString(html);
        libhtmlpp::Element &root = htmlString.parse();
 
        libhtmlpp::CSSStyleSheet sheet;
        libhtmlpp::collectStyleBlocks(sheet, root);
 
        libhtmlpp::HtmlElement *headerFrame =
            static_cast<libhtmlpp::HtmlElement*>(&root)->getElementbyID("headerFrame");
        libhtmlpp::HtmlElement *heroFrame =
            static_cast<libhtmlpp::HtmlElement*>(&root)->getElementbyID("heroFrame");
        check(headerFrame != nullptr && heroFrame != nullptr, "found both target elements by id");
 
        if (headerFrame && heroFrame) {
            std::set<std::string> seen;
            auto noAncestorsResult = libhtmlpp::getCSSRules(*heroFrame, sheet, seen);
            check(noAncestorsResult.properties["padding-top"] == "0",
                  "without an ancestor chain, the header-only rule still bleeds onto an unrelated "
                  "element -- this is the pre-fix behavior, unchanged for callers that pass none");
 
            std::vector<AncestorFrame> headerAncestors = {{"div", {"header"}, ""}};
            std::set<std::string> seen2;
            auto headerResult = libhtmlpp::getCSSRules(*headerFrame, sheet, seen2, &headerAncestors);
            check(headerResult.properties["padding-top"] == "0",
                  "with its real ancestor chain, the header's own frame still gets the header-only rule");
 
            std::vector<AncestorFrame> heroAncestors = {{"div", {"hero"}, ""}};
            std::set<std::string> seen3;
            auto heroResult = libhtmlpp::getCSSRules(*heroFrame, sheet, seen3, &heroAncestors);
            check(heroResult.properties["padding-top"] == "100px",
                  "with its real (non-header) ancestor chain, the hero's frame keeps the general "
                  "rule instead of the header-only one -- the actual bug fix");
        }
    }
 
    // --- resolveCSSVariables ---
    std::cout << "=== resolveCSSVariables ===" << std::endl;
    {
        std::map<std::string,std::string> props = {{"--color-bg", "0,0,0"}, {"--alpha-bg", "1"}};
        check(libhtmlpp::resolveCSSVariables("rgba(var(--color-bg),var(--alpha-bg))", props) ==
              "rgba(0,0,0,1)",
              "simple substitution, multiple var() in one value");
    }
    {
        std::map<std::string,std::string> props;
        check(libhtmlpp::resolveCSSVariables("var(--undefined, blue)", props) == "blue",
              "fallback used when the referenced name is unset");
    }
    {
        std::map<std::string,std::string> props;
        check(libhtmlpp::resolveCSSVariables("var(--undefined)", props) == "",
              "no fallback and unset name resolves to empty (invalid, per spec)");
    }
    {
        // Mirrors the real-world pattern: --gradient-bg's OWN stored value
        // references --color-bg/--alpha-bg (multi-hop resolution).
        std::map<std::string,std::string> props = {
            {"--color-bg", "10,20,30"},
            {"--alpha-bg", "0.5"},
            {"--gradient-bg", "rgba(var(--color-bg),var(--alpha-bg))"},
        };
        check(libhtmlpp::resolveCSSVariables("var(--gradient-bg)", props) == "rgba(10,20,30,0.5)",
              "multi-hop resolution through an intermediate custom property");
    }
    {
        // Fallback itself contains a nested var() -- also resolved.
        std::map<std::string,std::string> props = {{"--color-bg", "0,0,0"}};
        check(libhtmlpp::resolveCSSVariables(
                  "var(--gradient-bg, rgba(var(--color-bg),1))", props) == "rgba(0,0,0,1)",
              "nested var() inside a fallback value is resolved too");
    }
    {
        // a -> var(b), b -> var(a): cyclic, must not infinite-loop.
        std::map<std::string,std::string> props = {{"--a", "var(--b)"}, {"--b", "var(--a)"}};
        check(libhtmlpp::resolveCSSVariables("var(--a)", props) == "",
              "cyclic custom-property reference resolves to empty instead of looping forever");
    }
    {
        check(libhtmlpp::resolveCSSVariables("10px solid red", {}) == "10px solid red",
              "a value with no var( at all is returned unchanged");
    }
 
    // --- Summary ---
    std::cout << "\n=== " << passCount << "/" << testCount << " tests passed ===" << std::endl;
 
    return (passCount == testCount) ? 0 : -1;
}