how to change viewportSize?

gwallan commented 7 years ago

I just write a demo, and try to change width of page.But it didn`t work. I get page width and height, yet it does not have any change. The code to do this is shown below.

``

nathanboktae commented 7 years ago

What version of phantomjs are you using, on what platform? So the test for this is passing on phantomjs 1.9.7, 2.0, and 2.1 and basically the same code.

gwallan commented 7 years ago

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>mocha-chai-test</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="../node_modules/mocha/mocha.css" rel="stylesheet">
    <style>
        html,
        body{
            position: relative;
            width: 100%;
            height: 100%;
        }
        #mocha {
            max-height: 300px;
        }
        iframe {
            position: absolute;
            top: 300px;
            left: 0;
            width: 100%;
            height: calc(100% - 400px);
        }
    </style>
</head>

<body>
    <div id="mocha"></div>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/mocha/mocha.js"></script>
    <script src="../node_modules/chai/chai.js"></script>
    <script>
    mocha.setup({
        "ui": "bdd",
        "timeout": 10000
    });
    </script>
    <script>
    var expect = chai.expect, jQuery = $;

    function takeScreenshot() {
        if (window.callPhantom) {
            var date = new Date();
            var filename = "./test/screenshots/" + date.getTime();

            callPhantom({'screenshot': filename});
        }
    }
    function stdout(msg){
        if (window.callPhantom) {
            window.callPhantom({
                stdout: msg
            });
        }
    }
    describe('Viewport Size Change', function() {
        it('changes viewport size', function() {
            callPhantom({
              viewportSize: {
                width: 500,
                height: 500
              }
            })
            expect(window.innerWidth).to.equal(500)
            expect(window.innerHeight).to.equal(500)
        })

        it('changes viewport size - only on width', function() {
            callPhantom({
              viewportSize: { width: 1000 }
            })
            expect(window.innerWidth).to.equal(1000)
        })

        it('chanves viewport size - only on height', function() {
            callPhantom({
              viewportSize: { height: 1000 }
            })
            expect(window.innerHeight).to.equal(1000)
        })
    })

    mocha.run();
  </script>
</body>

</html>

That is my test case, when I run the test, I get a failure. I using phantomjs 2.0, and macOX.

nathanboktae commented 7 years ago

It passes just fine for me with phantomjs 2.0 on a mac. Are you sure you have the latest mocha-phantomjs-core?

nathanboktae commented 7 years ago

Reopen if you have more information.

nathanboktae / mocha-phantomjs-core

how to change viewportSize? #31